# Tines Design System

> A vibrant, editorial take on workflow automation, anchoring soft pastel cards against deep purple canvases with elegant, tightly-tracked serif typography.

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

## TL;DR
Tines uses a bold, monochrome-adjacent purple foundation (`#6956a8`, `#8d75e6`) that acts as the primary canvas rather than just an accent. The layout relies on flat, soft-radii (12px-14px) pastel cards (`#f3ecf7`, `#eadff8`, `#c4e7cb`) to create depth and grouping without relying on drop shadows. Typography pairs the elegant, tightly-tracked serif Reckless for display with the geometric sans Roobert for body and UI, creating an editorial feel that contrasts with standard technical SaaS conventions.

## Signature DNA
1. **Editorial Serif Display:** Headlines use Reckless at weights 300 and 400 with aggressive negative tracking (up to -2.16px at 72px). This creates a sophisticated, print-like authority.
2. **Purple Canvas:** The brand frequently uses deep purples (`#8d75e6`, `#7f69ce`) as the primary page background (`--PageBg`), inverting the typical white-canvas model.
3. **Pastel Card Ecosystem:** Content lives inside flat, colorful pastel cards (lavender, mint, peach) with 12px-14px border radii. This creates a playful, tactile interface without elevation shadows.

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--PageForegroundColor` | `#ffffff` | Text, icons, borders on dark canvases | 911 | 1.0 | `css_variable` |
| `--PanelBg` | `#fcf9f5` | Off-white surface background | 80 | 1.0 | `css_variable` |
| `--ac50` | `#f3ecf7` | Lightest purple surface background | 11 | 1.0 | `css_variable` |
| `foundation-dark` | `#222027` | Dark surface background | 17 | 0.8 | `computed_style` |
| `foundation-darker` | `#1e1c22` | Deepest dark background | 8 | 0.6 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--GlobalNavAccentContrast` | `#6956a8` | Primary brand purple, buttons, text | 156 | 1.0 | `css_variable` |
| `--ac800` | `#4d3e78` | Dark primary purple, text, borders | 143 | 1.0 | `css_variable` |
| `--ac200` | `#d7c4fa` | Light lavender accent | 26 | 1.0 | `css_variable` |
| `--ac100` | `#eadff8` | Pale lavender surface | 22 | 1.0 | `css_variable` |
| `--ac300` | `#c2aafa` | Mid lavender accent | 19 | 1.0 | `css_variable` |
| `--PageBg` | `#8d75e6` | Primary purple canvas background | 17 | 1.0 | `css_variable` |
| `--ac400` | `#a990f5` | Bright purple border/accent | 16 | 1.0 | `css_variable` |
| `--FooterBackgroundColor` | `#7f69ce` | Deep purple footer canvas | 10 | 1.0 | `css_variable` |
| `accent-pink` | `#a54b7a` | Pink text/border accent | 90 | 0.8 | `computed_style` |
| `accent-green` | `#1f7a57` | Green text/border accent | 69 | 0.8 | `computed_style` |
| `accent-orange` | `#b74d1a` | Orange text/border accent | 51 | 0.8 | `computed_style` |
| `accent-blue` | `#3c699b` | Blue text accent | 26 | 0.8 | `computed_style` |
| `accent-mint` | `#c4e7cb` | Mint green surface | 6 | 0.6 | `computed_style` |
| `--GlobalNavBgWhenBlurred` | `#231a32` | Dark nav background | 2 | 1.0 | `css_variable` (decorative_only) |
| `--ac900` | `#32274b` | Deepest purple accent | 1 | 1.0 | `css_variable` (decorative_only) |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Reckless | 300, 400, 500, 600, 700 | Display, Headings | Playfair Display | Commercial |
| Roobert | 400, 500, 600, 700, 900 | Body, UI, Captions | Inter | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-lg` | 72px | 70.56px | -2.16px | 400 | Hero headlines | `h1.ho0kd4o` |
| `display-md` | 64px | 57.6px | -1.92px | 300 | Primary headlines | `em` |
| `display-sm` | 52px | 52px | -1.04px | 400 | Section headers | `h2` |
| `heading-lg` | 46px | 48.3px | -0.92px | 400 | Centered section headers | `h2.centered.s74m24r` |
| `heading-md` | 28px | 33.6px | -0.56px | 400 | Large body/subheads | `p.larger` |
| `heading-sm` | 24px | 26.4px | -0.48px | 400 | Card titles | `p` |
| `body-lg` | 18px | 29.25px | normal | 400 | Lead paragraphs | `article.StandardArticle.centered` |
| `body-md` | 16px | normal | normal | 400 | Default body | `section.relative.pdnec9y` |
| `body-sm` | 14px | 19.6px | normal | 500 | UI labels, secondary body | `p` |
| `caption-lg` | 13px | normal | normal | 600 | Form labels | `label.nrl6nth` |
| `caption-md` | 12px | normal | 0.12px | 500 | Image captions | `figure#segment-frame-cases` |
| `caption-sm` | 10px | 12.5px | 1px | 700 | Uppercase kickers | `strong` |

