# Opal Design System

> High-contrast technical density anchored by deep oceanic teals and condensed architectural headlines.

**Source:** https://opal.dev | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Opal employs a "Deep Sea" monochrome palette where the primary visual weight is carried by `#074055` (Deep Teal) and `#112b37` (Dark Navy). The system is defined by high-density information layouts using **Sofia Sans Condensed** for technical, high-impact headlines and **SF Pro Display** for precise UI and body copy. Buttons and interactive surfaces utilize a vibrant primary teal `#0c7997` or high-contrast navy pills. Layouts alternate between stark white `#ffffff` canvases and full-bleed dark teal sections, maintaining a "programmable" aesthetic through sharp 0px or tight 8px radii and generous 120px vertical section spacing.

## Signature DNA
1. **Condensed Display Hierarchy** (Uses Sofia Sans Condensed at weights 500-700 with tight tracking to create a "technical manual" feel on headlines ranging from 38px to 128px).
2. **Oceanic Monochrome Inversion** (Systematically flips between white backgrounds with dark text and deep teal `#074055` backgrounds with white text to separate product features from marketing narratives).
3. **Pill-and-Sharp Geometry** (Interacts sharp-edged section containers with 8px-12px rounded interactive controls and buttons).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | 117 | 0.8 | Computed Style |
| `{color.ink}` | `#000000` | Primary text and dark UI elements | 326 | 0.8 | Computed Style |
| `{color.neutral.muted}` | `#525252` | Secondary body text | 15 | 0.8 | Computed Style |
| `{color.canvas.soft}` | `#f7f7f7` | Subtle section backgrounds | 6 | 0.6 | Computed Style |
| `{color.canvas.accent}` | `#edfcfc` | Pricing card highlight background | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary.deep}` | `#074055` | Brand signature surface and text | 305 | 0.8 | Computed Style |
| `{color.primary}` | `#0c7997` | Primary CTA background | 50 | 0.8 | Computed Style |
| `{color.navy}` | `#112b37` | Dark mode surfaces and buttons | 32 | 0.8 | Computed Style |
| `{color.link}` | `#0000ee` | Standard text links | 146 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Sofia Sans Condensed | 500, 600, 700 | Display & Headings | Sofia Sans Condensed (Google) | OFL |
| SF Pro Display | 300, 400, 500, 600, 700 | Body & UI Labels | Inter | Proprietary |
| Denim Regular | 400, 700 | Secondary Headings | Roboto | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 128px | 150px | 1px | 700 | Hero 404/Display | `h1.framer-text` |
| `{type.display.lg}` | 56px | 61.6px | -0.5px | 500 | Main Hero Headlines | `h1.framer-styles-preset-aa6dw3` |
| `{type.display.md}` | 48px | 48px | -0.5px | 600 | Section Headers | `h2.framer-styles-preset-aryo8m` |
| `{type.heading.md}` | 38px | 41.8px | 0.5px | 600 | Feature Titles | `h3.framer-styles-preset-h7skf2` |
| `{type.heading.sm}` | 28px | 32px | 1px | 500 | Sub-section Headers | `h4.framer-styles-preset-1625h6` |
| `{type.body.lg}` | 20px | 28px | normal | 400 | Intro Paragraphs | `p.framer-styles-preset-1gphmzy` |
| `{type.body.md}` | 16px | 22.4px | 0.25px | 400 | Standard Body | `p.framer-styles-preset-51ptsd` |
| `{type.body.sm}` | 14px | 15px | 0.25px | 300 | Captions/Muted UI | `p.framer-styles-preset-1abouki` |
| `{type.label.caps}` | 12px | 14px | 1.5px | 700 | Overlines/Badges | `p.framer-styles-preset-39qdzd` |

