Design System & UI Primitives
Single source of truth for Glogonx NPO UI design tokens, primitives, accessibility focus states, and shell components.
1. Design Tokens (§5)
Colour palette, typography scale, spacing, and radius tokens defined in styles/theme.css.
Paper
#F7F6F2
Page background
Surface
#FFFFFF
Cards, panels
Ink
#101A33
Primary text, dark sections
Slate
#5A6478
Secondary text, meta
Line
#E3E1DA
Hairlines, borders, dividers
Indigo
#2B3F8C
Interactive, links, brand chrome
Indigo Ink
#1B2A63
Indigo hover / dark fills
Marigold
#F5A524
Primary CTA, progress, celebration
Marigold Deep
#C77F0D
AA Large marigold text (18px+ reg, 14px+ bold)
Leaf
#147D5E
Verified, success, compliance met
Clay
#B3401E
Error, destructive, overdue
Amber Note
#8A6A12
Warning text
3. Forms & Inputs
Form controls use --color-indigo for checked/active state (Clarification #2). Hairline borders, explicit errors.
Input States
Legal registered name
Enter an amount of ₹100 or more.
Select & Radio Group
Checkbox & Switch Controls
Checked state uses Indigo fill per Clarification #2 rule.
4. Chips, Status & Signature Elements
Status badges, Progress Rail, and G-Score signature element (§5.6).
Status Chips & Badges
Leaf for compliance, Clay for error, Marigold surface with Ink text for small labels.
Progress Rail & Demo Data
Thin Marigold rail for campaign funding progress.
Campaign Progress (72%)
Demo Honesty Marker
Demo dataSignature: G-Score Dial (§5.6)
Indigo ring, Marigold score arc, tabular score.
5. Cards & Data Tables
Surface radius 20px, 1px solid hairline borders, no shadows on cards. Tabular numerals for amounts.
Recent Donations (Tabular)
| Donor | Category | Date | Amount (₹) | Status |
|---|---|---|---|---|
| Kavya R. | Monthly | 15 Sep 2026 | ₹2,500 | Completed |
| Arun Kumar | One-time | 14 Sep 2026 | ₹1,000 | Completed |
| Anonymous Donor | One-time | 12 Sep 2026 | ₹500 | Completed |
Coimbatore Rural Education
ActiveInteractive card (hover changes border to Indigo, no shadow)
Providing digital learning devices for 240 students across 4 panchayat schools.
Empty State Card
Demonstrating standard empty state primitive inside container
No grants saved yet
Match your NGO profile against CSR funding opportunities in Notifie.
6. Overlays, Feedback & Skeleton States
Drawer right panel, Dialog modal popover, Toast notification, Skeleton loading shimmers.
Overlay Triggers
Click to test focus trapping, ESC key close, backdrop wash.
Tabs Primitive
Toast Notification (Pop Shadow)
Donation Received
₹2,500 from Kavya R. added to local store.
Submission Error
Enter a valid 10-digit PAN number.
Skeleton Loading States
Animated pulse shimmers used during simulated latency.
Error State Primitive
Failed to fetch funding alerts
The server simulation encountered a latency timeout. Check your connectivity and try again.
7. App Shell & Marketing Shells
Marketing header & 4-col footer, App shell with collapsible Left Rail (248px expanded / 64px collapsed).
A. Marketing Navigation & Footer Shell
Marketing Page Canvas Area
This area hosts public marketing routes (/ , /pricing, /discover, /c/[slug]). Header switches to surface background on 80px scroll.
B. App Shell (Left Rail Interactive Preview)
App Dashboard Canvas
Demo dataTotal Raised
₹4,82,300
Active Donors
318
G-Score
78 / 100
8. Keyboard Walkthrough Checklist (§9 Accessibility Gate)
Verification of keyboard focus states on all interactive elements across `/styleguide`. All elements feature visible 2px Indigo ring with 2px offset (`focus-visible:ring-2 focus-visible:ring-indigo focus-visible:ring-offset-2`).
Tab Navigation Focus Ring Verification Checklist
Format required by gate criteria: itemized checklist of interactive targets reachable via Tab key.