---
version: alpha
name: Cecilia Materials
description: Deep-tech industrial minimalism — a near-white canvas with charcoal ink and a single saturated navy accent, large confident sans-serif headlines, sharp corners with whisper-rounded buttons, and a documentary editorial tone for turning plastic waste into carbon materials and clean hydrogen.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f7f8"
  surface-muted: "#eef0f2"
  ink: "#16191d"
  ink-pure: "#000000"
  ink-secondary: "#4b5560"
  ink-muted: "#7a838d"

  # Brand accent — navy, the one saturated color
  primary: "#0f2a52"
  primary-hover: "#0a1f3d"
  accent: "#1f4f9c"
  link: "#1f4f9c"

  # Neutral scale
  gray-900: "#16191d"
  gray-700: "#3a424b"
  gray-500: "#7a838d"
  gray-300: "#c4cad0"
  gray-200: "#dde1e5"
  gray-100: "#eef0f2"
  gray-50: "#f6f7f8"

  # Borders + focus
  border: "#dde1e5"
  border-strong: "#c4cad0"
  focus: "#1f4f9c"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Outfit, Inter, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.8px
  display:
    fontFamily: "Outfit, Inter, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.2px
  section-heading:
    fontFamily: "Outfit, Inter, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Outfit, Inter, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Outfit, Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 10px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.link}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  badge:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.gray-100}"
  card-metric:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.display}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.focus}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Cecilia Materials Design System

## Overview

Cecilia Materials presents itself as serious deep-tech infrastructure: a company turning plastic waste into advanced carbon materials and clean hydrogen using microwave technology, with NASA and Department of Energy partnerships behind it. The design system matches that credibility with restraint. The canvas is overwhelmingly white (`{colors.background}`), the ink is a charcoal that reads as black without the harshness (`{colors.ink}`), and the entire palette is achromatic except for one saturated navy (`{colors.primary}`) that carries every interactive moment. Nothing competes for attention except the work itself.

Typography does the heavy lifting. Headlines are large and confident, set in a geometric sans (`Outfit`) with measured negative tracking that gives the hero a sense of engineered precision without veering into the extreme compression of a developer tool. Body copy switches to `Inter` at generous line-heights, treating long-form explanation of a hard scientific process as something to be read, not skimmed. This pairing — geometric display over humanist body — is the editorial spine of the page: it feels like a science documentary's title card sitting above its narration.

The shape language is deliberately sharp. Sections stack edge-to-edge with abundant whitespace, corners stay crisp, and only buttons and cards earn a whisper of rounding (`{rounded.sm}`–`{rounded.lg}`). Color is functional, never decorative: navy marks the call to action, the link, and the metric — the three places where the eye should land. Grayscale imagery and partner logos provide the documentary texture; the chrome stays neutral so the photography and the numbers carry the emotion.

**Key Characteristics:**
- Near-white canvas (`{colors.background}`) with charcoal ink (`{colors.ink}`) — clean, clinical, credible
- A single saturated navy accent (`{colors.primary}`) for CTAs, links, and metrics — color as wayfinding, never decoration
- Geometric `Outfit` display paired with humanist `Inter` body — documentary title-card over narration
- Confident large headlines (up to 60px) with measured negative tracking
- Sharp corners everywhere; only buttons and cards get a small radius
- Generous whitespace and edge-to-edge full-width sections
- Eyebrow labels in tracked-out uppercase to frame sections
- Grayscale documentary imagery; chrome stays neutral so photos and numbers carry weight

## Colors

### Primary
- **Cecilia Navy** (`{colors.primary}`): The single brand accent — primary CTA fill, the "let's talk" button, and the metric color.
- **Charcoal Ink** (`{colors.ink}`): Primary text and headings. Warm-black, not pure black.
- **Pure White** (`{colors.background}`): Page background and card surfaces.

### Accent & Interactive
- **Accent Blue** (`{colors.accent}`): Brighter navy for links and inline emphasis.
- **Link** (`{colors.link}`): Inline links and ghost-button text.
- **Primary Hover** (`{colors.primary-hover}`): Darkened navy on CTA hover.
- **Focus** (`{colors.focus}`): Keyboard focus ring on interactive elements.

