Build Club X
Marketing
The X system on the web — dark-first, dual-persona, one accent at a time.
How Build Club X shows up on the web — the system proven on the live consulting site, which is the master reference. The brand book's monochrome severity relaxes into a charcoal (never pure black) canvas with a porcelain light mode; lime speaks to companies and a periwinkle answers for consultants; and the textures — waven waves, scanlines, a blurred holographic blob, a ghost pixel-X — decorate at whisper opacity while content stays monochrome.
The live Build Club X consulting site is the reference implementation of this system. The V1 brand book (pure black, print + social rules, the parametric logo maker) is archived on the Build Club X brand-book page.
The web canvas is charcoal (#18181B) with raised graphite surfaces; the light mode is warm porcelain, never clinical white. Pure black stays in the brand book, print, and social.
Lime speaks to companies, periwinkle to consultants — carried by tag dots, primary CTAs, and a half-turn of the foil blob. Never both at once.
Waven waves, scanlines, a blurred holographic blob, and a ghost pixel-X decorate every canvas below ~13% opacity — content stays monochrome and does the talking.
Every marketing surface opens on the same stationary canvas: four texture layers under the first fold, all at whisper opacity. On the site it lives in the persistent layout, so persona switches slide the content over it — the backdrop never moves.
For companies
Find the right AI expert for any project
Vetted AI consultants, engineers and agencies backed by 70,000 builders. Tell us what you need and we'll make the intro.
The four layers, bottom to top
1. waven-pattern.png · repeat · 13% opacity · masked to fade downward
2. scanlines · repeating-linear-gradient(0deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 6px)
3. foil blob · conic-gradient(from 200deg, #2795C8, #7A66D6, #B8862C, #2E9E67, #C2519B) · blur(64px) · top-right · 32% dark / 14% light
4. pixel-X · currentColor at 3% · anchored right- The backdrop spans only the hero (~36rem) and fades out — the page body returns to the plain canvas.
- One keyword per headline carries the accent; everything else stays monochrome.
- The tag–headline–sub stack is the opening grammar of every surface, hero or section.
- Textures never combine at full strength: waven ≤13%, scanlines ≤5%, ghost mark ≤3%.
The web system is dark-first, never black: charcoal zinc instead of the brand book's #000000, and a warm porcelain light mode instead of clinical white. The light mode inverts the knockout — and because lime is nearly white (1.1:1 on porcelain), it changes how lime appears, never whether the accent is lime.
Find the right AI expert
Lime sits straight on the canvas — as type, dots, and solid CTAs.
Find the right AI expert
Lime never sits on porcelain. It survives as a highlighter behind black type.
- Dark: lime is type, dots, and solid CTAs. Light: lime is a highlighter behind black type; standalone accents fall back to black.
- The primary CTA on light is a charcoal chip (#2C2C2E) carrying the lime label — the same lime-on-charcoal image dark mode establishes.
- Porcelain neutrals carry a whisper of warmth (#FCFCFB / #F6F5F1 / #EFEEE9 / #E5E3DE) — near-white, never #FFFFFF.
- Textures adapt by knob, not new assets: the waven PNG is white-on-transparent and inverts to ink on light; scanlines flip from white 4% to ink 5%.
The site speaks to two audiences and gives each one accent: lime for companies, periwinkle for consultants — the foil's violet stop, lifted so black text sits on it with the same punch as black-on-lime. The accent is carried by the tag dot, the primary CTA, and a half-turn of the foil blob. Never both in one surface.
For companies
Find the right AI expert for any project
For consultants
Get client work through Build Club
- The persona accent scopes to the persona's surfaces; shared chrome (header, footer) stays neutral.
- Periwinkle deepens to iris (#6B54F5) for text accents on the light canvas — #A797FF is a fill, not a text color, on porcelain.
- The lime tag dot wears an inset ink ring on light surfaces (like the brand stickers wear their outline); periwinkle holds its own on both.
- Switching persona spins the foil blob 180° in sync with the content slide — the one place the backdrop moves.
On the web the foil is rationed to three jobs — a hairline rule (the elevation signal), the aurora Certified text, and the blurred corner blob. Texture uses the supplied pre-blurred asset; only the blob is mixed in CSS, and always from the ink-strength stops.
A 2px slice of the blurred foil. Marks elevation: the footer top, the CTA banner base, the founder-note close.
The certification signal. Pastel stops on dark; the same five hues at ink strength on light (pastels are ~1.3:1 on porcelain).
The hero corner glow — the ink stops as a conic wash under blur(64px). Ink stops even in dark mode.
The two foil ramps
- Texture is always the supplied pre-blurred asset — never a hand-mixed linear gradient.
- The blob is the one CSS-mixed foil: conic from 200°, ink stops, blur(64px), 32% opacity on dark / 14% on light.
- Repeat the first stop at the end of any animated gradient so the aurora pan loops seamlessly.
- Never put a CSS filter on background-clipped foil text — it defeats background-clip and paints a solid pill.
Surfaces
Ramps
Gradients
Click to inspect from / to / direction + CSS.
Persona accents
Lime speaks to companies, periwinkle (the foil's violet stop, lifted) to consultants — never both at once. On the light canvas the lime dot wears an ink ring, and consultant text accents deepen to iris.
Core tokens
Applied web tokens, lifted from the live site.
Process
How it works
No upfront cost. Tell us what you need and we handle the matchmaking.
Every section opens identically: a dotted tag (Inter 13px, uppercase, +8% tracking), a display heading, a muted sub. Headings on the web run at −1.5% tracking— the brand book's +4% felt too airy at display sizes with the Space Grotesk stand-in; revisit when the licensed GC North Sans lands.
01
Tell us what you need
Describe your AI challenge. POC, RAG system, strategy, integrations, or training.
02
Get matched
We match you with Build Club Certified experts who specialise in exactly what you need.
03
Start building
Work directly with your expert. We stay involved to ensure quality.
- The index is display-face lime at text-sm; the title display-face at text-xl; body muted.
- Cards are the flat card surface with a hairline border — no shadows, no gradients.
Our partners have worked with
- 45s linear loop, duplicated track, edge fade via mask; hover pauses, reduced motion flattens to a wrapped row.
- Third-party partner logos rest as monochrome silhouettes — brightness(0), inverted on dark — at 60% opacity, and reveal their own colors on hover; never a filter approximation of color.
Maya
AI Strategy
“Board-level AI strategy for a media group”
70K+
Members
50+
Cities
An expert network drawn from the community: builders who learn by shipping, not consultants writing white papers.
- Portraits are always grayscale; "Certified" is aurora foil text; the role reads in lime tags; ratings are lime.
- Stat tiles keep the dark canvas in both themes (a scoped dark island) — the brand textures and lime are authored for dark.
Ready to find your AI expert?
Tell us what you need and we'll match you with the right partner from our certified network.
- Waven masked to fade rightward, scanlines over it, the ghost pixel-X in the corner at 4%.
- The holo rule closes the banner — the foil marks the moment of elevation.
- Primary CTA plus a plain-text secondary path; never two filled buttons.
Motion is sparse and directional. The chrome never animates; content slides over the stationary canvas, and every positional move collapses to an instant swap under reduced motion.
| Moment | Spec |
|---|---|
| Persona switch | Content slides 44px + blur-fades — 440ms cubic-bezier(0.22, 1, 0.36, 1); direction mirrors the switcher (forward = in from the right). Header, footer, and backdrop stay frozen. |
| Foil blob | Half-turn (180°) per persona, as a live transition timed to the content slide. |
| Theme switch | A single expanding circle wipes the new theme over the old (View Transitions API) — no cross-fade. |
| Marquee | 45s linear, seamless duplicated track, pause on hover. |
| Aurora text | 8s ease-in-out, infinite alternate — only background-position animates. |
| Reduced motion | Slides and marquees drop to instant/static; the star of the system is stillness. |
Scanlines — mixed in CSS, themed by one custom property
repeating-linear-gradient(0deg, var(--scanline-color) 0 1px, transparent 1px 6px)
/* dark: rgb(255 255 255 / .04) · light: rgb(28 28 28 / .05) */- Photography is black-and-white only — grayscale portraits let the holographic ring and lime carry the color.
- Never combine two textures at full strength in one space; if nothing fits, use the flat canvas.
- Don't rescale the waven grain — its rhythm breaks; tile it at intrinsic size.
This brand's logos, fonts, imagery, and downloads live in one folder, nested under the brand. Drop files here and they'll be wired up as they land.
public/brands/build-club/x/