Design System & Token Showcase
Blueprint Palette & Schematic Visual Tokens (UI_UX_GUIDELINES.md §3–§5)
1. Brand & Neutral Palette
--ink-900
Primary text & headings
--ink-700
Secondary headings & icons
--slate-500
Body-secondary text
--slate-400
Muted text & placeholders
--line-200
Borders, dividers, hairlines
--paper-100
App background (cool)
--surface
Cards, sheets, inputs
--surface-elevated
Elevated surfaces
2. Brass Action Accent
Warm brass/amber against cool technical blueprint neutrals. Evokes engineering instruments. Text on --brass-600 uses dark --ink-900 for AA contrast.
--brass-600
Primary action button
--brass-700
Action hover / pressed
--brass-100
Accent tint & primary chips
3. Semantic Status System
Distinct hue system for problem lifecycle (OPEN = Blue, RESOLVED = Violet, CONFIRMED = Green, CLOSED = Slate).
Logged, awaiting solutions / DSW action
DSW acted — awaiting author confirmation
Fixed and verified by reporting student
Invalid, duplicate, or withdrawn
4. Feedback Palette
--danger
Destructive / Error
--warning
Warning (shares brass)
--success
Success
--info
Information
5. Typography Scale & Font Families
DISPLAY (Space Grotesk · 28px → 40px)
Campus Problem & Solution Portal
H1 (Space Grotesk · 22px → 28px)
Hall-3 Water Supply Down for 24 Hours
H2 (Space Grotesk · 18px → 22px)
Central Library AC not working in Study Hall
BODY (Inter + Noto Sans Bengali · 15px → 16px)
The main water pump in Hall 3 stopped working yesterday morning. Students have no running water on the 3rd and 4th floors. হল-৩ এর মেইন পানির পাম্প বিকল হয়ে গেছে, দ্রুত সমাধান প্রয়োজন।
MONO-XS (IBM Plex Mono · Tabular Nums · 12px → 13px)
#problem-1024 · Rafi (Student) · 12 Aug 09:14 · 6 solutions · Score: +42
6. Spacing, Radius & Elevation
Card Radius & Resting Shadow
rounded-lg (12px) · shadow-card
Input Radius & Popover Shadow
rounded-md (8px) · shadow-popover
Badge / Chip Radius
rounded-pill (9999px)