Safe Intelligence — Design System

Colors ↑ Top

Neutral

Neutral 50

#f9fafb

Neutral 100

#f3f4f6

Neutral 200

#e5e7eb

Neutral 400

#99a1af

Neutral 500

#6a7282

Neutral 600

#64748b

Neutral 700

#4a5565

Neutral 800

#364153

Neutral 900

#101828

Blue

Blue 50

#eff6ff

Blue 500

#2b7fff

Blue 600

#1447e6

Blue 700

#155dfc

Teal

Teal 50

#f0fdfa

Teal 500

#00bba7

Teal 700

#00786f

Amber

Amber 50

#fffbeb

Amber 500

#fe9a00

Amber 700

#e17100

Green & Red

Green 500

#00a63e

Red 50

#fef2f2

Semantic — Text

Primary

--text-primary

Secondary

--text-secondary

Tertiary

--text-tertiary

Placeholder

--text-placeholder

Link

--text-link

Accent

--text-accent

Nav

--text-nav

Nav Active

--text-nav-active

Semantic — Background

Page

--bg-page

Surface

--bg-surface

Muted

--bg-muted

Semantic — Border

Default

--border-default

Light

--border-light

Semantic — Status

Success / Active

teal-50 / teal-700

Info

blue-50 / blue-700

Warning

amber-50 / amber-700

Error

red-50

Typography ↑ Top

Font family: Inter — Weights: 400 (Regular), 500 (Medium), 600 (Semi Bold)

Display — 124

30px / 600 / 36px line / +0.4px tracking

Heading 1 — Overview

24px / 600 / 32px line / -0.31px

Heading 2 — Projects

18px / 600 / 27px line / -0.44px

Body — Your projects and recent activity

14px / 400 / 20px line / -0.15px

Body Medium — View all projects

14px / 500 / 20px line / -0.15px

Small — Running in your projects

12px / 400 / 16px line

Small Medium — Active

12px / 500 / 16px line

Spacing Scale ↑ Top

4px

1.5

6px

8px

2.5

10px

12px

16px

20px

24px

32px

36px

40px

Contextual Spacing

Token	Value	Usage
`cardPadding`	21px	Inner padding for standard cards
`sectionPadding`	25px	Section-level padding
`pagePadding`	32px	Page horizontal padding

Border Radius ↑ Top

sm4px

md8px

lg10px

lgx12px

xl14px

fullpill

Components ↑ Top

Badges

Active Info Needs review Error

Property	Value
Border radius	`full (pill)`
Padding	`4px 8px`
Font	`12px / 500`
Dot size	`6px`

Status Dots

Active Info Warning Inactive

Buttons

Variant	Background	Radius	Padding	Font
Primary	`#155dfc`	`8px`	`6px 16px`	`14px / 500`
Secondary	`white + border`	`8px`	`6px 16px`	`14px / 500`
Ghost	`transparent`	`8px`	`4px 8px`	`12px / 500`

Cards

Projects

2 with active validations

Active Evals

Running in your projects

Eval Runs

124 ↑ 18%

Last 7 days

Needs Attention

Requires follow-up

Property	Value
Background	`white`
Border	`1px solid #e5e7eb`
Border radius (standard)	`10px`
Border radius (project card)	`14px`
Padding	`21px`

Project Card

RAG Agent LangSmith

RAG Agent with Apple SEC Filings

Active now

2 agents 5 datasets Organization read-only

Sidebar Navigation

Property	Value
Width	`223px`
Item padding	`8px 12px`
Active background	`#f3f4f6`
Active text	`#1447e6`
Nav text	`#364153`
Font size	`14px`

Layout ↑ Top

Element	Dimension
Top bar height	`48px`
Sidebar width	`223px`
Main content max-width	`1262px`
Observed page width	`1485px`

Dashboard layout: fixed top bar + fixed left sidebar + scrollable main content. Main content splits into a wider left column (projects list) and narrower right column (alerts + activity feed).

Icons ↑ Top

Size	Value
Small	`14px`
Medium	`16px`
Large	`20px`

Design Notes ↑ Top

No box shadows anywhere. Elevation is conveyed with 1px solid #e5e7eb borders and background tints.
Metric cards use a 4-column equal grid. Main content area is a two-column split: left (~56%, project list) and right (~44%, alerts + activity feed).
Status-to-color mapping: Active now → teal, Setup incomplete / Needs review → amber, Up to date → teal, inactive → gray.
Card footer pattern: stats left (2 agents · 5 datasets), permission label right-aligned (Organization read-only / Started).
Ghost link actions use arrow suffix: View all projects →
Metadata items separated by middle dot (·), e.g. 94% pass rate · 2 hours ago.
Sidebar groups: primary nav at top, then a section labeled RESOURCES (uppercase 11px 600 weight), with Registry pinned to bottom.
Built on Shoelace / Web Awesome web components (wa-breadcrumb, wa-icon, wa-dropdown, wa-button).