Chitragupt · web design system

Component reference

Canonical visual primitives. Every new wireframe must use these exact class strings — no improvising.

← All routes

Buttons

Three sizes. Three intents (primary / secondary / destructive). All `rounded-md` with `font-semibold` text.

Primary

Hero:    rounded-md bg-brand-500 px-5 py-2.5 text-sm font-semibold text-ink-inverse
Default: rounded-md bg-brand-500 px-4 py-2 text-xs font-semibold text-ink-inverse
Compact: rounded-md bg-brand-500 px-3 py-1.5 text-[11px] font-semibold text-ink-inverse

Secondary (bordered)

rounded-md border border-line-strong bg-surface px-{3,4,5} py-{1.5,2,2.5} text-{[11px],xs,sm} font-medium text-ink

Destructive

rounded-md border border-danger/30 bg-danger/10 px-{4,5} py-{2,2.5} text-{xs,sm} font-semibold text-danger-fg
Rule: never use `rounded-lg` or `rounded-xl` on buttons. CTA padding scales with text size — don't mix (e.g. `px-5` with `text-xs`).

Status pills / badges

Always `rounded-full px-2 py-0.5 text-[10px]`. Color = semantic (see Color semantics).

Confirmed Pending Failed Family AI Self Neutral Outlined

For all-caps eyebrow labels INSIDE a pill, add uppercase tracking-widest.

Section cards

Always `rounded-2xl border bg-surface/40 p-5`. Border color = neutral (zinc-800) or semantic.

Default · neutral

For most informational panels.

Positive · highlighted

For success state or primary CTA region.

Required · double-border

For consent / required fields.

Warning

For unresolved states / soft alerts.

Danger / lost

For failed / negative information.

Family

For Pro Family / household context.

Never use `rounded-xl` or `rounded-md` for full cards (only for nested sub-cards), and never use `p-6` (only modal headers).

Eyebrow labels

Always `text-[10px] uppercase tracking-widest`. Color = neutral or semantic.

Default (neutral) — describing a region

Positive — highlighted region

Warning / pending

Danger

Family / Pro Family

AI Self

Info banners (single-line alerts)

Always `rounded-md border bg-{color}/5 px-3 py-2 text-[11px]`. Sits inside a card, above or below content.

Info: A non-blocking confirmation or reassurance.
Warning: Something the user should know but can proceed past.
Danger: A failure or irreversible action.
Family: Context-specific to Pro Family / household.

Form inputs

Always `rounded border border-line-strong bg-frame px-3 py-2 text-sm focus:border-brand-500 focus:outline-none`.

Tab pills (segmented control)

Always `rounded-full px-3 py-1 text-[12px]`. Active = emerald tint; inactive = zinc-900.

List rows (divided)

Wrap in `divide-y divide-line` on the parent. Each row: `flex items-center justify-between py-2 text-sm`.

Recent

  • Form 16 · TechServe14 May
  • 26AS · AY 2026-2712 May
  • AIS · TIS data10 May

Stat blocks

Eyebrow label + `font-mono text-2xl font-semibold` number. Inside a section card.

Refund

+ ₹18,000

ITR-1 · new regime

Documents

14

2 pending

Owed

− ₹4,200

Pay by 31 Jul

Color semantics

Color = meaning. Never decorate.

emerald — primary brand, confirmed, refund, you (current user)
amber — pending, warning, CA engagement state
rose — failed, owed, danger, lost money
blue — Pro Family / household
purple — AI Self / AI Q&A
zinc — neutral, metadata, helper text

Typography scale

Hero · text-3xl font-semibold tracking-tight

Page H1 · text-2xl font-semibold tracking-tight

Section H2 · text-xl font-semibold

Sub-section H3 · text-lg font-semibold

Body · text-sm

Metadata · text-xs text-ink-2

Helper text · text-[11px] text-ink-3

Eyebrow · text-[10px] uppercase tracking-widest

₹1,82,400

Money values use the `font-mono` class. Format as Indian-grouped: ₹1,82,400 (not ₹182400, not ₹1.82L unless space-constrained).

Anti-patterns — don't do these