# Design Reference - Delphi
> Cognac-Stained Parchment – A sense of aged wisdom and quiet authority, inviting deep contemplation.

## Source
- Original site: https://delphi.ai
- Captured: 2026-04-11T16:09:35.790Z

## Tags
- editorial
- academic
- warm-neutrals
- serif-dominant
- subtle-luxury
- knowledge-driven
- expert-focused
- minimalist-warm
- muted-palette

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Parchment White | `#fdf6ee` | neutral | Primary page and card backgrounds, lending a warm, analog feel to the digital interface. |
| Deep Cognac | `#2b180a` | brand | Primary text color for body copy, headings, and key UI elements, offering strong contrast against the warm backgrounds. |
| Muted Stone | `#94877c` | neutral | Secondary text, subtle borders, and placeholder text, providing visual hierarchy without harshness. |
| Pressed Cacao | `#7f6e60` | neutral | Tertiary text and subtle accents, deepening the warm neutral palette. |
| Burnt Umber | `#3e2407` | accent | Interactive elements like primary buttons and emphasized text, acting as a warm, grounded accent. |
| Warm Ash | `#a99d93` | neutral | Subtle borders and muted instructional text. |
| Cloud Fog | `#f0e6dc` | neutral | Hover states and secondary button backgrounds, a slightly darker shade of the primary background for subtle interaction feedback. |
| Fire Opal | `#f65726` | accent | Used sparingly for dynamic highlights or notification states, providing a vibrant pop. |
| Sunset Orange | `#ff5c00` | accent | Occasional accent for specific headline emphasis, drawing attention without being overwhelming. |
| White | `#ffffff` | neutral | Text on dark backgrounds, or pure white elements for contrast against Parchment White. |
| Dark Charcoal | `#21201c` | neutral | Deep, almost black text for strong contrast where needed. |

## Typography
- role: Primary display and headline font for all large text, creating an inviting, antique, and intellectual tone. The liberal use of negative letter-spacing for large sizes is a signature choice, drawing characters closer for a cohesive, refined look.; sizes: 10px, 12px, 14px, 15px, 20px, 24px, 40px, 56px, 64px; family: Martina Plantijn Light; weight: 300, 400, 700; lineHeight: 1.00, 1.20, 1.22, 1.32, 1.34; substitute: Source Serif Pro; letterSpacing: -0.03em at 64px, -0.022em at 56px, -0.02em at 40px, -0.013em at 24px, -0.012em at 20px, normal at 15px and below
- role: Dominant sans-serif for body text, navigation items, and descriptions, providing contemporary readability against the more expressive display font.; sizes: 10px, 13px, 14px, 15px, 17px; family: Inter; weight: 400, 500; lineHeight: 1.00, 1.20, 1.40; substitute: Inter; letterSpacing: -0.01em
- role: Fallback and utilitarian text where robust readability is paramount, such as system messages or very small captions.; sizes: 12px; family: sans-serif; weight: 400; lineHeight: 1.20; substitute: Arial; letterSpacing: normal
- role: Monospaced font used for data, code snippets, or any content requiring exact character alignment.; sizes: 13px; family: Roboto Mono; weight: 400; lineHeight: 1.40; substitute: Roboto Mono; letterSpacing: normal

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "small": "4px",
      "buttons": "12px",
      "default": "12px",
      "testimonials": "70px"
    },
    "elementGap": "8px",
    "sectionGap": "75px",
    "cardPadding": "20px"
  },
  "radius": {
    "small": "4px",
    "buttons": "12px",
    "default": "12px",
    "testimonials": "70px"
  }
}
```

## Component Patterns
- name: CTA Button Group
- name: Feature Cards — Why Delphi
- name: Trust Feature Cards Grid
- name: Primary Button (Filled); role: Call to action.
- name: Secondary Button (Outlined); role: Secondary action or ghost button.
- name: Tertiary Button; role: Subtle, less emphasized actions, often within navigation.
- name: Auth Button; role: Sign-in or Get-started actions in the header.
- name: Testimonial Card; role: Displaying expert quotes or profiles.
- name: Input Field; role: User data entry.
- name: Header Navigation Item; role: Primary site navigation.
- name: Feature Card; role: Highlighting product features or benefits.

## Do
- Use Martina Plantijn Light at weight 300 for all content headings larger than 24px, applying appropriate negative letter-spacing.
- Maintain #fdf6ee as the primary background color for all main page content and interactive cards.
- Apply a default border-radius of 12px to all interactive elements and contained content blocks like cards.
- Employ the Deep Cognac (#2b180a) as the default text color for primary content and navigation.
- Utilize Inter at 15px with line height 1.4 for most body copy, ensuring an open and readable text block.
- Emphasize primary calls-to-action using a filled button with Burnt Umber (#3e2407) background and white text.
- Ensure consistent spacing elements are multiples of 4px, especially for padding within components and between text blocks.

## Don't
- Do not use highly saturated colors for backgrounds or large text areas; reserve them for small, impactful accents like #f65726 or #ff5c00.
- Avoid harsh shadows; prefer subtle, barely-there elevations to maintain the soft, warm aesthetic.
- Do not use pure black (#000000) for text on #fdf6ee backgrounds unless for specific, high-contrast, legal text. Prefer Deep Cognac (#2b180a) or Dark Charcoal (#21201c).
- Do not break the established type scale; Martina Plantijn Light scales with specific letter-spacing adjustments at larger sizes.
- Do not introduce strong, geometric shapes where rounded corners (12px or 70px) are the established pattern.
- Avoid busy or distracting imagery; prefer tightly cropped portraits or clean UI mockups.
- Do not use `sans-serif` (system font) for any primary content; it is reserved for inaccessible or fallback instances.