### Principles
1. **Aggressive negative tracking on display:** Reckless requires tight letter spacing (-1.92px to -2.16px at large sizes) to achieve its signature editorial lockup.
2. **Weight contrast:** Display type remains light (300/400), while UI labels and captions push into heavier weights (500/600/700) for legibility at small sizes.
3. **Wide tracking on microcopy:** 10px captions use +1px letter spacing to maintain readability.

## Spacing
**Base unit:** 4px (inferred from scale)

| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-1` | 4px | 13 |
| `space-2` | 8px | 25 |
| `space-3` | 12px | 66 |
| `space-4` | 16px | 6 |
| `space-5` | 20px | 78 |
| `space-6` | 24px | 78 |
| `space-8` | 32px | 6 |
| `space-12` | 48px | 4 |
| `space-24` | 96px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-none` | 0px | Full-bleed sections, footer | 1162 occurrences |
| `radius-sm` | 7px / 8px | Small controls, inner elements | 58 occurrences |
| `radius-md` | 12px | Standard cards, surfaces | 28 occurrences |
| `radius-lg` | 14px | Feature cards | 80 occurrences |
| `radius-xl` | 24px | Small panels | 7 occurrences |
| `radius-2xl` | 39px / 50px | Large panels, dark mode cards | 99 occurrences |
| `radius-full` | 50% | Circular buttons, pills | 81 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | `none` | All cards and surfaces | "shadow": "none" across all 16 component definitions |

*Note: Tines relies entirely on color contrast and 1px borders for depth, avoiding CSS drop shadows.*

## Components

### Tier 1: Foundational

#### Surface
**Role:** Base container for content blocks.
**Pages observed:** `https://tines.com`, `https://tines.com/about`
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#ffffff` / Border `#ffffff` (0px) / Radius 12px / Padding 0px / Typography 16px / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Rounded Button
**Role:** Primary and secondary calls to action.
**Pages observed:** `https://tines.com`, `https://tines.com/pricing`, `https://tines.com/about`
**Spec:** Background `rgba(0, 0, 0, 0)` or `rgba(105, 86, 168, 0.7)` / Text `#ffffff` / Border `#ffffff` (0px) / Radius 6.5px or 50% / Padding 0px or 1px 6px / Typography 13px / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

### Tier 2: Patterns

#### Pastel Card
**Role:** Standard feature or benefit container.
**Pages observed:** `https://tines.com`, `https://tines.com/pricing`, `https://tines.com/about`
**Spec:** Background `#f3ecf7` / Text `#6956a8` / Border `#a990f5` (1px) / Radius 12px / Padding 0px / Typography 12px / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Dark Panel Card
**Role:** High-contrast container for technical or premium features.
**Pages observed:** `https://tines.com`, `https://tines.com/pricing`
**Spec:** Background `rgba(35, 26, 50, 0.3)` / Text `#ffffff` / Border `#ffffff` (0px) / Radius 39px / Padding 0px / Typography 13px / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

### Tier 3: Surface-specific

#### Feature Card (Large)
**Role:** Prominent grid items showcasing specific capabilities.
**Pages observed:** `https://tines.com`
**Spec:** Background `#e1d2f9` / Text `#6956a8` / Border `#7f69ce` (0px) / Radius 14px / Padding 24px / Typography 14px / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Footer
**Role:** Global site footer.
**Pages observed:** `https://tines.com`, `https://tines.com/pricing`, `https://tines.com/about`
**Spec:** Background `#eadff8` / Text `#4d3e78` / Border `#4d3e78` (0px) / Radius 0px / Padding 42px / Typography 14px / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | Not captured in source |
| Grid | Not captured in source |
| Section padding | 96px |

