Career App · Design System

Build with purpose.

Tokens, components, and patterns for Career App. One system, one source of truth — from brand identity to production-ready UI.

Foundations

Design Tokens

Colors, type, layout, motion

Colors

Palettes and semantic roles

Typography

Figtree font system and rules

Brand

Mission, vision, tone of voice

Components

Button

View →
DefaultPrimaryAlert

Badge

View →
StrategyDesignDevPM

Chip

View →

Switch

View →

Score

View →

Progress Bar

View →
TBIBJD

Avatar

View →

Input

View →

Surface

Default card

Card

View →

Design principles

Playful & human

Friendly and light. No stiff corporate aesthetics. Short headings, minimal decoration, warm interactions.

Pill geometry

Pills (rounded-full) and rounded-3xl for all interactive elements. 8pt grid rhythm.

Snappy motion

Never exceed 300ms for common interactions. Surface = border + blur; shadows as subtle depth only.