Colors
Guppy follows a structured color system. All colors are configurable from the theme settings, changes propagate to the compiled storefront immediately.
Brand colors
The two central theme colors:
| Field | Default | Use |
|---|---|---|
Primary (sw-color-brand-primary) | #215AFF | Buttons, links, accents |
Secondary (sw-color-brand-secondary) | #0B1845 | Header (default), secondary accents |
Changing the brand color
A changed primary color propagates automatically into buttons, links, focus outlines, and hover states. Secondary mostly affects the header and secondary buttons.
System status colors
Used in alerts and status indicators:
| Status | Default background |
|---|---|
| Success | #D3F2E7 |
| Info | #CEEDFE |
| Warning | #FFEFD4 |
| Danger | #FDE2E7 |
Each status has additional controls for text color (light/dark) and an outline toggle.
Greyscales
A 9-step scale (gray-100 to gray-900) for backgrounds, borders, dividers, and secondary text.
| Step | Default | Typical use |
|---|---|---|
| 100 | #F9F9F9 | Backgrounds, footer |
| 200 | #EEEEEE | Disabled elements |
| 300 | #BCC1C7 | Borders |
| 400 | #CED4DA | Input borders |
| 500 | #ADB5BD | Placeholders |
| 600 | #798490 | Secondary text |
| 700 | #495057 | Text |
| 800 | #4A545B | Headlines |
| 900 | #212529 | Body text |
E-commerce colors
Specific to delivery and order status, defined in the Detailpage and Productcard theme tabs.
| Status | Background | Text color |
|---|---|---|
| Free shipping | #CEEDFE | #023B5A |
| Available | #D3F2E7 | #154634 |
| Restock | #FFEFD4 | #5D3B00 |
| Sold out | #EEEEEE | #303030 |
Badges
Product card badges (New, Top-Seller, Discount) are colorable per badge:
| Badge | Default background |
|---|---|
| New | #22C087 |
| Top-Seller | #F89C00 |
| Discount | #E10036 |
Notes
Check contrast
With custom color choices, always check WCAG contrast (at least 4.5:1 for normal text). Tools: WebAIM Contrast Checker.
Full reference
All color fields with defaults: Config Schema.