# Gorattle Design System

> Sophisticated utility anchored by a warm cream canvas and deep navy ink, punctuated by tight Geist typography.

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

## TL;DR
Gorattle (Von) utilizes a high-contrast, "ink-on-paper" aesthetic that pairs a warm cream foundation `#f1efe9` with a deep navy primary `#1c2231`. The system is strictly monochrome at its core, reserving saturated gradients (orange-to-purple) for decorative data-visualization motifs and brand transitions. Typography is exclusively Geist, leaning on a weight-400 display style that achieves authority through scale rather than thickness. Component geometry is binary: either perfectly sharp `0px` for layout containers or ultra-pill `1440px` for interactive triggers.

## Signature DNA
1. **Cream Foundation** (The use of `#f1efe9` as the global page background instead of pure white creates a premium, tactile feel that reduces digital glare.)
2. **Navy Ink** (Primary actions and text use `#1c2231` as a softer, more sophisticated alternative to pure black, maintaining a 15.6:1 contrast ratio against the cream canvas.)
3. **Binary Radii** (A strict juxtaposition of sharp `0px` corners for sections and cards against extreme pill-shaped `1440px` buttons.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--_von---background--page` | `#f1efe9` | Page floor and inverse text | 53 | 1 | `css_variable` |
| `--_von---text--primary` | `#1c2231` | Body text, headings, button fills | 15 | 1 | `css_variable` |
| `--_von---text--secondary` | `#6b6e76` | Muted descriptions and metadata | 1 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--_von---brand--purple` | `#8062a2` | Decorative accent / Brand gradient end | 1 | 1 | `declared_token` |
| `--_von---brand--orange` | `#f5934d` | Brand gradient start | 1 | 1 | `declared_token` |
| `--_von---brand--lilac` | `#af6ab4` | Brand gradient mid | 1 | 1 | `declared_token` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Geist | 400, 500 | Display, Body, UI | Geist (Vercel/Open Source) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{typography.display}` | 64px | 70.4px | -1.6px | 400 | Hero H1 | `h1.t-heading-2` |
| `{typography.body}` | 16px | 24px | normal | 400 | Default body copy | `div.navbar2_component` |
| `{typography.nav}` | 14px | 21px | normal | 400 | Navigation links | `a.navbar2_link` |
| `{typography.caption}` | 12px | 18px | normal | 400 | Muted metadata | `div.t-paragraph-12` |

### Principles
1. **Scale over Weight:** Display headings use a light weight (400) even at 64px, relying on negative letter-spacing (-1.6px) for visual density.
2. **Navy on Cream:** Primary readability is anchored on `#1c2231` text over `#f1efe9` background.
3. **Inverse Interaction:** Buttons flip the palette, using cream text on navy backgrounds.

## Spacing
**Base unit:** 4px (Inferred from standard 16px/24px rhythms)
Table: | Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{spacing.md}` | 16px | 51 |
| `{spacing.lg}` | 24px | 51 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Layout containers, cards | 62 occurrences |
| `{radius.pill}` | 1440px | CTA Buttons, input fields | 2 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | 0px | All surfaces | No shadows captured in evidence |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Book a demo")
**Pages observed:** https://gorattle.com
**Spec:** Background: `#1c2231` | Text: `#f1efe9` | Radius: `1440px` | Typography: Geist 400
**States observed:** Default: Captured | Hover: Not captured

#### Top Navigation
**Role:** Global site header
**Pages observed:** https://gorattle.com
**Spec:** Background: transparent | Text: `#1c2231` | Height: 64px (inferred) | Typography: Geist 14px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Footer
**Role:** Global site navigation and legal
**Pages observed:** https://gorattle.com
**Spec:** Background: `#1c2231` | Text: `#f1efe9` | Typography: Geist 14px/16px
**States observed:** Default: Captured

#### Hero Section
**Role:** Primary landing message
**Pages observed:** https://gorattle.com
**Spec:** Background: `#f1efe9` | Heading: Geist 64px (#1c2231) | Subtext: Geist 16px (#1c2231)
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1440px |
| Section Padding | 80px - 120px (visual estimate) |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Desktop | 1440px | Horizontal nav, multi-column footer |
| Mobile | 390px | Hamburger menu, single-column footer stack |

## Imagery & decoration
- **Gradients:** Uses a linear transition from Orange `#f5934d` to Purple `#8062a2` for data-viz bars and transition icons.
- **Iconography:** Simple, thin-stroke icons that match the Geist font weight.
- **Avoidance:** Avoids drop shadows, rounded card corners, and pure white backgrounds.

## Do's
- Use `#f1efe9` for all primary page backgrounds.
- Set display headings to 400 weight with negative tracking.
- Ensure all buttons use the `1440px` pill radius.
- Use `#1c2231` for primary text to maintain the "navy ink" look.
- Keep card and section borders at `0px` radius.

## Don'ts
- **Wrong:** Using pure black `#000000` for text. **Right:** Use Navy `#1c2231`. **Reason:** Pure black is too harsh against the cream canvas.
- **Wrong:** Using sub-brand orange `#f5934d` for primary CTA buttons. **Right:** Use Navy `#1c2231`. **Reason:** Saturated colors are for accents/data only.
- **Wrong:** Applying `8px` radius to cards. **Right:** Use `0px`. **Reason:** The brand identity relies on sharp layout containers.

## Similar brands
- Linear (for typography and monochrome precision)
- Vercel (for Geist-centric layout)
- Framer (for high-contrast utility)

## Quick start

```css
:root {
  --color-canvas: #f1efe9;
  --color-ink: #1c2231;
  --color-muted: #6b6e76;
  --color-accent-orange: #f5934d;
  --color-accent-purple: #8062a2;
  --radius-pill: 1440px;
  --font-main: 'Geist', sans-serif;
}
```

## Agent prompt examples
- "Create a primary button using the Von Navy `#1c2231` background and Von Cream `#f1efe9` text with a pill radius of `1440px`."
- "Design a hero section with a Von Cream background and a 64px Geist heading at 400 weight with -1.6px letter spacing."
- "Build a footer component with a Von Navy background and multi-column links in Von Cream Geist 14px."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the CSS variable evidence.
- Specific spacing tokens (e.g., `--spacing-xl`) were not declared in the provided variable list.

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