WeekndLabs
SponsorStar on GitHub

WeekndLabs Design

One grammar, three faces.

Omni, Bubo and weekndlabs.com share a spacing scale, a type scale and a set of semantic roles. Each fills those roles with its own values. Below is the same card rendered in all three themes at once.

night-dark

Omni

Noise-canceling context for AI agents.

[Rust][MCP]

$ omni --pre-hook
saved 4.2k tokens

ink 15.81:1

night-light

Omni

Noise-canceling context for AI agents.

[Rust][MCP]

$ omni --pre-hook
saved 4.2k tokens

ink 15.63:1

receipt

Omni

Noise-canceling context for AI agents.

[Rust][MCP]

$ omni --pre-hook
saved 4.2k tokens

ink 14.13:1

night-dark

Semantic roles and measured contrast for the night-dark theme
RoleValueHexOnRatio
surface#12141Fsurfacesurface, exempt
surface-panel#1E2333surfacesurface, exempt
surface-sunk#1A1D2Bsurfacesurface, exempt
ink#ECEEF5surface15.81:1
ink-soft#8A90A6surface5.78:1
rule#2A3048surfaceborder, exempt
rule-soft#21273Asurfaceborder, exempt
rule-strong#3A4166surfaceborder, exempt
accent#F5B841surface10.31:1
accent-strong#FCD670surface13.09:1
inset#0B0B0Csurfacesurface, exempt
inset-ink#FFB000inset10.74:1
inset-ink-dim#A87400inset4.84:1
positive#6BCC8Fsurface9.30:1
negative#E0776Fsurface6.14:1

night-light

Semantic roles and measured contrast for the night-light theme
RoleValueHexOnRatio
surface#FAF8F3surfacesurface, exempt
surface-panel#F4F0E7surfacesurface, exempt
surface-sunk#F0ECE2surfacesurface, exempt
ink#1C1E28surface15.63:1
ink-soft#5A5F70surface5.99:1
rule#D8D1C0surfaceborder, exempt
rule-soft#E4DECFsurfaceborder, exempt
rule-strong#C4BCA6surfaceborder, exempt
accent#9C6100surface4.80:1
accent-strong#7A4E00surface6.78:1
inset#0B0B0Csurfacesurface, exempt
inset-ink#FFB000inset10.74:1
inset-ink-dim#A87400inset4.84:1
positive#2A6B41surface6.04:1
negative#9B3E37surface6.31:1

receipt

Semantic roles and measured contrast for the receipt theme
RoleValueHexOnRatio
surface#E3E4E0surfacesurface, exempt
surface-panel#DBDCD6surfacesurface, exempt
surface-sunk#D3D5CDsurfacesurface, exempt
ink#16161Asurface14.13:1
ink-soft#56585Asurface5.59:1
rule#C6C8C1surfaceborder, exempt
rule-soft#D6D8D1surfaceborder, exempt
rule-strong#A9ABA3surfaceborder, exempt
accent#7A4E00surface5.64:1
accent-strong#5F3D00surface7.63:1
inset#0B0B0Csurfacesurface, exempt
inset-ink#FFB000inset10.74:1
inset-ink-dim#A87400inset4.84:1
positive#2A6B41surface5.02:1
negative#9B3E37surface5.24:1

scale

Shared by all three themes. Space, radius and measure are pixels; the type scale is the one from Omni, which was the most developed of the three.

Unthemed tokens shared across every theme
VariableValue
--wl-space-02px
--wl-space-14px
--wl-space-28px
--wl-space-312px
--wl-space-416px
--wl-space-524px
--wl-space-632px
--wl-space-748px
--wl-space-864px
--wl-space-996px
--wl-radius-sm2px
--wl-radius-base3px
--wl-radius-md4px
--wl-radius-lg5px
--wl-radius-full9999px
--wl-measure-page1180px
--wl-measure-doc900px
--wl-measure-article748px
--wl-measure-text660px
--wl-font-night-displayBricolage Grotesque, system-ui, sans-serif
--wl-font-night-bodyInter, system-ui, sans-serif
--wl-font-night-monoJetBrains Mono, ui-monospace, monospace
--wl-font-receipt-displayIBM Plex Sans Condensed, IBM Plex Sans, system-ui, sans-serif
--wl-font-receipt-bodyIBM Plex Sans, system-ui, sans-serif
--wl-font-receipt-monoIBM Plex Mono, ui-monospace, monospace
--wl-text-displayclamp(2.1rem, 5.2vw, 3.9rem)
--wl-text-sectionclamp(1.55rem, 3vw, 2.3rem)
--wl-text-lede1.12rem
--wl-text-body1rem
--wl-text-fine0.86rem
--wl-text-eyebrow0.72rem
--wl-tracking-display-0.03em
--wl-tracking-section-0.015em
--wl-tracking-eyebrow0.14em