InfaraInfaraDesign System

Command Palette

Search for a command to run...

System / Specifications

Design specifications

The rules behind every surface. Exact token values, type scale, spacing, motion, iconography, brand, voice, and accessibility floors.

Executable theme contractDark-nativeToken-enforced

Frame

Frame

Design principles

Five commitments. When two decisions conflict, these are the tiebreaker.

Authority order

  1. infara-theme.css — executable theme contract.
  2. colors_and_type.css — flattened CSS token sheet; mirrors the theme.
  3. Brand_style_guide.md — human-readable brand spec.
  4. DESIGN.md — full token + component + governance manifest.

If the theme file and this spec diverge, the theme file wins and this spec is patched.

01

Utilitarian by default

Every element earns its place by helping an operator understand, decide, act, recover, or move work forward. Decoration that doesn't pull its weight is a defect.

02

Tight, dense, and legible

Operational surfaces run compact or standard density. Hit targets, focus, spacing rhythm, and scanability still have to survive. Whitespace is earned, not defaulted to.

03

Composable and reusable

If a visual decision can be reused, it belongs in the shared theme or registry surface — not a component-local literal and not an app-local fork.

04

Dark-native and operationally branded

Infara chrome is anchored by the dark shell. Blue owns the default action; fuchsia is promoted attention. Light theme is parity, not an afterthought.

05

AI-compatible and world-class adaptive

Layouts adapt across widths, zoom, and pointer type without breaking the mental model. AI surfaces stay labeled, provenance-aware, and keyboard-complete.

Surface archetypes

The archetype is the first decision. It locks density, brand expression, and the rest of the typography and color budget.

ArchetypeDensityBrand expressionTypical use
Dense workspaceCompactMinimal; neutrals leadQueues, alarm lists, audit logs
DashboardCompactSelective KPI accentsNOC dashboard, churn cockpit, monitoring
Detail / inspectStandardQuietSubscriber detail, ticket detail, review detail
Settings / formStandardQuietAccount, billing, integrations
Docs / helpStandardQuiet, often lightKnowledge base, runbook, documentation
Auth / entrySpaciousMore expressiveLogin, onboarding, invite
MarketingSpaciousFull expression allowedHero, feature section, CTA
Preview shellStandardSlightly expressiveDemo wrappers, design previews

Dark mode is the default for dense product surfaces, preview cards, and the product UI kit. Light mode is opt-in for content, docs, and marketing surfaces.

Foundations

Foundations

Color

Brand identity anchors, semantic surface tokens, dark canvas, status pairs, and enforced contrast floors.

Brand identity

--color-brand-blue-identity

#028AE1

Identity blue · logo, brand ribbons

--color-brand-fuchsia-identity

#C019E2

Identity fuchsia · logo, ribbons

--color-action-blue

#147EB3

Primary operational action fill

--color-priority-fuchsia

#C811E4

Promoted attention fill

Signature gradient

#147EB3 · 0%#C811E4 · 100%
Reserved for truly featured actions and the mark.

Soft washes

--color-primary-soft

#E0F0FA

--color-tertiary-soft

#F4E4FA

--color-dark-brand-soft

rgba(121, 200, 255, 0.16)

--color-dark-priority-soft

rgba(226, 107, 255, 0.16)

Status · light and dark pairs

--info-light

#0369A1

--info-dark

#79C8FF

--success-light

#047857

--success-dark

#4FD6A2

--warning-light

#B45309

--warning-dark

#F3C35B

--danger-light

#BE123C

--danger-dark

#FF7B8F

--processing-light

#0F766E

--processing-dark

#27C2D1

--neutral-status-light

#6B7280

--neutral-status-dark

#A7B5C8

Neutrals

--color-neutral-black

#303030

--color-neutral-dark

#737373

--color-neutral-gray

#D0D0CE

--color-neutral-off

#F7F7F7

--color-neutral-white

#FFFFFF

Dark canvas surfaces

--color-nav

#060F21

--color-dark-canvas

#08111F

--color-dark-surface-1

#101B2D

--color-dark-surface-2

#121F33

--color-dark-surface-3

#17263D

--color-dark-border

#21324A

Semantic surface tokens

