# Stellate Design System

> Technical precision on a slate-blue canvas, anchored by geometric sans-serif typography and high-contrast functional accents.

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

## TL;DR
Stellate utilizes a sophisticated monochrome-adjacent palette dominated by Slate Blue (#3b4c6a) and Sky Blue (#608bd8) against a clean white foundation. The system is architected around **ttCommons**, a geometric sans-serif that scales from 52px display heads to 14px utility labels with consistent 550 weight "demibold" emphasis. Functional color is used sparingly but with high intent: Coral (#ff7752) and Rose (#ff4d6d) highlight specific product pillars like Security and Metrics. Components favor soft geometric radii (6px to 12px) and subtle elevation, creating a developer-centric interface that feels both robust and accessible.

## Signature DNA
1. **The Slate-to-Sky Gradient** (The transition from deep #3b4c6a backgrounds to #608bd8 primary actions defines the visual hierarchy across the homepage and pricing tiers.)
2. **Demibold Geometric Typography** (The consistent use of ttCommons at weight 550 for headings and UI labels creates a "stamped" technical authority without the aggression of a heavy bold.)
3. **Pillar-Specific Accents** (Specific hex codes like #ff7752 are reserved for distinct product modules—Security, Caching, Metrics—providing chromatic wayfinding in an otherwise cool-toned system.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | #ffffff | Page background, primary surface | 101 | 1.0 | computed_style |
| `{color.slate.900}` | #283448 | Deepest text, dark section backgrounds | 31 | 0.8 | computed_style |
| `{color.slate.50}` | #f8fafc | Subtle section backgrounds, card offsets | 12 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.slate.700}` | #3b4c6a | Primary brand color, headings, borders | 683 | 0.8 | computed_style |
| `{color.blue.500}` | #608bd8 | Primary CTA background, active links | 55 | 0.8 | computed_style |
| `{color.slate.500}` | #647696 | Secondary text, muted labels | 10 | 0.6 | computed_style |
| `{color.coral}` | #ff7752 | Security pillar accent, specific CTAs | 10 | 0.6 | computed_style |
| `{color.blue.600}` | #3e6ec1 | Pricing tier emphasis | 6 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.error}` | #ef4444 | Observed in validation states (inferred from red-text evidence) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| ttCommons | 400, 450, 550, 650, 700 | Primary Brand & UI | Inter | Proprietary |
| Fira Code | 550 | Technical/Code Snippets | Fira Code | OFL |
| Helvetica Neue | 400 | Map attribution/Utility | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 52px | 67.6px | normal | 550 | Hero Display | `p.h2-size` |
| `{type.heading.xl}` | 38px | 49.4px | normal | 550 | Section Headings | `h3` |
| `{type.heading.lg}` | 32px | 48px | normal | 450 | Sub-section Heads | `div.text-32.font-medium` |
| `{type.heading.md}` | 29px | 37.7px | normal | 550 | Feature Titles | `h3.h4-size` |
| `{type.body.lg}` | 20px | 30px | normal | 450 | Large Intro Body | `p.text-20` |
| `{type.body.md}` | 18px | 27px | normal | 450 | Default Body | `header.marketing-page` |
| `{type.body.sm}` | 15px | 22.5px | normal | 550 | Small UI/Labels | `p.text-15.font-demibold` |
| `{type.caption}` | 12px | 15px | normal | 400 | Fine Print | `p.text-12` |

### Principles
1. **Demibold is the default for emphasis.** Weight 550 is used for almost all headings and interactive labels.
2. **Generous leading for display.** Large headings maintain a 1.3x to 1.5x line-height ratio to ensure readability on dark backgrounds.
3. **Monospace for technical context.** Fira Code is strictly reserved for data-heavy or code-adjacent blocks.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 49 |
| `{space.sm}` | 16px | 50 |
| `{space.md}` | 24px | 37 |
| `{space.lg}` | 32px | 22 |
| `{space.xl}` | 48px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 6px | Buttons, Inputs | `Rounded Button` |
| `{radius.md}` | 8px | Feature Cards | `Card` |
| `{radius.lg}` | 12px | Surface Containers | `Surface` |
| `{radius.pill}` | 9999px | Badges, Tags | `Card (Pricing)` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | 0 4px 6px -1px rgba(0,0,0,0.1) | Standard Cards | Shadow evidence 1 |
| `{shadow.elevated}` | 0 10px 15px -3px rgba(0,0,0,0.1) | Hover/Modals | Shadow evidence 2 |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site actions (Schedule a demo, Get started)
**Pages observed:** stellate.co, stellate.co/pricing
**Spec:** Background `{color.blue.500}` (#608bd8) / Text `{color.white}` (#ffffff) / Radius 6px / Padding 13px 15px / Type 18px (550)
**States observed:** Default | Hover: captured

#### Text Input
**Role:** Form entry for API endpoints
**Pages observed:** stellate.co, stellate.co/pricing
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.blue.500}` (#608bd8) / Border 1px `{color.slate.500}` (#99a4bb) / Radius 6px / Padding 10px 15px
**States observed:** Default | Focus: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting product benefits
**Pages observed:** stellate.co, stellate.co/pricing
**Spec:** Background `{color.blue.500}` (#608bd8) / Text `{color.white}` (#ffffff) / Radius 8px / Padding 0px 16px / Type 15px (550)
**States observed:** Default | Hover: not captured

#### Surface Container
**Role:** Grouping related content sections
**Pages observed:** stellate.co, stellate.co/about
**Spec:** Background transparent / Border 1px `{color.slate.700}` (#d4d8e6) / Radius 12px / Padding 0px
**States observed:** Default

### Tier 3: Surface-specific
#### Pricing Badge
**Role:** Plan identification (Free, Business, Enterprise)
**Pages observed:** stellate.co/pricing
**Spec:** Background `{color.slate.500}` (#647696) / Text `{color.white}` (#ffffff) / Radius 9999px / Type 18px (550)
**States observed:** Default

#### Section Surface (Muted)
**Role:** Alternating background bands
**Pages observed:** stellate.co/pricing, stellate.co/about
**Spec:** Background `{color.slate.50}` (#f8fafc) / Text `{color.slate.700}` (#3b4c6a) / Radius 0px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px (max-w-7xl) |
| Section Padding | 24px (px-6) |
| Grid Gap | 32px (space-lg) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked feature cards, reduced display type to 32px |
| Desktop | 1440px | 3-column feature grids, 52px display type |

## Imagery & decoration
Stellate uses high-fidelity dashboard screenshots and abstract node-graph visualizations to reinforce technical capability. Decoration is limited to functional iconography (outlined, 2px stroke) and subtle background gradients in the slate-blue family.

## Do's
- Use **ttCommons 550** for all UI labels and headings.
- Apply **#608bd8** for primary call-to-action buttons.
- Use **#f8fafc** for alternating section backgrounds to maintain depth.
- Reserve **#ff7752** specifically for Security-related highlights.
- Maintain a **6px radius** on all interactive form elements.

## Don'ts
- **Wrong:** Using #3b82f6 (standard Tailwind blue) for primary buttons. 
  **Right:** Use #608bd8. 
  **Reason:** Stellate uses a desaturated custom blue to match the slate brand palette.
- **Wrong:** Setting display headings to weight 700 or 800.
  **Right:** Use weight 550.
  **Reason:** The brand identity relies on the "demibold" geometric look of ttCommons.
- Do not use pure black (#000000) for body text; use #3b4c6a for better legibility on white.

## Similar brands
- Prisma
- Apollo GraphQL
- Vercel
- Supabase

## Quick start
```css
/* CSS Variables */
:root {
  --color-slate-primary: #3b4c6a;
  --color-blue-action: #608bd8;
  --color-canvas-muted: #f8fafc;
  --font-main: "ttCommons", sans-serif;
  --radius-standard: 6px;
  --radius-surface: 12px;
}
```

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the pricing page crawl.
- Mobile navigation transition timing was not recorded.
- Success/Warning semantic tokens were inferred from text colors but not observed as dedicated alert components.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://stellate.co | 1440x900 | 2026-06-06 |
| Pricing | https://stellate.co/pricing | 1440x900 | 2026-06-06 |
| About | https://stellate.co/about | 1440x900 | 2026-06-06 |