Neutral
Blue
Teal
Amber
Green & Red
Semantic — Text
Secondary
--text-secondary
Placeholder
--text-placeholder
Nav Active
--text-nav-active
Semantic — Background
Semantic — Border
Semantic — Status
Success / Active
teal-50 / teal-700
Warning
amber-50 / amber-700
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
Contextual Spacing
Token Value Usage
cardPadding21px Inner padding for standard cards sectionPadding25px Section-level padding pagePadding32px Page horizontal padding
Border Radius ↑ Top
sm 4px
md 8px
lg 10px
lgx 12px
xl 14px
full pill
Components ↑ Top
Badges
Property Value
Border radius full (pill)Padding 4px 8pxFont 12px / 500Dot size 6px
Status Dots
Active Info Warning Inactive
Buttons
New Project +
Filter
View all projects →
Variant Background Radius Padding Gap Font
Primary #155dfc8px6px 10px14px14px / 500Secondary white + border8px6px 16px- 14px / 500Ghost transparent8px4px 8px- 12px / 500
Cards
Projects
7
2 with active validations
Active Evals
8
Running in your projects
Eval Runs
124 ↑ 18%
Last 7 days
Needs Attention
2
Requires follow-up
Property Value
Background whiteBorder 1px solid #e5e7ebBorder radius (standard) 10pxBorder radius (project card) 14pxPadding 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 223pxItem height 36pxItem padding 0 12pxItem gap (between items) 4pxIcon-to-label gap 12pxItem border radius 10pxActive background #eff6ff (blue-50)Active text #1447e6Nav text #364153Section label 12px / 500 / #6a7282Font 14px / 500
Element Dimension
Top bar height 48pxSidebar width 223pxMain content max-width 1262pxObserved 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 are rendered via <wa-icon> (Web Awesome / Shoelace), backed by Font Awesome. Below are the icons observed in the Overview screen.
Size Value
Small 14pxMedium 16pxLarge 20px
Sidebar Navigation
house Overview
folder Projects
triangle-exclamation Error logs
clipboard-check Evals
file-lines Specifications
gavel Judges
robot Agents
database Datasets
shield-halved Registry
Metric Cards
folder Projects
wave-pulse Pro Active Evals
play Eval Runs
octagon-exclamation Pro Needs Attention
Actions & Navigation
star Project card favorite
plus New Project button (trailing)
arrow-right Ghost links & action links
circle-exclamation Attention items
chevron-left Breadcrumb back
chevron-right Breadcrumb forward
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).