Primitive tokens

Raw design scales, parsed live from packages/porchlight/src/02-tokens.css at build time — so this page can never drift from the source. Semantic colors (bg/surface/text/ border/accent/danger…) are included; theme, density, and forced-colors overrides live in the themes preview.

Registered properties

@property gives these a type and initial value, so they animate cleanly and inherit predictably.

Name	Syntax	Inherits	Initial
`--pl-motion-scale`	`<number>`	yes	`1`
`--pl-radius-control`	`<length>`	yes	`8px`
`--pl-focus-size`	`<length>`	yes	`2px`

Fonts

--pl-font-sans system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif
--pl-font-mono ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace
--pl-font-weight-normal 400
--pl-font-weight-medium 500
--pl-font-weight-semibold 600
--pl-font-weight-bold 700
--pl-font-weight-black 900
--pl-text-xs clamp(0.75rem, 0.72rem + 0.1vi, 0.8125rem)
--pl-text-sm clamp(0.875rem, 0.84rem + 0.1vi, 0.9375rem)
--pl-text-md 1rem
--pl-text-lg clamp(1.125rem, 1.05rem + 0.25vi, 1.25rem)
--pl-text-xl clamp(1.25rem, 1.1rem + 0.55vi, 1.625rem)
--pl-text-2xl clamp(1.5rem, 1.2rem + 1vi, 2rem)
--pl-text-3xl clamp(1.875rem, 1.4rem + 1.6vi, 2.75rem)
--pl-text-display clamp(2.5rem, 1.8rem + 3vi, 4.5rem)

Leading

--pl-leading-tight 1.15
--pl-leading-snug 1.3
--pl-leading-normal 1.5
--pl-leading-loose 1.7

Spacing

--pl-space-0 0
--pl-space-1 0.25rem
--pl-space-2 0.5rem
--pl-space-3 0.75rem
--pl-space-4 1rem
--pl-space-5 1.25rem
--pl-space-6 1.5rem
--pl-space-8 2rem
--pl-space-10 2.5rem
--pl-space-12 3rem

Radius

--pl-radius-xs 0.25rem
--pl-radius-sm 0.375rem
--pl-radius-md 0.5rem
--pl-radius-lg 0.75rem
--pl-radius-xl 1rem
--pl-radius-2xl 1.5rem
--pl-radius-3xl 2rem
--pl-radius-pill 999rem
--pl-radius-control var(--pl-radius-md)

Motion

--pl-duration-1 calc(120ms * var(--pl-motion-scale))
--pl-duration-2 calc(180ms * var(--pl-motion-scale))
--pl-duration-3 calc(260ms * var(--pl-motion-scale))

Asymmetric enter/exit: entries feel considered; exits feel snappy.

--pl-duration-enter calc(220ms * var(--pl-motion-scale))
--pl-duration-exit calc(160ms * var(--pl-motion-scale))
--pl-ease-standard cubic-bezier(0.2, 0, 0, 1)
--pl-ease-emphasized cubic-bezier(0.2, 0, 0, 1.2)
--pl-ease-spring cubic-bezier(0.34, 1.56, 0.64, 1)

subtle overshoot

--pl-ease-decelerate cubic-bezier(0, 0, 0.2, 1)

enter: fast → slow

--pl-ease-accelerate cubic-bezier(0.4, 0, 1, 1)

Z-index

