Everything needed to build another app that looks and behaves exactly like Electra Consumer — tokens, type, components, icon styles and interaction patterns. This file is self-contained; share it as-is.
White cards on a cool gray canvas. Color is information, not decoration — indigo means interactive/status, coral means urgency, green means done.
Every corner is 4px — cards, buttons, badges, inputs, sheets. The only circles allowed are functional: radio dots, step markers, avatars, success badges.
Sized for a 360–376px viewport. Base text 13.5px, titles 15.5px, generous whitespace between sections rather than inside components.
Use CSS variables exactly as named. Status colors always ship as a trio: text color, 050 surface, and border.
| Swatch | Token | Hex | Usage |
|---|---|---|---|
| --pri | #5B6EF5 | Accent: active nav, status badges, links, chart highlight, selection | |
| --pri-600 | #4A5BE0 | Pressed / deep indigo (gradients) | |
| --pri-050 | #EEF0FE | Indigo surface (badges, pills, selected states) | |
| --pri-brd | #CCD4FC | Indigo badge border | |
| --ink | #26313F | Titles, values, key numbers | |
| --slate | #46566C | Section headers | |
| --body | #5F6B7A | Body copy | |
| --muted | #98A2B3 | Secondary text, timestamps, IDs | |
| --label | #8F99A8 | Key-value labels (left column) | |
| --border | #E9ECF1 | Card borders | |
| --line | #F0F2F5 | In-card dividers | |
| --bg | #F5F6F9 | Screen background (auth screens use #FFF) | |
| --tile | #F3F5F8 | Neutral icon tiles | |
| --black | #17181A | Primary buttons & FAB (always black, never hover-shifts) | |
| --ok / 050 #E9F7EF / brd #BFE8CF | #34B369 | Done, resolved, success | |
| --warn / 050 #FDF1DC / brd #F3DCA6 | #F59E0B | Alerts, banner accents | |
| --danger / 050 #FDEFEE / brd #F8CDCA | #F0655C | Due amounts, deadlines, SLA (a soft coral — never pure red) |
Figtree only. Weights: 400 body · 500 emphasis/buttons · 600 titles · 700 numbers/heros. Include:
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">
| Role | Size / weight | Color | Sample |
|---|---|---|---|
| Auth title | 26px / 700 | --ink | Verify Phone |
| Key figure | 23px / 700, −0.5px | --ink | ₹1,842.00 |
| Stat number | 20px / 700 | --ink | 218 units |
| App-bar title | 15.5px / 600 | --ink | Payments |
| Section header | 14.5px / 600 | --slate | My applications |
| Card title | 13px / 600 | --ink | New Connection |
| Body / values | 12–13.5px / 400–500 | --body / --ink | Domestic Service · due 18 Jul |
| Meta / IDs | 11px / 500 | --muted | APP- 3391 |
| Nav label | 11px / 500 | #4B5768 | Complaints |
16px · card padding 13px7–8px · grid gaps 10px16px above a section header, 9px below0 1px 2px rgba(20,23,35,.03) + 1px border — borders do the work, not shadows.0 8px 20px rgba(16,20,28,.3)0 -8px 30px rgba(16,20,28,.18), backdrop rgba(16,20,28,.45)8px 0 30px rgba(16,20,28,.18)Two families, used for different jobs. Never mix them in the same slot.
Used in stat cards, action tiles, task-card thumbs and list rows. Built as SVG: gradient fills, a soft ground-shadow ellipse, white specular highlights.
Recipe: 64×64 viewBox · shadow ellipse cy=57 fill #1B2436 @12% · gradients: indigo #93A0FA→#4A5BE0, amber #FFD257→#F08C00, paper #FFF→#D9E0EA, slate #93A2B8→#57687F, green #6FDC9C→#23A05A, red #FF9A90→#E2544A.
Used in the bottom nav, app bar, drawer items and inline meta (pin, clock, chevrons). 24px grid, stroke 1.6–1.7, round caps & joins, color --slate (inactive nav #4B5768, active --pri).
Icon tiles behind 3D icons: --tile background, 4px radius. Drawer items use bare line icons — no tiles.
Primary (always black, no hover) · Secondary · Ghost · FAB
＋ NewFAB: bottom-right, 16px inset, floats above the tab bar. Labelled (＋ New), never icon-only.
Status badges are always bordered · count pills boxed · connection chip w/ icon + chevron
Ongoing Energised Overdue Rework 122 CA…1023Action tiles are square (aspect-ratio 1), 3-up per row. Stat cards 2-up, icon top-right.
Anatomy: muted ID (APP- 3391, note the space) over a 600-weight name · bordered status badge top-right · full-width hairline dividers · KV rows with a fixed 106px gray label column · footer holds only the time/SLA, right-aligned, coral for urgency.
Green outline-check = done (connector turns green) · indigo ring-dot + bordered pill = current · gray = pending. 16px markers, 1.5px connectors.
Totals: 13.5px/700 in indigo — the only place an amount is colored.
Labels 11px/500 slate above the field. Phone input: flag + code + chevron box, digits justified edge-to-edge. OTP: 46px boxes, 15px digits.
Underline tabs: 2px dark-ink underline on active, bordered count boxes (active count turns indigo). Segment control: recessed gray track, white raised active.
Info: indigo-050 surface. Alert banner: white card with a 3px amber left rail — placed at the top of the screen.
Max 4 tabs; account/settings live in the hamburger drawer, notifications behind the header bell.
Thin generation bars (15-min / hourly / daily) — amber
Dual thin bars — import (indigo) vs export (green), 5px, centered pairs
Sun-level indicator — animated bars: high / medium / low
High Medium LowSegment controls switch chart ranges (Today / This week / This month). Grid-interaction and generation values use amber for solar, indigo for import, green for export.
Bot & voice bubbles · quick-answer chips · type/speak composer with pulsing mic
Complaints are filed conversationally: voice-first with live transcription, chips for structured answers, and an auto-composed summary card the user confirms. Open tickets carry a message thread with the same composer; Reopen appears only on closed tickets.
:root {
--pri:#5b6ef5; --pri-600:#4a5be0; --pri-050:#eef0fe; --pri-brd:#ccd4fc;
--ink:#26313f; --slate:#46566c; --body:#5f6b7a; --muted:#98a2b3; --label:#8f99a8;
--line:#f0f2f5; --border:#e9ecf1; --bg:#f5f6f9; --tile:#f3f5f8; --black:#17181a;
--ok:#34b369; --ok-050:#e9f7ef; --ok-brd:#bfe8cf;
--warn:#f59e0b; --warn-050:#fdf1dc; --warn-brd:#f3dca6;
--danger:#f0655c; --danger-050:#fdefee; --danger-brd:#f8cdca;
--r:4px;
font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
font-size:13.5px; color:var(--ink);
}
/* Rules of thumb:
1. Corners: 4px everywhere; circles only when functionally round.
2. Primary actions: black (#17181a), white text, no hover effect.
3. Status = bordered badge (bg 050 + border brd + colored text).
4. Urgency/amounts due: coral #f0655c, never pure red.
5. Cards: #fff, 1px #e9ecf1 border, 0 1px 2px rgba(20,23,35,.03).
6. 3D gradient icons for content, 1.6px line icons for chrome. */
Electra Design Language v1.1 · extracted from Electra Consumer prototype v2.1 · This document is self-contained and safe to share externally.