Skip to main content

Website Design

The CloudRaft design system. Every semantic token shown below resolves by name and flips automatically with the theme. Nothing here needs a dark: variant, and nothing here should be hardcoded as a hex.

loading mode

Font family: Plus Jakarta Sans (variable, 300 to 800). Toggle the theme and compare the two groups of swatches below: the first group changes, the second does not.

semantic tokens (flip with the theme)

canvas

page background — light #FAFAF7 / dark #161616

surface

cards, panels — light #FFFFFF / dark #1A1A1D

surface-alt

alternating sections — light #F3F1EB / dark #18181B

ink

headings, body — light #131316 / dark #E8E8EA

ink-2

supporting text — light #52525B / dark #A0A0A6

ink-3

captions, metadata — light #71717A / dark #6B6B72

line

hairline borders — light #E5E3DC / dark #27272A

line-strong

interactive borders — light #D4D1C7 / dark #3F3F46

pine

primary accent, flips — #047857 to #00E887

aqua

secondary accent, flips — #0E7490 to #00E0F3

island

always-dark band — #0B0E10 in both themes

Write these as bg-surface, text-ink-2, border-line and so on. The token already knows what it should be in both themes. island is the exception: it is identical in both themes and is reserved for a single deliberately dark band per page.

accent palette (fixed RGB, same in both themes)

primary-200

#DBFF00 — lime, primary CTA hover fill

primary-300

#00E887 — primary CTA fill (with text-dark)

primary-400

#00E0F3 — animated underline gradient stop

primary-500

#00C4FD — hairline hr rules

These do not flip. They are legitimate in exactly four places: the primary CTA fill and hover, the focus-visible ring, the animated underline gradient, and the hairline hr rule. Note that pine and aqua above are theme-aware accents, while these raw primary-* values are not: raw primary-300 as text on the light canvas fails contrast.

cta button examples

Primary CTA (solid accent fill)

Secondary CTA (outline)

Tertiary CTA (ghost)

Small CTA

CTA with arrow

Every button is rounded-none and solid. The primary CTA uses a fixed neon fill with fixed near-black text, which is the one deliberate shortcut that lets a single button style pass contrast on both canvases. Secondary and tertiary are built from tokens and therefore adapt per theme. Never ship a gradient button, and never remove the focus-visible ring.

design principles

  • Theme parity — light and dark are equal citizens. Verify every component in both before shipping; a section that reads in only one theme is unfinished.
  • Semantic tokens only — use bg-canvas, bg-surface, text-ink, border-line and friends. Never add a dark: colour variant — the token already flips.
  • No rounded corners — rounded-none is the default for buttons, cards, and panels. Only avatars, status dots, and slider thumbs may use rounded-full.
  • Solid CTAs — the primary CTA is a solid accent fill with bold text. Gradient buttons and gradient CTA links are not part of the system.
  • Earned depth — layer tone (canvas, surface, surface-alt) for separation. Shadows belong to floating chrome and hover states, not static content planes.
  • Sharp and responsive — headings are fluid via clamp and the root font size scales with the viewport, so the type scale stays proportional from laptop to 4K.
  • Contrast target — WCAG AA across both themes. Known gap: the gradient CTA bands on some service pages put white text on neon green in dark mode, which fails AA. Do not copy that pattern.