Light theme
--background#FFFFFF
--foreground#303030
--card#F7F7F7
--popover#FFFFFF
--primary#147EB3
--muted#F7F7F7
--muted-foreground#6B6B6B
--border#D0D0CE
--ring#028AE1
--link#0369A1
Dark theme
--background#08111F
--foreground#F7FAFF
--card#101B2D
--popover#121F33
--primary#147EB3
--muted#121F33
--muted-foreground#A7B5C8
--border#21324A
--ring#79C8FF
--link#79C8FF

Contrast matrix · WCAG 2.2 AA

The quick brown fox — 14px body
13.24:1AAA / AAA
The quick brown fox — 14px body
5.00:1AA / AAA
The quick brown fox — 14px body
4.58:1AA · large text
The quick brown fox — 14px body
4.52:1AA · large text
The quick brown fox — 14px body
17.92:1AAA / AAA
The quick brown fox — 14px body
7.40:1AAA · dark card
The quick brown fox — 14px body
9.43:1AAA · dark surface-1
The quick brown fox — 14px body
10.49:1AAA · dark surface-1
The quick brown fox — 14px body
6.97:1AA · dark surface-1

Typography

Orbitron for display and brand emphasis. Inter for body, tables, and forms. JetBrains Mono for IDs, timestamps, and tabular technical data.

Display — Orbitron

Infara operates.

weight 500–700 · letter-spacing 0.02–0.04em

Body — Inter

Grounded, direct, operational. Pairs with Orbitron at a 2:1 weight contrast for hero and section titles.

Default reading size in dense product UI is 14px / 20px. Do not ship body-adjacent text below that floor.

Mono — JetBrains

2026-05-11 14:02:31 UTC · req-Aq2-x9F

IDs, timestamps, code, and tabular technical data. Use tabular figures so columns align in dense tables.

KPI & branded labels

42

STATUS · BRANDED

Orbitron numerals for KPI moments; tracked-caps labels for chrome eyebrows and brand-forward badges.

--font-size-h1

48/56 · weight 700

Hero titles

Operator clarity

--font-size-h2

36/44 · weight 600

Page hero titles

Workspace surfaces

--font-size-h3

28/36 · weight 600

Section headers

Section headers

--font-size-h4

22/30 · weight 500

Subheading, dialog title

Dialog and subheading

--font-size-body-m

16/24 · weight 500

Emphasized body

Body medium — primary emphasis

--font-size-body

16/24 · weight 400

Default body

Body regular — default reading size

--font-size-sm-m

14/20 · weight 500

Compact emphasized labels

Small medium — compact labels

--font-size-sm

14/20 · weight 400

Labels, helper text

Small — hints and metadata

--font-size-label-md

14/20 · weight 500

Standard labels (default)

Standard label text

--font-size-caption

14/20 · weight 400

Caption, chart series legend

Caption text · chart legends

Spacing, radius, shadows

A 4px baseline. Seven radii. Five shadow tokens. Do not invent local gaps when tokens exist.

Spacing — 4px baseline

  • spacing-14px
  • spacing-28px
  • spacing-312px
  • spacing-416px
  • spacing-4_518px
  • spacing-520px
  • spacing-624px
  • spacing-832px
  • spacing-1040px
  • spacing-1248px
  • spacing-1664px

Radius

radius-none

0px

radius-sm

2px

radius-default

4px

radius-md

6px

radius-lg

8px

radius-pill

999px

radius-full

9999px

Shadows

  • --shadow-card

    Resting card or panel elevation

  • --shadow-modal

    Dialog, popover, dropdown, hover promotion

  • --shadow-glow

    Brand blue focus or emphasis glow

  • --shadow-glow-fuchsia

    Promoted attention glow

  • --shadow-glow-gradient

    High-visibility dual-brand glow — use sparingly

Layout classes

ClassRangeExpected behavior
XS< 480pxSingle column only. Full-screen drawers. Promote primary rows over tables.
Compact480–767pxSingle active task, overlay nav, stacked forms.
Medium768–1023pxOne pane plus overlay detail, collapsed sidebar or rail.
Large1024–1279pxTwo-pane list/detail, standard dashboards.
Expanded1280–1599pxPersistent sidebar, resizable detail panels, map plus panel.
Wide1600–1919pxTwo or three panes, persistent inspector, higher density.
Ultra≥ 1920pxMulti-pane operational views, full map plus list plus detail.

