21n

# 21n — Style Reference
> Architectural blueprint on white marble. Clean lines and precise text on a bright, expansive background, with subtle, rounded interactive elements.

**Theme:** light

This design system presents a welcoming yet authoritative digital experience, reminiscent of a well-organized personal library. Its light theme and ample white space provide a calm backdrop for the sharp, precise typography. The muted, near-achromatic palette, punctuated by specific brand-colored highlights, directs attention without visual clutter, creating an environment balancing technical clarity with approachable softness through its rounded buttons.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cloud White | `#ffffff` | `--color-cloud-white` | Page backgrounds, button text, icon fills. |
| Faint Fog | `#f9f9fb` | `--color-faint-fog` | Subtle background for UI elements, slightly off-white. |
| Polar Mist | `#eff0f6` | `--color-polar-mist` | Subtle background for UI elements, slightly off-white. |
| Light Ash | `#e5e7eb` | `--color-light-ash` | Borders, dividers, card edges, providing subtle visual separation. |
| Graphite | `#545454` | `--color-graphite` | Secondary text, subtle borders, establishing a softer contrast than pure black. |
| Deep Slate | `#333333` | `--color-deep-slate` | Primary text, headings, prominent icons, asserting clear hierarchy on light backgrounds. |
| Accent Blue | `#2c70dd` | `--color-accent-blue` | Highlighting interactive elements, links, and key icons, signifying actionability. |
| Accent Green | `#24b26d` | `--color-accent-green` | Secondary interactive elements and success indicators, providing an alternative accent. |

## Tokens — Typography

### Sen — Primary typeface for all text content; its clean, geometric forms with slightly rounded terminals contribute to both modern clarity for headings and comfortable readability for body text. The range of weights provides flexibility for hierarchy without introducing a second font family. · `--font-sen`
- **Substitute:** system-ui, sans-serif
- **Weights:** 400, 500, 600, 700
- **Sizes:** 13px, 15px, 16px, 17px, 19px, 22px, 36px, 44px, 56px
- **Line height:** 1.07, 1.25, 1.50, 1.75, 1.94, 2.21
- **Role:** Primary typeface for all text content; its clean, geometric forms with slightly rounded terminals contribute to both modern clarity for headings and comfortable readability for body text. The range of weights provides flexibility for hierarchy without introducing a second font family.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.75 | — | `--text-caption` |
| body-sm | 15px | 1.75 | — | `--text-body-sm` |
| heading-sm | 19px | 1.5 | — | `--text-heading-sm` |
| heading | 22px | 1.25 | — | `--text-heading` |
| heading-lg | 36px | 1.25 | — | `--text-heading-lg` |
| display | 44px | 1.07 | — | `--text-display` |
| display-lg | 56px | 1.07 | — | `--text-display-lg` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 13 | 13px | `--spacing-13` |
| 17 | 17px | `--spacing-17` |
| 21 | 21px | `--spacing-21` |
| 25 | 25px | `--spacing-25` |
| 29 | 29px | `--spacing-29` |
| 33 | 33px | `--spacing-33` |
| 38 | 38px | `--spacing-38` |
| 50 | 50px | `--spacing-50` |
| 67 | 67px | `--spacing-67` |
| 84 | 84px | `--spacing-84` |
| 90 | 90px | `--spacing-90` |
| 95 | 95px | `--spacing-95` |
| 134 | 134px | `--spacing-134` |

### Border Radius

| Element | Value |
|---------|-------|
| pills | 9999px |
| buttons | 12.53px |
| default | 6.26px |

### Layout

- **Page max-width:** 1247px
- **Section gap:** 50px
- **Card padding:** 25px
- **Element gap:** 4px

## Components

### Default Button
**Role:** Call to action

Background rgb(255, 255, 255), text rgb(51, 51, 51), border rgb(223, 226, 236), with 12.53px border radius and 25.05px padding on all sides. Used for standard actions.

