Switch between the rendered Visual preview and the Raw DESIGN.md.
The Tiffany & Co. design system embodies timeless luxury and refined elegance. Characterized by understated sophistication, it prioritizes clarity and accessibility while maintaining an air of prestige. The visual language is minimalist yet commanding, using ample whitespace and deliberate typography to guide the eye through content. This system reflects the brand's heritage of fine jewelry and high-end retail, where every detail matters and restraint speaks louder than ornamentation. The aesthetic is modern-classic, favoring legibility and user focus over visual complexity.
Key Characteristics
#000000): Primary text, headings, and primary interactive elements. The dominant color across UI surfaces, establishing authority and luxury through contrast.#FFFFFF): Primary background surface, default page background, and primary container fill for maximum contrast and legibility.#F5F5F5): Secondary background surfaces, subtle section dividers, and hover states for non-primary interactions.#CCCCCC): Tertiary backgrounds, disabled states, and subtle border definitions.#333333): Secondary text, subheadings, and de-emphasized content.#000000): Primary call-to-action buttons, focus states, and primary interactive elements. Reinforces premium positioning.#666666): Secondary button states, tertiary CTAs, and muted interactive affordances.#000000): Structural borders, dividing lines between sections, and component outlines.#EEEEEE): Soft, almost-invisible section separators and subtle grid lines.Primary Font: Times New Roman, Georgia, serif — a classic serif typeface conveying heritage and sophistication.
Secondary Font: System font stack (Helvetica Neue, Arial, sans-serif) for supporting text when serif usage would reduce legibility at smaller sizes.
Monospace (if needed): Courier New, monospace for code or reference numbers.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Times New Roman | 56px | 700 | 1.1 | 0px | Hero titles and key announcements |
| Heading 1 | Times New Roman | 32px | 700 | 1.2 | 0px | Page titles and major sections |
| Heading 2 | Times New Roman | 24px | 700 | 1.3 | 0px | Subsection headings |
| Heading 3 | Times New Roman | 18px | 700 | 1.4 | 0px | Component titles and card headers |
| Body | Times New Roman | 16px | 400 | 1.6 | 0px | Primary body text and descriptions |
| Body Small | Times New Roman | 14px | 400 | 1.6 | 0px | Secondary body text and metadata |
| Caption | Times New Roman | 12px | 400 | 1.5 | 0.5px | Labels, timestamps, and fine print |
| Button | Times New Roman | 14px | 700 | 1.5 | 0.5px | Interactive button text |
| Link | Times New Roman | 16px | 400 | 1.6 | 0px | Hypertext with underline treatment |
Primary Button
#000000#FFFFFF12px 28px0px1px solid #000000#333333, Border #333333#000000, Box Shadow inset 0 2px 4px rgba(0,0,0,0.3)#CCCCCC, Border #CCCCCC, Text Color #666666Secondary Button
#FFFFFF#00000012px 28px0px1px solid #000000#F5F5F5, Border #000000#EEEEEE, Box Shadow inset 0 2px 4px rgba(0,0,0,0.15)#FFFFFF, Border #CCCCCC, Text Color #CCCCCCGhost Button
transparent#00000012px 28px0px1px solid transparent#333333, Border #333333#000000, Border #000000#CCCCCC, Border transparentStandard Card
#FFFFFF1px solid #EEEEEE0px24px0 2px 8px rgba(0,0,0,0.08)0 4px 12px rgba(0,0,0,0.12)Elevated Container
#FFFFFF1px solid #CCCCCC0px32px0 8px 24px rgba(0,0,0,0.15)Subtle Section
#F5F5F5none0px20pxText Input
#FFFFFF1px solid #CCCCCC0px10px 12px#000000#999999#000000, Box Shadow 0 0 0 2px rgba(0,0,0,0.1)#D32F2F, Box Shadow 0 0 0 2px rgba(211,47,47,0.2)Select Input
#FFFFFF1px solid #CCCCCC0px10px 12px#000000#000000Checkbox
#FFFFFF1px solid #CCCCCC2px18px × 18px#000000#0000000 0 0 3px rgba(0,0,0,0.1)Radio Button
#FFFFFF2px solid #CCCCCC50%18px × 18px#000000#000000, 8px diameter0 0 0 3px rgba(0,0,0,0.1)Header Navigation
#FFFFFF1px solid #EEEEEE16px 0#000000Nav Link
#000000#333333, Underline 1px solid #333333#000000, Underline 1px solid #0000008px 16pxBreadcrumb
#666666#CCCCCC#0000001px solid #000000Status Badge (Default)
#F5F5F5#0000004px 8px0pxStatus Badge (Premium)
#000000#FFFFFF4px 8px0pxBase Unit: 4px
Spacing Scale:
4px — Tight spacing between inline elements8px — Spacing between related components12px — Internal padding for small components16px — Standard spacing between sections24px — Content padding and larger component spacing32px — Major section separation48px — Page-level section breaks64px — Hero and full-width section spacingUsage Context:
12px padding24px48px on desktop32px8px–16px vertical spacing1440px for primary content container48px on desktop, 24px on tablet, 16px on mobile16px gutter between columnsWhitespace is treated as a luxury element—not a constraint. Generous spacing around text, between sections, and within components creates a sense of premium positioning and reduces cognitive load. The design favors vertical breathing room; sections are separated by meaningful gaps rather than lines or backgrounds. Horizontal whitespace is equally important; text blocks rarely exceed 70 characters per line, ensuring optimal reading experience.
0px — All major UI components (buttons, cards, inputs) maintain sharp, refined edges2px — Subtle rounding on checkboxes and small interactive affordances only50% — Radio buttons and circular elements (avatars, status indicators)| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, border: 1px solid #EEEEEE | Default cards, sections, minimal elevation |
| Raised | box-shadow: 0 2px 8px rgba(0,0,0,0.08) | Standard cards, hover states on interactive elements |
| Elevated | box-shadow: 0 4px 12px rgba(0,0,0,0.12) | Hovered cards, secondary raised containers |
| Floating | box-shadow: 0 8px 24px rgba(0,0,0,0.15) | Modals, dropdowns, top-level overlays |
| Deep | box-shadow: 0 12px 32px rgba(0,0,0,0.18) | Full-screen modals, critical overlays |
Shadow Philosophy: Shadows are used sparingly to define elevation and hierarchy without visual noise. Soft, diffuse shadows maintain the refined aesthetic; no hard-edged or colored shadows are used. Shadows increase in intensity with elevation level but remain subtle enough to avoid distraction. Motion states (hover, focus) employ gentle shadow increases to indicate interactivity without overwhelming the interface.
0px border radius on all primary UI elements (buttons, cards, inputs)#000000) and white (#FFFFFF) as primary colors to ensure maximum contrast and accessibility0 2px 8px and above) to establish depth without visual noise44px × 44px on all interactive elements4px or 8px)1.6 line height on body text; preserve compact elegance44px × 44px minimum for accessibility| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | < 576px | Single-column layout, 16px side margins, 12px padding on cards, 14px base font size |
| Tablet | 576px–992px | Two-column grid, 24px side margins, 20px padding on cards, 15px base font size |
| Desktop | 992px–1440px | Full 12-column grid, 48px side margins, 24px padding on cards, 16px base font size |
| Large Desktop | ≥ 1440px | Max-width 1440px container, centered layout, full padding and spacing scale |
44px × 44px for all interactive elements (buttons, links, form controls)8px padding around touch targets to prevent accidental adjacent activation12px 28px on desktop; increase to 12px 24px on mobile if space constrained18px × 18px baseline; increase to 24px × 24px on mobile for easier interaction1px solid #000000 underline on hover to increase clickability affordance< 768px breakpoint; full nav stacks vertically in overlay56px (desktop) → 40px (tablet) → 28px (mobile)100% width but reduce internal padding; max-width containers shift to 100vw with horizontal padding instead44px for touch accessibility#000000)#FFFFFF) on dark backgrounds, Deep Black (#000000) on light backgrounds#FFFFFF)#F5F5F5)#000000)#000000)#333333)#CCCCCC)#000000) for primary structure; Subtle Divider (#EEEEEE) for soft separatorsrgba(0,0,0,0.1)Always use #000000 for primary text, headings, and primary CTAs—this is the core luxury brand color and primary interactive state.
Typography defaults to Times New Roman serif at hierarchy sizes: Display 56px, H1 32px, H2 24px, H3 18px, Body 16px, Caption 12px—maintain serif for all headings to reinforce heritage positioning.
All primary UI components (buttons, cards, inputs) use 0px border radius—no rounded corners except on circular elements (radio buttons, avatars).
Spacing scale is multiples of 4px or 8px: use 12px for internal padding, 24px for card/container padding, 32px–48px for section spacing—maintain consistency across all components.
Shadows scale by elevation: flat (none + border), raised (0 2px 8px), elevated (0 4px 12px), floating (0 8px 24px)—apply only one shadow value per component level.
Minimum touch target is 44px × 44px; spacing around targets is 8px minimum—test all interactive elements on mobile to ensure accessibility.
Line height for body text is 1.6; headings use 1.1–1.4—ensure legibility and premium spacing throughout copy.
Hover states increase shadow depth by one level and lighten interactive element backgrounds by 5–10%—provide clear visual feedback without changing component structure.
Focus states add box-shadow: 0 0 0 2px rgba(0,0,0,0.1) and maintain 2px outset—ensures keyboard navigation accessibility and visual clarity.
Responsive behavior: reduce margins by 50% at tablet, 75% at mobile; stack multi-column layouts to single column at < 576px—test all breakpoints to ensure layout integrity across devices.