Foundations
Style Guide
- Owns color, type, gradient, motion, badge semantics, and anatomy rules.
- Documents what a pattern means before we decide which component renders it.
- Lives at the system level and should remain stable across feature work.
Project 1091
Style Guide and UI Primitives
This surface now focuses on the storefront's foundations, typography rules, atomic elements, and small reusable components. Large page-family demos were intentionally removed so the guide stays useful for real system decisions instead of acting like a grab-bag of full-page examples.
System Overview
Clarifies the boundary between the style guide and reusable UI primitives, then shows the shared palette, gradients, and system ladder those pieces should inherit.
Small Components
UI Primitives
- Owns reusable UI pieces such as buttons, badges, cards, links, and search controls.
- Uses the style-guide rules as inputs rather than redefining its own visual language.
- Should stay production-backed so the reference surface reflects real storefront behavior.
Composition Ladder
1. Tokens
Colors, fonts, radii, shadows, and timing primitives.
2. Type Roles
Heading voice, body hierarchy, labels, and decorative accents.
3. Atoms
Buttons, badges, pills, labels, inputs, selects, and checkboxes.
4. Small Components
Cards, search controls, review modules, and other reusable UI building blocks.
5. Templates
Homepage, PDP, collection/search layouts, and editorial pages.
Color System
Core Palette
These are the brand and UI hues that should drive reusable decisions before any component-level overrides are considered.
Canvas
--rps-color-canvas
#fefdfd
Page background and breathing room around surfaces
Muted Surface
--rps-color-surface-muted
#f7f1ee
Secondary cards, supporting panels, and quiet backdrops
Ink
--rps-color-text
#030d42
Primary headings, titles, and dense product information
Muted Ink
--rps-color-text-muted
#686d8d
Support copy, eyebrow labels, and low-emphasis metadata
Primary Accent
--rps-color-accent
#0b2ddd
High-priority actions and directional calls to action
Warm Accent
--rps-color-accent-warm
#d7b897
Sale language, heritage cues, and softer merchandising moments
Sage Accent
--rps-color-accent-sage
#b7c9bc
Digital-add-on, utility, and process-oriented states
Plum Accent
--rps-color-accent-plum
#cfc6dd
Editorial framing, storytelling, and category support accents
Motion + Tone
Gradient Recipes
Use these shared wash families to add atmosphere without inventing one-off surface styling in page modules.
Hero Wash
rps-surface-wash-heroLarge feature moments, hero shells, and premium landing panels Radial blend from canvas into warm-surface modulation
Warm Wash
rps-surface-wash-warmSale stories, heritage cues, and softer promotional panels Warm accent mixed through muted surface and canvas
Sage Wash
rps-surface-wash-sageUtility, process, or digital-product support surfaces Sage accent layered through muted surface into canvas
Plum Wash
rps-surface-wash-plumEditorial, gifting, and supporting collection storytelling Plum accent layered through muted surface into canvas
Proposed Scale Study
Accent Tone Ramps
Quick visual swatch sheet for evaluating whether warm, sage, and plum should stay as single semantic accents or grow into fuller tonal families. These values are exploratory and are not wired into live runtime tokens yet.
Warm
Merchandising, sale cues, and heritage-forward support surfaces
Proposed study only. Current live tokens map closest to 400 in light mode and 700 in dark mode.
50
#faf6f1
100
#f3e8db
200
#e8d6bf
300
#ddc3a4
400Current light accent
#d7b897
500
#c49f79
600
#ac8562
700Current dark accent
#8f7354
800
#715841
900
#564232
Sage
Utility, process, and digital-product support states
Proposed study only. Current live tokens map closest to 400 in light mode and 700 in dark mode.
50
#f4f8f5
100
#e6eee8
200
#d1ddd3
300
#c0d1c3
400Current light accent
#b7c9bc
500
#9aae9f
600
#849887
700Current dark accent
#708676
800
#586a5d
900
#425046
Plum
Editorial framing, storytelling, and collection-support surfaces
Proposed study only. Current live tokens map closest to 400 in light mode and 700 in dark mode.
50
#f8f6fa
100
#ede8f3
200
#ddd5e8
300
#d4cae1
400Current light accent
#cfc6dd
500
#b6aac8
600
#9d8db4
700Current dark accent
#84779d
800
#675c7d
900
#4d4560
Gradients
Surface Washes
Gradient recipes are foundation-level art direction. Components can consume them, but they should not invent competing surface language.
Hero Wash
Large feature moments, hero shells, and premium landing panels
Radial blend from canvas into warm-surface modulation
Warm Wash
Sale stories, heritage cues, and softer promotional panels
Warm accent mixed through muted surface and canvas
Sage Wash
Utility, process, or digital-product support surfaces
Sage accent layered through muted surface into canvas
Plum Wash
Editorial, gifting, and supporting collection storytelling
Plum accent layered through muted surface into canvas
Design Tokens
Single source of truth for shared visual decisions in `app/globals.css`, with live previews for the current token values.
Color
| Token | Value | Preview | Usage |
|---|---|---|---|
| --rps-color-canvas | #f7f7f6 / #0a0a0a | App background and ring offset base | |
| --rps-color-surface | #ffffff / #111111 | Cards, panels, component containers | |
| --rps-color-surface-muted | #f5f5f4 / #171717 | Secondary surfaces and placeholders | |
| --rps-color-surface-card-product | #ffffff / #111111 | Primary product card surfaces | |
| --rps-color-surface-card-collection | surface / surface | Collection card surfaces | |
| --rps-color-surface-card-media | surface / surface | Product media tile surfaces | |
| --rps-color-surface-card-blog | surface / surface | Blog and article card surfaces | |
| --rps-color-surface-card-featured | surface-muted / surface-muted | Featured merchandising card surfaces | |
| --rps-color-surface-card-circle | surface-muted / surface-muted | Circular collection card surfaces | |
| --rps-color-border | #e7e5e4 / #262626 | Default borders and dividers | |
| --rps-color-border-strong | #d6d3d1 / #3f3f46 | Inputs, pills, stronger separators | |
| --rps-color-text | #171717 / #fafafa | Aa | Primary text |
| --rps-color-text-muted | #525252 / #d4d4d4 | Aa | Secondary text, links, labels |
| --rps-color-text-inverse | #ffffff / #ffffff | Aa | On-image copy and inverse text treatments |
| --rps-color-accent | #111111 / #fafafa | Primary call-to-action fills | |
| --rps-color-accent-hover | #06176f / #a3b4ff | Primary CTA hover state | |
| --rps-color-accent-contrast | #ffffff / #111111 | Primary CTA text on accent backgrounds | |
| --rps-color-accent-warm | #d7b897 / #8f7354 | Warm merchandising, sale, and heritage accents | |
| --rps-color-accent-sage | #b7c9bc / #708676 | Process, utility, and digital-product accents | |
| --rps-color-accent-plum | #cfc6dd / #84779d | Editorial, collection-story, and supporting accent surfaces | |
| --rps-color-focus | #525252 / #a3a3a3 | Aa | Focus ring color |
Typography
| Token | Value | Preview | Usage |
|---|---|---|---|
| --rps-font-body | Geist Sans stack | Aa | Default application text and heading baseline |
| --rps-font-heading | Geist Sans stack | Aa | Standard UI heading token |
| --rps-font-decorative | Playfair Display stack | Aa | Reserved opt-in serif token via decorative heading classes |
Radius & Elevation
| Token | Value | Preview | Usage |
|---|---|---|---|
| --rps-radius-card | 0.5rem | Cards, panels, and input shells | |
| --rps-radius-control | 0.375rem | Buttons, inputs, icon buttons, and compact interactive controls | |
| --rps-radius-pill | 999px | True pill treatments only | |
| --rps-shadow-sm | 0 1px 2px (adaptive) | Default component shadow | |
| --rps-shadow-md | 0 8px 24px (adaptive) | Elevated overlays and mega menus |
Interaction
| Token | Value | Preview | Usage |
|---|---|---|---|
| --rps-duration-fast | 160ms | current value | Hover/focus/press transitions |
| --rps-duration-base | 220ms | current value | Panel and layout state transitions |
| --rps-ease-standard | cubic-bezier(0.2,0,0,1) | current value | Shared easing curve for UI transitions |
Typography
Standardized heading and copy roles, with decorative serif reserved for rare editorial accents rather than default section hierarchy.
Type Rule
Serif Is Accent-Only
Default storefront headings should stay on the sans heading stack. Decorative serif is reserved for rare, intentionally art-directed moments rather than repeated section scaffolding, card titles, or routine homepage hierarchy.
Token Specimens
Typography Roles
These token-backed roles define the storefront's standard type voice before any component chooses a layout.
Heading Sans
--rps-font-headingCollect rare prints with a crisp, modern heading system.
Default section headings, utility headlines, and standard UI title hierarchy Headings now stay in the sans stack unless a surface explicitly opts into decorative serif.
Body Sans
--rps-font-bodyBody copy should stay calm, readable, and slightly understated next to the artwork.
Primary reading copy, navigation labels, and general UI text Geist Sans keeps the interface clean around image-heavy commerce.
Decorative Serif
--rps-font-decorativeCurated gallery storytelling with selective serif emphasis.
Reserved editorial accents, hero moments, and intentionally art-directed headings Use this only where the composition benefits from a more expressive serif voice.
Eyebrow Label
rps-eyebrowFeatured artist | archival print | limited run
Section labels, category nudges, and subtle merchandising context Use sparingly to signal hierarchy without adding bulk.
Utility Price
product-price$145.00
Price blocks, summary numbers, and compact commerce metadata Keep utility typography crisp and dense rather than decorative.
Applied Hierarchy
Heading Standards
Small reusable components should inherit these roles instead of improvising their own type voice.
Standard
Section Heading
Sans Heading Default for shared module headings, homepage sections, and general UI hierarchy.
Compact
Card Title
Card Heading Use for product names, collection titles, and compact commerce cards that still need hierarchy.
Decorative Only
Decorative Accent
Serif Accent Reserve for isolated editorial accents where the composition clearly benefits from a more expressive voice.
Atomic Elements
The smallest reusable pieces in the system: buttons, links, labels, pills, badges, and form controls.
Atoms
Buttons and Links
These button primitives should stay reusable and standardized. The style guide owns when each emphasis level belongs in the hierarchy.
Live Commerce Badge
Shipped Badge Pattern
4.8 (132 reseñas)
This review-proof badge is live on PDPs, product cards, and product media tiles.
Sale, new, digital-download, and editorial badges are intentionally not shown here because those states are not wired into live storefront surfaces yet.
Form Controls
Inputs and Selection
Utility Primitives
Pills, eyebrow labels, and muted links are small but foundational. They belong in the atomic layer because larger modules like hero blocks, nav menus, and product cards depend on them repeatedly.
Calls To Action
Shared CTA treatments for strong actions, supporting actions, and lightweight directional links.
Product Cards
Primary catalog cards with explicit price display and quick add behavior.
Product Media Tiles
Compact merchandising cards for discovery rows, spotlights, and other image-led modules.
Collection Cards
Collection tiles with automatic first-product image fallback and compact supporting metadata.
Search + Form Controls
Tokenized search inputs, dropdowns, and filter controls used in header and collection/search surfaces.
Live Search Input
Sort Dropdown
Filter Trigger
Filter Panel
Filters
Interactive States
Disabled, invalid, overflow, and focus behaviors that should stay consistent across shared UI primitives.
Control States
Default, hover-ready, and disabled button treatments.
Validation Edge
Field-level invalid state without introducing custom component variants.
Example: long query exceeds supported filter token length.
Overflow + Active Link
Long labels and active filter states remain readable at narrow widths.
Limited Edition Artist Collaboration Poster Series with Long Format Label
Newest arrivals
System States
Reusable empty, loading, and error treatments for resilient storefront UX.
empty
Catalog Empty State
Use for no-result collection/search views.
No results match these filters yet. Try widening the price range or removing tags.
loading
Skeleton Loading State
Use for async data fetches and pagination swaps.
error
Recoverable Error State
Use when API calls fail but user retry is possible.
We couldn't load this module right now.