Skip to content
codefastlabs

Command Palette

Search for a command to run...

Brand assets.

The mark, the wordmark, the colours and the type behind Codefast Labs, and the files to use them. Right-click the logo anywhere on the site to come back here.

01 · Mark

One lit tile.

Four tiles stand for a family of packages; the lit one is the package in your hands. Built on a 64-unit grid: 4 margin, 24 tile, 8 gap, 6 radius.

On light: the lead tile in Sky 600, the trail in Neutral 900 at 0.4, 0.4 and 0.15.
On dark: the lead tile in Sky 400, the trail in Neutral 50, the pair the site uses in dark mode.
Mono, as the site header draws it: one colour, the fade alone carries the idea. Use it inline and wherever the brand colour is not available.

At 32 px and under the trail brightens to 0.5, 0.5 and 0.25 so the fourth tile survives a browser tab. Nothing else changes: the same file at every size.

02 · Lockups

Mark, then word.

Horizontal for headers and footers, stacked for avatars and covers. Clear space is one tile on every side; the mark goes no smaller than 16 px, the wordmark no smaller than 14 px.

codefastlabs
codefastlabs
codefastlabs
codefastlabs

03 · Colour

One hue, no second accent.

Every value is a Tailwind 4 token the site already renders; the hex is that oklch resolved to sRGB. Sky carries the brand and the neutrals carry everything else.

Sky 600Brand on light

--color-sky-600 · oklch(58.8% 0.158 241.966) · #0084d1

Sky 400Brand on dark

--color-sky-400 · oklch(74.6% 0.16 232.661) · #00bcff

Sky 500Theme colour, accents on black

--color-sky-500 · oklch(68.5% 0.169 237.323) · #00a6f4

Neutral 950Dark background

--color-neutral-950 · oklch(14.5% 0 0) · #0a0a0a

Neutral 900Foreground on light

--color-neutral-900 · oklch(20.5% 0 0) · #171717

Neutral 800Border on dark

--color-neutral-800 · oklch(26.9% 0 0) · #262626

Neutral 700Muted on light

--color-neutral-700 · oklch(37.1% 0 0) · #404040

Neutral 400Muted on dark

--color-neutral-400 · oklch(70.8% 0 0) · #a1a1a1

Neutral 200Border on light

--color-neutral-200 · oklch(92.2% 0 0) · #e5e5e5

Neutral 100Light background

--color-neutral-100 · oklch(97% 0 0) · #f5f5f5

Neutral 50Foreground on dark

--color-neutral-50 · oklch(98.5% 0 0) · #fafafa

04 · Type

Inter, four ways.

Inter Variable on the site, Inter everywhere else, with ui-sans-serif and system-ui as the fallback stack.

codefastlabs
Wordmark: Inter 600, −0.02em, lowercase, one word.
Packages built for React 19.
Headlines: Inter 700, −0.03em. One Sky phrase carries the point.
Typed, documented, and published under @codefast. Components, variant styling, theming, tracking, and dependency injection.
Body: Inter 400, 1.6 line height, muted on the page background.
@codefast/di · @codefast/ui
Package names stay in mono and lowercase, the package after the slash in Sky.

05 · Name

Say it the same way everywhere.

Codefast Labs
The organisation. Two words, one capital: in copyright lines, page titles, and wherever a company is named.
Codefast
The monorepo and the package family, as in the Codefast monorepo. Never CodeFast.
@codefast/di
A package. Mono, lowercase, with its scope. Never Codefast DI. The lowercase handle codefastlabs belongs only where spaces are impossible: the GitHub organisation, the domain, and the wordmark.

06 · Downloads

Take the files.

Marks as SVG, lockups and icons as PNG at retina size. The rasters are rendered from the same sources by a script in the repository, so what you download is what the site ships.