# Tothesource Design System

> Heavy geometric typography anchored by a warm parchment canvas and high-contrast obsidian surfaces.

**Source:** [https://tothesource.com](https://tothesource.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Tothesource utilizes a high-contrast monochrome foundation, pairing a warm off-white canvas `#efeae1` with deep obsidian `#16161d` and pure black `#000000` blocks. The system is typographically driven, using **Roboto** and **Poppins** at significant weights (up to 900) and large display sizes (up to 98px) to create a sense of industrial scale. While the primary palette is achromatic, functional accents like Teal `#0a4b5e` and Burnt Sienna `#c34f22` are used sparingly for interactive elements and borders. The layout relies on sharp geometry, with most containers using a `0px` radius, contrasted by pill-shaped `20px` buttons.

## Signature DNA
1. **The Parchment Floor** (The use of `#efeae1` and `#f7f4ef` as the base canvas instead of pure white provides a sophisticated, material-like background for high-contrast black text.)
2. **Industrial Typography** (Massive 98px Roboto headlines with tight tracking and 600-900 weights signal authority and scale across all landing pages.)
3. **Geometric Rigidity** (A strict adherence to `0px` sharp corners for section containers and cards, reserving `20px` radii exclusively for interactive "Rounded Button" components.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#efeae1` | Primary page background / Text | 15 | 1 | `--sk-color-988` |
| `{color.ink}` | `#16161d` | Primary text / Dark section backgrounds | 102 | 1 | `--sk-color-f16` |
| `{color.surface.soft}` | `#f7f4ef` | Secondary surface / Button backgrounds | 12 | 1 | `--sk-color-d24` |
| `{color.pure.black}` | `#000000` | Primary CTA backgrounds / Dark surfaces | 11 | 0.8 | Computed |
| `{color.pure.white}` | `#ffffff` | Text on dark surfaces / Card backgrounds | 58 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.action.teal}` | `#0a4b5e` | Primary button background | 3 | 1 | `--sk-color-3ce` |
| `{color.border.sienna}` | `#c34f22` | Decorative borders / Outline buttons | 4 | 0.6 | Computed |
| `{color.decorative.clay}` | `#c16044` | Decorative only (Hero button) | 1 | 1 | `--sk-color-09f` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Roboto | 400, 600, 700, 900 | Display, Body, Buttons | N/A (Google Font) | Apache 2.0 |
| Poppins | 600 | Display Headlines | N/A (Google Font) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 98px | 112.1px | 3.92px | 600 | Hero H1 | `h1` |
| `{type.display.xl}` | 68px | 82.6px | 4px | 600 | Section H1 | `h1` |
| `{type.display.lg}` | 43px | 51.2px | 1.71px | 600 | Section H2 | `h2` |
| `{type.display.md}` | 42px | 50.2px | 1.68px | 600 | Section H2 | `h2` |
| `{type.heading.sm}` | 24px | 28.2px | 0.72px | 400 | Large Paragraph | `p.sqsrte-large` |
| `{type.body.lg}` | 18px | 21.8px | 0.72px | 700 | Bold Body | `strong` |
| `{type.body.md}` | 18px | 21.8px | 0.72px | 400 | Standard Body | `article#sections` |
| `{type.button}` | 14px | normal | 0.28px | 900 | Primary CTA | `.sqs-button-element` |

### Principles
1. **Heavy Display Weights:** Headlines never drop below 600 weight, often reaching 900 for buttons.
2. **Generous Tracking:** Display sizes use positive letter spacing (up to 4px) to maintain legibility at massive scales.
3. **High Contrast:** Text is strictly `#16161d` on `#efeae1` or `#ffffff` on `#000000`, ensuring maximum accessibility.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 4px | 4 |
| `{space.md}` | 14px | 26 |
| `{space.lg}` | 30px | 4 |
| `{space.xl}` | 42px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Cards, Sections, Inputs | 146 occurrences |
| `{radius.pill}` | 20px | Buttons, Rounded Cards | 13 occurrences |
| `{radius.full}` | 50px | Large Panels | 4 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All surfaces | No shadows captured in source |

## Components
### Tier 1: Foundational
#### Surface
**Role:** Section containers and content blocks.
**Pages observed:** [Homepage, About]
**Spec:** Background `{color.canvas}` (#efeae1) or `{color.ink}` (#16161d) / Text `{color.ink}` or `{color.pure.white}` / Radius `0px` / Padding `0px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns
#### Rounded Button
**Role:** Primary and Secondary CTAs.
**Pages observed:** [Homepage, About]
**Spec:** Background `{color.pure.black}` (#000000) / Text `{color.pure.white}` (#ffffff) / Radius `20px` / Padding `0px 42px` / Typography `{type.button}` (14px/900)
**States observed:** Default: Captured | Hover: Not captured

#### Teal Action Button
**Role:** Specialized primary action.
**Pages observed:** [Homepage]
**Spec:** Background `{color.action.teal}` (#0a4b5e) / Text `{color.pure.white}` (#ffffff) / Radius `20px` / Padding `0px 42px` / Typography 14px
**States observed:** Default: Captured | Hover: Not captured

### Tier 3: Surface-specific
#### Outline Button
**Role:** Tertiary actions or secondary hero buttons.
**Pages observed:** [Homepage]
**Spec:** Background transparent / Text `{color.surface.soft}` (#f7f4ef) / Border 2px `{color.border.sienna}` (#c34f22) / Radius `0px`
**States observed:** Default: Captured | Hover: Not captured

#### Dark Surface Block
**Role:** High-impact content sections.
**Pages observed:** [Homepage, Pricing]
**Spec:** Background `{color.pure.black}` (#000000) / Text `{color.canvas}` (#efeae1) / Radius `0px`
**States observed:** Default: Captured

#### Light Content Card
**Role:** Feature or benefit grid items.
**Pages observed:** [Homepage]
**Spec:** Background `{color.pure.white}` (#ffffff) / Text `{color.ink}` (#16161d) / Radius `20px` / Padding `30px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Padding | 42px (vertical) |
| Grid Gutter | 14px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked 1-column layout, H1 reduces to 68px scale |
| Desktop | 1440px | Multi-column grids (3-up for feature cards) |

## Imagery & decoration
Tothesource uses high-quality architectural and lifestyle photography featuring hospitality environments. Decorative elements are limited to 2px solid borders in `#c34f22` and sharp-edged geometric containers.

## Do's
- Use `#efeae1` as the default background for long-form content.
- Set primary headlines in Roboto 600+ with at least 1.6px letter spacing.
- Apply `20px` border radius only to buttons and specific "Rounded" card patterns.
- Ensure all text on dark surfaces uses the `#efeae1` or `#ffffff` tokens.
- Use sharp `0px` corners for all main section transitions.

## Don'ts
- **Wrong:** Using `#0a4b5e` (Teal) as a global background color. **Right:** Use it only for specific action buttons. **Reason:** Teal is a functional accent, not a foundation color.
- **Wrong:** Applying shadows to cards. **Right:** Use 1px borders or background contrast. **Reason:** The system is strictly flat.
- **Wrong:** Using pure white `#ffffff` as a page-wide background. **Right:** Use `#efeae1`. **Reason:** The brand identity relies on the warm parchment tone.

## Similar brands
- Squarespace (Geometric, type-heavy, high contrast)
- Restoration Hardware (Editorial, warm neutrals, serif-adjacent feel)
- Wealthfront (Clean typography, structured grids, limited palette)

## Quick start

```css
/* CSS Variables */
:root {
  --color-canvas: #efeae1;
  --color-ink: #16161d;
  --color-surface-soft: #f7f4ef;
  --color-action-teal: #0a4b5e;
  --color-border-sienna: #c34f22;
  --font-display: 'Roboto', sans-serif;
  --radius-pill: 20px;
}
```

```javascript
// Style Dictionary
{
  "color": {
    "foundation": {
      "canvas": { "value": "#efeae1" },
      "ink": { "value": "#16161d" }
    },
    "accent": {
      "teal": { "value": "#0a4b5e" },
      "sienna": { "value": "#c34f22" }
    }
  }
}
```

## Agent prompt examples
- "Generate a hero section with a `#000000` background, 98px Roboto 600 headline in `#efeae1`, and a 20px rounded button using `#0a4b5e`."
- "Create a 3-column feature grid where each card has a `#ffffff` background, 20px border radius, and 18px Roboto body text."
- "Design a footer using the `#efeae1` background with `#16161d` text and 14px Roboto links."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed styles.
- Form input styles (focus states) were not present on the analyzed pages.
- Success and Error semantic colors were not found in the live UI.

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