Daybridge

Daybridge — design reference

Source: https://daybridge.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Typography

• font-family: InterVariable,SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif — selector html,body
• font-size: var(--text-2xl) — selector .text-2xl
• font-size: var(--text-2xs) — selector .text-2xs
• font-size: var(--text-3xl) — selector .text-3xl
• font-size: var(--text-3xs) — selector .text-3xs
• font-size: var(--text-lg) — selector .text-lg
• font-size: var(--text-md) — selector .text-md
• font-weight: var(--weight-heading) — selector .text-2xl,.text-3xl,.text-xl
• font-weight: var(--weight-resting) — selector html,body
• line-height: var(--tw-leading,var(--text-2xl--line-height)) — selector .text-2xl
• line-height: var(--tw-leading,var(--text-2xs--line-height)) — selector .text-2xs
• line-height: var(--tw-leading,var(--text-3xl--line-height)) — selector .text-3xl
• line-height: var(--tw-leading,var(--text-3xs--line-height)) — selector .text-3xs
• line-height: var(--tw-leading,var(--text-lg--line-height)) — selector .text-lg
• line-height: var(--tw-leading,var(--text-md--line-height)) — selector .text-md
• line-height: var(--tw-leading,var(--text-sm--line-height)) — selector .text-sm
• line-height: var(--tw-leading,var(--text-xl--line-height)) — selector .text-xl

Colors and surfaces

• color: var(--button-primary-foreground) — selector .text-button-primary-foreground
• color: var(--decorative) — selector .text-decorative
• color: var(--elevated) — selector .text-elevated
• color: var(--event-foreground) — selector .text-event-foreground
• color: var(--event-foreground-low-contrast) — selector .text-event-foreground-low-contrast
• color: var(--event-foreground-medium-contrast) — selector .text-event-foreground-medium-contrast
• color: var(--high-contrast) — selector .text-high-contrast
• background-color: #0000 — selector button,input,select,optgroup,textarea
• background-color: var(--button-outline-highlight) — selector .bg-button-outline-highlight
• background-color: color-mix(in oklab, var(--button-outline-highlight) 0%, transparent) — selector .before:bg-button-outline-highlight/0:before
• background-color: color-mix(in oklab, var(--button-outline-highlight) 10%, transparent) — selector .before:bg-button-outline-highlight/10:before
• background-color: var(--button-primary-highlight) — selector .before:bg-button-primary-highlight/0:before
• background-color: color-mix(in oklab, var(--button-primary-highlight) 0%, transparent) — selector .before:bg-button-primary-highlight/0:before
• background-color: color-mix(in oklab, var(--button-primary-highlight) 10%, transparent) — selector .not-disabled:hover:before:bg-button-primary-highlight/10:not(:disabled):hover:before

Components and layout

• border-radius: 0 — selector button,input,select,optgroup,textarea
• box-shadow: none — selector :-moz-ui-invalid
• box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) — selector .elevated
• box-shadow: inset 0 1px 0 var(--chip-edge), inset -1px 0 0 var(--chip-edge), inset 0 -1px 0 var(--chip-edge), 0 3px 8px oklch(.45 .12 var(--hue,260)), 0 1px 2px oklch(.4 .1 var(--hue,260)) — selector .chip-lift
• box-shadow: inset 0 1px 0 var(--chip-edge), inset -1px 0 0 var(--chip-edge), inset 0 -1px 0 var(--chip-edge), 0 3px 8px #00000026, 0 1px 2px #0000001a — selector .chip-lift:where(.dark,.dark _)
• box-shadow: inset 0 1px 0 var(--chip-edge), inset -1px 0 0 var(--chip-edge), inset 0 -1px 0 var(--chip-edge), 0 3px 8px lab(0% 0 0/.15), 0 1px 2px lab(0% 0 0/.1) — selector .chip-lift:where(.dark,.dark _)
• box-shadow: 0 0 14px #ffffff8c, 0 0 0 1px #ffffff4d, inset 0 0 0 1px var(--event-dark) — selector .chip-glow
• box-shadow: 0 0 14px lab(100% 0 0/.55), 0 0 0 1px lab(100% 0 0/.3), inset 0 0 0 1px var(--event-dark) — selector .chip-glow
• box-shadow: 0 0 14px lab(100% 0 0/.55), 0 0 0 1px lab(100% 0 0/.3), inset 0 0 0 1px color-mix(in oklch, var(--event-dark) 40%, transparent) — selector .chip-glow
• max-width: 40rem — selector .container
• max-width: 48rem — selector .container
• max-width: 64rem — selector .container
• max-width: 80rem — selector .container
• max-width: 96rem — selector .container
• padding: 0 — selector ::file-selector-button
• gap: calc(var(--spacing) _ .5) — selector .gap-0.5
• gap: var(--spacing) — selector .gap-1
• gap: calc(var(--spacing) _ 1.5) — selector .gap-1.5
• gap: calc(var(--spacing) _ 2) — selector .gap-2
• gap: calc(var(--spacing) _ 2.5) — selector .gap-2.5
• gap: calc(var(--spacing) _ 3) — selector .gap-3
• gap: calc(var(--spacing) _ 4) — selector .gap-4
• gap: calc(var(--spacing) \* 5) — selector .gap-5
• transition: grid-template-rows .4s — selector .compose-collapsible
• transition: opacity .3s .15s — selector .compose-collapsible>div
• transition: none — selector .compose-opening .compose-collapsible>div

Responsive rules

(min-width:40rem)
(min-width:48rem)
(min-width:64rem)
(min-width:80rem)
(min-width:96rem)
(hover:hover)
(prefers-reduced-motion:reduce)
not all and (min-width:1119px)
not all and (min-width:64rem)
not all and (min-width:40rem)
(min-width:1120px)