# Callsine Design System

> A high-contrast, dark-first canvas punctuated by crisp mint accents and technical monospace typography.

**Source:** https://callsine.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** none

## TL;DR
Callsine relies on a stark `#0b0c0e` dark foundation, using `#ffffff` for high-contrast typography. The brand voltage comes from a vibrant mint (`#52feca`) used sparingly for primary actions and accents, alongside a technical typographic pairing of Aeonik Regular and Fragment Mono. The layout is structured and grid-like, relying on sharp `0px` or subtle `6px` to `15px` radii for cards, with no visible drop shadows, creating a flat, digital-native aesthetic.

## Signature DNA
1. **Technical Monospace Accents** (Fragment Mono at 14px and 12px for captions and step indicators reinforces the AI agent technical feel; observed on homepage and about page)
2. **Mint Green Voltage** (`#52feca` serves as the high-visibility CTA and accent color against the `#0b0c0e` dark canvas; observed on homepage and pricing)
3. **Flat, Shadowless Surfaces** (Cards and panels use solid `#0b0c0e` or `rgba(255, 255, 255, 0.05)` backgrounds with `0px` or `15px` radii, avoiding elevation shadows entirely; observed across all pages)

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-foundation-white` | `#ffffff` | text, surface_bg | 226 | 0.8 | computed_style |
| `color-foundation-black` | `#000000` | text, surface_bg | 152 | 0.8 | computed_style |
| `color-foundation-dark` | `#0b0c0e` | surface_bg | 33 | 0.8 | computed_style |
| `color-foundation-light` | `#f7f6f8` | text, surface_bg | 20 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-accent-primary` | `#0000ee` | text | 23 | 0.8 | computed_style |
| `color-accent-mint` | `#52feca` | surface_bg, text | 11 | 0.8 | computed_style |
| `color-accent-lavender` | `#ece4ff` | text | 9 | 0.6 | computed_style |
| `color-accent-coral` | `#ff7954` | text, surface_bg | 6 | 0.6 | computed_style |
| `color-accent-purple` | `#af8bff` | text | 4 | 0.6 | computed_style |
| `color-accent-blue` | `#8bacff` | text | 3 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Aeonik Regular | 400 | display, body | Inter | Commercial |
| Fragment Mono | 400 | mono, caption | JetBrains Mono | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `text-display-xl` | 72px | 75.6px | -2.16px | 400 | Hero headlines | `p.framer-text` |
| `text-display-lg` | 64px | 64px | -0.64px | 400 | Section headlines | `p.framer-text` |
| `text-display-md` | 56px | 58.8px | -1.12px | 400 | Secondary headlines | `p.framer-text` |
| `text-display-sm` | 48px | 57.6px | -0.48px | 400 | Feature headlines | `p.framer-text` |
| `text-heading-sm` | 22px | 33px | -0.22px | 400 | Card titles | `p.framer-text` |
| `text-body-lg` | 18px | 27px | 0.18px | 400 | Lead paragraphs | `p.framer-text` |
| `text-body-md` | 16px | 24px | 0.16px | 400 | Default body | `p.framer-text` |
| `text-body-sm` | 14px | 21px | 0.14px | 400 | Secondary body | `p.framer-text` |
| `text-mono-sm` | 14px | 21px | normal | 400 | Technical labels | `p.framer-text` |
| `text-mono-xs` | 12px | 18px | normal | 400 | Step indicators | `p.framer-text` |

### Principles
- **Negative tracking on display:** Aeonik Regular pulls tight (-2.16px at 72px, -1.12px at 56px) to create a solid, modern typographic block.
- **Monospace for metadata:** Fragment Mono is used strictly for technical accents, step indicators, and small captions (14px and below).
- **Single weight family:** The system relies entirely on weight 400 for both Aeonik and Fragment Mono, using size and color for hierarchy rather than font weight.

## Spacing
**Base unit:** 4px

| Token | Value | Occurrences |
|---|---|---|
| `space-3` | 3px | 5 |
| `space-4` | 4px | 3 |
| `space-5` | 5px | 4 |
| `space-8` | 8px | 10 |
| `space-10` | 10px | 5 |
| `space-11` | 11px | 4 |
| `space-12` | 12px | 4 |
| `space-15` | 15px | 16 |
| `space-16` | 16px | 4 |
| `space-18` | 18px | 6 |
| `space-20` | 20px | 6 |
| `space-24` | 24px | 6 |
| `space-32` | 32px | 14 |
| `space-64` | 64px | 17 |
| `space-80` | 80px | 3 |
| `space-112` | 112px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Sharp panels, structural blocks | 349 occurrences |
| `radius-xs` | 3px | Small interactive elements | 6 occurrences |
| `radius-sm` | 4px | Inputs | 6 occurrences |
| `radius-md` | 6px | Standard cards | 17 occurrences |
| `radius-lg` | 10px | Elevated glass cards | 7 occurrences |
| `radius-xl` | 15px | Feature cards | 5 occurrences |
| `radius-pill` | 100px | Badges, rounded buttons | 16 occurrences |

