← design lab

The decision guide.

Five committed directions for CoreLink's public face, each built as a complete homepage with real product content. Candidate zero is the current live site -- tech-industrial spec-sheet: matte black, lime, Maintanker caps, mono microlabels, sharp corners. Every direction below either keeps or deliberately breaks pieces of that kit, recorded per section.

Direction 01 — /one/

The Gallery The Gallery

Corelink as a private museum of working artists: an ivory-walled salon where real artwork hangs in layered wood-and-mat frames with engraved wall labels, roman-numeral plates, a sealed price book, and slow line-by-line serif reveals — hiring reframed as acquisition.

Palette

#f6f3ec ivory wall#eee9de floor/recessed panels#fbf9f3 mat board#1c1712 ink#5f574b muted caption ink#d9d2c3 hairline rules#7a1f1f oxblood (sole accent)#241e16 / #4a4033 frame wood gradient

Type

Fraunces (Google Fonts, variable optical sizing — opsz 144 light for display headlines and stat numerals, opsz 90 for section heads, italic for names/taglines/roman plate numbers) + Inter 10-12px letterspaced uppercase for all wall-label caps and buttons. No Maintanker, no mono — deliberate full break.

Motion

GSAP 3.12 + ScrollTrigger (jsdelivr UMD): hero headline draws in line by line (yPercent 110, overflow-clipped spans, 1.1s stagger 0.14), everything else quiet opacity+y40 1s rises fired once at top-88%, patron names arrive in procession, stats count up unhurried (1.8s snap). CSS-only 36s Ken Burns on the hero canvas, 1.4s ease-out scale on plate hover. All motion transform/opacity only; prefers-reduced-motion kills GSAP init AND all CSS animation/transitions; content is fully visible with no JS.

3D & imagery

No Three.js. Showstopper hero is a pure-CSS framed masterpiece leaning against the wall: perspective rotateY/rotateX lean, gradient wood frame with inner gilt bevel, inset-shadow mat board, radial-gradient pooled floor shadow, and a wall/floor tone split behind it, topped with a "Now showing" mat-board plaque. Nine salon-hung plates (varied 4/5, 1/1, 4/3, 3/4 aspect-ratio windows, staggered centre column) from nine real artists, all hotlinked Supabase artwork with lazy loading and alt text; flagcdn flags framed by hairline borders inside the labels.

Keeps from the brand

The curation ethos (validation "cannot be bought" is the centrepiece), the 9-plate discipline (exactly nine plates hung, and called out in the wall-head aside), plate numbering (roman: Plate I-IX, lowercase roman i-iii for process steps, "No. I-III" section numerals), all real product copy, stats, studios, rate tiers, and both CTAs pointing at the live worker URL. Sharp corners survive as engraved-plaque austerity.

Breaks -- and why

Everything dark/tech: matte black becomes ivory wall, lime #CED600 becomes oxblood #7a1f1f, Maintanker caps become Fraunces optical serif, mono microlabels become letterspaced Inter small caps, (NN) index numbers become roman numerals, corner ticks become hairline engraved rules, and spec-sheet density becomes museum whitespace. Broken because the direction's thesis is that scarcity and human review read as luxury — a gallery sells trust through restraint, not through terminal aesthetics; the freshness signal becomes a provenance line ("Confirmed 8 July 2026") and the gated rates become a sealed price book kept behind the desk.

How it was built

The case for it

Choose this if trust is the whole sell. Nothing else in the concept-art world looks like a museum -- recruiters read restraint as seriousness, and artists read it as prestige. It's the strongest possible frame for 'the badge cannot be bought', and it ages the slowest. The risk: it whispers where the games industry often shouts.

Direction 02 — /two/

Signal SIGNAL — Deep-Space Talent Observatory

CoreLink as a sci-fi FUI observation deck: an abyssal blue-black void with a rotating Three.js wireframe core annotated by leader-line stats, artists presented as specimen scans with scanline sweeps, typed mono readouts, and rate bands that render as an encrypted restricted channel.

Palette

#04070c (abyssal background)#6de8ff (holographic cyan, working color)#eaf4f8 (thin white)#7d95a4 (blue-gray dim text)#ff4d6d (hot alert, used exactly twice: OPEN NOW node + RESTRICTED tag)

Type

Space Grotesk (display + UI, weights 300-700) + IBM Plex Mono (all readouts, labels, badges, CTAs) via Google Fonts. No local brand fonts.

Motion

GSAP 3.12 tick-by-tick counters; JS-typed readout lines (hero scan line + per-card "SIGNAL: CONFIRMED Nd AGO") triggered by IntersectionObserver; CSS scanline sweep on card hover; phase bars that grow on reveal; 44s CSS marquee for stations; translateY/opacity scroll reveals. Everything transform/opacity only, no bounce easings. prefers-reduced-motion kills every animation (reveals become static, typed lines print instantly, counters snap to final values, marquee freezes, Three.js renders one static frame with no RAF loop).

3D & imagery

