Every color is a token. Switch themes by setting data-theme="light" or data-theme="dark" on the body. Zero hardcoded colors in components.
4-level depth: page > card > hover > elevated
3 interaction states for the primary accent
4 semantic colors with bg + border variants
| Token | Dark value | Light value | Usage |
|---|---|---|---|
| --surface-0 | #0A0806 | #FAF7F2 | Page background |
| --surface-1 | #12100C | #F2EDE5 | Cards, panels |
| --surface-2 | #1A1712 | #E8E2D8 | Hover, elevated |
| --gold | #C8A96E | #A88A50 | Primary accent |
| --text-primary | #F5F0EB | #1A1712 | Body text |
| --text-secondary | #A09890 | #5A5249 | Descriptions |
64px
Cormorant 500 / 1.05 / -.02em — hero only
Cormorant 500 / 1.1 — page titles
Cormorant 500 / 1.15 — sections
Cormorant 500 / 1.2 — cards
Hanken 600 / 1.3 — subsections
18px body large
Hanken 400 / 1.6 — intro paragraphs
16px default body text
Hanken 300 / 1.65 — default
12px caption text
Hanken 500 / 1.4 — labels
Mono 600 / 1.3 / .12em — uppercase labels
| Token | Value | Usage |
|---|---|---|
| --sp-1 | 4px | Inline gaps, icon padding |
| --sp-2 | 8px | Small gaps, badge padding |
| --sp-3 | 12px | Input padding |
| --sp-4 | 16px | Default gap, card inner |
| --sp-6 | 24px | Card padding, field gaps |
| --sp-8 | 32px | Section sub-gap |
| --sp-12 | 48px | Hero padding |
| --sp-16 | 64px | Section vertical |
| --sp-24 | 96px | Large section vertical |
| Radius | Value | Usage |
|---|---|---|
| --r-sm | 4px | Badges, small chips |
| --r-md | 8px | Buttons, inputs |
| --r-lg | 12px | Large buttons |
| --r-xl | 16px | Cards, modals |
26 strategies, 25 dimensions each.
Backdrop blur with frosted effect.
Default surface with hover lift.
Tab 1 content — overview of the system.
| Technique | How | When |
|---|---|---|
| Full-bleed hero | opacity:.35 + gradient overlay top/bottom | Page hero sections |
| Card background | opacity:.5 + bottom gradient to surface-0 | Image cards |
| Section divider | Full-width image at opacity:.3 | Between major sections |
| Side overlay | Linear gradient from surface-0 left to transparent | Text over image, left-aligned |
| Parallax | background-attachment:fixed (desktop only) | Story sections |
1. Always use gradient overlay — never place text directly on an image without a scrim.
2. Maximum image opacity behind text: .50 (dark) / .30 (light theme).
3. Hero images: 16:9 or wider, min 1920px source resolution.
4. Card images: 16:9, object-fit:cover, bottom gradient required.
5. Always set explicit width/height or aspect-ratio to prevent layout shift.
6. Use loading="lazy" on below-fold images, loading="eager" on hero.
7. Prefer WebP format. JPEG fallback. Never PNG for photos (too large).
8. Maximum file size: 200KB per image after compression.
| Name | Range | Container | Grid | Behavior |
|---|---|---|---|---|
| Mobile | 0 - 639px | 100% - 2rem padding | 1 column | Stack all grids, hide secondary nav |
| Tablet | 640 - 767px | 100% - 3rem padding | 2 columns | Show secondary elements |
| Desktop | 768 - 1023px | 1100px max | 3 columns | Full layout |
| Wide | 1024px+ | 1400px max | 4 columns | Full layout + wide mode |
RIG Design System v3
Dual-theme (light + dark) · 10 sections · Zero emojis · 4px spacing grid · Modular type scale
Use data-theme="light" or data-theme="dark" on body to switch.