Density profiles

DensityPage gutterPanel paddingButton heightTable rowTypical use
Compact16px12px32–36px36pxQueues, monitoring, dashboards, NOC-style surfaces, command work
Standard24px16–20px40px44pxForms, detail pages, settings, standard app screens
Spacious32–48px24–32px44–48px—Auth, onboarding, low-density overviews, presentation surfaces

Sidebar expanded

240px

Sidebar collapsed

56px

Topbar height

64px

Content max

1280px

Sidebar row (compact)

32px

Motion

Motion reinforces hierarchy. It does not carry meaning on its own. Respect prefers-reduced-motion.

duration · instant

80ms

Focus rings, tap feedback, toggles

duration · fast

140ms

Hovers, button states, tooltip

duration · standard

200ms

Panel slide, menu open, tab switch

duration · slow

320ms

Modal, drawer, page transition

duration · brand

2600ms

Hero pulse, ambient glow

Easing
--transition-timing-pleasantcubic-bezier(0.2, 0.8, 0.2, 1)Default UI easing
linearlinearProgress bars, looping ambient motion
ease-incubic-bezier(0.4, 0, 1, 1)Dismissals, exits
ease-outcubic-bezier(0, 0, 0.2, 1)Panel slide-in, menu open

Iconography

Infara uses lucide-react as the shipped icon set. Keep strokes consistent, size intentionally, and always label icon-only controls.

12px

Inline badge glyph

14px

Sidebar nav

16px

Default

20px

Dense data rows

24px

Hero and surface header

Icon-only controls require an accessible name. Pair with text wherever status meaning must be color-independent. Import fromlucide-reactand prefer the sizes above.

Charts

Rules live here. Rendered palettes live on /swatches — one source of truth per concern.

Choosing chart colors

  1. Does this chart encode system state? → semantic (success/warning/danger/info/processing).
  2. Is it categorical multi-series comparison? → chart-1…6.
  3. Is the consumer a Tailwind utility baked into the theme? → theme-chart-1…6.
  4. Always pair series with text/icon/shape — color is never alone.

Decision order

Status → semantic. Categorical → chart-*. Tailwind theme utility → theme-chart-*.

Palettes

Categorical

chart-1chart-2chart-3chart-4chart-5chart-6

Theme

theme-chart-1theme-chart-2theme-chart-3theme-chart-4theme-chart-5theme-chart-6

Theme dark

dark-theme-chart-1dark-theme-chart-2dark-theme-chart-3dark-theme-chart-4dark-theme-chart-5dark-theme-chart-6
See rendered palettes on /swatches →

Brand

Brand

Logo and mark

Minimum sizes, clear space, placement rules, and forbidden treatments.

Infara mark

Mark · primary

Infara mark on dark

Mark · on dark

Infara mark on tint

Mark · on tint

Minimum sizes

16px

20px

24px

32px

48px

96px

Below 16px switch to the favicon raster. Reserve clear space equal to roughly one glyph-stem height on every side.

Do and don't

Use on neutral, light, or Infara dark canvas

Pair mark with the INFARA wordmark

Recolor, flatten, or invert the mark

Skew, rotate, or stretch either asset

Place on another gradient background

Add outlines, glows, or drop shadows

Voice and copy

How Infara sounds. Operational, precise, and honest about uncertainty.

Operational, not decorative

Infara sounds like a senior operator who has already seen the trace. Say what happened, what it affects, what to do next.

Plain, not breezy

Short sentences. Technical where technical is accurate. No marketing hedges or motivational filler.

Honest about inference

If a model inferred something, say so. Show provenance and confidence instead of claiming certainty.

Write this · not that

Write

Deployed to us-east-1 · 1.2s

Not

Blazing-fast deploy complete!

Write

Inferred region from IP

Not

Magic — picked the best region for you

Write

Couldn't reach the agent — retry?

Not

Oops! Something went wrong

Write

Grounded on 3 of 18 sources

Not

AI-powered insights unlocked

Write

Rollback · 2-click confirm

Not

Undo (with sparkles)

