Shine Shop Design System
The single source of truth for colors, type, spacing, and components on shinemusicshop.com. Use this page as the reference before writing styles — do not invent new values, and do not reach for inline styles when a token exists.
Colors
Semantic tokens always win. Reach for primitives only when defining a new semantic token. All values live in _design-tokens.scss.
Brand & CTA
--color-brand-primary
#27c100
--color-cta-primary-hover
#32dd07
Neutrals
--color-neutral-900
#222
--color-neutral-800
#2d2a2a
--color-neutral-600
#666666
--color-neutral-400
#aaaaaa
--color-neutral-200
#dddddd
--color-neutral-100
#eeeeee
--color-neutral-50
#f8f8f8
--color-white
#ffffff
Semantic
--color-success
#27c100
--color-price
#27c100
--color-error
#ff0000
--color-text-primary
#222
--color-text-secondary
#666666
--color-text-muted
#aaaaaa
Condition Grades
--color-condition-new
#1a8f00
--color-condition-excellent
#0891b2
--color-condition-very-good
#b45309
--color-condition-good
#64748b
Typography
Single family: Inter. The scale is fluid (clamp()) so sizes flex between mobile and desktop automatically. Never hard-code a font-size.
28 → 42px
24 → 36px
20 → 28px
16 → 20px
14 → 16px
12 → 14px
11 → 12px
18 → 24px
Weights
Spacing Scale
Built on an 8px grid (4px half-step for tight work). Never use a gap/margin/padding value that isn't on this scale.
Border Radius
Four tokens. Default is --radius-md. Reach for --radius-pill only on chips, tags, and badges.
Shadows & Elevation
Use sparingly. Most surfaces should sit flat on page background. Card hover uses --shadow-card-hover; modals/drawers use --shadow-lg.
Breakpoints
Bootstrap-style tiers live in _variables.scss. Use the media-breakpoint-up() / media-breakpoint-down() mixins in SCSS rather than raw @media.
| Name | Min width | SCSS var | Typical use |
|---|---|---|---|
xs | 0 | $xs | Mobile portrait — design baseline |
sm | 576px | $sm | Large phone / small tablet portrait |
md | 768px | $md | Tablet — mobile container padding ends here (16 → 25px) |
lg | 992px | $lg | Desktop threshold — sidebar layouts unlock |
xl | 1200px | $xl | Standard desktop |
xxl | 1600px | $xxl | Wide desktop — max content widths cap here |
// SCSS — preferred @include media-breakpoint-down(md) { padding: var(--space-md); } @include media-breakpoint-up(lg) { padding: var(--space-xl); }
Buttons
Primary = green CTA for the most important action on screen (one per view). Secondary = dark, supporting action. Outline = low-emphasis. Minimum height 44px on mobile.
In the theme, these render via .button.button_background_color_green.button_color_white. New code should use the .button component class, not re-style <a> tags.
Condition Badges
Four grades only: New, Excellent, Very Good, Good. Never invent a fifth. Use subtle variants on cards, solid variants on product hero.
Solid — Small
Solid — Medium
Subtle
Price Display
Prices are always green (--color-price), bold, tabular-aligned. Sale prices use strike-through on the original.
Form Inputs
All inputs: 44px min-height, 8px radius, 1px border, green focus ring. Labels above, helper text below.
Notices & Alerts
Three variants: success, error, info. Always with an icon. Never use raw red text.
Product Cards
The product card is the fundamental commerce unit. Image top, condition badge overlay, title, price. Never stack more than one line of metadata below the price.
Fender Player Stratocaster Sunburst
Yamaha P-125 Digital Piano
Roland TD-1KV Electronic Drum Kit
Links & Text Patterns
Default link color matches body text; hover reveals brand green. Underlines on long-form body text only — navigation links are unstyled.
Inline body link: learn about our grading system in long-form copy.
Secondary text — supporting metadata, e.g. Posted in News · 3 min read.
Label / eyebrow kicker text
Emphasis — used for active nav state, selected filters, total counts.
