Tokens, primitives and patterns. Every screen in the platform is built from these.
Semantic tokens. Feature code never uses the raw palette.
--surface--surface-muted--primary--success--warning--dangerA modest scale — dense UI needs distinguishable steps, not dramatic ones.
Display 48
Heading 28
Subheading 18
Body 14 — the application default.
Dense 13 — tables and secondary text.
Caption 12 — labels and metadata.
Deltas pair colour with an arrow — never colour alone.
Labels, descriptions and errors are wired with real ids and aria-describedby.
As it should appear on the certificate.
Enter a valid Indian mobile number.
Required before any template message can be sent.
Round-robin across available counselors.
WhatsApp verification pending
Payment failed
A real <table>: screen readers get row and column semantics for free.
| Name | Course | Source | Status | |
|---|---|---|---|---|
| Priya Sharma | Tally Prime | Meta Ads | 92 | Hot |
| Rahul Kumar | SAP FICO | Referral | 78 | Warm |
| Anjali Nair | Advanced Excel | Website | 64 | New |
An empty state always offers the next action.
Leads from your website, ads and walk-ins will appear here.
Skeletons match the shape of the content they replace.
Sidebar on desktop, drawer on mobile — one definition, two containers.
KG Soft Technologies
Main Branch
The full AppShell — skip link, sidebar, mobile drawer, sticky header — is wired in 4b-ii with the dashboard.