# 3dot14 Design System

> High-contrast monochrome utility anchored by deep obsidian text and sharp geometric containers, punctuated by high-energy orange and azure accents.

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

## TL;DR
3dot14 utilizes a "monochrome plus accent" system where a dominant white canvas (#ffffff) supports deep obsidian typography (#13141e). The brand identity relies on tight, medium-weight Inter typography with aggressive negative letter-spacing (-2px on displays) to create a dense, professional atmosphere. High-saturation orange (#fe6b01) is reserved for primary conversion points, while a bright azure (#0991f8) handles secondary navigation and interactive borders. Layouts are strictly structured around a 4px base unit with sharp (0px) or slightly softened (4px/8px) corners.

## Signature DNA
1. **Negative Tracking Display** (Inter Medium set at 56px with -2px letter-spacing creates a compact, high-authority headline style seen on the primary hero).
2. **High-Contrast Functional Accents** (Strict separation of color roles: Orange #fe6b01 for "Get Started" conversion, Azure #0991f8 for "Read More" discovery).
3. **Obsidian Grounding** (The use of #13141e instead of pure black for all primary text and button labels provides a softer but still high-contrast 18.3:1 readability ratio).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, card surfaces, primary button text | 11 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#13141e` | Primary body text, headings, footer background | 102 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#626473` | De-emphasized descriptions and secondary labels | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.primary}` | `#fe6b01` | Primary CTA background, high-visibility card surfaces | 6 | 0.6 | Computed Style |
| `{color.accent.secondary}` | `#0991f8` | Secondary buttons, text links, icon borders | 17 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--toastify-color-success` | `#07bc0c` | Success notifications and icons |
| `--toastify-color-error` | `#e74c3c` | Error states and progress bars |
| `--toastify-color-warning` | `#f1c40f` | Warning alerts |
| `--toastify-color-info` | `#3498db` | Informational toasts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter-Medium | 400, 500 | Headlines, buttons, navigation | Inter (Google Fonts) | SIL OFL |
| Inter-Regular | 400 | Body copy, descriptions | Inter (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.lg}` | 56px | 60px | -2px | 500 | Main Hero H1 | `h1.text-medium` |
| `{type.display.md}` | 40px | 44px | -1.5px | 500 | Section Headers | `h1.content-heading` |
| `{type.heading.md}` | 32px | 36px | -1px | 400 | Subsection Titles | `h1.heading.m-0` |
| `{type.heading.sm}` | 24px | 32px | -1px | 500 | Card Headings | `h2.card-heading` |
| `{type.body.lg}` | 20px | 28px | -0.8px | 400 | Lead Paragraphs | `p.sub-string1` |
| `{type.body.md}` | 18px | 28px | -0.6px | 400 | Standard Content | `p.content-description` |
| `{type.body.sm}` | 16px | 18.4px | 0.4px | 400 | Nav Links / UI | `a.cursor-pointer` |
| `{type.caption}` | 14px | 16.1px | 0.4px | 400 | Small Metadata | `p.m-0.text-sm` |

### Principles
1. **Negative tracking on scale.** As font size increases, letter-spacing must decrease proportionally (from 0.4px at 14px to -2px at 56px).
2. **Medium for emphasis.** Inter-Medium (500) is used for all interactive elements and structural headings; Inter-Regular (400) is reserved for long-form prose.
3. **Tight leading.** Line heights are kept tight (1.07x to 1.1x for display) to maintain the "blocky" geometric feel of the brand.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 18 |
| `{space.sm}` | 16px | 12 |
| `{space.md}` | 24px | 7 |
| `{space.lg}` | 36px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, footer, large surfaces | 113 occurrences |
| `{radius.sm}` | 4px | Buttons, input fields, cards | `a.button`, `.card` |
| `{radius.md}` | 8px | UI controls and dropdowns | 10 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.12) 0px 10px 40px 0px` | Floating testimonials or featured cards | Testimonial slider |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion action (e.g., "Get Started")
**Pages observed:** https://3dot14.co
**Spec:** Background `{color.accent.primary}` (#fe6b01) / Text `{color.canvas}` (#ffffff) / Radius 4px / Padding 12px 24px (inferred) / Typography `{type.body.sm}` (14px/500)
**States observed:** Default | Hover: Not captured

#### Secondary Button
**Role:** Discovery actions (e.g., "Read More")
**Pages observed:** https://3dot14.co
**Spec:** Background transparent / Text `{color.accent.secondary}` (#0991f8) / Border 1px `{color.accent.secondary}` / Radius 4px / Typography `{type.body.sm}` (14px/400)
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform capabilities
**Pages observed:** https://3dot14.co
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink.primary}` (#13141e) / Border 0px / Radius 4px / Padding 16px
**States observed:** Default

### Tier 3: Surface-specific

#### Testimonial Card
**Role:** Social proof
**Pages observed:** https://3dot14.co
**Spec:** Background `{color.canvas}` (#ffffff) / Shadow `{shadow.card}` / Radius 0px / Typography `{type.body.md}` (18px)
**States observed:** Default

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

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; H1 scales to ~32px; 1-column grid. |
| Desktop | 1440px | Full horizontal nav; 3-up card grids. |

## Imagery & decoration
- **Iconography:** Uses high-saturation orange (#fe6b01) for functional icons (megaphone, chart, gear).
- **Logos:** Grayscale/monochrome logo wall for clients to maintain brand neutrality.
- **Avoids:** Soft gradients, rounded corners > 8px, and pastel colors.

## Do's
- Use `#fe6b01` only for the most critical page action.
- Apply negative letter-spacing (at least -1px) to any heading above 32px.
- Maintain a white background for all content-heavy sections.
- Use sharp 0px corners for full-width section backgrounds.
- Ensure all body text uses `#13141e` for maximum legibility.

## Don'ts
- **Wrong:** Using `#0991f8` for the "Get Started" button. **Right:** Use `#fe6b01`. **Reason:** Orange is the designated conversion color; blue is for secondary navigation.
- **Wrong:** Applying a border-radius of 20px to cards. **Right:** Use 4px. **Reason:** The brand identity is built on sharp, geometric utility.
- **Wrong:** Setting H1 text with positive letter-spacing. **Right:** Use -2px. **Reason:** The "Signature DNA" requires tight tracking for authority.

## Similar brands
- Segment
- Vercel
- Linear
- PostHog

## Quick start

```css
/* CSS Variables */
:root {
  --color-canvas: #ffffff;
  --color-ink-primary: #13141e;
  --color-accent-primary: #fe6b01;
  --color-accent-secondary: #0991f8;
  --font-main: 'Inter', sans-serif;
  --radius-sm: 4px;
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the static analysis.
- Specific form input validation states (success/error) are defined in tokens but not observed in layout.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://3dot14.co | 1440x900 | 2026-06-06 |
| Mobile Home | https://3dot14.co | 390x844 | 2026-06-06 |