Layout

Low-level utility classes for flex layout, text formatting, color assignment, and borders.

Flex utilities

FLEX CENTER

CENTERED

<div class="nf-flex-center" style="height:4rem;background:var(--nf-color-surface-low);">
CENTERED
</div>

Text utilities

TEXT HELPERS

DISPLAY TRACKING

THIS TEXT IS TOO LONG TO FIT IN THE CONTAINER

<p class="nf-uppercase nf-tracking-display">DISPLAY TRACKING</p>
<p class="nf-truncate" style="width:12rem;">THIS TEXT IS TOO LONG TO FIT IN THE CONTAINER</p>

Color utilities

TEXT COLOR

PRIMARY — Terminal Green

SECONDARY — Cyber Magenta

TERTIARY — Electric Cyan

MUTED — Secondary text

SUBTLE — Placeholder text

<p class="nf-text-primary">PRIMARY — Terminal Green</p>
<p class="nf-text-secondary">SECONDARY — Cyber Magenta</p>
<p class="nf-text-tertiary">TERTIARY — Electric Cyan</p>
<p class="nf-text-muted">MUTED — Secondary text</p>
<p class="nf-text-subtle">SUBTLE — Placeholder text</p>

Font utilities

FONT FAMILIES

DISPLAY — SPACE GROTESK

Body — JetBrains Mono

LABEL — VT323

<p class="nf-font-display">DISPLAY — SPACE GROTESK</p>
<p class="nf-font-body">Body — JetBrains Mono</p>
<p class="nf-font-label">LABEL — VT323</p>

Class reference

Class	Description
`nf-flex-center`	`display: flex; align-items: center; justify-content: center`
`nf-truncate`	Single-line truncation with ellipsis
`nf-uppercase`	`text-transform: uppercase`
`nf-tracking-display`	`letter-spacing: 0.05em`
`nf-text-primary`	Color: `--nf-color-primary`
`nf-text-secondary`	Color: `--nf-color-secondary`
`nf-text-tertiary`	Color: `--nf-color-tertiary`
`nf-text-muted`	Color: `--nf-color-text-muted`
`nf-text-subtle`	Color: `--nf-color-text-subtle`
`nf-font-display`	Font: Space Grotesk
`nf-font-body`	Font: JetBrains Mono
`nf-font-label`	Font: VT323
`nf-visually-hidden`	Accessible hide (screen reader only)
`nf-border-primary`	Border: `--nf-color-primary`
`nf-border-secondary`	Border: `--nf-color-secondary`
`nf-border-tertiary`	Border: `--nf-color-tertiary`