Skip to content

Language

08.1 — GUIDE

Design guide

Start with Token and Logo . Use precision and restraint. Avoid decoration.

SEC.1 — DIRECTION

Calm engineering

Gn8 uses precise interface fragments to present practical work: problem framing, software design, OSS development, and operations. Use the restrained purple accent only for lines, dots, markers, and focus rings.

SEC.2 — HIERARCHY AND COMPOSITION

Put reading order first

Keep this reading order: eyebrow, title, lead, then content. Use the spacing scale with borders and monospaced labels to make the structure clear.

  1. 01EYEBROW — context
  2. 02PAGE TITLE — subject
  3. 03LEAD — concise context
  4. 04CONTENT — evidence and action

SEC.3 — COLOR USAGE

Use color by role

BACKGROUND / PROSE
Use semantic color roles for backgrounds and body text. Keep body text easy to read.
MUTED / FAINT
Reserve muted and faint colors for supporting information and system labels. Keep them out of body copy.
PRIMARY / ACCENT
Use primary and accent for hover, focus, links, thin lines, dots, and markers. Avoid filled surfaces. Review every pair in Token .

SEC.4 — TYPOGRAPHY

Assign type by role

SANS
Use for body copy and headings.
MONO
Use in uppercase for system labels and metadata.
SCALE
Keep size, tracking, and leading within the Token definitions.

SEC.5 — SPACING AND GRID

Measure the structure

RHYTHM
Keep all spacing on the spacing scale .
LAYOUT
Use CSS Grid for containers and responsive layouts. Keep layouts within a 320px viewport.
GEOMETRY
Set the radius to 0. Use sharp geometry to convey engineering precision.

SEC.6 — MOTION

Motion follows the system

PROPERTY
Change only transform, opacity, and filter; use motion only when it clarifies direction.
TIMING
Use the values in Token .
REDUCED MOTION
Use the reduced-motion version as soon as prefers-reduced-motion: reduce is active.

SEC.7 — ACCESSIBILITY AND KEYBOARD

Every route remains operable

  • Use a correct lang attribute, semantic landmarks, and aria-labelledby.
  • Give every interactive element a visible focus state.
  • Use meaningful text for every link.
  • Respect reduced motion.
  • Maintain body-text contrast.
  • Keep every route keyboard-operable at 320px.

SEC.8 — COMPANY INFORMATION

Present verified company facts

Use signal lists and trust strips to present company facts. Do not invent metrics, customer counts, or star counts.

  1. 01PLAN
  2. 02BUILD
  3. 03REVIEW
  4. 04SHIP

SEC.9 — RESOURCE REFERENCES

Use the canonical sources

LOGO
Open logo specification
TOKEN
Open token specification

This guide relies on the exact Token and Logo implementations. Every page uses Base and ThemeToggle, which preserves the selected theme.