### Principles
1. **Condensed for Impact**: All primary headings must use Sofia Sans Condensed to maintain the "security infrastructure" aesthetic.
2. **Optical Tracking**: Display sizes (56px+) use negative tracking (-0.5px), while labels (12px) use aggressive positive tracking (1.5px) for legibility.
3. **Weight Contrast**: Pair Light (300) body text with Bold (700) labels to create clear information density.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 94 |
| `{space.sm}` | 16px | 38 |
| `{space.md}` | 32px | 10 |
| `{space.lg}` | 64px | 9 |
| `{space.section}` | 120px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp cards | 637 occurrences |
| `{radius.sm}` | 8px | Buttons, interactive cards | Observed on CTA components |
| `{radius.md}` | 12px | Hover states, specific UI panels | 18 occurrences |
| `{radius.lg}` | 32px | Large feature panels | 5 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 15px 25px 0px` | Floating feature cards | Card component |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Request a Demo")
**Pages observed:** All
**Spec:** Background `{color.navy}` (#112b37) | Text `{color.canvas}` (#ffffff) | Radius 8px | Padding 8px 16px | Typography SF Pro Semibold 16px
**States observed:** Default: Captured | Hover: Not captured

#### Ghost Button
**Role:** Secondary actions
**Pages observed:** All
**Spec:** Background transparent | Text `{color.link}` (#0000ee) | Border 0px | Radius 8px | Padding 8px 16px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card (Dark)
**Role:** Highlighting technical capabilities
**Pages observed:** All
**Spec:** Background `{color.navy}` (#112b37) | Text `{color.link}` (#0000ee) | Radius 8px | Padding 8px 16px
**States observed:** Default: Captured

#### Section Container
**Role:** Major page divisions
**Pages observed:** All
**Spec:** Background `{color.primary.deep}` (#074055) | Radius 0px | Padding 120px 64px
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Tier selection
**Pages observed:** `/pricing`
**Spec:** Background `{color.canvas.accent}` (#edfcfc) | Radius 4px | Padding 31px 18px
**States observed:** Default: Captured

#### Floating UI Card
**Role:** Interactive demo elements
**Pages observed:** Homepage
**Spec:** Background `{color.canvas}` (#ffffff) | Shadow `{shadow.card}` | Radius 8px | Padding 8px 16px
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Gutter | 120px |
| Column Gap | 24px |

## Do's
- Use `#074055` for large background sections to establish brand authority.
- Apply `Sofia Sans Condensed` to all headers above 24px.
- Maintain a 120px vertical rhythm between major content blocks.
- Use 8px border radius for interactive elements (buttons, inputs).
- Ensure high contrast by using white text on deep teal backgrounds.

## Don'ts
- **Wrong:** Using a generic sans-serif for headlines. **Right:** Sofia Sans Condensed. **Reason:** The condensed face is the primary brand identifier.
- **Wrong:** Using `#0c7997` (Primary Teal) as a page background. **Right:** Use `#074055` (Deep Teal). **Reason:** The lighter teal is reserved for buttons and accents.
- **Wrong:** Applying large border radii (>12px) to main section containers. **Right:** Keep section containers at 0px.
- Do not use standard blue `#0000ee` for primary buttons; it is reserved for text links.

## Similar brands
- Cloudflare (Technical density, blue-heavy palette)
- HashiCorp (Architectural typography, infrastructure focus)
- Vercel (High contrast monochrome, sharp geometry)

## Quick start

```css
/* CSS Variables */
:root {
  --opal-primary-deep: #074055;
  --opal-primary: #0c7997;
  --opal-navy: #112b37;
  --opal-canvas: #ffffff;
  --opal-font-display: "Sofia Sans Condensed", sans-serif;
  --opal-font-body: "SF Pro Display", sans-serif;
  --opal-radius-interactive: 8px;
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Mobile-specific typography scaling for the 128px display size was not sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://opal.dev | 1440px | 2026-06-06 |
| Pricing | https://opal.dev/pricing | 1440px | 2026-06-06 |
| About | https://opal.dev/about | 1440px | 2026-06-06 |