A token-first design language for eLockr — the platform for issuing digital, fraud-proof work records. One source of truth for designers and engineers: primitives, semantic tokens, accessible components, and ready-to-compose templates.
Four rules govern every decision in this system. When a new pattern is proposed, it must pass all four.
1 · Token-first
No raw hex values or pixel numbers in designs or code. Every colour, space and radius resolves through a semantic token, so a rebrand or a new mode (user → admin) is a one-place change.
2 · Trust by default
eLockr handles people's work records. The UI must always feel calm and verifiable: restrained colour, generous whitespace, explicit states — never decorative noise.
3 · Accessible, not optional
Every text/surface pair ships at WCAG AA or better. Focus states, touch targets and error messaging are part of the component, not an afterthought.
4 · Build once, reuse everywhere
If a pattern appears twice, it becomes a component with variants. Local overrides ("detached instances") are treated as bugs.
Token architecture
The system is layered. UI never touches primitives directly — it only consumes semantic tokens. This indirection is what makes the system scalable.
Layer
Example
Who uses it
Rule
Primitives
blue/500 · #479FDE
Token authors only
Raw values. Never referenced in a design or component.
Semantic tokens
surface/brand/default
Designers & engineers
Named by intent, not appearance. The only layer UI consumes.
Components
Button / Primary / M
Everyone
Built entirely from semantic tokens, with variants for state, size and content.
Templates
Dashboard, Data table
Product teams
Composed only from published components — no local styles.
Modes: user & admin
eLockr ships two portals — the user portal (employers issuing and verifying records) and the admin portal (OnGrid operations managing accounts, credits and escalations). They are not separate design systems. Every foundation and every interactive component below is shared verbatim; a mode only swaps the top-layer chrome — the things that frame the experience, never the controls inside it.
Layer
Shared across modes
Customised per mode
Primitives & semantic tokens
✓ Identical
—
Components (button, input, table, modal…)
✓ Identical behaviour & states
—
Top-layer chrome
—
Sidebar nav items, logo lockup, top-bar actions, accent treatment, landing/dashboard layout
Because the swap lives entirely in the chrome, a fix to a shared component lands in both portals at once — and a new mode is configuration, not a rebuild.
Foundations
Logo
The eLockr mark is two speech marks in conversation — the employer's word and the employee's record — set in brand cyan and logo navy. The wordmark is always navy.
Primary · on light
Reversed · on dark
Rules: clearspace equals the height of the "e" on all sides · minimum height 24px · never recolour, rotate, outline or place on busy imagery · on dark surfaces use the reversed version with the white wordmark — the cyan accent stays the same in both.
App sidebar & auth pages
Primary logo, 26–32px height, top-left
Dark surfaces (navy panels, footer)
Reversed version
Logo navy
#021373 — the wordmark and lower speech-mark colour
Logo cyan
#27B9F2 — the upper speech mark; source of the brand cyan ramp
Colour primitives
Six ramps, ten steps each, on a 50–900 scale. Steps are tuned so that 500 is the anchor, 50–100 work as subtle surfaces, 200–300 as borders and fills, and 600–900 hold AA contrast for text on light surfaces.
Primary actions, icons, data visualisation anchors
600–700
Hover/pressed states of 500, text on subtle surfaces
800–900
High-emphasis text, headings, inverse surfaces
Semantic colour tokens
Primitives are mapped to intent-based names in three groups — Surface, Border and Text/Icon. Designers pick by intent ("the danger surface"), never by value ("red 50").
Token
Maps to
Use for
surface/page
white
App background
surface/subtle
grey/50
Section backgrounds, table headers, hover rows
surface/disabled
grey/200
Disabled controls
surface/brand/subtle
blue/50
Selected states, info washes
surface/brand/default
blue/500
Primary buttons, active controls
surface/brand/darker
blue/700
Pressed primary actions
surface/success/default
green/500
Verified, issued, completed
surface/danger/default
red/500
Destructive actions, failed verification
surface/warning/default
yellow/400
Pending, expiring records
border/default
grey/300
Inputs, cards, dividers
border/brand
blue/500
Focused inputs, selected cards
text/title
grey/900
Headings, key data
text/body
grey/800
Default body copy
text/subtle
grey/600
Secondary copy, descriptions
text/caption
grey/500
Captions, metadata, placeholders
text/disabled
grey/400
Disabled labels
text/ink
darkblue/800
Display headings, brand moments
Typography
Poppins for display (H1–H4) gives eLockr its confident, geometric voice; Inter for everything below the fold keeps dense record data legible. Three weights per level: Bold, Regular, Light — never more.
Style
Specimen
Spec
Use
H1
Work records
Poppins · 40/48 · 600
Page titles, marketing heroes
H2
Work records
Poppins · 32/40 · 600
Section titles
H3
Work records
Poppins · 24/32 · 600
Card group titles, modal titles
H4
Work records
Poppins · 20/28 · 500
Sub-sections, widget headers
Headline
Work records
Inter · 17/24 · 600
Emphasised rows, list titles
Body
Work records that travel with the employee.
Inter · 15/24 · 400
Default copy
Subtitle
Work records that travel with the employee.
Inter · 13.5/20 · 400
Supporting copy, descriptions
Caption
Issued 14 Mar 2026 · Ref EL-20893
Inter · 12/16 · 400
Metadata, helper text, labels
Footnote
Verified by eLockr
Inter · 11/14 · 500 · caps
Overlines, legal, table headers
Spacing & sizing
A single number scale — 2, 4, 6, 8, 12, 16, 20, 24, 32, 40 — drives all padding, gaps and margins. If a measurement isn't on the scale, it's wrong. The scale maps 1:1 to engineering spacing variables.
space-2
space-4
space-8
space-12
space-16
space-20
space-24
space-32
space-40
Rules of thumb
4–8
Inside a component: icon-to-label, badge padding
12–16
Between related elements: form label to input, card padding (S)
20–24
Between components: cards in a grid, form fields
32–40
Between sections and page regions
Corner radius
T-shirt sized. Smaller elements get smaller radii so curvature looks optically consistent across scales.
XS · 4
S · 6
M · 8
L · 12
XL · 16
Full
XS / S
Checkboxes, tags, small buttons, code chips
M
Buttons, inputs, menus — the workhorse radius
L
Cards, modals, panels
XL
Page-level containers, feature surfaces
Full
Pills, badges, avatars, toggles
Elevation
Five levels. Elevation communicates hierarchy of attention, not decoration — most of the UI lives flat at level 0 with borders; shadows are reserved for things that float.
XS
S
M
L
XL
XS
Raised rows, toggle knobs
S
Cards that need separation from a tinted background
M
Dropdown menus, popovers, date pickers
L
Toasts, floating action panels
XL
Modals and dialogs only
Grid & layout
Desktop product surfaces use a 12-column grid, 1140px max width, 24px gutters. Mobile uses 4 columns with 16px margins. Page regions snap to the spacing scale.
App shell
240px fixed sidebar + fluid content area (min 720px)
Content pages
12 col / 1140px / 24px gutters, centred
Forms
Single column, 480px max — never two-column forms
Mobile
4 col, 16px margins, stack all card grids
Guidelines
Colour usage
Blue is the only brand colour in product UI. Green, red and yellow are status colours — they carry meaning (verified, failed, pending) and are never used decoratively.
✓ Do
One primary action per view. Secondary actions use the outline variant.
✕ Don't
Don't use status colours for actions, and never compete with multiple filled buttons.
✓ Do
VerifiedPendingRevoked
Status colours always pair a subtle surface with the 600–700 text step of the same ramp.
✕ Don't
VerifiedRevoked
Don't use solid 500 fills for badges, and never put neutral text on a status surface.
Quick rules
· 60/30/10 split: ~60% neutral surfaces, ~30% text and borders, ≤10% brand and status colour per screen.
· Colour is never the only signal — pair every status colour with a label or icon.
· Dark blue (ink) is reserved for display typography and inverse surfaces (toasts, tooltips).
Typography usage
✓ Do
Employment recordIssued by Horizon Logistics · 14 Mar 2026
Build hierarchy with one weight step and one colour step at a time.
✕ Don't
EMPLOYMENT RECORDIssued by Horizon Logistics · 14 Mar 2026
· Maximum two levels of heading per view.
· Line length: 45–75 characters for paragraphs; data tables are exempt.
· Numbers in tables use tabular figures and right alignment.
· Poppins never below 20px — small sizes switch to Inter for legibility.
Accessibility
Baseline is WCAG 2.1 AA. These requirements are built into tokens and components, so compliance is the default, not an effort.
Area
Requirement
How the system enforces it
Contrast — text
4.5:1 minimum (3:1 for ≥24px)
text/body on any surface/*subtle token ≥ 7:1; status text uses 600–700 steps
Contrast — UI
3:1 for controls & focus rings
border/default and focus ring colours are pre-checked
Focus
Visible on every interactive element
3px blue/200 ring baked into button and input components
Touch targets
≥ 44×44px on mobile
Size M and L meet it natively; size S is desktop-only
Colour independence
Meaning never by colour alone
Status badges always include a dot + label; errors include icon + message
Motion
Respect reduced-motion
Transitions limited to 150–200ms opacity/colour; no parallax
Content & voice
eLockr's voice is clear, neutral and verifiable — it talks about people's livelihoods, so it never gets cute with errors and never assigns blame.
Rule
✓ Write
✕ Avoid
Sentence case everywhere
Issue new record
Issue New Record / ISSUE RECORD
Verbs on buttons
Verify record
OK · Submit · Yes
Errors: what + how to fix
We couldn't verify this ID. Check the reference number and try again.
Verification failed! / Oops, something went wrong 😅
Neutral about people
This record was revoked by the issuer
This employee's record was rejected
Absolute dates
Issued 14 Mar 2026
Issued 3 days ago (in records); relative time OK in activity feeds
Naming conventions
One grammar across Figma variables, component properties and code, so handoff needs no translation.
Thing
Pattern
Example
Primitive
{ramp}/{step}
blue/500
Semantic token
{property}/{intent}/{variant}
surface/brand/subtle
Component
{Component} / {Variant} / {Size}
Button / Primary / M
Component props
camelCase booleans & enums
hasIcon · state=hover · size=m
Code variable
--{property}-{intent}-{variant}
--surface-brand-subtle
Contribution flow: propose in the #design-system channel → build in a branch with all states → review against the four principles → publish with a changelog entry. Detached instances found in product files are filed as system bugs.
Components
Button
Four variants × three sizes × five states. Variants encode hierarchy: one primary per view, secondary for alternatives, tertiary for low-emphasis actions, danger only for destructive confirmation.
Primary — the single most important action on the view. Sizes L (marketing/empty states), M (default), S (dense tables, toolbars).
Secondary (default) is the white, grey-bordered button — it turns cyan on hover. Tertiary is a text/link button in brand cyan. Danger always triggers a confirmation modal. Icons sit left of the label at 1em, gap 8; icon-only buttons must carry an aria-label.
Input field
Label on top, helper text below, four validation states. Labels are never replaced by placeholders.
Found on the employee's eLockr profile.
Enter a valid email, like ravi@company.com.
Reference verified.
Set automatically from your organisation.
States: default → hover (darker border) → focus (brand border + 3px ring) → error/success (status border + status helper). Error messages state the problem and the fix.
Dropdown
Open menu
Employment record ✓
Reference
Skill certificate
Background check
Menus float at elevation M, radius M, 4px inner padding. Selected items use surface/brand/subtle + check. Use a dropdown for 4–12 options; fewer → radio group, more → searchable select.
Checkbox, radio & toggle
States (top to bottom: checkbox, radio, toggle): default grey border → cyan border on hover/focus → checked fills blue/400 (checkbox: white check · radio: cyan dot) → error swaps the border to red/400 → disabled fills surface/disabled. Checkbox = multiple independent choices · Radio = exactly one of 2–5 · Toggle = instant on/off setting. The full label row is clickable, never just the control.
Steps
Guides users through multi-stage flows like bulk record uploads. States: done, active (ringed dot), upcoming.
Upload file
Analysing
Analysed report
Use for 3–5 sequential stages. Labels are nouns or gerunds, 1–2 words. Completed connectors turn blue/300; users can click back to completed steps but never forward.
Upload
Dashed dropzone for bulk record files. Accepts click or drag, states the supported formats up front.
Click or drag file to this area to upload
XLS, CSV formats are supported
Always pair with a Download template link so users start from a valid file. On rejection, show a danger alert naming the expected format — never silently fail. Validation results render in the Steps flow, not inside the dropzone.
Avatar
RSRSRSHLAK
RSHLAK+4
Sizes S 28 / M 40 / L 56. Initials = first + last name, semantic colour assigned by hash so a person's colour is stable everywhere. Groups overlap −8px with a 2px page-colour ring; overflow collapses into a +n counter.
Badge & status
VerifiedPendingRevokedIn reviewDraft
The five record states of eLockr, fixed across the product: Verified · Pending · Revoked · In review · Draft. Subtle surface + 600/700 text of the same ramp + dot. Never invent new state colours per feature.
Alert
Verification in progress
This record is being verified with the issuer. This usually takes under 24 hours.
Record issued
EL-20893 has been issued and the employee has been notified.
Record expiring
This certificate expires on 30 Jun 2026. Renew it to keep it verifiable.
Verification failed
The reference number doesn't match the issuer's records. Check the number and try again.
Inline, contextual, non-blocking. Title (600) + one sentence of body. For transient confirmation use a toast; for blocking decisions use a modal.
Card
Outlined card
Default. 1px border/subtle, radius L, padding 20. Use on white page surfaces.
Elevated card
Elevation S, no border. Use on tinted (surface/subtle) backgrounds.
Selected card
Brand border + brand subtle surface for chosen options.
Pick outlined or elevated per surface — never both on one screen. Cards never nest inside cards.
Tabs
2–6 peer views of the same object. Active = brand text + 2px brand underline. Counts in parentheses. Tabs never trigger navigation away from the page — that's a nav link.
Tooltip
prompt text
Copy reference number
Charcoal surface (grey/800), white 12.5px text, radius S, with a caret pointing at the trigger. Max one short phrase, 300ms hover delay. Never hide essential information in a tooltip — it's unreachable on touch.
Modal
Modal Title
string, will close after 1 sec
Elevation XL, radius M, 560px (confirm) or wider for forms. Three bands separated by 1px dividers: header with the bold title, body with the message, footer with actions bottom-right and the primary last (Cancel · OK). Cancel is the grey-filled quiet button; the primary repeats the consequence verb where destructive. Backdrop grey/900 @ 45%.
Table
Employee
Record
Issued
Status
Action
RSRavi Shankar
EL-20893
14 Mar 2026
Verified
AKAnita Kumar
EL-20871
02 Mar 2026
Pending
MJMeera Joshi
EL-20810
18 Feb 2026
Revoked
Header row on surface/subtle with footnote-style caps labels. Row hover wash, 12px cell padding. IDs in mono, dates absolute, status as badges, row actions right-aligned and tertiary.
Pagination
Showing 1–10 of 142 records
…
Always paired with a result-count label. Default page size 10; tables paginate past 25 rows rather than scroll.
Toast
Record EL-20893 issued successfullyView
Couldn't reach the server — changes not savedRetry
Bottom-left, elevation L, auto-dismiss at 5s (errors persist until dismissed), one optional action. Max one toast visible; new ones replace old.
Breadcrumbs
Only on pages ≥3 levels deep. Current page is plain text, never a link. Truncate middle levels past 4 with an ellipsis.
Empty state
🗂
No records yet
Issue your first work record and it will show up here for your whole team.
Three parts, always: what this space is, why it's empty, and the one action that fills it. No sad illustrations, no apologising.
Patterns
Templates
Reusable page skeletons composed only from published components. Product teams start from a template, never a blank frame.
Dashboard template
app.elockr.in/dashboard
·
Dashboard template.Used for: Home, Analytics, Operations and Team dashboards. Rules: KPI cards appear first · charts appear below the KPI cards · maximum 4 KPI cards per row · built from the Card component only · no business-specific content.
Data table template
app.elockr.in/records
·
Data table template.Used for: Users, Employers, Employees, Records, Requests, Credits and Audit logs. Rules: search always sits above the table · pagination always below it · bulk actions live in the toolbar · tables never contain forms.
Form template
app.elockr.in/users/new
·
Form template.Used for: Create/Edit User, Create/Edit Organisation and Settings forms. Rules: single-column layout · maximum width 480px · labels above inputs · primary action at the bottom · never a multi-column form.
Content template
app.elockr.in/reports
·
Content template.Used for: Reports, Documentation, Settings, User details, Help centre and custom modules. Rules: no predefined content structure · maximum flexibility · the content area supports cards, tables, charts, forms or any custom content.
Versioning & governance
The system is a product with releases, not a static file.
Version
Scope
What it means for teams
Patch · 1.0.x
Bug fixes, token value tweaks
Auto-adopted, nothing to do
Minor · 1.x.0
New components or variants
Opt-in, announced in changelog
Major · x.0.0
Breaking renames or removals
Migration guide + one-cycle deprecation window
v1.0 — June 2026. Initial release: logo guidelines, 6 colour ramps, 40+ semantic tokens, 9-level type scale, spacing/radius/elevation foundations, 18 components and 4 application templates.