## Responsive
Not captured in source.

## Imagery & decoration
Tines relies heavily on isometric, flat-vector spot illustrations embedded within the pastel cards. The brand avoids photography entirely in the main product marketing flow, favoring abstract geometric representations of workflows (nodes, lines, floating UI elements).

## Do's
* Do use Reckless at 300 or 400 weight for all major headlines.
* Do apply aggressive negative letter-spacing to Reckless to achieve the editorial lockup.
* Do use the pastel palette (`#f3ecf7`, `#eadff8`, `#c4e7cb`) for card backgrounds to separate content.
* Do rely on 1px borders (`#a990f5`) or color contrast to define edges.
* Do use Roobert for all UI elements, buttons, and body copy.

## Don'ts
* Don't use drop shadows on cards or buttons; the system is strictly flat.
* Don't use Reckless for body copy or UI labels; it is reserved for display.
* Don't use pure white (`#ffffff`) as the primary page background; use the brand purples (`#8d75e6`) or off-white (`#fcf9f5`).
* **Wrong:** Using `#6956a8` as a background for dark-mode cards. **Right:** Use `#231a32` or `rgba(35, 26, 50, 0.3)`. **Reason:** `#6956a8` is the active primary accent, not a structural dark canvas.
* **Wrong:** Setting display text with normal tracking. **Right:** Apply `-1.92px` to `-2.16px` tracking on large Reckless headings. **Reason:** The editorial feel relies on tight letterforms.
* **Wrong:** Applying 4px border radii to cards. **Right:** Use 12px or 14px for standard cards. **Reason:** The brand DNA relies on soft, friendly geometry.

## Similar brands
* Stripe (for the use of soft, colorful, flat UI elements)
* Linear (for the tight, editorial typography, though Linear is dark-mode first)
* Vercel (for the strict geometric sans UI typography)

## Quick start

**CSS Variables:**
```css
:root {
  --PageForegroundColor: #ffffff;
  --PanelBg: #fcf9f5;
  --ac50: #f3ecf7;
  --GlobalNavAccentContrast: #6956a8;
  --ac800: #4d3e78;
  --ac200: #d7c4fa;
  --ac100: #eadff8;
  --ac300: #c2aafa;
  --PageBg: #8d75e6;
  --ac400: #a990f5;
  --FooterBackgroundColor: #7f69ce;
  --GlobalNavBgWhenBlurred: #231a32;
}
```

**Tailwind v4 @theme:**
```css
@theme {
  --color-page-fg: #ffffff;
  --color-panel-bg: #fcf9f5;
  --color-ac50: #f3ecf7;
  --color-primary: #6956a8;
  --color-primary-dark: #4d3e78;
  --color-ac200: #d7c4fa;
  --color-ac100: #eadff8;
  --color-ac300: #c2aafa;
  --color-page-bg: #8d75e6;
  --color-ac400: #a990f5;
  --color-footer-bg: #7f69ce;
  --color-nav-bg: #231a32;

  --font-display: 'Reckless', serif;
  --font-body: 'Roobert', sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-2xl: 39px;
}
```

## Agent prompt examples

**Prompt 1: Pastel Feature Card**
```text
Create a feature card for Tines. Use a background of #f3ecf7 and a 1px border of #a990f5. The border radius must be 12px. Inside, use Roobert for a 14px title (weight 500) and 12px body text. The text color should be #6956a8. Do not add any box-shadow.
```

**Prompt 2: Hero Headline**
```text
Generate a hero headline component. The background should be the brand purple #8d75e6. The text must be #ffffff. Use the Reckless font at 64px, weight 300, with a line height of 57.6px and letter spacing of -1.92px.
```

**Prompt 3: Dark Panel**
```text
Build a dark panel container. Use a background of rgba(35, 26, 50, 0.3) with no border. The border radius should be 39px. Text inside should be #ffffff.
```

## Known gaps
* Hover, focus, and disabled states were not captured in the source data.
* Responsive breakpoints and grid max-widths were not explicitly extracted.
* Semantic colors (success, error, warning) are missing from the evidence.

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