Colors & Tokens

Ziom defines every color as a CSS custom property in app/assets/stylesheets/ziom/variables.css. Always reference the token (e.g. var(--ziom-primary)) rather than a raw hex value — this is what makes light/dark theming automatic. Toggle the theme in the page header to see these swatches update live.

Primary

Primary --ziom-primary

Primary Hover --ziom-primary-hover

Primary Active --ziom-primary-active

Primary Light --ziom-primary-light

Semantic

Used for status, feedback, and intent. Each has a matching -light tint for backgrounds.

Success --ziom-success

Warning --ziom-warning

Danger --ziom-danger

Info --ziom-info

Neutral Grays

A 10-step scale that inverts in dark mode.

Gray 50 --ziom-gray-50

Gray 100 --ziom-gray-100

Gray 200 --ziom-gray-200

Gray 300 --ziom-gray-300

Gray 400 --ziom-gray-400

Gray 500 --ziom-gray-500

Gray 600 --ziom-gray-600

Gray 700 --ziom-gray-700

Gray 800 --ziom-gray-800

Gray 900 --ziom-gray-900

Surfaces & Text

Page --ziom-bg-page

Elevated --ziom-bg-elevated

Subtle --ziom-bg-subtle

Text Primary --ziom-text-primary

Text Secondary --ziom-text-secondary

Text Tertiary --ziom-text-tertiary

Glass & Shadows

The signature frosted-glass look combines a translucent background with a backdrop blur. Shadows are ambient and soft.

Token	Value	Usage
`--ziom-glass-bg`	`rgba(255,255,255,0.72)`	Translucent surface fill
`--ziom-glass-blur`	`blur(20px)`	`backdrop-filter` for frosted effect
`--ziom-glass-border-subtle`	`rgba(0,0,0,0.04)`	Hairline borders on cards/inputs
`--ziom-shadow-sm`	`0 2px 8px rgba(0,0,0,0.04)`	Resting elevation
`--ziom-shadow-glass`	layered	Glass card elevation
`--ziom-shadow-lg`	`0 8px 32px rgba(0,0,0,0.08)`	Modals, popovers

Theming

Dark mode is enabled by setting data-theme="dark" on the <html> element. When no theme is set, Ziom falls back to the operating system preference via prefers-color-scheme. The theme Stimulus controller persists the choice to localStorage.

Using a token

Reference tokens in your own CSS so components theme automatically.

This box uses --ziom-bg-elevated and --ziom-text-primary.

HTML

<div style="padding: var(--ziom-space-4); background: var(--ziom-bg-elevated); border: 1px solid var(--ziom-glass-border-subtle); border-radius: var(--ziom-radius-md); color: var(--ziom-text-primary);">
  This box uses <code>--ziom-bg-elevated</code> and <code>--ziom-text-primary</code>.
</div>