Design System
The tokens, type scale, components and status language used across VibeLab. Values live in the “VibeLab Tokens” variable collection in the Designer.
Colour
Taken from the approved VibeLab illustration set. Orange is used sparingly; navy carries structure; the surfaces stay cool and light.
Type
Inter where available, falling back to the system stack. The display sizes step down at 991px and again at 767px.
Heading 2 — 38px
Heading 3 — 20px
Lead — 19px. Used once per page, under the heading.
Body — 16px at 1.65 line height. This is the workhorse, set in muted navy so that headings and orange accents carry the emphasis.
Small — 13px. Metadata, captions and the honest caveats.
Components
Buttons
Status labels
Approved labels: Live, Planned, Proposed, Example, Sample, Coming Soon, In Development, To Be Defined. Proposed and live work must never look the same.
Surfaces
Card: white on a light page, 1px soft border, 18px radius. Panel: the same, with more padding, used for long-form blocks. Note: orange left rule on a warm tint, reserved for caveats and status.
This is a note. It carries the sentence that keeps the page honest.
Layout
Container 1180px. Section padding 96 / 72 / 56px. Grid gap 24px. Breakpoints at 991, 767 and 479px.
Rules that are not negotiable
The page background is never black. No cyberpunk, no neon glow, no purple-blue AI gradients.
Orange is an accent. If a screen reads as orange, something has gone wrong.
No cards inside cards. No dashboard walls. Whitespace is part of the design, not a gap to fill.
Transparency never goes where it makes text harder to read.
Illustrations carry no baked-in copy, metrics or logos. Headlines, labels and data live in HTML.
The RateHighway logo is the official asset, never redrawn, recolored or typeset. VibeLab sits beside it as a separate label in VibeLab orange.