Realm Design System

Shared Tokens And Components

This route is the stable front door for the design system. It gives you a working local showcase of the core UI primitives and direct links into the underlying Ladle catalog when you want the raw story surface.

Catalog Ladle
Fonts KH + Suisse
Core Primitives 8 stories
Foundations Tokens
Foundations

Token System

The design system is built around a coal-and-orange palette, strong uppercase display typography, compact mono data readouts, and a tight border system.

base
#0A0A0B
surface1
#111113
surface2
#1A1A1D
surface3
#232328
primary
#FF4F00
primary-dim
rgba(255, 79, 0, 0.15)
success
#22C55E
warning
#F59E0B
info
#3B82F6
Components

Buttons

Uppercase display text, compact paddings, and four key variants: primary, secondary, danger, and ghost.

Variants

Sizes

Components

Cards And Layout Surfaces

Cards are the default dashboard shell. They vary more by surface tone than by structure.

surface1
Used for app shells, navigation rails, and page chrome.
surface2
Default panel surface for dashboards and modules.
surface3
Raised controls, inputs, and denser sub-panels.
Days Without Incident
47
Best streak this quarter

With Header

Status Investigating
Severity Medium

Dense Metric

11,595,294
Shift total processed tons
Components

Status Pills And Dots

The system distinguishes neutral labels from contextual colored states. Dots are used for compact equipment or workflow status signals.

Pills

Near Miss First Aid Recordable Lost Time
Near Miss First Aid Recordable Active

Dots

Pulse is used sparingly for live or recently changed states.

Patterns

Forms, Filters, And Menus

Inputs stay simple and dense. Filter controls use compact chips. Row-level actions are hidden until needed.

Form Field

Location description is required for incident logging.

Filter Bar And Row Menu

All Types
Near Miss
All Sites
Last 30 Days
Direct Links

Ladle Story Links

These jump straight into the raw story browser if you want to inspect the underlying catalog entries rather than the stable local showcase.

Components / Button

All Variants And Sizes

Primary, secondary, danger, ghost, and the three size presets.

Open Story
Components / Card

With Header

Standard detail card with header treatment and table-like body content.

Open Story
Components / StatusPill

In Context

Status labels shown in a realistic incident list rather than as isolated chips.

Open Story
Components / StatusDot

With Pulse

The compact live-state treatment used for active equipment and flows.

Open Story
Components / FilterDropdown

Filter Bar

Multi-filter control row for dashboard and workflow surfaces.

Open Story
Components / FormField

Complete Form

Label, input, textarea, and validation treatment in one story.

Open Story
Foundations / Tokens

Colors

Surface, text, border, brand, and status colors with exact values.

Open Story
Foundations / Tokens

Typography

Display, body, and mono patterns with their intended product usage.

Open Story