WeekndLabs
SponsorStar on GitHub
ProductsDesignPhilosophy
SponsorStar on GitHub

WeekndLabs Design

One grammar, two grounds.

Omni, Bubo and weekndlabs.com share one neutral ground, one system blue, one sans on an optical size axis, and corners that are continuous rather than circular. Below is the same card in both themes at once, with the measured contrast printed under each.

See the components →Install and usage →

light

WeekndLabs

One grammar, two grounds.

[Tokens][shadcn]

$ npm i @weekndlabs/design
+ @weekndlabs/design@0.4.0

foreground 16.12:1

dark

WeekndLabs

One grammar, two grounds.

[Tokens][shadcn]

$ npm i @weekndlabs/design
+ @weekndlabs/design@0.4.0

foreground 16.90:1

light

Semantic roles and measured contrast for the light theme
RoleValueoklchOnRatio
backgroundoklch(0.9851 0 0)—surface, exempt
foregroundoklch(0.2316 0.0038 286.1)background16.12:1
cardoklch(1 0 0)—surface, exempt
card-foregroundoklch(0.2316 0.0038 286.1)card16.83:1
popoveroklch(1 0 0)—surface, exempt
popover-foregroundoklch(0.2316 0.0038 286.1)popover16.83:1
primaryoklch(0.2316 0.0038 286.1)—surface, exempt
primary-foregroundoklch(1 0 0)primary16.83:1
secondaryoklch(0.9702 0 0)—surface, exempt
secondary-foregroundoklch(0.2316 0.0038 286.1)secondary15.44:1
mutedoklch(0.9702 0 0)—surface, exempt
muted-foregroundoklch(0.5399 0.0077 286.14)muted4.65:1
accentoklch(0.9702 0 0)—surface, exempt
accent-foregroundoklch(0.2316 0.0038 286.1)accent15.44:1
destructiveoklch(0.5013 0.1783 28.7)—surface, exempt
destructive-foregroundoklch(1 0 0)destructive6.54:1
successoklch(0.5135 0.1185 153.14)—surface, exempt
success-foregroundoklch(1 0 0)success5.35:1
warningoklch(0.5078 0.108 73.3)—surface, exempt
warning-foregroundoklch(1 0 0)warning5.93:1
borderoklch(0.9219 0 0)—mark, exempt
inputoklch(0.8699 0 0)—mark, exempt
ringoklch(0.5462 0.1891 256.36)—mark, exempt
sidebaroklch(0.9702 0 0)—surface, exempt
sidebar-foregroundoklch(0.2316 0.0038 286.1)sidebar15.44:1
sidebar-accentoklch(1 0 0)—surface, exempt
sidebar-accent-foregroundoklch(0.2316 0.0038 286.1)sidebar-accent16.83:1
sidebar-borderoklch(0.9219 0 0)—surface, exempt
sidebar-ringoklch(0.5462 0.1891 256.36)—surface, exempt
chart-1oklch(0.5462 0.1891 256.36)—mark, exempt
chart-2oklch(0.5135 0.1185 153.14)—mark, exempt
chart-3oklch(0.5078 0.108 73.3)—mark, exempt
chart-4oklch(0.5013 0.1783 28.7)—mark, exempt
chart-5oklch(0.4436 0.1935 305.94)—mark, exempt
radius10px—10px

dark

Semantic roles and measured contrast for the dark theme
RoleValueoklchOnRatio
backgroundoklch(0.1921 0.004 286.02)—surface, exempt
foregroundoklch(0.9707 0.0027 286.35)background16.90:1
cardoklch(0.2273 0.0038 286.09)—surface, exempt
card-foregroundoklch(0.9707 0.0027 286.35)card15.63:1
popoveroklch(0.2273 0.0038 286.09)—surface, exempt
popover-foregroundoklch(0.9707 0.0027 286.35)popover15.63:1
primaryoklch(0.9707 0.0027 286.35)—surface, exempt
primary-foregroundoklch(0.2273 0.0038 286.09)primary15.63:1
secondaryoklch(0.2939 0.0036 286.18)—surface, exempt
secondary-foregroundoklch(0.9707 0.0027 286.35)secondary12.80:1
mutedoklch(0.2939 0.0036 286.18)—surface, exempt
muted-foregroundoklch(0.6812 0.0073 286.21)muted4.85:1
accentoklch(0.2939 0.0036 286.18)—surface, exempt
accent-foregroundoklch(0.9707 0.0027 286.35)accent12.80:1
destructiveoklch(0.7097 0.1828 26.96)—surface, exempt
destructive-foregroundoklch(0.2273 0.0038 286.09)destructive6.10:1
successoklch(0.7685 0.1643 152.62)—surface, exempt
success-foregroundoklch(0.2273 0.0038 286.09)success8.71:1
warningoklch(0.8143 0.1396 81.16)—surface, exempt
warning-foregroundoklch(0.2273 0.0038 286.09)warning9.45:1
borderoklch(0.3492 0.0034 286.22)—mark, exempt
inputoklch(0.4024 0.0033 286.25)—mark, exempt
ringoklch(0.6854 0.1699 252.99)—mark, exempt
sidebaroklch(0.2273 0.0038 286.09)—surface, exempt
sidebar-foregroundoklch(0.9707 0.0027 286.35)sidebar15.63:1
sidebar-accentoklch(0.2939 0.0036 286.18)—surface, exempt
sidebar-accent-foregroundoklch(0.9707 0.0027 286.35)sidebar-accent12.80:1
sidebar-borderoklch(0.3492 0.0034 286.22)—surface, exempt
sidebar-ringoklch(0.6854 0.1699 252.99)—surface, exempt
chart-1oklch(0.6854 0.1699 252.99)—mark, exempt
chart-2oklch(0.7685 0.1643 152.62)—mark, exempt
chart-3oklch(0.8143 0.1396 81.16)—mark, exempt
chart-4oklch(0.7097 0.1828 26.96)—mark, exempt
chart-5oklch(0.7669 0.1715 313.76)—mark, exempt
radius10px—10px

scale

Shared by both themes. Space, radius and measure are pixels; the type scale carries its tracking and leading with it, per role.

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-control6px
--wl-radius-card10px
--wl-radius-window14px
--wl-radius-full9999px
--wl-corner-shapesquircle
--wl-container-narrow640px
--wl-container-medium900px
--wl-container-wide1280px
--wl-measure-page1280px
--wl-measure-doc900px
--wl-measure-article748px
--wl-measure-text660px
--wl-font-sansInter, ui-sans-serif, system-ui, -apple-system, sans-serif
--wl-font-monoJetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace
--wl-font-accentInstrument Serif, Georgia, serif
--wl-text-label0.6875rem
--wl-text-meta0.8125rem
--wl-text-body0.9375rem
--wl-text-lede1.125rem
--wl-text-heading1.125rem
--wl-text-subtitle1.25rem
--wl-text-title1.5rem
--wl-text-display2rem
--wl-text-sectionclamp(1.55rem, 3vw, 2.3rem)
--wl-text-heroclamp(2.1rem, 5.2vw, 3.9rem)
--wl-tracking-hero-0.03em
--wl-tracking-section-0.015em
--wl-tracking-label0.14em
--wl-weight-body400
--wl-weight-medium500
--wl-weight-semibold600
--wl-weight-display700
--wl-weight-mono400
--wl-leading-hero1.15
--wl-leading-heading1.25
--wl-leading-body1.6
--wl-leading-mono1.7