Style guide

Reference for typography, color tokens, and common UI patterns. Structural tokens live in src/styles/partials/_variables.scss; light theme colors in _colors-light.scss, dark overrides in _colors-dark.scss (aggregated by _colors.scss).

Typography

Body copy uses Manrope via Next.js font variables; monospace stacks are defined for code.

Eyebrow / overline

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph with an inline text link using default anchor styles. Muted supporting line below.

Small / muted paragraph using --muted.

Type scale (fluid sizes)

--fs-xsThe quick brown fox jumps over the lazy dog.

--fs-smThe quick brown fox jumps over the lazy dog.

--fs-mdThe quick brown fox jumps over the lazy dog.

--fs-lgThe quick brown fox jumps over the lazy dog.

--fs-xlThe quick brown fox jumps over the lazy dog.

--fs-2xlThe quick brown fox jumps over the lazy dog.

--fs-3xlThe quick brown fox jumps over the lazy dog.

Font stacks

--font-sans

Sans sample — Manrope, system UI fallbacks.

--font-mono

Mono sample — const theme = 'oklch';

Lists

Unordered list item one
Unordered list item two

Ordered list item one
Ordered list item two

Colors

Neutrals, brand, secondary, and tertiary ramps, plus semantic tokens (respect light / dark theme).

Ink (neutral ramp)

--ink-50

--ink-100

--ink-200

--ink-300

--ink-400

--ink-500

--ink-600

--ink-700

--ink-800

--ink-900

Brand

--brand-50

--brand-100

--brand-200

--brand-300

--brand-400

--brand-500

--brand-600

--brand-700

--brand-800

--brand-900

Secondary

--secondary maps to --secondary-600.

--secondary-50

--secondary-100

--secondary-200

--secondary-300

--secondary-400

--secondary-500

--secondary-600

--secondary-700

--secondary-800

--secondary-900

Tertiary

--tertiary maps to --tertiary-600.

--tertiary-50

--tertiary-100

--tertiary-200

--tertiary-300

--tertiary-400

--tertiary-500

--tertiary-600

--tertiary-700

--tertiary-800

--tertiary-900

Semantic

--bg

--text

--muted

--primary

--on-primary

--secondary

--on-secondary

--tertiary

--on-tertiary

--accent

--accent-2

--warning

--danger

--success

--info

--border

Gradients

--grad-brand

--grad-hero

--grad-brand-transparent

Buttons

Shared styles live in src/styles/ui/_actions.scss. Use plain btn / btn-* classes on <button>, or the @ui Button with variant and size (className still merges).

Plain CSS & React `Button`

Each group below shows one live row (React). Pair the lines: first is the plain <button> pattern; second is the @ui Button API (variant, size, icon / iconPosition — see src/components/ui/buttons/Button.tsx and src/components/docs/COMPONENTS-UI.md).

Semantic fills

CSS: className="btn btn-primary" (plus btn-secondary, btn-tertiary, btn-ghost, btn-warning, btn-danger) on <button type="button">.

React: <Button variant="primary" label="Primary" /> — variant appends btn-{variant} after btn.

Icon + label

CSS: put icon markup (e.g. <span className="iconify">…</span> or an SVG) before or after the label inside the button, consistent with flex rules in _actions.scss.

React: icon (ReactNode) with iconPosition="left" (default) or "right"; label is the text beside the icon.

Outline & link

CSS: btn-outline, btn-outline-primary, … btn-outline-danger, and btn-link combined with btn.

React: variant="outline-primary", variant="link", etc. — same classes; variant is for display intent, not physical size.

Sizes (primary)

CSS: stack size classes on the fill, e.g. className="btn btn-primary btn-sm" (btn-xs … btn-xlg).

React: variant="primary" size="sm" — size maps to btn-sm (and xs / md / lg / xlg).

Surfaces & shape

Elevation backgrounds and radius tokens.

Surfaces

--surface-0

Base / page-level

.surface-1

Elevated panel

.surface-2

Elevated panel

.surface-3

Elevated panel

Border radius

--radius-sm

--radius-md

--radius-lg

--radius-pill

Shadows

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xlg

Forms

Default control styles from global form partials.

Text input

Textarea

Focus visible uses --ring-color and --ring-width.

Motion

--dur-fast — 120ms
--dur — 180ms
--dur-slow — 260ms
--ease-out, --ease-in-out

GridLayout

Applies responsive column classes from src/styles/layout/_grids.scss (grid-2 … grid-6, grid-with-aside). Pass gridColumns for the suffix (e.g. "4" → grid-4).

Example: three columns

<GridLayout gridColumns="3" gridId="sg-grid-3-demo">
  <div>…</div>
  <div>…</div>
  <div>…</div>
</GridLayout>

Child

One

Child

Two

Child

Three

Example: two columns + extra class

gridClassName merges with grid-{columns}. On tablet, grid-2 grid-2-c2-right right-aligns the second column when stacked.

<GridLayout gridColumns="2" gridClassName="grid-2-c2-right">
  <div>…</div>
  <div>…</div>
</GridLayout>

Main

Primary column content.

Aside

Secondary column.

Icons

Every Icon* component re-exported from src/components/icons/Icons. The component name is the card heading; the glyph renders below at 32px, inheriting currentColor from the surrounding text. Sorted alphabetically — new icons added to the index appear automatically.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Type scale (fluid sizes)

Font stacks

Lists

Colors

Ink (neutral ramp)

Brand

Secondary

Tertiary

Semantic

Gradients

Buttons

Plain CSS & React Button

Surfaces & shape

Surfaces

Border radius

Shadows

Forms

Motion

GridLayout

Example: three columns

Example: two columns + extra class

Icons

Icon404

IconArrowLeft

IconArrowLeftLong

IconArrowRight

IconArrowRightLong

IconAWS

IconBan

IconCalendar

IconChatBubbles

IconCheck

IconChevronDown

IconChevronLeft

IconChevronRight

IconChevronUp

IconChrome

IconCloseX

IconCrown

IconCss3

IconCursor

IconDashboard

IconDesktop

IconEdge

IconEmail

IconError

IconEye

IconEyeSlash

IconFacebook

IconFacebookSquare

IconFile

IconFileUpload

IconFirefox

IconGitHub

IconGitHubSquare

IconHamburgerMenu

IconHeat

IconHistory

IconHouse

IconHtml5

IconImage

IconImages

IconImageUpload

IconInstagram

IconInstagramSquare

IconJavaScript

IconLanguage

IconLaptop

IconLinkedIn

IconLinkedInSquare

IconMobileScreen

IconMoon

IconNewspaper

Plain CSS & React `Button`