# Design Reference - Sana Agents
> Architectural blueprint on white marble.  Sharp, expansive white spaces frame meticulously placed elements, with occasional flashes of neon green illuminating key interactions.

## Source
- Original site: https://sana.ai
- Captured: 2026-04-11T18:37:23.190Z

## Tags
- minimalist
- professional
- high-contrast
- modern
- clean
- grid-based
- serif-headline
- accent-color

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Tarmac | `#0a1217` | neutral | Primary text, dark backgrounds for feature cards, active states. This near-black serves as the dominant dark tone contrasting against the pervasive white background. |
| Canvas White | `#ffffff` | neutral | Page backgrounds, card surfaces, primary button backgrounds. Expansive and dominant, it provides a sense of spaciousness and clarity. |
| Limestone | `#e4eff7` | neutral | Subtle background for secondary sections or hover states on light elements, offering a minimal visual lift from Canvas White. |
| Jet Black | `#000000` | neutral | Secondary text, specific interactive elements like input text. Used sparingly to ensure maximum contrast and legibility. |
| Cloud Gray | `#85898b` | neutral | Muted body text and secondary information, providing a softer contrast than Tarmac. |
| Steel Gray | `#6c7174` | neutral | Subtle text elements, navigational links, and less prominent headings, maintaining readability without overpowering. |
| Bio-Luminescent Green | `#cdfe00` | accent | Primary call-to-action buttons, indicating action and drawing immediate attention with its vivid contrast against the neutral palette. |

## Typography
- role: Display headings. The single 72px size and serif face at weight 400 make a strong, non-shouting statement, conveying established authority.; sizes: 72px; family: Sana Serif; weight: 400; weights: 400; lineHeight: 1.10; substitute: Playfair Display; letterSpacing: normal
- role: Body text, navigation, buttons, and most interactive elements. Its varied weights provide flexibility for hierarchy while maintaining a clean, modern feel across interface elements.; sizes: 13px, 14px, 16px, 20px; family: Sana Sans; weight: 400, 450, 500; weights: 400, 450, 500; lineHeight: 1.20, 1.40, 1.43, 1.50; substitute: Inter; letterSpacing: normal; fontFeatureSettings: "lnum" on, "tnum" on

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "pill": "9999px",
      "input": "24px",
      "buttons": "24px"
    },
    "elementGap": "8px",
    "sectionGap": "62px",
    "cardPadding": "",
    "pageMaxWidth": "1305px"
  },
  "radius": {
    "pill": "9999px",
    "input": "24px",
    "buttons": "24px"
  }
}
```

## Component Patterns
- name: Product Cards — Sana Agents & Sana Learn
- name: Sign Up Form — Try for free with your work email
- name: Button Group — Primary, Secondary & Outline variants
- name: Pill Outline Button; role: Secondary action button, often for navigation or subtle interactions.
- name: Dark Filled Button; role: Primary action button within dark contexts or for prominent interactions.
- name: Light Filled Button; role: Secondary action button in light contexts or for less prominent interactions.
- name: Feature Card; role: Container for introducing product features, often in a grid.
- name: Form Input Field; role: Standard user input field for text.

## Do
- Use Sana Serif for display headlines at 72px, weight 400, to establish authority.
- Apply Tarmac (#0a1217) for primary text and dark surface backgrounds to maintain strong contrast.
- Utilize Bio-Luminescent Green (#cdfe00) exclusively for primary call-to-action buttons, drawing clear attention.
- Employ 24px border-radius for all primary buttons and input fields to ensure a consistent contemporary feel.
- Maintain a clear page structure with 62px vertical spacing between major sections.
- Use Sana Sans (lnum, tnum) across all body text, navigation, and interactive elements for numeral consistency and legibility.
- Ensure all interactive elements have sufficient padding: 8px 16px for buttons, 8px 18px for inputs.

## Don't
- Do not use highly saturated colors other than Bio-Luminescent Green (#cdfe00); the palette is intentionally restrained.
- Avoid decorative shadows or complex gradients; the aesthetic is flat and crisp.
- Do not introduce additional font families; Sana Serif and Sana Sans are the only approved typefaces.
- Do not deviate from the established border radii; 24px and 9999px are the only sanctioned options for interactive elements.
- Do not vary paragraph line-height aggressively; keep it within the 1.2-1.5 range to maintain reading comfort.
- Avoid using Jet Black (#000000) for large blocks of text; reserve it for specific accents or input fields.
- Do not use small padding values; minimum 8px padding ensures adequate tap targets and visual breathing room.