Capitalization, punctuation, numbers

  • Titles: Sentence case. "Agent trace" not "Agent Trace". Buttons follow the same rule — "Run prompt", "Promote to production".
  • Product name: Infara in prose, INFARA only in the wordmark. Never "infara" or "inFara".
  • Numbers: Spell out zero through nine in prose. Use digits for units (3 s, 42 ms, 1.2 GB). Always separate value and unit with a thin space.
  • Dashes: Em-dashes with spaces for clauses. En-dashes for ranges (Apr 10 – 17). No triple hyphens.
  • Emoji: No emoji in product UI. State is color + icon + word. Operators rely on that triple to stay color-independent.

Discipline

Discipline

Accessibility

Non-negotiable floors for contrast, hit targets, keyboard control, focus management, and ARIA relationships.

Contrast

AA

4.5:1 for body, 3:1 for large text and UI elements. Every shipped token pair passes the matrix on /specs.

Target

44×44

Minimum hit target in dense product UI. Icon buttons get an 8px inset hit area when they render at 32–36px.

Focus

3px halo

Every focusable surface shows a visible --ring halo. :focus-visible must never be removed, even inside dense tables.

Motion

Respect

Non-essential motion is wrapped in prefers-reduced-motion: no-preference. Skeletons fall back to static on reduced.

Keyboard map

TabShift + Tab
Forward and backward through focusable surfaces
EnterSpace
Activate button, toggle, menu item
Esc
Close popover, menu, dialog; clear command palette query
⌘K
Open command palette from any surface
←→↑↓
Move within menus, tabs, sliders, table rows
⌘/
Focus prompt input in AI playground surfaces
⌘Enter
Submit prompt or primary form

ARIA and semantics

  • Every input pairs with a <label>. Use aria-describedby for hint and error text.
  • Icon-only controls must carry aria-label. Disclosure triggers use aria-expanded and aria-controls.
  • Status messages use role="status" (polite) for toasts and role="alert" for validation errors.
  • Overlays (dialog, sheet, popover, command) trap and restore focus and honor Esc-to-close.
  • Skeletons set aria-busy="true" on their container so assistive tech hears the loading state without shimmer.
  • Charts and maps must ship an accessible summary or adjacent text; never rely on color-only semantics.

Release blockers

Any of these halt a release. The bar is higher on operational surfaces because an operator who can't see the state can't act on it.

  • A workflow path is mouse-only.
  • An icon-only or custom control is missing an accessible name.
  • Raw local token values replace existing semantic tokens.
  • Spinner-based loading anchors new product UI.
  • Degraded, error, or no-access state is hidden or ambiguous.
  • Table or grid selection loses state during paging or filtering.
  • AI changes system state without label, approval tier, override, or audit.
  • Non-essential animation ignores reduced-motion settings.
  • Preview-only code leaks into registry source.
  • Consumer apps locally restyle registry components instead of fixing the shared system.

Do's and don'ts

The most compressed form of the spec. When in doubt, fall back to these.

Do

  • Do use operational blue as the default action and wayfinding color.
  • Do reserve fuchsia, gradients, and glow for priority or high-visibility moments.
  • Do keep dense workflows compact, readable, keyboard-operable, and state-rich.
  • Do use skeletons, row-level progress, and determinate progress instead of spinner-led loading.
  • Do make error, degraded, stale, read-only, no-access, and conflict states visible and inspectable.
  • Do provide accessible names for icon-only actions.
  • Do support status with text, iconography, position, or layout instead of color alone.
  • Do use registry tokens, components, and blocks before local UI.

Don't

  • Don't treat identity blue or identity fuchsia as universal fills.
  • Don't use fuchsia as a replacement for success, warning, danger, destructive, or processing semantics.
  • Don't add ornamental cards, vanity metrics, decorative copy, or filler surfaces.
  • Don't overuse pill shapes in dashboards, settings, tables, or dense product panels.
  • Don't hide essential workflow information in tooltips.
  • Don't create mouse-only paths or overlays without focus return.
  • Don't locally restyle registry-owned surfaces to force a one-off brand match.
  • Don't introduce raw hex values when a token already exists.

Visual QA gate

