Nacmias suite · design + implementation reference

Colors & Tokens

Each swatch resolves its value live from the CSS variable, so rebuilding @nacmias-law/tokens updates this page automatically. Use the toggle in the header — only the brand palette is defined for dark mode; status and agency colors stay constant by design.

Brand

Core navy + orange identity. These are the only tokens that shift between light and dark.

navy
--brand-navy
navy-dark
--brand-navy-dark
navy-light
--brand-navy-light
navy-lighter
--brand-navy-lighter
orange
--brand-orange
orange-dark
--brand-orange-dark
orange-light
--brand-orange-light
orange-on-dark
--brand-orange-on-dark
orange-50
--brand-orange-50
orange-100
--brand-orange-100

Status

Semantic states for badges and alerts. Each has a base, a -dark text variant, and a -bg fill.

danger
--status-danger
danger-dark
--status-danger-dark
danger-bg
--status-danger-bg
warning
--status-warning
warning-dark
--status-warning-dark
warning-bg
--status-warning-bg
success
--status-success
success-dark
--status-success-dark
success-bg
--status-success-bg
neutral
--status-neutral
neutral-dark
--status-neutral-dark
neutral-bg
--status-neutral-bg
info
--status-info
info-dark
--status-info-dark
info-bg
--status-info-bg

NYC Agency

Per-agency accents used to tag records by source agency, each with a soft -bg pairing.

dob
--agency-dob
dob-bg
--agency-dob-bg
hpd
--agency-hpd
hpd-bg
--agency-hpd-bg
oath
--agency-oath
oath-bg
--agency-oath-bg
nypd
--agency-nypd
nypd-bg
--agency-nypd-bg
dsny
--agency-dsny
dsny-bg
--agency-dsny-bg
dot
--agency-dot
dot-bg
--agency-dot-bg
dep
--agency-dep
dep-bg
--agency-dep-bg

Foreground / Text

The text-color ladder from primary headings down to muted captions.

primary
--color-fg-primary
secondary
--color-fg-secondary
caption
--color-fg-caption
muted
--color-fg-muted