The Theme.
Every rule that makes a page feel like Dive Labs: the type system, the single-accent color model, spacing, components, and the four style templates members can choose. Build inside these walls and it always looks like us.
One voice, one canvas
Editorial dive-zine meets product UI. Near-black canvas, a single bright accent, condensed display type, mono labels. Disciplined and quiet so the imagery and the accent do the talking.
Dark first. Backgrounds are near-black ink (#050505–#1c1c1c). Light "bone" sections are the rare exception for editorial contrast.
One accent at a time. A page uses exactly one accent color from the palette set. Never mix two accents on one page.
Type does the shouting. Huge condensed headlines, tiny mono labels. Little need for decoration.
Numbered & ruled. Sections lead with a mono number and a short accent rule line, not boxes or cards.
The neutrals & signals
The canvas is built from six near-black inks plus two rule greys. Bone/paper are the light-section neutrals. Signal colors are used sparingly for status only.
Ink & surfaces
#050505--ink · page base#0d0d0d--ink-2 · panels#141414--char · inputs, hover#262626--rule · borders#3a3a3a--rule-2 · strong border#8a8a8a--mute · meta text#efeae0--bone · light sections#f7f3ea--paper · light altSignal colors
#1FB6C9default accent · OK / open#f3b41b--gold · warning / waitlist#e85d3a--rose · closed / danger#1a4d6e--river · depth gradientsSix dive palettes
Members pick one accent for their page. Each palette is a triple — c1 base, c2 deep (for light backgrounds), c0 on-accent text (used on accent-colored buttons). The accent drives --aqua, --aqua-bright, --aqua-deep, --aqua-r (rgb), --aqua-shadow, and --on-accent.
defaultThree typefaces
A display face for headlines, a humanist sans for body, a mono for labels & data. This trio is the spine of the brand; the style templates swap only the display face.
One community.
Four member styles
In the profile editor a member chooses one template. It swaps the display font and the heading treatment (case, tracking, alignment); the body font, dark canvas and accent system stay fixed. Stored as profile.style.
Display scale
Headlines are fluid with clamp(). Minimums shown; they grow with viewport. Body never below 13px in app UI, 15–16px in marketing.
Rhythm & corners
Spacing is loosely an 8px-ish step but generous: section padding 54–96px, card padding 16–24px, gaps 6–24px. Radii are restrained — sharp-ish UI with softer cards.
Spacing steps
6121624324864Radius
The :root contract
Every page declares the same custom properties. The accent group is what the editor overrides at runtime (via data-pgh-style + inline vars from the editor bridge).
/* — Accent (swapped per member palette) — */
--aqua:#1FB6C9; /* c1 base accent */
--aqua-bright:#5BE0EE; /* hover / emphasis */
--aqua-deep:#0E8A9C; /* accent on light bg */
--aqua-r:31,182,201; /* rgb for rgba() glows */
--aqua-shadow:rgba(var(--aqua-r),.22);
--on-accent:#042b31; /* text on accent fills */
/* — Neutrals (fixed) — */
--ink:#050505; --ink-2:#0d0d0d; --char:#141414;
--rule:#262626; --rule-2:#3a3a3a;
--mute:#8a8a8a; --bone:#efeae0; --paper:#f7f3ea;
/* — Signal — */
--gold:#f3b41b; --rose:#e85d3a; --river:#1a4d6e;
/* — Type (display swapped per style template) — */
--display:'Barlow Condensed', sans-serif;
--body:'Inter', system-ui, sans-serif;
--mono:'JetBrains Mono', monospace;The kit
Recurring building blocks. All share the token contract, so a palette/style change cascades automatically.
Buttons
Pills & chips
Section header pattern
Card
Do & don't
Use exactly one accent per page. Drive every accent use through --aqua* tokens.
Hard-code hex accents. A literal #1FB6C9 won't recolor when a member picks Coral.
Lead sections with a mono number + 22×2px accent rule. Keep labels uppercase mono.
Add gradient-heavy backgrounds, drop shadows on text, or rounded "card with left-border" tropes.
Let imagery go full-bleed behind a dark veil. Bone sections are for editorial contrast only.
Mix two display fonts on one page. The style template sets one display face for everything.