Every box passes or the work goes back. Run against every UI-affecting change before QA hand-off.

  • Screenshot captured in both light and dark, at the intended viewport(s).
  • Surface archetype + density + theme are explicit in the code (data-density, data-theme or .dark, archetype noted at top of file).
  • No raw hexes introduced where a token or additive alias exists.
  • Token usage verified — accents come from operational aliases, not identity primitives; status comes from semantic tokens, not brand.
  • Focus states visible on every interactive element, in both themes — never :focus { outline: none } without an alternative visible cue.
  • States covered — at minimum: rest, hover, focus-visible, disabled, loading, empty, error/degraded. AI surfaces also: suggested/drafted/running/needs-review/approved/rejected/overridden/failed/audited.
  • Responsive behavior checked — narrow/wide breakpoints preserve workflow mental model, not just layout.
  • Text does not overflow / truncate silently — tokens like long IDs, numerics, and labels degrade with truncation tooltips, not clipping.
  • Status does not rely on color alone — text, icon, label, or position pairs the hue.
  • No decorative card clutter — every card carries content, not vanity.
  • Dark shell continuity preserved for product surfaces — chrome stays anchored, content surfaces don't introduce ad-hoc shell variants.
  • Accessibility quick pass — keyboard navigable, icon-only actions named, error association in place, reduced motion honored.
  • Body-adjacent product text ≥ 14px.
  • Fuchsia / gradient / glow are reserved for promoted or high-visibility moments.
  • Loading uses skeletons or determinate progress, not spinner-led treatment.

Decisions

Decisions

Choosing color

Five steps. Walk them in order — stop at the first match.

  1. Is it a system state (success / warning / danger / info / processing / neutral-status)? → semantic token. Stop.
  2. Is it the standard primary action / wayfinding / link / focus? → primary / link / ring.
  3. Does this specific action deserve promoted attention? (rare) → priority-fuchsia / brand-secondary.
  4. Hero, featured CTA, brand storytelling? → identity anchor / gradient / glow.
  5. None of the above? → neutral surface + neutral text. Default to quiet.

Rule: if tempted to invent a hex, stop — find the token; if missing, add it upstream.

Choosing density

Three steps. Density is a workflow decision, not a styling preference.

  1. Operator/NOC/queue/log/alarm? → Compact.
  2. Form, settings, detail, inspect, docs? → Standard.
  3. Auth, onboarding, marketing, presentation? → Spacious.

Apply via data-density="compact|standard|spacious" on a region root.

Choosing typography

Five steps. Pick by role, not by family. Sentence case is the default.

  1. Body, table, label, form, helper, menu? → Inter, never below 14px.
  2. Hero, KPI numeral, chrome eyebrow, brand label? → Orbitron, often uppercase + tracked.
  3. Page title in a dense screen? → usually Inter 22–28px, not Orbitron.
  4. Code, IDs, timestamps, technical tokens? → JetBrains Mono, tabular figures.
  5. Sentence case by default. Title Case only in chrome eyebrows.

Choosing chart colors

Four steps. Status wins over categorical. Color never carries meaning alone.

  1. Does this chart encode system state? → semantic (success/warning/danger/info/processing).
  2. Is it categorical multi-series comparison? → chart-1…6.
  3. Is the consumer a Tailwind utility baked into the theme? → theme-chart-1…6.
  4. Always pair series with text/icon/shape — color is never alone.

Choosing loading treatment

Four steps. Indeterminate spinners are a last resort, never a default.

  1. Will the user wait on data or a component? → skeleton matching final shape.
  2. Is the duration knowable (upload, import, batch)? → determinate progress.
  3. Is it a single brief action with an action-bound surface (button, row)? → inline busy label, action stays visible.
  4. Truly unknown duration with no better signal available? → indeterminate progress, last resort, never page-level treatment.

Choosing brand-expression level

Five steps. Brand expression scales with surface archetype.

  1. Dense workspace? → no glow, no gradient, no identity anchors. Orbitron only on KPIs.
  2. Dashboard? → selective KPI accents and rare focus glow. No gradient.
  3. Detail / form? → quiet. Glow on focus only.
  4. Auth? → glow OK, gradient rare, identity anchors OK, Orbitron OK.
  5. Marketing? → full expression. Even here, copy and structure dominate.

Rule: if a screen has gradient + glow + identity blue + Orbitron body all at once, you've over-spent. Pull back.