## Elevation
Not captured in source. The system relies on flat colors and borders rather than drop shadows.

## Components

### Tier 1: Foundational

#### Surface Dark Base
**Role:** Primary background container for dark mode sections.
**Pages observed:** https://callsine.com, https://callsine.com/pricing, https://callsine.com/about
**Spec:** Background `#0b0c0e` / Text `#000000` / Border `0px` / Radius `0px` / Padding `112px 64px` / Shadow none
**States observed:** Default

#### Surface Transparent Action
**Role:** Ghost button or text link container.
**Pages observed:** https://callsine.com, https://callsine.com/pricing, https://callsine.com/about
**Spec:** Background `transparent` / Text `#0000ee` / Border `0px` / Radius `3px` / Padding `8px 20px` / Shadow none
**States observed:** Default

### Tier 2: Patterns

#### Card Dark Standard
**Role:** Container for feature highlights and grid items.
**Pages observed:** https://callsine.com
**Spec:** Background `#0b0c0e` / Text `#000000` / Border `0px` / Radius `15px` / Padding `32px` / Shadow none
**States observed:** Default

#### Card Glass
**Role:** Subtle elevated container on dark backgrounds.
**Pages observed:** https://callsine.com
**Spec:** Background `rgba(255, 255, 255, 0.05)` / Text `#000000` / Border `0px` / Radius `10px` / Padding `3.22073px` / Shadow none
**States observed:** Default

### Tier 3: Surface-specific

#### Mint Accent Panel
**Role:** Highlighted pricing tier or callout block.
**Pages observed:** https://callsine.com/pricing
**Spec:** Background `rgba(82, 254, 202, 0.5)` / Text `#0000ee` / Border `0px` / Radius `0px` / Padding `15px 10px` / Shadow none
**States observed:** Default

#### Pill Badge
**Role:** Step indicators and status labels.
**Pages observed:** https://callsine.com
**Spec:** Background `transparent` / Text `#000000` / Border `0px` / Radius `100px` / Padding `12px 16px` / Shadow none
**States observed:** Default

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
The brand relies on structural, technical decoration rather than photography. Backgrounds feature subtle dotted grids to reinforce the developer/agent tooling aesthetic. UI representations are abstracted into flat, dark panels with monospace data points.

## Do's
- Do use Fragment Mono for all step indicators, metadata, and technical labels.
- Do rely on `#0b0c0e` as the primary dark canvas to ensure high contrast with `#ffffff` text.
- Do use `#52feca` (mint) for primary calls to action and high-priority accents.
- Do maintain a flat hierarchy using `0px` or `15px` radii without drop shadows.
- Do apply negative letter-spacing to Aeonik Regular at display sizes (48px and above).

## Don'ts
- Don't use drop shadows for elevation; rely on background color shifts like `rgba(255, 255, 255, 0.05)`.
- Don't mix font weights; stick to 400 for both Aeonik and Fragment Mono.
- Don't use `#0000ee` as a large surface background; it is reserved for text and accents.

## Similar brands
- Linear
- Vercel
- Scale AI

## Quick start

```css
:root {
  --color-foundation-white: #ffffff;
  --color-foundation-black: #000000;
  --color-foundation-dark: #0b0c0e;
  --color-foundation-light: #f7f6f8;
  
  --color-accent-primary: #0000ee;
  --color-accent-mint: #52feca;
  --color-accent-lavender: #ece4ff;
  
  --font-display: 'Aeonik Regular', sans-serif;
  --font-mono: 'Fragment Mono', monospace;
  
  --radius-none: 0px;
  --radius-md: 6px;
  --radius-xl: 15px;
  --radius-pill: 100px;
}
```

## Agent prompt examples
- "Create a dark feature card using the `--color-foundation-dark` background and `--radius-xl`. Include a title in Aeonik Regular at 22px and a small technical label in Fragment Mono at 12px."
- "Build a pricing tier panel using a `0px` radius. Add a subtle highlight using the `--color-accent-mint` token at 50% opacity for the background."
- "Design a step indicator badge using a transparent background, `--radius-pill`, and Fragment Mono text."

## Known gaps
Hover states, focus states, and interactive transitions were not captured in the source data. Layout grid metrics and responsive breakpoints are also missing from the computed style evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://callsine.com | Desktop | 2026-06-06T05:00:26.180Z |
| Pricing | https://callsine.com/pricing | Desktop | 2026-06-06T05:00:26.180Z |
| About | https://callsine.com/about | Desktop | 2026-06-06T05:00:26.180Z |