Three.js r147 UMD hero artifact: icosahedron wireframe shell + dense inner core + vertex point cloud + two particle orbit rings + equatorial line, cyan on transparent canvas, lerped mouse parallax, DPR capped at 1.75, rendering gated on tab visibility and hero on-screen; CSS radial halo as no-WebGL/offline fallback. Real Supabase artwork on 4:3 specimen plates (lazy, alt, object-fit cover), avatars as bracketed ID squares, flagcdn w20/w40 flags. Global 2.8% grid + 3% scanline overlay.

Keeps from the brand

Sharp corners everywhere (zero border-radius); the mono readout voice for microlabels, ticks and status lines; corner-bracket/technical-annotation DNA (card brackets, leader lines, station codes STA-01..08, specimen codes SPC-01..08); index-numbered plates recast as specimen codes.

Breaks -- and why

Dropped lime #CED600 entirely for holographic cyan; dropped Maintanker and Degrad Mono for Space Grotesk + IBM Plex Mono; broke matte restraint — this direction earns its (subtle, expensive) 1px cyan glows, canvas artifact and typed FUI motion, because the pitch is a live observatory instrument rather than a spec sheet. Rationale: the reference board's holographic scan interfaces demand luminosity that lime-on-matte can't deliver without reading as candidate zero.

How it was built

The case for it

Choose this if the product should feel like an instrument. It dramatizes the live data story (freshness, telemetry, gated channels) better than any other direction -- the availability signal literally glows. It's the closest in spirit to candidate zero but far more cinematic. The risk: sci-fi FUI is a strong flavor, and it can upstage quiet portfolios.

Direction 03 — /three/

Overprint OVERPRINT

Corelink as a limited-run two-ink risograph poster drop: cream stock, riso red and blue overprinting via mix-blend multiply, black impact type, rubber-stamp validation marks, tape-band studio marquees, duotone artist plates with one full-colour printed proof, and a redacted rate card that sells the recruiter gate.

Palette

#f2ecdd (cream stock)#e9e1cc (deep paper, rate sheet)#111008 (impact ink black)#ff3b1f (riso red)#2440ff (riso blue)

Type

Archivo Black (Google Fonts) for the shout — hero, plate names, stats, CTAs; Space Mono 400/700 (Google Fonts) for all small print, folios, specs, stamps. Local Maintanker/Degrad intentionally unused — part of the brand break.

Motion

Chunky and stepped, zero floatiness: everything runs on steps(3) easing. IntersectionObserver stepped ink-in reveals (translateY+opacity), stamp-slam entrances (scale 1.5 to 1 in 3 frames), two counter-rotating linear tape marquees (transform-only, duplicated tracks for seamless loop), CTA hover collapses its hard shadow in 2 steps like a press hitting paper. prefers-reduced-motion kills all animation via CSS and short-circuits the JS so nothing ever starts hidden; transform/opacity only throughout.

3D & imagery

No 3D. CSS silkscreen pipeline: each artwork sits in an isolated wrapper with ink-colored background, image grayscaled + mix-blend screen (darks take the ink), a cream multiply layer pulls highlights to paper tone, and a radial-gradient halftone dot screen overlays at 5px pitch. Plates alternate red/blue inks; PL.03 (Jasper Whitfield-Okafor) is deliberately full colour, labelled FULL COLOUR — PRINTED PROOF. Global SVG feTurbulence grain (data URI, fixed, multiply) over the whole sheet; an inline feDisplacementMap filter gives stamps and date stamps ink-bleed edges. Avatars are grayscaled with hard black borders; flags via flagcdn w20+w40 2x.

Keeps from the brand