### Ink Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting paragraph text, captions with weight.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary metadata, disabled labels.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Headings, primary text.
- **Gray 700** (`{colors.gray-700}`): Secondary copy.
- **Gray 500** (`{colors.gray-500}`): Muted text, placeholders.
- **Gray 300** (`{colors.gray-300}`): Strong borders, dividers.
- **Gray 200** (`{colors.gray-200}`): Standard borders.
- **Gray 100** (`{colors.gray-100}`): Soft surface tint.
- **Gray 50** (`{colors.gray-50}`): Subtle section background.

### Surfaces & Borders
- **Surface Soft** (`{colors.surface-soft}`): Alternating section background.
- **Surface Muted** (`{colors.surface-muted}`): Badge/eyebrow chip background.
- **Border** (`{colors.border}`): Default card and divider line.
- **Border Strong** (`{colors.border-strong}`): Secondary button and input outline.

## Typography

### Font Family
- **Display**: `Outfit`, with fallbacks: `Inter, Arial, sans-serif` — geometric sans for headlines.
- **Body**: `Inter`, with fallbacks: `Arial, sans-serif` — humanist sans for reading and UI.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 60px hero headline — confident, lightly compressed |
| `display` | Large section openers, metric numbers |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, lead-ins |
| `card-title` | Card and feature headings |
| `body-large` | Introductions, lead paragraphs |
| `body` | Standard reading text |
| `body-small` | UI text, captions with size |
| `button-ui` | Buttons and links |
| `eyebrow` | Tracked-out uppercase section labels |
| `caption` | Metadata, image credits |

### Principles
- **Two-family contrast**: Geometric `Outfit` for display, humanist `Inter` for body — the documentary title-card effect.
- **Measured compression**: Headlines use negative tracking (-1.8px at 60px) for precision, never the extreme tracking of dev-tool brands.
- **Read, don't skim**: Body line-heights stay generous (1.60–1.65) because the science needs explaining.
- **Eyebrows frame sections**: 13px uppercase with +1.5px tracking opens content blocks.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. Section rhythm leans on the large end of the scale (`{spacing.3xl}`–`{spacing.4xl}`).

### Grid & Container
- Max content width: approximately 1200px
- Hero: left or centered single column with generous top padding
- Feature sections: 2–3 column grids
- Full-width edge-to-edge sections with alternating `{colors.surface-soft}` backgrounds

