# Servient Design System

> High-contrast legal precision anchored by terracotta accents and technical Poppins geometry.

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

## TL;DR
Servient utilizes a "monochrome-plus" strategy where a stark black-on-white foundation is punctuated by a single primary terracotta accent (#c66a48). The system relies on the geometric clarity of **Poppins** for high-impact display numbers and names, paired with **Inter** for dense legal information. Layouts are structured around generous vertical spacing (up to 48px) and a distinct card system that uses 12px-16px radii and subtle terracotta shadows to create depth without traditional grayscale elevation.

## Signature DNA
1. **Terracotta Punctuation** (The use of #c66a48 for primary CTAs, card borders, and shadows creates a warm, professional "ink" feel that distinguishes it from standard SaaS blues.)
2. **Geometric Stat-Display** (Large 35px Poppins weight 600 is used for metrics and names, providing a technical, architectural rigor to data-heavy sections.)
3. **Soft-Depth Containers** (Cards utilize a specific 12px/16px radius paired with a colored shadow `rgba(198, 106, 72, 0.2)` rather than neutral grays.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, heavy borders | 91 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Page canvas, button text | 42 | 0.8 | Computed Style |
| `{color.off-white}` | `#f8f5f1` | Subtle section backgrounds | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#c66a48` | Primary CTAs, active borders, card shadows | 20 | 0.8 | Computed Style |
| `{color.navy}` | `#1b2537` | Dark section backgrounds, footer text | 31 | 0.8 | Computed Style |
| `{color.slate}` | `#4f5b6b` | Secondary body text | 16 | 0.8 | Computed Style |
| `{color.steel}` | `#4682b4` | Secondary surfaces, banners | 4 | 0.6 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 600 | Display, Stats, Names | Poppins (Google Fonts) | OFL |
| Inter | 400, 500, 700 | Body, UI, Subheadings | Inter (Google Fonts) | OFL |
| Roboto | 600 | Navigation links | Roboto (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 35px | 44px | -1.75px | 600 | Hero/Section Titles | `h2.opening-message__title` |
| `{text.stat}` | 35px | 44px | -0.35px | 600 | Metric numbers | `p.team-card__stat-number` |
| `{text.heading-sm}` | 22px | 39.6px | -0.22px | 500 | Hero subtitles | `p.hero__subtitle` |
| `{text.title-card}` | 20px | 28px | normal | 600 | Feature titles | `h4.section-3__feature-title` |
| `{text.body-lg}` | 18px | 32.4px | normal | 400 | Feature descriptions | `p.team-card__feature-text` |
| `{text.body}` | 16px | normal | normal | 400 | Header/General UI | `header.top-header` |
| `{text.nav}` | 16px | 56px | normal | 600 | Navigation links | `a.nav-link` |
| `{text.tagline}` | 13px | 18px | normal | 500 | Footer text | `p.footer__tagline` |
| `{text.label}` | 11px | normal | 1.365px | 700 | Column headers | `h5.footer__column-title` |

### Principles
1. **Display Tightness**: Large Poppins headings use aggressive negative letter-spacing (-1.75px) to maintain a compact, architectural feel.
2. **Metric Clarity**: Statistics use Poppins with looser tracking (-0.35px) than headings to ensure legibility of numbers.
3. **Navigation Height**: Nav links are vertically centered within a generous 56px line-height container.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 12 |
| `{space.md}` | 20px | 7 |
| `{space.lg}` | 30px | 11 |
| `{space.xl}` | 48px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 155 occurrences |
| `{radius.md}` | 12px | Action cards | `Card` component |
| `{radius.lg}` | 16px | Feature cards | `Card` (Pattern) |
| `{radius.full}` | 100px | Primary buttons | `Rounded Button` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.accent}` | `rgba(198, 106, 72, 0.2) 0px 2px 4px 4px` | Primary card depth | Card component |
| `{shadow.soft}` | `rgba(27, 37, 55, 0.07) 0px 4px 24px 0px` | Feature section depth | Feature Card |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** https://servient.com
**Spec:** 
- Background: `{color.primary}` (#c66a48)
- Text: `{color.white}` (#ffffff)
- Radius: 100px
- Padding: 12px 24px
- Typography: 16px Inter (Weight 500)
- Shadow: `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Action Card
**Role:** Interactive content blocks
**Pages observed:** https://servient.com
**Spec:** 
- Background: #ffffff
- Border: 1px solid `{color.primary}` (#c66a48)
- Radius: 12px
- Shadow: `{shadow.accent}`
**States observed:** Default: captured

#### Feature Card
**Role:** Informational display with stats
**Pages observed:** https://servient.com
**Spec:** 
- Border: 3px solid `rgba(70, 130, 180, 0.2)`
- Radius: 16px
- Padding: 37px 48px
- Shadow: `{shadow.soft}`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Dark Banner
**Role:** High-contrast section break (e.g., Guide to Prompting)
**Pages observed:** https://servient.com
**Spec:** 
- Background: `{color.steel}` (#4682b4)
- Text: `{color.white}` (#ffffff)
- Radius: 0px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1440px |
| Section Gap | 48px |
| Card Padding | 37px-48px |

## Do's
- Use Poppins 600 for all numerical metrics and primary names.
- Apply `{color.primary}` (#c66a48) for primary user actions only.
- Maintain -1.75px letter spacing on Poppins headings above 30px.
- Use 100px radius for all primary buttons to create a "pill" shape.
- Anchor dark sections with `{color.navy}` (#1b2537) for footer and heavy contrast areas.

## Don'ts
- **Wrong:** Using `#c66a48` for body text. **Right:** Use `#000000` or `#4f5b6b`. **Reason:** Terracotta is reserved for accents and CTAs to maintain high-signal hierarchy.
- **Wrong:** Labeling `#4682b4` (Steel Blue) as the brand primary. **Right:** `#c66a48` is the primary accent. **Reason:** Provenance shows terracotta as the dominant CTA color.
- Do not use sharp corners (0px) for interactive cards; reserve for section backgrounds.
- Do not use Roboto for body copy; it is strictly for navigation links.

## Similar brands
- Clio (Legal tech clarity)
- Ironclad (High-contrast professional)
- Stripe (Metric-focused typography)

## Quick start

```css
:root {
  --servient-primary: #c66a48;
  --servient-black: #000000;
  --servient-navy: #1b2537;
  --servient-white: #ffffff;
  --servient-radius-pill: 100px;
  --servient-shadow-accent: rgba(198, 106, 72, 0.2) 0px 2px 4px 4px;
}
```

## Agent prompt examples
- "Create a primary button using Servient terracotta #c66a48 with a 100px pill radius and 16px Inter Medium text."
- "Generate a metric card with a 35px Poppins SemiBold number and a 12px border radius, including a 1px terracotta border."
- "Design a section header using Poppins 600 at 35px with -1.75px letter spacing."

## Known gaps
- Hover and Active states for buttons were not captured in the static trace.
- Mobile-specific breakpoint transitions for the 3-column feature grids are inferred but not explicitly tokenized.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://servient.com | 1440x900 | 2026-06-06 |