SEEK Braid Design System

# Braid — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: medium
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/seek-braid
sources:
  - https://seek-oss.github.io/braid-design-system/
  - https://seek-oss.github.io/braid-design-system/foundations/tones/
  - https://github.com/seek-oss/braid-design-system
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by SEEK. "Braid" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Braid
**Owner:** SEEK
**Official documentation:** https://seek-oss.github.io/braid-design-system/
**Visual character:** Job-marketplace clarity engineered in vanilla-extract: deep SEEK navy, one shocking pink for critical states, themes swappable per market.

---

## Summary

SEEK's themeable React component library built with vanilla-extract, emphasizing simple, composable, accessible building blocks.

_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Field-level evidence: 0/71 claims source-linked, 0/71 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=seek-braid)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| SEEK Blue / Brand Accent | `#0d3880` | `--braid-brand` | Brand and formAccent (SEEK theme) |
| Link Blue | `#2765cf` | `--braid-link` | Links and interactive |
| Neutral Text | `#1c1c1c` | `--braid-neutral` | Primary text |
| Secondary Text | `#757575` | `--braid-secondary` | Secondary text |
| Surface | `#ffffff` | `--braid-surface` | Surfaces |
| Body Background | `#f5f6f8` | `--braid-body` | Page background |
| Field Border | `#d6d6d6` | `--braid-field-border` | Field borders |
| Critical Red | `#e60278` | `--braid-critical` | Errors (SEEK pink-red) |
| Positive Green | `#00af50` | `--braid-positive` | Success |

## Typography

- **Body:** SEEK Sans / system — weights 400, 500, 700 — `'SeekSans', 'Helvetica Neue', Helvetica, Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-1 | `28px` | `36px` |
| heading-2 | `24px` | `32px` |
| heading-3 | `20px` | `28px` |
| standard | `16px` | `24px` |
| small | `14px` | `20px` |

## Spacing

Base unit: `4px (grid)`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| standard | `8px` |
| large | `16px` |
| full | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| small | `0 2px 4px rgba(28,28,28,0.1)` |

## Quick start (CSS)

```css
/* Braid — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://seek-oss.github.io/braid-design-system/
   Field evidence: https://www.designsystems.one/api/style-spec?system=seek-braid */

:root {
  /* Color */
  --braid-brand: #0d3880; /* Brand and formAccent (SEEK theme) */
  --braid-link: #2765cf; /* Links and interactive */
  --braid-neutral: #1c1c1c; /* Primary text */
  --braid-secondary: #757575; /* Secondary text */
  --braid-surface: #ffffff; /* Surfaces */
  --braid-body: #f5f6f8; /* Page background */
  --braid-field-border: #d6d6d6; /* Field borders */
  --braid-critical: #e60278; /* Errors (SEEK pink-red) */
  --braid-positive: #00af50; /* Success */

  /* Typography */
  --font-body: 'SeekSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale */
  --text-heading-1: 28px; /* line-height 36px */
  --text-heading-2: 24px; /* line-height 32px */
  --text-heading-3: 20px; /* line-height 28px */
  --text-standard: 16px; /* line-height 24px */
  --text-small: 14px; /* line-height 20px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-standard: 8px;
  --radius-large: 16px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-small: 0 2px 4px rgba(28,28,28,0.1);
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Braid by SEEK — SEEK's themeable React component library built with vanilla-extract, emphasizing simple, composable, accessible building blocks. Character: Job-marketplace clarity engineered in vanilla-extract: deep SEEK navy, one shocking pink for critical states, themes swappable per market. Use a primary colour near #0d3880, the typeface "SEEK Sans / system" (or a close equivalent), corner radius around 8px, a spacing rhythm on a 4px (grid) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Braid documentation](https://seek-oss.github.io/braid-design-system/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/seek-braid) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._