Customer Portal CSS Mapping
This guide walks you through how to customize your portal using CSS. Use the mapping below as a reference to easily understand which elements control each part of the experience.
Organized by Style Input → Portal Element
PAGE BACKGROUND
Style Input | Portal Element — Where It Appears |
Background Color | The full page background across every screen in the portal |
Text Color | Navigation bar text ("Subscriptions", "Order History", "Log Out"); page-level headings outside of cards |
Accent Color | The active "Subscriptions" nav link color; the active subscription tab highlight color |
PAGE BACKGROUND › PRIMARY BUTTON
Style Input | Portal Element — Where It Appears |
Background Color | Selected Subscription button |
Text Color | Text label on the above buttons |
Border Color | Border on the above buttons |
Border Radius | Corner rounding on the above buttons |
Border Width | Border thickness on the above buttons |
Border Style | Border style (solid/dashed/dotted/none) on the above buttons |
Disabled › Background Color | Renders if the above buttons are in an inaccessible state |
Disabled › Text Color | Renders if the above buttons are in an inaccessible state |
Disabled › Border Color | Renders if the above buttons are in an inaccessible state |
Hover › Background Color | Hover state of above buttons |
Hover › Text Color | Hover text color on the above buttons |
Hover › Border Color | Hover border color on the above buttons |
Special Border › Border Color | Future state setting, not currently surfaced at root level |
Special Border › Border Radius / Width / Style | Future state setting, not currently surfaced at root level |
PAGE BACKGROUND › SECONDARY BUTTON
Style Input | Portal Element — Where It Appears |
Background Color | Non-selected subscription buttons, "Pause" button, all "Back" buttons on full-page flows (Product Catalog, Edit Product, Swap Product, Get It Now) |
Text Color | Text label on the above buttons |
Border Color | Border on the above buttons |
Border Radius / Width / Style | Corner rounding on the above buttons |
NOTE: Disabled, Hover, and Special Border states apply based on the buttons as defined within each section. For example, setting a "Hover" state for Secondary buttons on the Page Background will set the "Hover" state for Non-selected subscription buttons, the "Pause" button, and all "Back" buttons on full-page flows.
PAGE BACKGROUND › TERTIARY BUTTON
Style Input | Portal Element — Where It Appears |
Background Color | "Cancel" button, "Add More Items" button (bottom of product list) |
Text Color | Text label on the above buttons |
Border Color | Border on the above buttons |
Border Radius / Width / Style | Corner rounding on the above buttons |
NOTE: Disabled, Hover, and Special Border states apply based on the buttons as defined within each section. For example, setting a "Hover" state for Tertiary buttons on the Page Background will set the "Hover" state for the "Cancel" button and "Add More Items" button.
CARD STYLE 1
Card Style 1 acts as your foundation—any styles set here will apply across all card types by default. From there, you can customize Card Styles 2 and 3 for more specific use cases if needed. You’re not required to use all three styles, but they’re available to give you added flexibility when designing your portal.
Style Input | Portal Element — Where It Appears |
Background Color | By Default:
NOTE: You can adjust these cards to inherit the styles of Card Styles 2 or 3. The above just outlines the defaults. |
Text Color | All body text inside the above cards — product names, prices, shipment dates, address text, payment card details, frequency labels, "Next Shipment" heading, section headings like "Payment Method" and "Shipping Address" |
Accent Color | "One Time" type labels on product cards; "Out of Stock" label; "Punch Card Reward!" label; subscription pricing (the highlighted lower price) on Add More Items and Swap Product pages; the subscription price column in the Add Extras widget |
Border Color | The border on every Card 1 card listed above |
Border Radius | Corner rounding on every Card 1 card listed above |
Border Width | Border thickness on every Card 1 card listed above |
Border Style | Border style (dashed by default) on every Card 1 card listed above |
CARD 1 › PRIMARY BUTTON
Style Input | Portal Element — Where It Appears |
Background Color | "Order Now" button (Next Shipment card); "Save" button in Edit Frequency modal; "Save" button in Change Date modal; "Yes, Skip My Next Order" button in Skip Order modal; "Use This Address" button in Edit Shipping modal; "Use This Payment Method" button in Edit Payment modal; "Add as Subscription" button on Product Catalog; "Add" button in Add Extras widget; "Redeem Reward" button on Punch Card; the selected date circle in the Change Date calendar; "Confirm" button on Swap Product page (once a product is selected) |
Text Color | Text on all the above buttons |
Border Color | Border on all the above buttons |
Border Radius | Corner rounding on all the above buttons |
Border Width | Border thickness on all the above buttons |
Border Style | Border style on all the above buttons |
Disabled › Background Color | "Skip Once" button on Edit Product page (grayed); "Split" button on Edit Product page (grayed); "Save" button in Edit Shipping form before any changes are made; "Confirm" button on Swap Product before a product is selected; quantity dropdowns when not editable |
Disabled › Text Color | Text on all the above disabled states |
Disabled › Border Color | Border on all the above disabled states |
Hover › Background Color | Hover state of all Card 1 Primary buttons listed above |
Hover › Text Color | Hover text color on the above |
Hover › Border Color | Hover border color on the above |
Special Border › Border Color / Radius / Width / Style | Not currently surfaced |
CARD 1 › SECONDARY BUTTON
Style Input | Portal Element — Where It Appears |
Background Color | "Change Date" button (Next Shipment card); "Skip Order" button (Next Shipment card); all "Edit" buttons on product line item cards; "Add as One-Time" button on Product Catalog; "Swap" button on Swap Product page (per product); "Cancel" button in Edit Shipping form; "Add Address" button in Edit Shipping modal; "Gift Next Order to a Friend" button in Skip Order modal; pencil/edit icon buttons on Payment Method and Shipping Address cards |
Text Color | Text on all the above buttons |
Border Color | Border on all the above buttons |
Border Radius | Corner rounding on all the above buttons |
Border Width | Border thickness on all the above buttons |
Border Style | Border style on all the above buttons |
Disabled › Background Color | Secondary button disabled state (not currently surfaced) |
Disabled › Text Color | Secondary button disabled text (not currently surfaced) |
Disabled › Border Color | Secondary button disabled border (not currently surfaced) |
Hover › Background Color | Hover state of all Card 1 Secondary buttons listed above |
Hover › Text Color | Hover text on the above |
Hover › Border Color | Hover border on the above |
Special Border › Border Color / Radius / Width / Style | Not currently surfaced |
CARD 1 › TERTIARY BUTTON
Style Input | Portal Element — Where It Appears |
Background Color | "Nevermind" link/button in Skip Order modal (text-only button, background is transparent but style is sourced here) |
Text Color | Text color of "Nevermind" in Skip Order modal; "Delete" button text on Edit Product page (uses tertiary text color for destructive emphasis) |
Border Color | Border on the above (transparent by default) |
Border Radius | Corner rounding |
Border Width / Style | Border on the above |
Disabled › Background / Text / Border | Not currently surfaced |
Hover › Background / Text / Border | Hover state of the above tertiary buttons |
Special Border › Border Color / Radius / Width / Style | Not currently surfaced |
CARD 1 › IMAGE
Style Input | Portal Element — Where It Appears |
Border Color | The border drawn around product images inside every Card 1 product card — on the main subscription view, Edit Product page, Product Catalog, and Swap Product page |
Border Radius | Corner rounding on those product images |
Border Width | Border thickness on those product images |
Border Style | Border style on those product images |
CARD 1 › INPUT
Style Input | Portal Element — Where It Appears |
Background Color | All quantity dropdowns on product line item cards; all form fields in Edit Shipping Address form (First Name, Last Name, Street, City, State, Zip, Phone, Country); variant dropdowns on Product Catalog and Swap Product pages; the search bar on Product Catalog and Swap Product pages; the Discount Code text field on the order summary card |
Text Color | Text typed or displayed inside all the above inputs |
Accent Color | The dropdown arrow chevron on quantity and variant selectors; the search icon in the search bar; the active focus ring/underline color on text inputs in the Edit Shipping form |
Border Color | The border on all the above inputs |
Border Radius | Corner rounding on the above inputs |
Border Width | Border thickness on the above inputs |
Border Style | Border style on the above inputs |
Disabled › Background Color | Quantity dropdown background when the field is non-editable (e.g. on the Get It Now review page, or for free gift items); "Apply" button background when no code is entered |
Disabled › Text Color | Text inside disabled input fields |
Disabled › Border Color | Border on disabled input fields |
CARD 1 › SELECTED
Style Input | Portal Element — Where It Appears |
Background Color | The highlighted/selected address card in Edit Shipping modal; the selected payment method card in Edit Payment modal; the selected frequency option in Edit Frequency modal; the active subscription tab pill |
Text Color | Text displayed on those selected/highlighted cards |
Border Color | Border on those selected cards |
CARD 1 › SPECIAL BORDER
Style Input | Portal Element — Where It Appears |
Border Color | The "Swapping To" empty drop-zone on the Swap Product page (uses a distinct dashed purple border to indicate the target slot) |
Border Radius | Corner rounding on that drop-zone |
Border Width | Border thickness on that drop-zone |
Border Style | Border style (dashed) on that drop-zone |
CARD 2
Card 2 is the white summary/totals card.
Style Input | Portal Element — Where It Appears |
Background Color | The order summary card at the bottom of the subscription view (showing Discount, Shipping, Subtotal, Estimated Tax, Est. Total); the Shipping Address summary panel on the Get It Now page; the Payment Method summary panel on the Get It Now page |
Text Color | All text inside the above cards |
Accent Color | Accent highlights within the Card 2 context |
Border Color | Border on the above cards |
Border Radius | Corner rounding on the above cards |
Border Width / Style | Border on the above cards |
CARD 2 › PRIMARY BUTTON
Style Input | Portal Element — Where It Appears |
Background Color | Not currently surfaced at the Card 2 context level |
Text Color | Not currently surfaced |
Border Color / Radius / Width / Style | Not currently surfaced |
CARD 2 › SECONDARY BUTTON
Style Input | Portal Element — Where It Appears |
Background Color | Not currently surfaced at the Card 2 context level |
Text Color | Not currently surfaced |
CARD 2 › SPECIAL BORDER
Style Input | Portal Element — Where It Appears |
Border Color | The "Place Order" button background on the Get It Now (Order Now) page — both the top-right button and the bottom button use this color as their fill |
Border Radius | Corner rounding on the Place Order button |
Border Width / Style | Border on the Place Order button |
CARD 2 › SELECTED
Style Input | Portal Element — Where It Appears |
Background Color | Not currently surfaced in the Card 2 context |
Text Color / Border Color | Not currently surfaced |
CARD 3
Card 3 is the "Add Extras" widget card only.
Style Input | Portal Element — Where It Appears |
Background Color | The entire "Add Extras" card background (the orange-red block on the subscription page) |
Text Color | The "Add Extras" heading text; all text inside the Add Extras card |
Accent Color | Accent highlights within the Add Extras card |
Border Color | Border on the Add Extras card |
Border Radius | Corner rounding on the Add Extras card |
Border Width / Style | Border on the Add Extras card |
CARD 3 › PRIMARY BUTTON
Style Input | Portal Element — Where It Appears |
Background Color | Not currently surfaced within Card 3 |
Text Color | Not currently surfaced |
Border Color / Radius / Width / Style | Not currently surfaced |
CARD 3 › SECONDARY BUTTON
Style Input | Portal Element — Where It Appears |
Background Color | The "View Product Catalog" button inside the Add Extras card |
Text Color | The text label on the "View Product Catalog" button |
Border Color | The border on the "View Product Catalog" button |
Border Radius | Corner rounding on the button |
Border Width / Style | Border on the button |
CARD 3 › SPECIAL BORDER
Style Input | Portal Element — Where It Appears |
Border Color | Not currently surfaced within Card 3 |
Border Radius / Width / Style | Not currently surfaced |
GENERAL › PALETTE
Style Input | Portal Element — Where It Appears |
Error Color | Form validation messages; error banners; any failed action feedback toast |
Success Color | "FREE" shipping label in the order summary card; success confirmation states |
GENERAL › PUNCHCARD › EMPTY
These styles control the appearance of unfilled punch slots — the placeholder circles/squares before the customer has earned punches.
Style Input | Portal Element — Where It Appears |
Background Color | The background of each empty (unearned) punch slot on the Punch Card widget |
Text Color | Any icon or text rendered inside the empty punch slot |
Border Color | Border around each empty punch slot |
Border Radius | Corner rounding on the empty punch slot (controls whether it appears as a circle or square) |
Border Width / Style | Border thickness and style on the empty punch slot |
GENERAL › PUNCHCARD › INCENTIVE
These styles control the gift/reward icon slots — the milestone markers that show what the customer earns at each interval.
Style Input | Portal Element — Where It Appears |
Background Color | Background of the gift icon milestone marker on the Punch Card |
Text Color | Color of the gift icon or label inside the milestone marker |
Border Color | Border on the milestone marker |
Border Radius | Corner rounding (set to 100 by default, making it a circle) |
Border Width / Style | Border on the milestone marker |
GENERAL › PUNCHCARD › PUNCH
These styles control the filled punch slots — the circles/stamps that appear once the customer has completed an order and earned that punch.
Style Input | Portal Element — Where It Appears |
Background Color | Background of each earned/filled punch stamp on the Punch Card |
Text Color | Color of the icon or symbol rendered inside the filled punch |
Border Color | Border around each filled punch slot |
Border Radius | Corner rounding on the filled punch slot |
Border Width / Style | Border on the filled punch slot |
TYPOGRAPHY
Typography inputs apply globally to text rendering across the entire portal. Font Family, Font Size, and Font Weight are each independently configurable per heading level and body style.
Style Input | Portal Element — Where It Appears |
H1 — Font Family / Size / Weight | The largest heading level; used for primary page titles (e.g. "Get It Now", "Edit Product", "Product Catalog", "Swap Product") |
H2 — Font Family / Size / Weight | Second-level headings; used for the shipment date ("Friday, March 20, 2026") and major card headings |
H3 — Font Family / Size / Weight | Third-level headings; used for card section titles ("Payment Method", "Shipping Address", "Your Punch Card", "Frequency", "Add Extras") |
H4 — Font Family / Size / Weight | Fourth-level headings; used for product names on product line item cards and in the catalog |
H5 — Font Family / Size / Weight | Fifth-level headings; used for sub-labels and secondary titles within cards |
H6 — Font Family / Size / Weight | Sixth-level headings; used for smallest labeled headings (e.g. field group labels in forms) |
Body1 — Font Family / Size / Weight | Primary body text; used for product variant/flavor text, address lines, payment card details, pricing, order summary line items, and general paragraph text throughout the portal |
Body2 — Font Family / Size / Weight | Secondary body text; used for smaller supporting text such as expiry dates, minimum order notes, punch card metadata, and helper copy inside modals |