# Drawboard Design System

> High-contrast architectural precision anchored by deep navy ink and vibrant lime accents on a clean, structured canvas.

**Source:** https://drawboard.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Drawboard utilizes a "monochrome-plus" system where a deep navy "Ink" (#14234b) provides foundational structure against a light gray canvas (#f6f7f8). The primary energetic driver is a high-visibility Lime (#5ae284), used exclusively for primary actions and key brand highlights. Typography is led by Roobert, a geometric sans-serif that maintains a professional yet approachable technical feel across a wide scale from 12px captions to 56px display headers. The system relies on generous vertical spacing (up to 60px) and a mix of sharp 0px corners for layout containers and ultra-soft 50px pill shapes for interactive elements.

## Signature DNA
1. **The Ink & Lime Contrast:** The pairing of `--ink` (#14234b) and `--lime` (#5ae284) creates a "high-lighter on blueprint" aesthetic that distinguishes functional UI from brand-led actions.
2. **Pill-Shaped Interactivity:** All primary buttons and high-level navigation elements utilize a 50px radius, contrasting against the 0px sharp edges of the main section containers.
3. **Roobert Geometry:** The consistent use of Roobert across all tiers, specifically at weight 600 for display and 400 for technical body copy, provides a unified architectural voice.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--ink` | `#14234b` | Primary text, dark button backgrounds, borders | 122 | 1.0 | CSS Variable |
| `--bg-section` | `#f6f7f8` | Page background, section alternating bands | 7 | 1.0 | CSS Variable |
| `--neutral-1` | `#121619` | Footer background, high-contrast surfaces | 2 | 1.0 | CSS Variable |
| `--neutral-3` | `#697077` | Secondary/Muted body text | 53 | 1.0 | CSS Variable |
| `white` | `#ffffff` | Primary surface background, button text | 44 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--lime` | `#5ae284` | Primary CTA background, success indicators | 22 | 1.0 | CSS Variable |
| `--lime-lighter` | `#cfffdc` | Decorative background (pricing) | 2 | 1.0 | Decorative Only |
| `--aqua-lighter` | `#d1fbff` | Decorative background (pricing) | 1 | 1.0 | Decorative Only |
| `--carmine-lightest` | `#ffebef` | Decorative background (hero) | 1 | 1.0 | Decorative Only |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| Success | `#5ae284` | Checkmarks, positive status (Lime) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Roobert | 300, 400, 500, 600, 700 | Heading, UI, Body | Inter | Proprietary |
| Inter | 300 | Secondary Body | Inter | SIL OFL |
| Gt america mono | 400 | Technical/Mono | JetBrains Mono | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-lg` | 56px | 61.6px | normal | 600 | Hero/CTA Titles | `div.typo-cta-title` |
| `heading-md` | 25px | 32px | normal | 400 | Blog item names | `a.typo-blogitem-name` |
| `heading-sm` | 22px | 30.8px | normal | 400 | Product titles | `h2.typo-productsexpanded-title` |
| `body-lg` | 20px | 32px | normal | 400 | Feature paragraphs | `p.paragraph-14` |
| `body-md` | 18px | 25.2px | normal | 400 | Pricing body text | `div.typo-bodymedium--pricing` |
| `subheading` | 16px | 24px | normal | 500 | Footer headings | `h2.footer-heading` |
| `body-sm` | 14px | 20px | normal | 500 | Nav/Announcement | `section#announcement` |
| `caption` | 12px | 20px | normal | 400 | Small metadata | `div.grey-bg` |

### Principles
1. **Heading Weight Consistency:** Primary display headers use weight 600 for impact, while sub-headers (H2/H3) often drop to weight 400 or 500 to maintain legibility.
2. **Generous Line Height:** Body text maintains a 1.4x to 1.6x line height ratio (e.g., 20px size / 32px height) to ensure readability in technical contexts.
3. **Monospace for Metadata:** Gt America Mono is reserved for technical annotations and specific metadata categories.

## Spacing
**Base unit:** 10px (most frequent increment)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 5px | 4 |
| `space-sm` | 10px | 61 |
| `space-md` | 20px | 48 |
| `space-lg` | 30px | 27 |
| `space-xl` | 40px | 19 |
| `space-section`| 60px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-sharp` | 0px | Section containers, layout blocks | 230 occurrences |
| `radius-sm` | 8px | Feature cards, pricing cards | 24 occurrences |
| `radius-md` | 12px | Blog/Content cards | 12 occurrences |
| `radius-pill` | 50px | Buttons, primary navigation CTAs | 14 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Default section state | `radius: 0px` |
| `raised` | `rgba(0, 0, 0, 0.06) 0px 2px 5px 0px` | Hoverable feature cards | Pricing page cards |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action (Download, Try for free)
**Pages observed:** Home, Pricing
**Spec:** Background: `#5ae284` / Text: `#14234b` / Radius: `50px` / Padding: `4px 20px` / Typography: `Roobert 15px`
**States observed:** Default: Captured | Hover: Not captured

#### Rounded Button (Ink)
**Role:** Secondary high-contrast action (Demo, Contact Us)
**Pages observed:** Home, Pricing
**Spec:** Background: `#14234b` / Text: `#ffffff` / Radius: `50px` / Padding: `4px 20px` / Typography: `Roobert 15px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or blog items
**Pages observed:** Home
**Spec:** Background: `#ffffff` / Border: `1px rgba(0, 0, 0, 0.06)` / Radius: `8px` / Padding: `30px` / Shadow: `0px 2px 5px rgba(0,0,0,0.06)`
**States observed:** Default: Captured

#### Footer
**Role:** Global site navigation and legal
**Pages observed:** Home, Pricing
**Spec:** Background: `#121619` / Text: `#ffffff` (links) / Padding: `60px 0px 40px` / Typography: `Roobert 14px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Plan selection and feature lists
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` / Border: `2px #14234b` / Radius: `8px` / Padding: `15px 40px`
**States observed:** Default: Captured

#### Announcement Bar
**Role:** Top-level site-wide alerts
**Pages observed:** Home, Pricing
**Spec:** Background: `#f6f7f8` / Text: `#14234b` / Typography: `Roobert 14px` / Height: `~40px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px (approx) |
| Section Gap | 60px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px; buttons become full-width. |

## Imagery & decoration
Drawboard uses clean, high-resolution product screenshots and technical illustrations. Decorative elements include soft pastel background washes (Aqua, Carmine, Lime) behind specific content blocks to create visual separation without using hard borders.

## Do's
- Use `#14234b` (Ink) for all primary body text to ensure maximum contrast.
- Apply `50px` border radius to all interactive buttons.
- Use `#5ae284` (Lime) exclusively for the most important action on a page.
- Maintain `60px` vertical spacing between major content sections.
- Pair Roobert with Gt America Mono for technical specifications.

## Don'ts
- **Wrong:** Using `#5ae284` for body text. **Right:** Use `#14234b`. **Reason:** Lime fails contrast accessibility on light backgrounds for small text.
- **Wrong:** Applying `50px` radius to content cards. **Right:** Use `8px` or `12px`. **Reason:** Pill shapes are reserved for interactive triggers.
- **Wrong:** Using pure black `#000000` for primary text. **Right:** Use `--ink` (#14234b). **Reason:** The brand identity is built on the navy ink foundation.

## Similar brands
- Linear (High contrast, technical precision)
- Framer (Geometric sans, clean sectioning)
- Miro (Canvas-based tool, structured but approachable)

## Quick start

### CSS Custom Properties
```css
:root {
  --ink: #14234b;
  --lime: #5ae284;
  --bg-section: #f6f7f8;
  --neutral-1: #121619;
  --neutral-3: #697077;
  --radius-pill: 50px;
  --radius-card: 8px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-ink: #14234b;
  --color-lime: #5ae284;
  --color-canvas: #f6f7f8;
  --font-roobert: "Roobert", sans-serif;
  --radius-pill: 50px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Drawboard's Lime background and Ink text with a pill-shaped radius."
- "Design a feature card with an 8px border radius, a subtle 2px shadow, and Roobert 20px heading."
- "Build a section layout using the #f6f7f8 background and 60px vertical padding."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the static evidence.
- Specific mobile breakpoint transitions for the pricing table were not fully analyzed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://drawboard.com | 1440px | 2026-06-06 |
| Pricing | https://drawboard.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://drawboard.com | 390px | 2026-06-06 |