"This product embodies deliberate craft."
Please review this request carefully.
``` --- ### 8.5 Letter Spacing Rules | Font & Context | Spacing | Why | |----------------|---------|-----| | Serif headlines | `-0.01em` to `-0.02em` | Tighter = more editorial weight | | Body Manrope large | `0em` | Default, never touch | | Body Manrope small (<13px) | `0.01em` | Compensate for small-size legibility | | Buttons (uppercase) | `0.05em` | Required when text is uppercased | | Mono eyebrows | `0.14em` | Maximum — creates air and separation | | Mono labels | `0.10em` | Standard mono label | | Mono counters | `0.04em` | Minimal tracking, data-oriented | --- ## 9. Spacing Construction Rules ### 9.1 The Padding Budget for Components Every component has a default "padding budget" — the inner space that frames the content. This is your starting point: | Component | Padding | |-----------|---------| | Micro widget / badge | 4px vertical, 10px horizontal | | Form field input | 12px vertical, 14px horizontal | | Button small | 8px vertical, 14px horizontal | | Button base | 11px vertical, 20px horizontal | | Button large | 12px vertical, 24px horizontal | | Card small | 20px all sides | | Card base | 24px all sides | | Card large | 28px–32px all sides | | Modal | 36px all sides | | Page section | 48px vertical, varies horizontal | | Sidebar | 24px all sides | **Rule:** Never go below the minimum for any component. If the content does not fit at these padding values, the solution is a different layout — not compressed padding. --- ### 9.2 Vertical Rhythm in Forms When building forms, follow this spacing sequence inside a single field group: ``` [Field Label — DM Mono] ↕ 8px [Input or Textarea] ↕ 5px [Helper Text or Character Counter] ↕ 20px (between field groups) [Next Field Label] ``` When multiple fields stack vertically, the gap between complete field groups (label + input + helper) is `20px`. The gap between the label and its input is always `8px`. The gap between the input and its helper text is always `5px`. --- ### 9.3 Eyebrow → Title → Rule → Description Sequence This is the standard vertical sequence for any content header: ``` [Eyebrow] ↕ 16px (margin-bottom on eyebrow) [Title — Serif Italic] ↕ 12px (margin-bottom on title) [Horizontal Rule — 1px] ↕ 14px (margin-top on rule from rule element itself) [Description — Manrope body] ``` This exact 4-step sequence should appear: - At the top of every modal - At the top of major page sections - Inside any feature highlight card --- ### 9.4 Button Group Spacing When two buttons appear together (e.g., Cancel + Submit), gap between them is always `12px`. Never `8px` (too tight), never `16px` (too loose). ```css .btn-group { display: flex; gap: 12px; } ``` In a cancel + submit pair, the cancel button has `flex: 1` and the submit button has `flex: 2`. This ensures the primary CTA has more visual weight. --- ## 10. Component Construction Guides ### 10.1 How to Build a Modal — Step by Step **Step 1: Backdrop** - Position fixed, full viewport - Background: `rgba(250, 247, 240, 0.88)` + `backdrop-filter: blur(6px)` - Z-index: 400 **Step 2: Modal container** - Background: `#faf7f0` - Border: none (shadow provides the boundary) - Border-radius: `4px` - Padding: `36px` - Max-width: `440px` (standard) or `520px` (wide) - Box-shadow: `0 2px 0 #c9a84c, 0 24px 60px rgba(100,80,30,0.20)` - `position: relative; overflow: hidden;` **Step 3: Accent line (::before)** - height: 3px - background: gold gradient - position: absolute, top 0, left 0, right 0 **Step 4: Modal header** - Row with eyebrow text (DM Mono, gold, uppercase, tracking 0.14em) on left - Close button (×) on right — no background, just the character at 18px, color `#999` - Margin-bottom: `20px` **Step 5: Title** - Instrument Serif, `1.5rem`, weight 300, italic - Letter-spacing: `-0.01em` - Color: `#1a1408` - Margin-bottom: `12px` **Step 6: Horizontal rule** - 1px, color `#e8d8a0` - Margin: `0 0 14px` **Step 7: Description** - Manrope, `0.8rem`, weight 400 - Color: `#5a4a20` - Line-height: `1.7` - Key terms in `` (color: `#1a1408`, weight 600) - Margin-bottom: `24px` **Step 8: Field label** - DM Mono, `0.65rem` (10px), uppercase, tracking `0.10em` - Color: `#8a6a20` - Margin-bottom: `8px` **Step 9: Textarea** - Background: `#fff` - Border: `1px solid #e0cc90`, border-radius: `2px` - Padding: `12px 14px` - Font: Manrope, `0.8rem` - Focus: border-color `#c9a84c` (no shadow, no glow) **Step 10: Character counter** - DM Mono, `0.63rem`, color `#b09030` - Text-align: right - When count satisfied: color changes to `#4a7a30` (success green) - Margin: `5px 0 22px` **Step 11: Button row** - Flex, gap: `12px` - Cancel: `flex:1`, transparent bg, border `1px solid #d0b860`, text `#8a6a20` - Submit: `flex:2`, bg `#1a1408`, text `#e8c870`, border-radius `2px`, uppercase, tracking `0.05em` **Step 12: Entry animation** - Modal starts at `translateY(12px)` and opacity 0 - Transitions to `translateY(0)` and opacity 1 - Duration: transform `350ms` ease-standard, opacity `200ms` ease-out --- ### 10.2 How to Build a Card — Step by Step **Step 1: Container** - Background: `#f5f0e4` (surface) when on base page; `#faf7f0` (base) when nested on surface - Border: `1px solid #e0cc90` - Border-radius: `4px` - Padding: `24px` - Box-shadow: `0 1px 0 #e0cc90, 0 8px 24px rgba(100,80,30,0.12)` - `position: relative; overflow: hidden;` **Step 2: Accent line** (for featured/important cards only) - `::before` pseudo, height `3px`, gold gradient - Not all cards need this — reserve for primary/featured cards **Step 3: Card header** - Eyebrow label (DM Mono, gold, uppercase, 10px) if needed - Title (Instrument Serif, italic) - Optional: close button or action icon top-right **Step 4: Content body** - Manrope body text, 0.8125rem, color `#5a4a20` - If multiple sections, separate with hairline rule `#f0e8cc` **Step 5: Card footer** (if needed) - Border-top: `1px solid #e8d8a0` - Padding: `16px 24px` (extra horizontal matches card body) - Background: same as card, or slightly sunken `#f0ead6` --- ### 10.3 How to Build a Form — Step by Step **Step 1: Form container** - No background of its own (inherits page or card) - Max-width depends on context: standalone form `440px`–`560px` **Step 2: Form header section** - Section title (H3, Serif italic) - Optional description (Manrope, secondary color) - Hairline rule below **Step 3: Field groups** Each field group follows this structure: ``` Label (DM Mono, 11px, uppercase, gold-brown) ↕ 8px Input / Textarea (white bg, 2px border, 2px radius) ↕ 5px Helper or error text (Manrope, 12px, muted/red) ↕ 20px gap to next field ``` **Step 4: Section dividers** For multi-step or multi-section forms, use: ``` ↕ 32px [section heading (H4, Manrope bold)] ↕ 4px [subsection description (small Manrope, secondary color)] ↕ 16px [fields] ``` **Step 5: Submit section** - Full-width or flex row of buttons - Submit button: dark bg, gold text, uppercase, tracking - Cancel or back: ghost/secondary style - Gap: `12px` - Margin-top: `24px` from last field --- ### 10.4 How to Build a Data Table — Step by Step **Step 1: Wrapper container** - Border: `1px solid #e0cc90` - Border-radius: `4px` - Overflow: hidden - No shadow needed (flat table) **Step 2: Table header** - Background: `#f0ead6` (sunken) - Border-bottom: `2px solid #e0cc90` - Column headers: DM Mono, 11px, uppercase, tracking `0.08em`, color `#8a6a20` - Padding: `10px 16px` - Never bold the headers — the mono uppercase already conveys structure **Step 3: Table rows** - Background: `#faf7f0` (alternating: standard rows) - Cell text: Manrope, 13px, color `#5a4a20` - Border-bottom: `1px solid #f0e8cc` (hairline) - Padding: `10px 16px` - Last row: no border-bottom **Step 4: Hover state** - Background: `#fdf8e8` (gold-100 — barely there) - Transition: `background 100ms` **Step 5: Status cells** - Use semantic badge/chip components - Always in their own column, never inline with text --- ## 11. Interactive States — Full Decision Guide ### 11.1 Hover States | Element | What Changes | Duration | |---------|-------------|---------| | Primary button | Background lightens: `#1a1408` → `#2a2010` | 150ms | | Secondary button | Gets subtle gold wash bg | 150ms | | Ghost button | Gets `#f0e8d0` background | 150ms | | Card | Border brightens slightly OR subtle shadow increase | 200ms | | Table row | Background → `#fdf8e8` | 100ms | | Input | Border → `#d0b860` (stronger) | 150ms | | Link | Color → gold 500, underline color matches | 100ms | | Nav item | Background → `#f0e8d0` | 100ms | | Badge / chip | Slight opacity change — never background change | 100ms | **Rule:** Hover states must always be visible but never dramatic. The change should register in peripheral vision, not announce itself. --- ### 11.2 Focus States All focusable elements must have a visible focus indicator. In this system: **For inputs:** ```css input:focus { border-color: #c9a84c; outline: none; } ``` No box-shadow on focus — the border color change is sufficient and keeps it clean. **For buttons and interactive elements:** ```css button:focus-visible { outline: 2px solid #c9a84c; outline-offset: 2px; } ``` Use `focus-visible` not `focus` — this only shows focus for keyboard navigation, not mouse clicks. --- ### 11.3 Active / Press States ```css button:active { transform: scale(0.98); transition: transform 50ms; } ``` This micro-compression confirms the press action. It should only be `scale(0.98)` — never more. And it should snap back immediately (50ms). --- ### 11.4 Disabled States - Opacity: `0.45` for interactive elements - Cursor: `not-allowed` - Background for inputs: change to `#f5f0e4` (surface) - Never remove the element's border — the border (at reduced opacity) still defines the shape ```css .disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } ``` --- ### 11.5 Error States For form fields with errors: 1. Border changes to `#d88080` (error red) 2. Background subtly tints to `#fdecea` 3. Error message appears below input (Manrope, 12px, `#8a2020`) 4. An optional small icon (⚠) can prefix the error text Never use red for the label text — only for the border and error message below. --- ## 12. Layout Construction Rules ### 12.1 Page Structure Pattern ``` [Fixed Header / Nav — 56px] [Page body — flex or grid] [Optional Sidebar — 260px] [Main content area — flex 1] [Page header section — eyebrow + serif title + rule + description] [Content grid — cards, tables, forms] [Optional Footer] ``` --- ### 12.2 When to Use a Sidebar Use a sidebar when: - The app has persistent navigation or filtering (dashboard, admin) - There are multiple sections the user switches between - Content needs consistent context (document editor with outline) Do not use a sidebar when: - The app is a single focused workflow (wizard, form, onboarding) - Content is single-column by nature (article, detail view) - The layout is already narrow (modals, focused panels) --- ### 12.3 Horizontal Breathing Room Every piece of content needs horizontal breathing room. Minimum rules: - Text lines: never exceed 680px in line width (measure) for body copy - Cards: always separated by at least `20px` gap in a grid - Modals: always have at least `24px` between modal edge and viewport edge on all sides - Page content: minimum `16px` left and right margin at any viewport width --- ### 12.4 Centering Modals Always center modals both vertically and horizontally within the viewport. The preferred method: ```css .modal-overlay { display: flex; align-items: center; justify-content: center; padding: 24px; /* Ensures never touching screen edge */ } ``` Do not use absolute positioning or `margin: auto` tricks for modals — flexbox centering is responsive and always correct. --- ## 13. Animation Rules ### 13.1 What Gets Animated | Element | Animation | Trigger | |---------|-----------|---------| | Modal | translateY(-12px to 0) + fade in | Open | | Modal | fade out only | Close | | Dropdown panel | scale(0.95→1) + fade | Open | | Toast notification | slideInFromRight | Appear | | Accordion / collapse | max-height expansion | Toggle | | Tab indicator | translateX | Tab change | | Page transition | fade (opacity only) | Route change | | Button hover bg | color transition | Hover | ### 13.2 What Never Gets Animated - Border-radius changes - Font-size changes - Width/height changes (except collapse/expand) - Shadow intensity changes (exception: modal entry) - Text color on active state (too slow — use instant) - Background on press state (use instant — 50ms max) ### 13.3 Performance Rule Only animate: `transform`, `opacity`, `background-color`, `border-color`, `color`, `box-shadow`. Never animate: `width`, `height`, `padding`, `margin`, `top`, `left`, `font-size`, `border-radius`. The only exception is accordion collapse — use `max-height` animation, but set the max-height to a specific pixel value, never `auto`. --- ## 14. What Never to Do — Anti-Pattern List ### Typography Anti-Patterns - ❌ Using Instrument Serif for body copy (too formal, impractical at small sizes) - ❌ Using DM Mono for headings (mono destroys editorial grace) - ❌ Using serif italic for button text (illegible, loses clickability cues) - ❌ Mixing letter-spacing values that don't come from the token sheet - ❌ Using ALL CAPS with Instrument Serif (uppercase serif = stiff, not editorial) - ❌ Using more than 3 type sizes on a single screen without clear hierarchy logic - ❌ Setting line-height below 1.5 for any body copy ### Color Anti-Patterns - ❌ Using pure white `#ffffff` as the page background - ❌ Using gold on hover for body text links (use gold only for established accent roles) - ❌ Using more than one gold gradient element per viewport section - ❌ Applying semantic colors (red, green) for aesthetic reasons (only for actual states) - ❌ Using a dark color for the page background (this system is light-only) - ❌ Creating a new color not in the design system token sheet ### Shape Anti-Patterns - ❌ Applying `border-radius: 8px` or higher to any button - ❌ Using pill buttons (`border-radius: 9999px`) — reserved for status badges only - ❌ Zero border-radius on cards or modals (looks raw/unfinished) - ❌ Rounding the accent line at the top of a card/modal - ❌ Mixing different border-radius values within the same component ### Shadow Anti-Patterns - ❌ Using `rgba(0,0,0,...)` for any shadow (cold and wrong) - ❌ Omitting the gold underline from modals (`0 2px 0 #c9a84c`) - ❌ Using the modal shadow on flat cards (over-elevation) - ❌ Using no shadow at all on floating elements (inputs, modals, dropdowns need some) - ❌ Using `box-shadow` to simulate a border on inputs (use an actual border) ### Spacing Anti-Patterns - ❌ Padding below 11px vertical inside any button - ❌ Padding below 12px inside any textarea or text input - ❌ Gap below 12px between a cancel and submit button pair - ❌ No gap at all between label and input (minimum 8px) - ❌ Using inconsistent padding (e.g., 13px) not from the token scale ### Gold Accent Line Anti-Patterns - ❌ Rounding the accent line corners - ❌ Using the accent line at the bottom instead of the top - ❌ Applying it to every single card (dilutes meaning — only for featured/primary) - ❌ Using a solid gold color instead of the gradient `(#c9a84c, #e8c870, #c9a84c)` - ❌ Making the accent line thicker than 3px --- ## 15. AI Prompting Instructions When working with an AI model to build components, pages, or features using this design system, use the following prompting techniques. ### 15.1 System Context Block Include this at the start of any AI conversation about building UI: ``` You are building using the Luxury Editorial design system. The system uses three fonts: - Instrument Serif (300, italic) for all titles and headings - Manrope (300–700) for all body, button, and UI text - DM Mono (400, 500) for all labels, counters, badges, and metadata Key token values: - Page background: #faf7f0 (warm cream, never pure white) - Primary text: #1a1408 (near-black, warm) - Secondary text: #5a4a20 (warm brown) - Gold accent: #c9a84c - Gold gradient: linear-gradient(90deg, #c9a84c, #e8c870, #c9a84c) - Border default: #e0cc90 - Border focus: #c9a84c - Button dark bg: #1a1408, text: #e8c870 - Button secondary: transparent, border #d0b860, text #8a6a20 - Shadow warm: rgba(100, 80, 30, opacity) - Modal shadow: 0 2px 0 #c9a84c, 0 24px 60px rgba(100,80,30,0.20) Rules: - Border-radius: 2px for interactive elements (buttons, inputs, badges) - Border-radius: 4px for containers (cards, modals, panels) - Never exceed 6px border-radius on any real UI element - All cards and modals must have ::before accent line (3px, gold gradient, always flat/0px radius) - Shadows use rgba(100, 80, 30, ...) — never rgba(0,0,0,...) - Body copy line-height: 1.65–1.70 ``` --- ### 15.2 Component Prompt Templates **For a new form:** ``` Build a [form name] form using the Luxury Editorial design system. - Container: max-width 480px, padding 36px, border-radius 4px, cream bg #faf7f0, warm shadow - Include the top gold accent line (3px gradient) - Header: DM Mono eyebrow in gold, Instrument Serif title (italic, weight 300) - Horizontal rule after title: 1px, color #e8d8a0 - Field labels: DM Mono, 11px, uppercase, tracking 0.10em, color #8a6a20 - Inputs: white bg, 1px border #e0cc90, border-radius 2px, padding 12px 14px - Focus state: border-color #c9a84c only (no shadow) - Buttons: Cancel (transparent, border #d0b860) + Submit (bg #1a1408, text #e8c870, uppercase) - Button gap: 12px, cancel flex:1, submit flex:2, both border-radius 2px ``` **For a new card:** ``` Build a [card name] card using the Luxury Editorial design system. - Background: #f5f0e4, border 1px #e0cc90, border-radius 4px, padding 24px - Add ::before top accent line (3px, gold gradient linear-gradient(90deg, #c9a84c, #e8c870, #c9a84c)) - Shadow: 0 1px 0 #e0cc90, 0 8px 24px rgba(100,80,30,0.12) - position: relative; overflow: hidden (required for accent line) - Card title: Instrument Serif, italic, weight 300, color #1a1408 - Body text: Manrope, 13px, color #5a4a20, line-height 1.65 - Any labels/metadata: DM Mono, 11px, uppercase ``` **For a new data table:** ``` Build a data table using the Luxury Editorial design system. - Wrapper: border 1px #e0cc90, border-radius 4px, overflow hidden - Column headers: DM Mono, 11px, uppercase, tracking 0.08em, color #8a6a20 - Header background: #f0ead6 - Header border-bottom: 2px solid #e0cc90 - Row cells: Manrope, 13px, color #5a4a20, padding 10px 16px - Row divider: 1px solid #f0e8cc (hairline) - Row hover: background #fdf8e8 ``` --- ### 15.3 Debugging Prompts When an AI-generated component doesn't look right, use these targeted correction prompts: **If it looks too cold/clinical:** ``` Warm up this component: change all shadows from rgba(0,0,0,...) to rgba(100,80,30,...), change the page background from white to #faf7f0, and ensure all border colors are in the gold-tinted range (#e0cc90, #e8d8a0). ``` **If headlines look wrong:** ``` Change all headlines to use font-family: 'Instrument Serif', serif; with font-weight: 300 and font-style: italic. Remove any bold or non-italic styling from H1–H3. ``` **If labels look wrong:** ``` Change all form field labels and eyebrow text to use: font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; color: #8a6a20; ``` **If border-radius is too round:** ``` Reduce all button and input border-radius to 2px. Reduce all card and modal border-radius to 4px. Remove any border-radius above 6px from non-pill elements. ``` **If the modal is missing its gold shadow:** ``` Add the modal shadow: box-shadow: 0 2px 0 #c9a84c, 0 24px 60px rgba(100,80,30,0.20); This is a required signature of the Luxury Editorial modal style. ``` --- ## 16. New Project Checklist Use this when starting a fresh project. Check off each item before writing any component code. ### Setup Phase - [ ] Google Fonts link block added (Instrument Serif + Manrope + DM Mono) - [ ] Full CSS custom properties (:root block) pasted into global stylesheet - [ ] CSS reset applied (`*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }`) - [ ] Body background set to `#faf7f0` - [ ] Body font-family set to `'Manrope', sans-serif` - [ ] Body color set to `#5a4a20` (secondary, not primary — primary is for headings) - [ ] Base heading styles applied (H1–H3 Serif italic, H4–H6 Manrope bold) - [ ] Base paragraph style applied (0.8125rem, 1.65 line-height, #5a4a20) - [ ] Base link style applied (gold color, underline, hover transition) - [ ] Base input style defined globally (white bg, 2px radius, #e0cc90 border) - [ ] Base button reset defined (appearance: none, cursor: pointer) ### Component Phase (for each new component) - [ ] Font family matches the three-font law - [ ] Border-radius follows the decision framework (2px interactive, 4px container) - [ ] Shadow uses warm color `rgba(100, 80, 30, ...)` - [ ] Elevated containers (modal, popover) have the gold underline shadow - [ ] Cards with accent line have `position: relative; overflow: hidden;` on parent - [ ] The `::before` accent line has `border-radius: 0` (always flat) - [ ] Hover states are defined and subtle - [ ] Focus states use `#c9a84c` (border or outline), not blue browser default - [ ] Disabled states at 0.45 opacity with `not-allowed` cursor - [ ] Error states change border color + bg tint + show message below ### Review Phase - [ ] No pure white backgrounds anywhere except inputs - [ ] Gold used in max 4 places per screen section - [ ] Serif italic on all H1–H3 (not bold, not non-italic) - [ ] DM Mono on all labels, eyebrows, counters, badges - [ ] No border-radius above 6px on interactive/structural elements - [ ] All shadows warm-toned (no black shadows) - [ ] Modal shadow includes gold underline `0 2px 0 #c9a84c` - [ ] Transition durations within system range (50ms–350ms) - [ ] Text color hierarchy respected (primary for headings, secondary for body) --- ## 17. Component Pattern Library ### Pattern 1: Hero Section ``` [Eyebrow — DM Mono, gold, uppercase] [Title — Instrument Serif, italic, very large, weight 300] [Tagline — Manrope, body, secondary color, max-width 560px] [Horizontal rule — 1px, light gold] [CTA Buttons — primary + secondary, flex row, gap 12px] ``` Spacing: eyebrow bottom `16px`, title bottom `14px`, rule margin `16px`, tagline bottom `32px` --- ### Pattern 2: Settings Page Section ``` [Section Title — H4, Manrope bold, #1a1408] [Section Description — Manrope, small, #5a4a20] [Hairline rule — #e8d8a0] [Field rows — label + input + helper, gap 20px] [Save button — right-aligned, primary style] ``` --- ### Pattern 3: Notification / Alert ``` [Container — border 1px semantic-color, bg tinted, border-radius 4px, padding 16px 20px] [Row: icon + title + message] [Icon: 16px, stroke, semantic color] [Title: Manrope semibold, semantic text color] [Message: Manrope regular, secondary semantic text color] [Optional dismiss button: top-right, ghost ×] ``` --- ### Pattern 4: Navigation ``` [Nav bar — white bg, border-bottom 1px #e8d8a0, height 56px, px 24px] [Logo — left, DM Mono or Instrument Serif brand mark] [Nav items — center or left offset, Manrope medium, gap 4px] [Active item — gold dot or gold underline, color #c9a84c] [Actions — right: buttons, avatar] ``` --- ### Pattern 5: Empty State ``` [Center-aligned block, max-width 360px, margin auto] [Icon — large, 40px, stroke, gold or muted] [Title — H3, Instrument Serif italic] [Description — Manrope, secondary color, centered] [CTA — primary button, centered] ``` --- ### Pattern 6: Toast Notification ``` [Container — bg #1a1408, text #e8c870, padding 12px 20px, border-radius 4px] [Box-shadow: --shadow-lg] [Flex row: icon + message + optional dismiss] [Icon: 14px, stroke, #e8c870] [Text: Manrope, 13px, #e8c870] [Entry: slide in from right, 350ms ease-standard] [Auto dismiss: 4000ms] ``` --- ## 18. Responsive Construction Rules ### 18.1 Breakpoint Behavior **Below 480px (Mobile S):** - Modal padding reduces from 36px to 20px - Button text stays uppercase but shrinks to `--text-sm` - Card padding reduces from 24px to 16px - Hero serif title reduces 2 type sizes - Sidebar collapses to off-canvas drawer - Table scrolls horizontally within its container **480px–767px (Mobile L / Large Phone):** - Modal max-width fills screen with 16px left-right margin - Two-column layouts collapse to single column - Navigation collapses to hamburger menu - Card grid becomes single column - Button group becomes stacked (flex-direction: column) **768px–1023px (Tablet):** - Full card grids at 2 columns - Sidebar shows at 220px (slightly narrower) - Modal stays at standard size - Full typography scale restored **1024px+ (Desktop):** - Full system at designed specifications - 3-column grids enabled - All padding at full token values --- ### 18.2 Typography Scaling Serialize headline size reduction across breakpoints: | Element | Desktop | Tablet | Mobile | |---------|---------|--------|--------| | Hero H1 | 3rem | 2.25rem | 1.875rem | | Page H1 | 2.25rem | 1.875rem | 1.5rem | | Section H2 | 1.875rem | 1.5rem | 1.25rem | | Card/Modal H3 | 1.5rem | 1.25rem | 1.125rem | | H4 | 1rem | 1rem | 0.9375rem | | Body | 0.8125rem | 0.8125rem | 0.875rem | Body copy slightly increases at mobile to aid readability on small screens. --- ## 19. Accessibility Guidelines ### 19.1 Color Contrast Requirements | Pairing | Contrast | WCAG Level | |---------|----------|-----------| | `#1a1408` on `#faf7f0` | 16.8:1 | AAA ✓ | | `#5a4a20` on `#faf7f0` | 7.2:1 | AAA ✓ | | `#8a6a20` on `#faf7f0` | 4.5:1 | AA ✓ | | `#e8c870` on `#1a1408` | 8.4:1 | AAA ✓ | | `#c9a84c` on `#faf7f0` | 3.8:1 | AA (large text only) | | `#b09030` on `#faf7f0` | 3.2:1 | ⚠ Large text only | | `#c8b888` on `#faf7f0` | 2.1:1 | ✗ Disabled only | **Rules:** - `--color-text-muted` (`#b09030`) is acceptable ONLY for non-essential decorative metadata like character counters. Never use it for required reading. - `--color-text-disabled` is intentionally below contrast — only use for disabled UI that is not meant to be read in detail. --- ### 19.2 Focus Management - All interactive elements must have a visible `:focus-visible` state - Focus ring: `outline: 2px solid #c9a84c; outline-offset: 2px;` - Never use `outline: none` without providing an alternative - Modal opening must trap focus within the modal - Modal closing must return focus to the trigger element --- ### 19.3 ARIA Requirements ```html