# Scrawlr Design System

> A clean, utility-focused interface defined by high-contrast typography and a singular electric blue accent on a sterile white canvas.

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

## TL;DR
Scrawlr utilizes a "monochrome-plus-one" strategy where a high-voltage primary blue `#196aff` provides the only chromatic relief against a grayscale foundation. Typography is the primary structural driver, pairing **Montserrat** for authoritative 300px display headers with **Source Sans 3** for functional UI and body text. The system relies on a strict 4px base unit and consistent 8px corner radii for interactive controls. Surfaces are predominantly flat white `#ffffff` or light gray `#f4f6f8`, with depth provided by a single, complex multi-layered shadow rather than traditional borders.

## Signature DNA
1. **The Electric Blue Anchor** (The hex `#196aff` is used exclusively for primary actions and brand-critical links, maintaining a 4.6:1 contrast ratio against the white canvas for accessibility.)
2. **Geometric Header Contrast** (Montserrat 600 at 30px creates a hard geometric anchor for pages, immediately distinguishable from the more humanist Source Sans 3 used for content.)
3. **Soft-Control Geometry** (A universal 8px radius (`{radii.control}`) is applied to all buttons and input containers, contrasting with the 0px sharp edges of the main page containers.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Page background, button text, surface | 84 | 0.8 | computed_style |
| `{colors.ink}` | `#212529` | Primary body text, dark button text | 172 | 0.8 | computed_style |
| `{colors.gray-dark}` | `#343a40` | Secondary headings, UI labels | 65 | 0.8 | computed_style |
| `{colors.gray-muted}` | `#495057` | De-emphasized body text | 82 | 0.8 | computed_style |
| `{colors.surface-light}` | `#f4f6f8` | Card backgrounds, section fills | 35 | 0.8 | computed_style |
| `{colors.border}` | `#dee2e6` | Hairline dividers, subtle outlines | 18 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#196aff` | Primary CTAs, active states, links | 16 | 0.8 | computed_style |
| `{colors.navy}` | `#041b47` | Hero text emphasis (decorative) | 7 | 0.6 | computed_style |
| `{colors.blue-tint}` | `#f0f5fe` | Secondary button backgrounds | 4 | 0.6 | decorative_only |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Montserrat | 600 | Display Headings | Montserrat (Google) | OFL |
| Source Sans 3 | 400, 600 | UI, Body, Sub-heads | Source Sans Pro | OFL |
| Arial | 400 | System Fallback, Icons | Helvetica | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 30px | 40px | normal | 600 | Page Hero | `h1.MuiTypography-h1` |
| `{type.h2}` | 23px | 22.8px | normal | 400 | Section Headers | `div.MuiAvatar-circular` |
| `{type.body-lg}` | 16px | 24px | 0.16px | 400 | Long-form prose | `p.MuiTypography-body1` |
| `{type.body}` | 16px | normal | normal | 400 | Default UI text | `div.MuiBox-root` |
| `{type.button}` | 14px | 24px | 0.56px | 600 | CTA Labels | `button.MuiButton-root` |
| `{type.body-sm-bold}`| 14px | 20px | 0.14px | 600 | UI Emphasis | `h4.MuiTypography-body2Bold` |
| `{type.body-sm}` | 14px | 20px | 0.14px | 400 | Metadata, labels | `p.MuiTypography-body2` |
| `{type.caption}` | 12px | 18px | normal | 400 | Legal, captions | `span.MuiTypography-label` |

### Principles
1. **Heading Geometry:** Use Montserrat exclusively for top-level H1s to establish brand presence.
2. **Functional Tracking:** Apply 0.56px letter-spacing to button labels to increase legibility at small sizes.
3. **Tight Heading Leading:** Maintain a 1:1 ratio for sub-headings (`{type.h2}`) to keep UI clusters compact.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 53 |
| `{space.sm}` | 6px | 116 |
| `{space.md}` | 8px | 36 |
| `{space.lg}` | 12px | 46 |
| `{space.xl}` | 16px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Page containers, dividers | 213 occurrences |
| `{radius.control}` | 8px | Buttons, inputs, chips | 96 occurrences |
| `{radius.card}` | 16px | Pricing/Content cards | 4 occurrences |
| `{radius.full}` | 50px | Avatars, pill buttons | 25 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(0,0,0,0.04) 0px 0px 10px, rgba(0,0,0,0.02) 0px 4px 20px 10px` | Floating cards, dropdowns | pricing page |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (Sign Up, Log In)
**Pages observed:** 3
**Spec:** Background `#196aff` | Text `#ffffff` | Radius 8px | Padding 6px 16px | Font `{type.button}`
**States observed:** Default captured.

#### Secondary Button
**Role:** Alternative actions (Learn More)
**Pages observed:** 2
**Spec:** Background `#ffffff` | Text `#196aff` | Border 1px `#196aff` | Radius 8px | Padding 6px 16px
**States observed:** Default captured.

### Tier 2: Patterns

#### Content Card
**Role:** Feed items, community posts
**Pages observed:** 1 (Homepage)
**Spec:** Background `#f4f6f8` | Text `#212529` | Radius 8px | Padding 2px | Shadow none
**States observed:** Default captured.

#### User Avatar
**Role:** Identity representation
**Pages observed:** 2
**Spec:** Background `#bdbdbd` | Radius 50% | Size 23px (derived from font-size)
**States observed:** Default captured.

### Tier 3: Surface-specific

#### Cookie Banner
**Role:** Compliance
**Pages observed:** 2
**Spec:** Background `#ffffff` | Border 1px `#dee2e6` | Radius 8px | Shadow `{shadow.soft}`
**States observed:** Default captured.

#### Navigation Chip
**Role:** Category filtering
**Pages observed:** 1
**Spec:** Background `#f4f6f8` | Text `{type.body-sm}` | Radius 8px | Padding 4px 8px
**States observed:** Default captured.

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1440px |
| Section Gap | 16px |
| Grid | Flexbox-based layout |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text centers. |
| Desktop | 1440px | Sidebar navigation becomes fixed; 3-column feed layout. |

## Do's
- Use `#196aff` for all primary interactive elements.
- Pair Montserrat headers with Source Sans 3 body text.
- Maintain an 8px radius on all interactive controls.
- Use `#f4f6f8` for secondary surface backgrounds to create depth.
- Ensure 16px padding on primary buttons for touch targets.

## Don'ts
- **Wrong:** Using `#041b47` for button backgrounds. **Right:** Use `#196aff`. **Reason:** Navy is a decorative accent, not an action color.
- **Wrong:** Applying border-radius to the main page container. **Right:** Keep containers at 0px. **Reason:** The brand uses sharp edges for structural layout.
- **Wrong:** Using Montserrat for body text. **Right:** Use Source Sans 3. **Reason:** Montserrat is reserved for display hierarchy.
- Do not use shadows on standard feed cards; reserve for elevated UI like modals or banners.

## Similar brands
- LinkedIn (Monochrome + Blue)
- Twitter/X (Utility-first feed)
- DigitalOcean (Blue/White technical UI)

## Quick start
```css
:root {
  --scrawlr-primary: #196aff;
  --scrawlr-ink: #212529;
  --scrawlr-surface: #f4f6f8;
  --scrawlr-radius-control: 8px;
  --scrawlr-font-display: 'Montserrat', sans-serif;
  --scrawlr-font-body: 'Source Sans 3', sans-serif;
}
```

## Agent prompt examples
- "Create a primary button using Scrawlr's electric blue #196aff, 8px border radius, and Source Sans 3 bold text at 14px."
- "Design a content card with a #f4f6f8 background and 8px corners, using #212529 for the title text."
- "Generate a page header using Montserrat 600 at 30px with Scrawlr's default ink color #212529."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static computed styles.
- Form validation error colors (Semantic Red) were not present in the analyzed pages.
- Large-scale imagery guidelines were not captured.

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