### Whitespace Philosophy
- **Documentary breathing room**: Heavy vertical padding between sections lets imagery and headlines stand alone.
- **Neutral chrome, loud content**: The interface recedes so grayscale photography and metric numbers carry the message.
- **Section rhythm**: White alternates with `{colors.surface-soft}`; separation comes from background tint and spacing, with thin `{colors.border}` dividers where needed.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Border (Level 1) | `1px solid {colors.border}` | Cards, dividers |
| Tinted (Level 1b) | `{colors.surface-soft}` fill | Alternating sections, soft cards |
| Subtle Lift (Level 2) | `0 1px 3px rgba(16,25,33,0.06)` | Hovered cards |
| Focus (Accessibility) | `2px solid {colors.focus}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Depth is almost entirely flat. Cards sit on borders and background tints rather than shadows. Where a lift is needed (card hover), it is whisper-level. The system trusts whitespace and the single navy accent to create hierarchy.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Sections, ghost buttons, images |
| `xs` | 2px | Inline tags |
| `sm` | 4px | Buttons, inputs |
| `md` | 6px | Small containers |
| `lg` | 10px | Cards, image containers |
| `pill` | 9999px | Eyebrow chips, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Navy fill (`{colors.primary}`), white text, `{rounded.sm}`. The default CTA ("let's talk").
- **`button-secondary`** — White surface with `{colors.border-strong}` outline.
- **`button-ghost`** — Navy text-link with no chrome, square corners ("learn more").

### Badges
- **`badge`** — Muted chip with tracked uppercase eyebrow text, full pill radius.

### Cards
- **`card`** — White surface, 1px `{colors.border}`, `{rounded.lg}`, generous 32px padding.
- **`card-soft`** — Tinted `{colors.surface-soft}` variant for alternating layouts.
- **`card-metric`** — Large navy display number over neutral description — the proof points (e.g. carbon yield, partner count).

### Inputs
- **`input`** — White surface, `{colors.border-strong}` outline. Focus swaps to `{colors.focus}` with a 2px ring.

### Navigation
- **`nav-bar`** — White header, `{colors.ink}` links at 15px weight 500, navy CTA right-aligned, thin bottom border.

### Distinctive Components
- **Eyebrow + headline pairs**: Tracked uppercase label above a large geometric headline opens every section.
- **Metric proof points**: Large navy display numbers over neutral descriptions, used for scientific/partnership credibility.
- **Documentary media blocks**: Full-width grayscale imagery and video with minimal chrome.
- **Partner logo grid**: NASA / DOE-style logos in neutral grayscale.

## Do's and Don'ts

### Do
- Keep the canvas white and ink charcoal (`{colors.ink}`, not pure black)
- Reserve navy (`{colors.primary}`) for CTAs, links, and metrics only
- Pair `Outfit` display with `Inter` body
- Use measured negative tracking on large headlines (-1.8px at 60px)
- Keep corners sharp; allow only small radii on buttons and cards
- Open sections with a tracked uppercase eyebrow
- Let grayscale imagery and metric numbers carry the emotion

### Don't
- Don't introduce a second accent color — navy is the only saturated hue
- Don't use heavy shadows — depth is borders, tints, and whitespace
- Don't round corners aggressively; this is a sharp, industrial system
- Don't set body text in `Outfit` — it is a display face
- Don't tint the chrome; neutrality is what makes the navy land
- Don't crowd sections — whitespace is structural

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced padding, hero scales down |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1200px | Standard multi-column layout |
| Large Desktop | >1200px | Centered, maximum content width, generous margins |

### Touch Targets
- Buttons use 12px vertical / 24px horizontal padding
- Navigation links at 15px with comfortable spacing
- Badges have 12px horizontal padding

### Collapsing Strategy
- Hero: 60px → scales down, maintains negative tracking proportionally
- Navigation: horizontal links + CTA → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Media blocks: maintain aspect ratio, full-bleed on mobile
- Section spacing: 96px+ → ~48px on mobile

### Image Behavior
- Grayscale documentary imagery maintains treatment at all sizes
- Partner logos: grid → 2-column → stacked
- Full-width media stays edge-to-edge

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Cecilia Navy `{colors.primary}`
- Background: Pure White `{colors.background}`
- Heading text: Charcoal Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Border: `1px solid {colors.border}`
- Link: `{colors.link}`
- Focus ring: `{colors.focus}`

### Example Component Prompts
- "Create a hero on white. Eyebrow label 13px Inter weight 600, uppercase, +1.5px tracking, `{colors.ink-secondary}`. Headline 60px Outfit weight 600, line-height 1.05, letter-spacing -1.8px, `{colors.ink}`. Subtitle 19px Inter weight 400, `{colors.ink-secondary}`. Navy CTA (`{colors.primary}`, 4px radius, 12px 24px) and ghost link (`{colors.link}`, no chrome)."
- "Design a metric card: white surface, 1px `{colors.border}`, 10px radius, 32px padding. Number 44px Outfit weight 600 in `{colors.primary}`; label 15px Inter `{colors.ink-secondary}`."
- "Build an eyebrow badge: `{colors.surface-muted}` background, `{colors.ink-secondary}` text, pill radius, 4px 12px padding, 13px Inter weight 600 uppercase tracked."
- "Create navigation: white header, `{colors.ink}` links at 15px weight 500, navy 'let's talk' CTA right-aligned, 1px `{colors.border}` bottom."

### Iteration Guide
1. Navy is the only accent — if you add a second color, you have broken the system
2. Sharp corners are the default; small radius on buttons/cards only
3. Outfit for display, Inter for body — never mix the roles
4. Letter-spacing scales with size: -1.8px at 60px, -0.8px at 32px, normal at body
5. Depth is flat — borders, tints, and whitespace, not shadows
6. Open every section with a tracked uppercase eyebrow over a large headline

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Cecilia Materials. Brand names and trademarks belong to their respective owners.