Codeflash

Two surfaces, one accent, a periwinkle for depth

Codeflash alternates between a deep navy ink and a warm cream block — the cream section acts as a tonal break between long dark stretches. All accent usage is funneled through a single yellow→gold→peach gradient; periwinkle carries cool depth (glows, secondary buttons, body text on dark).

Four signature gradients do all the work

The accent gradient is the site's single strongest visual signature — reserved for the primary CTA and "beam" streaks running across section dividers. Radial periwinkle glows are used behind hero content, demo cards, and anywhere a dark surface needs depth.

PP Neue Montreal + Monaspace Neon

One display face (PP Neue Montreal, Book/Medium) handles everything from the 80px hero down to 12px legal. Monaspace Neon is reserved for terminal snippets and a few UI chips. Saans appears in the broader Figma library but not on the home-page frame — treat PP Neue Montreal as the marketing-site primary.

Generous gutters, two radii

Sections sit at 140–150px page gutters with 80–120px vertical breathing room. Everything interactive uses a 4px radius; large cards/CTA panels step up to 8px.

Two variants, two sizes, one rule

Every page pairs an Accent button (the gold CTA) with a Secondary button (periwinkle-to-ink gradient). Both come in Default (40h) and Small (30h, used in the header). Text is always PP Neue Montreal 500; accent buttons put ink text on gradient, secondary buttons put paper text on a dark periwinkle gradient.

Snippet, tabs, eyebrow, Q&A

Small tokens that repeat across the page. The eyebrow rail-marks a section pre-title; Q&A strips use the same rail on the left.

Dark feature, cream feature, testimonial

Feature cards use the dark surface with a soft inner periwinkle glow. The cream variant appears only in the "Ways to Use" light block, always with the 12px/40px cream shadow.

The closer

The CTA sits on a deep-blue radial panel, eyebrow at the top, 60px display headline, body underneath, accent button below. The right half holds the chartreuse beam motif that recurs throughout the site.

What makes this system feel right

1. Long dark sections earn a cream break. Don't stack more than two dark sections without a tonal interrupt — the cream "Ways to use" block is part of the rhythm.
2. The accent gradient is precious. Use it for the primary CTA, beam streaks under divider SVGs, and nowhere else. No solid yellow fills.
3. Periwinkle is the workhorse, not the accent. It runs body text on dark, radial glows, secondary buttons, soft dividers, subtle fills at 8% alpha.
4. Copy leads with a short imperative title (60px), then a single sentence at 16–18px in periwinkle-soft. Never pair two paragraphs of the same size.
5. Rails (the two 4×21 bars flanking "Free During Beta") are reused as the Q&A left-mark. Once you see them, you can't unsee them — they're the system's quiet signature.
6. Mono is reserved for terminal output and a couple of UI chips. Don't use it for product copy.