--pl-z-base 0
--pl-z-raised 10
--pl-z-sticky 100
--pl-z-overlay 1000
--pl-z-toast 1100
--pl-brand-1 oklch(97% 0.02 82deg)
--pl-brand-2 oklch(89% 0.05 82deg)
--pl-brand-3 oklch(80% 0.09 82deg)
--pl-brand-4 oklch(70% 0.13 82deg)
--pl-brand-5 oklch(63% 0.15 82deg)
--pl-brand-6 oklch(56% 0.14 82deg)
--pl-brand-7 oklch(48% 0.11 82deg)
--pl-brand-8 oklch(39% 0.07 82deg)
--pl-brand-9 oklch(29% 0.04 82deg)
--pl-color-bg light-dark(oklch(98% 0.005 60deg), oklch(14% 0.008 55deg))
--pl-color-surface light-dark(oklch(100% 0 0deg), oklch(18% 0.008 55deg))
--pl-color-surface-2 light-dark( oklch(94% 0.008 60deg), oklch(22% 0.012 55deg) )
--pl-color-text light-dark(oklch(20% 0.012 55deg), oklch(96% 0.008 60deg))
--pl-color-text-muted light-dark( oklch(46% 0.015 55deg), oklch(72% 0.012 55deg) )
--pl-color-border light-dark( oklch(80% 0.015 55deg / 75%), oklch(45% 0.012 55deg / 30%) )
--pl-color-border-overlay transparent
--pl-color-accent light-dark(var(--pl-brand-7), var(--pl-brand-4))
--pl-color-accent-text light-dark(white, oklch(16% 0.01 55deg))
--pl-color-accent-hover color-mix( in oklab, var(--pl-color-accent), oklch(16% 0.01 55deg) 10% )
--pl-color-danger oklch(60% 0.22 25deg)
--pl-color-danger-bg light-dark( oklch(96% 0.04 25deg), oklch(22% 0.08 25deg) )
--pl-color-danger-text light-dark( oklch(36% 0.18 25deg), oklch(90% 0.06 25deg) )
--pl-color-success oklch(58% 0.18 150deg)
--pl-color-success-bg light-dark( oklch(96% 0.04 150deg), oklch(22% 0.08 150deg) )
--pl-color-success-text light-dark( oklch(34% 0.15 150deg), oklch(82% 0.15 150deg) )
--pl-color-warning oklch(62% 0.19 75deg)
--pl-color-warning-bg light-dark( oklch(96% 0.06 75deg), oklch(24% 0.09 75deg) )
--pl-color-warning-text light-dark( oklch(40% 0.17 75deg), oklch(84% 0.15 75deg) )

Disabled state — uniform dimming for all disabled controls.

--pl-opacity-disabled 0.5

Accent bar — the left/inline-start indicator for active/selected states.

--pl-accent-bar-width 3px

Overlay scrim — the modal/dialog backdrop tint.

--pl-color-scrim oklch(0% 0 0deg / 55%)
--pl-overlay-popover-bg light-dark( oklch(100% 0 0deg / 96%), oklch(17% 0.04 250deg / 94%) )

Menu rows — shared by anchored menu-like surfaces.

--pl-menu-row-min-block-size 2.25rem
--pl-menu-row-padding-inline var(--pl-space-3)
--pl-menu-row-radius var(--pl-radius-sm)
--pl-menu-row-hover-bg color-mix( in oklab, var(--pl-color-surface-2), var(--pl-color-accent) 10% )
--pl-menu-row-icon-size 1rem

Controls

--pl-control-block-size 2.5rem
--pl-control-padding-inline var(--pl-space-4)
--pl-control-gap var(--pl-space-2)
--pl-control-border-width 1px
--pl-control-radius var(--pl-radius-control)

Focus — aligned with the warm brand hue for a cohesive ring.

--pl-focus-color light-dark(oklch(52% 0.14 82deg), oklch(72% 0.13 82deg))
--pl-focus-offset 2px
--pl-focus-size 2px
--pl-focus-glow-opacity 85%
--pl-backdrop-blur 12px
--pl-backdrop-saturate 160%
--pl-backdrop-blur-strong 20px
--pl-backdrop-saturate-strong 180%
--pl-backdrop-blur-scrim 4px
--pl-backdrop-saturate-scrim 80%
--pl-shadow-1 0 1px 2px oklch(0% 0 0deg / 8%), 0 1px 4px oklch(30% 0.04 40deg / 6%)
--pl-shadow-2 0 4px 8px oklch(0% 0 0deg / 8%), 0 8px 24px oklch(25% 0.06 40deg / 12%), inset 0 1px 0 oklch(100% 0 0deg / 6%)
--pl-shadow-3 0 8px 16px oklch(0% 0 0deg / 10%), 0 24px 64px oklch(20% 0.08 40deg / 18%), inset 0 1px 0 oklch(100% 0 0deg / 8%)

Glow: accent-hued ring for focused/active primary controls.

--pl-shadow-glow 0 0 0 4px color-mix(in oklab, var(--pl-color-accent), transparent 72%)