Sharp corners everywhere (zero border-radius outside the deliberately irregular stamp circles); the (NN) index-numbering system reinterpreted as folio marks — (00)-(05) section folios and PL.01-PL.08 plate numbers; the honest-ink ethos (validated by a human, counted by hand, confirmed from the artist's inbox) now expressed literally as print-shop provenance language; monospace microlabels survive as Space Mono small print.

Breaks -- and why

Everything digital-dark: matte black #09090b field replaced by cream paper (black demoted to one stats band and the footer). Lime #CED600 is gone entirely — replaced by the red/blue overprint pair, because a third fluorescent would muddy the two-ink conceit. Maintanker/Degrad swapped for Archivo Black/Space Mono to read as newsprint, not tech spec sheet. Smooth motion replaced by stepped mechanical motion — the page should feel like a press cycling, not software easing. Freshness is a rubber date stamp (CONFIRMED 08 JUL 26), not a live-status pixel.

How it was built

The case for it

Choose this if CoreLink should feel like culture, not software. The print-drop conceit makes curation tactile -- stamps, folios, editions -- and it's instantly memorable and shareable. It photographs better than anything else here. The risk: the duotone treatment restyles the artists' work itself, which some artists may not love.

Direction 04 — /four/

Aurora AURORA

CoreLink as a nocturne: a deep-indigo dream-gallery where drifting aurora fields, a Three.js starfield, and weightless glass plates present validated artists as constellations in a night sky.

Palette

#0a0b1e#141433#7c5cff#5ce1e6#ff9ecb#e9eaff

Type

Unbounded (display, generous letter-spacing, moonlit gradient-clipped headlines) + Sora 300/400 (body) via Google Fonts.

Motion

Everything slow and overlapping: 3 aurora blobs on 30-38s WAAPI transform loops (alternate, ease-in-out); Three.js r147 starfield (1500 points, slow z-drift recycle, scroll parallax on points.y, render paused when hero off-screen); GSAP 3.12 + ScrollTrigger scrubbing the three sky layers at different speeds; cards float on staggered 6s CSS y-oscillation; IntersectionObserver reveals; pulsing-star freshness beacons; count-up stats. All of it killed by prefers-reduced-motion (CSS animation/transition nuke + JS guards, starfield canvas hidden).

3D & imagery

Real Supabase artwork in 4:3 rounded glass plates (9 artists, PRO gradient pills on pack-marked pro plates), avatars in conic-gradient luminous rings, flagcdn flags w20+w40 2x, verified = inline connected-dots constellation SVG, alumni = rose outline chip, blurred rate values behind a lock as the recruiter-gate visual.

Keeps from the brand

Numbered plates (as faint roman numerals I-IX etched over each artwork), the curation + gate story (validation-by-merit copy, blurred day-rate bands sold as "behind the veil"), exact pack copy for tagline/sub/how-it-works/stats, and the "confirmed Nd ago" freshness signal.

Breaks -- and why

Everything industrial: no lime, no matte black, no mono microlabels, no sharp corners or corner ticks. Rounded 16-24px glass everywhere, soft luminance instead of neon, cosmic Unbounded instead of Maintanker caps, and a poetic nocturne voice ("constellations they orbit", "open to work tonight") because this direction sells wonder — the gallery where worlds get made — not spec-sheet rigor.

How it was built

The case for it

Choose this if the emotional register matters most -- this is the direction artists will find beautiful. It sells 'the people who draw worlds' as poetry and makes the platform feel aspirational rather than transactional. The risk: soft edges and dreaminess communicate less operational credibility to a studio's hiring lead.

Direction 05 — /five/

Index INDEX — Swiss kinetic typographic index

CoreLink as a living printed index: blinding white paper, black Archivo Expanded 900 set on an exposed 12-column grid, lime #CED600 as the sole surviving color — Swiss International Style that learned to move via GSAP char choreography and a full-width expanding artist table instead of cards.

Palette

#fafafa#0a0a0a#CED600rgba(10,10,10,.16) hairline rules#f1f1ea row-hover wash

Type

Archivo variable (Google Fonts, wdth+wght axes): font-stretch 125% at weight 900 for all display/headline/names ("CORELINK" all-caps), regular widths 400-700 for text and microlabels; tabular-nums + tnum enforced globally so every number sits on the grid.

Motion

GSAP 3.12 (jsdelivr UMD) for hero only: char-split headline rises out of clipped lines (power3.out, 0.016s stagger), first headline line swaps through 10 disciplines on a 2.6s loop (chars out power3.in / in power3.out). Everything else is dependency-free: IntersectionObserver scroll reveals (translateY+opacity), rAF cubic-ease count-ups (321/96/226/11), CSS marquee (translateX -50%, margin-spaced halves for a seamless seam), row expansion via grid-template-rows 0fr→1fr. Transform/opacity only; prefers-reduced-motion kills all CSS animation AND early-returns all JS motion (content stays fully visible).

3D & imagery

No 3D, no decoration — artwork IS the imagery, withheld until interaction: artists render as a full-width index table (rank 001-012, 42px expanded names, discipline codes, flags, validated/alumni marks, freshness), and hover/tap expands the row into a black band with a horizontal strip of real Supabase plates numbered (001.A)-style, PRO-tagged, lazy-loaded in 4:3 aspect boxes. Grayscale avatars snap to color on hover.

Keeps from the brand

Lime #CED600 as the only color (highlight box on the cycling word, validated squares, marquee separators, GATED stamps, hover inversions); sharp corners everywhere (zero border-radius); index-number culture — (001)-(007) section numbering, ranked rows, plate coordinates; the gate-selling posture of the brand copy.

Breaks -- and why

Dark mode inverted to blinding #fafafa paper (black survives only as bands: marquee, row expansions, footer); Maintanker + mono microlabels replaced by a single Archivo variable family doing both voices, because a Swiss index wants one typeface at two widths; spec-sheet chrome (corner ticks, panel framing) replaced by an exposed 12-column skeleton of visible 1px rules — the grid itself is the decoration; cards abolished in favor of a typographic table, so artwork becomes an earned reveal instead of wallpaper.

How it was built

The case for it

Choose this if conviction is the message. It keeps your lime and your sharpness but stakes everything on typography and information design -- the index IS the interface, names are the heroes, and motion does the charisma. Fastest to fold back into the production app. The risk: with the work reduced to expandable rows, art leads less than in any other direction.