initmahesh/mlai-community-labs/2-3-1-web-layer

Design System

Last extracted: 2026-05-13

Product Design Philosophy

The Design System follows a precision-first, data-dense UI philosophy. The system is:

• Information-forward --- every surface should earn its space; no

decorative chrome

• Systematically scaled --- all values come from a token-based

scale, nothing is arbitrary

• Semantically layered --- raw primitives (All Colors) map to

semantic tokens (Token Colors) which map to components

• Accessible by default --- color steps are chosen for sufficient

contrast; primary text on white is near-black (#070A0E)

• Restrained --- the default voice is greyscale; color is used

purposefully to signal state, not style

Color System

Architecture

The color system has two layers:

1. Primitive palette (All Colors/…) --- raw 10-step scales, the

source of truth

1. Semantic tokens (Token colors/…) --- role-based aliases that

map primitives to meaning

Always reference semantic tokens in UI code. Use raw primitives only when defining token values.

Primitive Palette

Each color family runs a 10-step scale: 900 → 800 → 700 → 600 → ★500 → 400 → 300 → 200 → 100 → 50 The ★ mark on 500 indicates the primary base for that family.

Primary Blue (Brand Primary)

Step Hex ------ ----------- 900 #082A5E 800 #0A367B 700 #0D469E 600 #0044AE ★500 #115ACB 400 #89B7FF 300 #6196EA 200 #92B7F0 100 #B6CFF5 50 #E7EFFC

Grey (Neutral Foundation)

Step Hex ------ ----------- ★900 #070A0E 800 #151719 700 #25272B 600 #2C2F32 500 #4A4C4F 400 #5E6062 300 #8F9193 200 #C1C2C3 100 #DADADB 50 #F0F0F1 25 #FAFAFA

Grey has an extra 25 step (near-white surface) unique to this

family.

Green (Success / Positive)

Step Hex ------ ----------- 900 #084406 800 #0A5908 700 #0D720A 600 #11930D ★500 #13A10E 400 #42B43E 300 #61C05E 200 #92D490 100 #B6E2B4 50 #E7F6E7

Red (Error / Danger / Destructive)

Step Hex ------ ----------- 900 #581618 800 #731D1F 700 #942528 600 #BE2F33 ★500 #D13438 400 #DA5D60 300 #E0777A 200 #EAA2A3 100 #F1C0C1 50 #FAEBEB

Yellow (Warning / Attention)

Step Hex ------ ----------- 900 #854D00 800 #B36800 700 #DB8000 600 #FA9200 ★500 #FFAA33 400 #FFC16B 300 #FFD294 200 #FFE3BD 100 #FFF2E0 50 #FFF9F0

Violet (Accent / Highlight)

Step Hex ------ ----------- 900 #380070 800 #5700AD 700 #6600CC 600 #7000E0 ★500 #7F00FF 400 #B870FF 300 #D1A3FF 200 #E3C7FF 100 #F2E5FF 50 #F7F0FF

Orange (Secondary Accent)

Step Hex ------ ----------- 900 #802400 800 #B33300 700 #D63D00 600 #E63900 ★500 #FF4405 400 #FF956B 300 #FFBA9E 200 #FFD3C2 100 #FFE9E0 50 #FFF4F0

Semantic Tokens

Token Value Usage --------------------------------------------------------- ----------------------- ----------------------- Token colors/Text/gray/text-gray-primary (900) #070A0E Primary body text, headings

Token colors/Text/gray/text-gray-secondary (500) #4A4C4F Secondary/muted text, captions, labels

Token colors/Background/gray/bg-white-primary (F-900) #FFFFFF Primary page/card background

Additional semantic tokens (borders, interactive states, surface

layers) follow the same naming pattern:

Token colors/{category}/{subcategory}/{role}.

Color Usage Rules

1. Text primary → Grey 900 (#070A0E) on light backgrounds
2. Text secondary → Grey 500 (#4A4C4F) for supporting copy,

metadata, labels

1. Interactive / brand → Primary Blue ★500 (#115ACB) for CTAs,

links, focus rings

1. Success states → Green ★500 (#13A10E) background tint: Green

50

1. Error states → Red ★500 (#D13438) background tint: Red 50
2. Warning states → Yellow ★500 (#FFAA33) background tint: Yellow

50

1. Surfaces → White (#FFFFFF) for cards, modals; Grey 25

(#FAFAFA) for page bg; Grey 50 (#F0F0F1) for subtle dividers

1. Never use raw primitive tokens in component code --- always go

through the semantic layer

Typography Hierarchy

Font family: Inter Display (all weights)

Type Scale

Role Size Weight Line Height Letter Spacing CSS ------------- ---------- ---------- ----------------- --------------------- ----------------------------------------------------- H1 \~48px 700 \~56px 0 inferred

H2 \~36px 700 \~44px 0 inferred

H3 \~30px 600 \~38px 0 inferred

H4 \~28px 600 \~36px 0 inferred

H5 / 24px 500 32px 0 `font-size:24px; font-weight:500; line-height:32px` Medium

Paragraph 16px 500 24px 0 `font-size:16px; font-weight:500; line-height:24px` Large / Medium

Paragraph 12px 400 18px 0 `font-size:12px; font-weight:400; line-height:18px` Small / Regular

Rows marked inferred follow the geometric progression of confirmed

steps. Verify against the typography page in Figma.

Typography Rules

1. Section labels / category headings → H5 Medium (24/32, weight

500)

1. Body copy / list items / data labels → Paragraph Large Medium

(16/24, weight 500)

1. Captions / hex values / metadata → Paragraph Small Regular

(12/18, weight 400)

1. Color values in labels always render in Grey 500; label names in

Grey 900

1. No letter-spacing adjustments --- system is letter-spacing: 0

throughout

1. Line height is tight --- ratio ≈ 1.3--1.5. Never add extra

leading outside the type scale.

Spacing Rhythm

The spacing system is token-based on a 4px base unit.

Known Spacing Tokens

Token Value ------------------------- --------- Spacing/Spacing 0px 0px Spacing/Spacing 4px 4px Spacing/Spacing 96px 96px Spacing/Spacing 112px 112px

Inferred Scale (4px grid)

4px — micro gap (between color swatches, inline chips) 8px — small gap (label row stacking) 12px — component internal padding 16px — base unit (common padding, small gaps) 24px — section sub-grouping gap 32px — component-to-component gap 40px — section gap within a page zone 48px — large section padding 64px — inter-section spacing 96px — page vertical padding 112px — page horizontal padding

Spacing Rules

1. All spacing values must be multiples of 4px
2. Page-level padding: 112px horizontal, 96px vertical
3. Section gaps: 40px between major content groups
4. Sub-section gaps: 24px between labeled groups and their content
5. Item gaps: 8px between label rows; 4px between color swatches
6. Inline gaps: 2px for stacked text within a single label block

Border Radius Rules

Border radius values are not explicitly documented in the extracted

node. The following are inferred from the visual style and product

tier (precision tools use subtle rounding).

Context Radius ------------------------------------- --------------------- Cards / panels 8px Buttons (default) 6px Tags / badges 4px Inputs 6px Modals 12px Color swatches (as seen in palette) 0px (flat/square) Avatars / image containers 50% (full circle)

Verify against the component library pages in Figma. Default to 6px

when in doubt.

Layout Structure

Page Canvas

┌────────────────────────────────────────────────────┐ │ padding: 96px top/bottom, 112px left/right │ │ ┌──────────────────────────────────────────────┐ │ │ │ Content area (full-width flex column) │ │ │ │ gap: 40px between major sections │ │ │ └──────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────┘

Section Structure

Each content section follows:

[Section Header — H5 Medium, full width] gap: 24px [Content grid — flex wrap, gap: 4px, items stretch to fill]

Grid / Flex Patterns

• Content sections: flex-col, gap: 24px, width: 100%
• Color/item grids: flex-wrap, gap: 4px, each item

flex: 1 0 0, min-width: 1px

• Label blocks: flex-col, gap: 2px
• Top-level page: flex-col, gap: 40px, width: 100%

Responsive Behavior

The wrapping flex grid (flex-wrap) allows color swatches to reflow at smaller widths. The flex: 1 0 0 pattern ensures equal-width columns that shrink uniformly.

Component Patterns

Color Swatch Block (_Color blank)

[Color swatch — h:60px, w:full, background = color value] gap: 8px [Label group] [Step number — Paragraph Large Medium, Grey 900] [Hex value — Paragraph Small Regular, Grey 500]

Section Block

[Section title — H5 Medium, Grey 900] gap: 24px [Swatch row — flex-wrap, gap:4px] [Color swatch block × 10]

Reusable Pattern: Labeled Value Row

Used anywhere a value needs a name + sub-label (not just colors):

[Primary label — 16px Medium, Grey 900] [Secondary value — 12px Regular, Grey 500]

Gap between rows: 2px.