Fix UI

Falcon design system catalog — experiment here before applying patterns to production pages. Layout uses Tailwind; component appearance uses fix-* classes and src/components/ui/*.

See src/styles/FIX-UI.md for rules and audit commands.

Typography

Token-based text roles from _fix-type.css.

Page heading (h1)

Lead text uses muted foreground for secondary emphasis below the title.

Section heading (h2)

Subsection heading (h3)

Small heading (h4)

Body copy at the base scale. Second paragraph stacks with consistent top spacing.

Inline fix-type-code for short code snippets.

Large emphasized line for short callouts.

Small label text

Muted helper or meta description.

Layout

PageShell — shared vertical rhythm and max-w-6xl container (Header/Footer use the same width).

This catalog is wrapped in <PageShell>. Production pages use the same component for section padding and horizontal gutters.

Button

<Button> → fix-btn variants.

Link button

Badge

<Badge> → fix-badge.

Default Success Warning Danger Info

Card

<Card> variants with BEM slots.

Default

Colors and spacing live under src/styles/tokens/.

Standard bordered card.

variant="flat"

variant="filled"

variant="elevated"

Form

fix-form with Label, Input, Textarea.

Prose

Long-form MDX content uses Tailwind Typography (blog posts).

Prose heading

Paragraph with links and inline code inside the prose block.

Prose blockquote with a primary border and muted text color.
  • Unordered list item one
  • Unordered list item two
  1. Ordered step one
  2. Ordered step two
Token Role
--text-h1 Page title
--text-m Body / prose