### Card Action Button
**Role:** Call to action within a card or content block

Similar to Default Button, but with 25.05px vertical padding and 0px horizontal padding, border rgb(229, 231, 235), and 12.53px border radius. This creates a visually distinct button often used in grouped content.

### Pill Button
**Role:** Secondary call to action or tag

Transparent background, text rgb(51, 51, 51), and a 9999px border radius for a distinct pill shape. Used for less prominent actions or tags, with 12.53px horizontal padding and no vertical padding.

## Do's and Don'ts

### Do
- Prioritize Sen font at weight 700 for all display headings exceeding 36px, rendered in Deep Slate (#333333).
- Maintain a clear visual hierarchy using Deep Slate (#333333) for primary text and Graphite (#545454) for secondary text and details.
- Use Light Ash (#e5e7eb) for all primary borders and dividers to ensure subtle visual separation.
- Employ a 9999px border-radius for all primary and hero action buttons to achieve a soft, approachable pill shape.
- Utilize Accent Blue (#2c70dd) for all crucial interactive elements and actionable links to draw attention.
- Apply 25px horizontal padding and 17px vertical padding to content blocks for consistent 'comfortable' density.
- Ensure section transitions primarily use 'Cloud White' (#ffffff) backgrounds, maintaining a clean, expansive aesthetic.

### Don't
- Avoid using highly saturated colors for backgrounds; maintain the near-achromatic palette for large surfaces.
- Do not deviate from the Sen typeface; a single family ensures typographic consistency even with varied weights and sizes.
- Refrain from introducing custom shadow effects; the system relies on flat design with subtle border colors for depth.
- Do not use square or sharp-cornered buttons or primary UI elements; maintain a radius of at least 6.26px.
- Avoid excessive text density; leverage the comfortable spacing (minimum 4px element gap) and ample line heights.
- Do not use dark backgrounds for main content areas; reserve them for specific, high-contrast CTA buttons if needed.
- Do not introduce gradients; the design relies on solid colors for its clean, precise aesthetic.

## Imagery

The visual language is UI-dominant with selective, abstract background graphics. Product screenshots are central, depicting the application across multiple devices (desktop, tablet, mobile), presented with a slight perspective. These images are treated without borders and are accompanied by playful, abstract wave patterns and small, scattered red shapes in the background, which introduce a subtle softness and dynamism against the otherwise clean UI. Icons are simple, outlined, and monochromatic, aligning with the overall minimalist aesthetic.

## Layout

The page adheres to a max-width 1247px centered content model, with ample vertical whitespace between sections. The hero section features a prominent, centered headline and subtext, followed by centered call-to-action buttons. Below the hero, content often includes device mockups showcasing the product, suggesting a product-focused, visually driven approach. Navigation is a sticky top bar with text links and two distinct pill-shaped buttons. The overall rhythm is spacious and airy, guiding the eye through information without feeling cluttered, using a consistent vertical pacing of 50px between major sections.

## Agent Prompt Guide

### Quick Color Reference
- Text (Primary): #333333 (Deep Slate)
- Background (Page): #ffffff (Cloud White)
- Call To Action (Button Text): #ffffff (Cloud White)
- Border (Default): #e5e7eb (Light Ash)
- Accent (Interactive Blue): #2c70dd (Accent Blue)

### 3-5 Example Component Prompts
1. **Create a Hero Section**: Centered headline 'Your memory atlas' using Sen weight 700 at 56px, color #333333. Subtext 'A thoughtfully crafted super app for your personal knowledge management.' using Sen weight 400 at 17px, color #545454. Below, place a 'Download for Mac' button with background #333333, text #ffffff, 9999px border-radius, and 25px horizontal padding (implied). Section background: #ffffff.
2. **Generate a Header Navigation Bar**: Left-aligned 'Memotron' logo. Right-aligned navigation links 'Resources', 'Pricing', 'Compare', 'Extension', 'Discord' using Sen weight 400 at 16px, color rgba(84, 84, 84, 0.8). Include a square icon button (implied: background #ffffff, border #e5e7eb, 12.53px radius, 25px padding) and a 'Go to web app' button with background #333333, text #ffffff, 9999px border-radius, and 25px padding (implied). Height 76px, background #ffffff.
3. **Design a Standard Button**: Text 'Learn More' using Sen weight 500 at 16px, color #333333. Background #ffffff, border #e5e7eb, 12.53px border-radius, 25px padding on all sides.

## Similar Brands

- **Notion** — Employs a clean, minimalist aesthetic with ample whitespace and a focus on legible typography for knowledge management.
- **Obsidian** — Prioritizes a clear, functional UI with a strong emphasis on content, minimal ornamentation, and a single, elegant typeface.
- **Linear** — Utilizes a highly refined, almost monochrome design with precise typography and subtle interactive elements, favoring clarity over heavy branding.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-cloud-white: #ffffff;
  --color-faint-fog: #f9f9fb;
  --color-polar-mist: #eff0f6;
  --color-light-ash: #e5e7eb;
  --color-graphite: #545454;
  --color-deep-slate: #333333;
  --color-accent-blue: #2c70dd;
  --color-accent-green: #24b26d;

  /* Typography — Font Families */
  --font-sen: 'Sen', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.75;
  --text-body-sm: 15px;
  --leading-body-sm: 1.75;
  --text-heading-sm: 19px;
  --leading-heading-sm: 1.5;
  --text-heading: 22px;
  --leading-heading: 1.25;
  --text-heading-lg: 36px;
  --leading-heading-lg: 1.25;
  --text-display: 44px;
  --leading-display: 1.07;
  --text-display-lg: 56px;
  --leading-display-lg: 1.07;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-13: 13px;
  --spacing-17: 17px;
  --spacing-21: 21px;
  --spacing-25: 25px;
  --spacing-29: 29px;
  --spacing-33: 33px;
  --spacing-38: 38px;
  --spacing-50: 50px;
  --spacing-67: 67px;
  --spacing-84: 84px;
  --spacing-90: 90px;
  --spacing-95: 95px;
  --spacing-134: 134px;

  /* Layout */
  --page-max-width: 1247px;
  --section-gap: 50px;
  --card-padding: 25px;
  --element-gap: 4px;

  /* Border Radius */
  --radius-md: 6.26325px;
  --radius-xl: 12.5265px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-pills: 9999px;
  --radius-buttons: 12.53px;
  --radius-default: 6.26px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-cloud-white: #ffffff;
  --color-faint-fog: #f9f9fb;
  --color-polar-mist: #eff0f6;
  --color-light-ash: #e5e7eb;
  --color-graphite: #545454;
  --color-deep-slate: #333333;
  --color-accent-blue: #2c70dd;
  --color-accent-green: #24b26d;

  /* Typography */
  --font-sen: 'Sen', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.75;
  --text-body-sm: 15px;
  --leading-body-sm: 1.75;
  --text-heading-sm: 19px;
  --leading-heading-sm: 1.5;
  --text-heading: 22px;
  --leading-heading: 1.25;
  --text-heading-lg: 36px;
  --leading-heading-lg: 1.25;
  --text-display: 44px;
  --leading-display: 1.07;
  --text-display-lg: 56px;
  --leading-display-lg: 1.07;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-13: 13px;
  --spacing-17: 17px;
  --spacing-21: 21px;
  --spacing-25: 25px;
  --spacing-29: 29px;
  --spacing-33: 33px;
  --spacing-38: 38px;
  --spacing-50: 50px;
  --spacing-67: 67px;
  --spacing-84: 84px;
  --spacing-90: 90px;
  --spacing-95: 95px;
  --spacing-134: 134px;

  /* Border Radius */
  --radius-md: 6.26325px;
  --radius-xl: 12.5265px;
  --radius-full: 9999px;
}
```