Developer · v1.19

Design system.

Every token VeriHandi ships with. Click any swatch to copy. Switch themes in the top-right to see light/dark values in place.

source · /src/index.css · tailwind.config.js

Brand scale

Green primary from brand.50 (tint) to brand.900 (deep ink). Use in Tailwind as `bg-brand-500`, `text-brand-600` etc.

Warm accent

Used for favourites, skips, flames. Available as `bg-warm-500`, `text-warm-600`.

Semantic tokens

Theme-aware CSS variables. These are the ones you should reach for in components.

--primary

Button fill (same in both themes)

#3f7a68

--primary-hover

Primary hover state

#2f5f51

--primary-ink

Primary text/icon on surfaces

#2f5f51

--primary-soft

Tinted brand backgrounds

#e0ece7

--accent

Warm accent (flame, skip, favourite)

#c46e4e

--accent-hover

Accent hover state

#a85a3e

--accent-ink

Accent text/icon on surfaces

#a85a3e

--accent-soft

Tinted warm backgrounds

#fbebe1

--success

Positive / taken state

#3ba55d

--success-bg

Success tinted bg

#e8f5ed

--warning

Due-soon / pending

#e6a23c

--warning-bg

Warning tinted bg

#fbf1e1

--error

Destructive / error

#e5533d

Surface & text

Canvas, card, and text colors.

--bg

App background

#f8faf9

--surface

Card / panel

#fff

--surface-2

Subtle nested surface

#f1f4f2

--border-subtle

Quiet divider / border

#e2e8e5

--text-main

Primary text

#111827

--text-muted

Secondary text / captions

#6b7280

Switch / toggle

Single source of truth for every Switch component in the app. Edit a variable in /index.css to retheme every toggle at once.

Live preview

OFF →

ON →

Tap to flip — both states use the same tokens.

--switch-track-on

Track when ON (brand-green by default)

#3f7a68

--switch-track-on-border

1-2px border on the ON track

#2f5f51

--switch-track-off

Track when OFF (warm gray)

#f1f4f2

--switch-track-off-border

Border on the OFF track

#e2e8e5

--switch-thumb

Round handle color

#fff

--switch-thumb-ring

Subtle outline around the thumb

#0000001a

--switch-label-on

ON text inside the track

#fff

--switch-label-off

OFF text inside the track

#6b7280

Button — outline variant

Outline buttons used to render with white-on-light text in dark or hover states. These tokens pin the colors so the variant is always readable.

Live preview

--button-outline-bg

Outline button base background

#fff

--button-outline-bg-hover

Outline button hover background

#f1f4f2

--button-outline-text

Outline button text color (must contrast both backgrounds)

#111827

--button-outline-border

Outline button border

#e2e8e5

Radii

8px system. Keep radius consistent within a hierarchy.

--r-sm

8px · Pills, chips, tight elements

--r-md

12px · Inputs, small cards

--r-lg

16px · Cards, modals

--r-xl

24px · Hero sections, feature cards

Shadows

Subtle by design. Loud shadows = noisy UI.

--sh-sm

Subtle (1px edge)

--sh-md

Default card lift

--sh-lg

Elevated modal / dropdown

Motion

Hover each tile — transition speed is applied live.

--m-fast

150ms · Hover states, toggles

--m-base

250ms · Panels, tabs

--m-slow

350ms · Page transitions, reveals

Typography

Manrope display + IBM Plex Sans body. Keep the scale tight.

A quiet set of tools.

Prescription Manager

Section heading

Body

The quiet tools of daily life.

Small

Supporting detail or helper text.

Caption

Timestamps, metadata, small labels.

label-caps

SECTION LABEL

Components in context

Live examples using the tokens above. These should always look right in both themes.

Buttons

Pills & states

TakenAutoPendingSkippedDue soon

Card

Card title

Supporting metadata

Nested cards inherit tokens and look correct in both themes with zero extra effort.

Input

Placeholder, border, and focus ring all use tokens.

Usage cheatsheet

Copy-paste snippets. Prefer these over raw hex values.

// Button (primary)

bg-[color:var(--primary)] hover:bg-[color:var(--primary-hover)] text-white

// Text on light/dark surfaces

text-[color:var(--primary-ink)] · text-[color:var(--accent-ink)]

// Tinted bg

bg-[color:var(--primary-soft)] · bg-[color:var(--accent-soft)] · bg-[color:var(--warning-bg)]

// Border / divider

border-[color:var(--border-subtle)] · divide-[color:var(--border-subtle)]

// Tailwind brand scale

bg-brand-500 · text-brand-600 · bg-warm-50

Rule of thumb · 1 primary, 1 accent, neutrals do most of the work.