design system · v1

nebula

nebula is how bryanchasko.com looks: a lavender and orange palette on calm surfaces, one row of navigation, a terminal greeting, and cards that lift on hover. everything below is the live site, not a drawing of it. the specimens use the real header, button, card, pill, form and footer classes in a light and a dark frame, so a change to any component shows here first. the full token tables sit at the bottom, collapsed

specimens

live components, rendered twice: light on one side, dark on the other. the constellation background sits behind this whole page; each frame also shows its static fallback layer

light

header

one row at every width. wide shows the menu inline, under 600px the menu folds into a disclosure button

terminal greeting

^.^ $ Hello, Friend █

hero article card

AWS Builder Center

Amazon Leo and software-defined private satellite networking

the front page card that links the latest article, same classes as the live hero

My Latest Article →

buttons

primary secondary ghost hero cta hero cta secondary

cta-button primary cta-button secondary cta-button ghost

dashboard card

design system

tokens and components

Open

sign in

members area

Account

pills and chips

Reserved Backup Walk-in Open

form controls

type scale

heading one

heading two

heading three

heading four

body text sits on the base size with the base line height, set in the sans family. a link and inline code follow the same roles.

small and muted text for captions and meta lines

footer

constellation background

the static fallback layer, same class the live background falls back to

dark

header

one row at every width. wide shows the menu inline, under 600px the menu folds into a disclosure button

terminal greeting

^.^ $ Hello, Friend █

hero article card

AWS Builder Center

Amazon Leo and software-defined private satellite networking

the front page card that links the latest article, same classes as the live hero

My Latest Article →

buttons

primary secondary ghost hero cta hero cta secondary

cta-button primary cta-button secondary cta-button ghost

dashboard card

design system

tokens and components

Open

sign in

members area

Account

pills and chips

Reserved Backup Walk-in Open

form controls

type scale

heading one

heading two

heading three

heading four

body text sits on the base size with the base line height, set in the sans family. a link and inline code follow the same roles.

small and muted text for captions and meta lines

footer

constellation background

the static fallback layer, same class the live background falls back to

color roles

each role with its light and dark value and the contrast ratio against the page background of the same mode. aa needs 4.5:1 for text and 3:1 for large type, focus rings and interface edges

--bc-bg light #ffffff
1.00:1 on bg dark #1c2230
1.00:1 on bg
--bc-surface light #f9fafb
1.05:1 on bg dark #2d3748
1.33:1 on bg
--bc-surface-raised light #f3f4f6
1.10:1 on bg dark #374151
1.54:1 on bg
--bc-text light #1f2937
14.68:1 on bg dark #f3f4f6
14.45:1 on bg
--bc-text-muted light #6b7280
4.83:1 on bg dark #d1d5db
10.79:1 on bg
--bc-border light #e5e7eb
1.24:1 on bg dark #374151
1.54:1 on bg
--bc-link light #5e41a2
7.63:1 on bg dark #a78bfa
5.84:1 on bg
--bc-link-hover light #8169c5
4.41:1 on bg dark #ffffff
15.90:1 on bg
--bc-focus-ring light #5e41a2
7.63:1 on bg dark #8169c5
3.60:1 on bg

text pairs that carry meaning. aa needs 4.5:1 for text and 3:1 for focus rings and large type
pair	light	dark
text on bg	14.68:1 pass	14.45:1 pass
text on surface	14.05:1 pass	10.89:1 pass
muted text on bg	4.83:1 pass	10.79:1 pass
muted text on surface	4.63:1 pass	8.14:1 pass
link on bg	7.63:1 pass	5.84:1 pass
link on surface	7.30:1 pass	4.41:1 fail
focus ring on bg	7.63:1 pass	3.60:1 pass

surface layers

some pages carry their own layer on top of the --bc-* roles. each layer only remaps, never invents a value

--re26-* · reinvent26 schedule

--re26-card-bg
--re26-card-border
--re26-card-radius
--re26-gap

workshop
chalk talk
walk-in

Reinvent26 schedule

--rpg-* · seattle dungeon crawl

--rpg-bg
from --bc-color-gray-950
--rpg-surface
from --bc-color-navy
--rpg-surface-raised
from --bc-color-gray-900
--rpg-text
from --bc-color-gray-100
--rpg-text-muted
from --bc-color-gray-300
--rpg-border
from --bc-color-gray-700
--rpg-accent
from --bc-accent
--rpg-accent-contrast
from --bc-accent-contrast
--rpg-link
from --bc-color-lavender-light
--rpg-link-hover
from --bc-color-white

--bss-* · sign studio

the studio keeps its own layer inside its app. see it in use at the sign studio

token tables

the full generated set. open a group to see every token rendered as itself

color roles (9)

color roles

semantic roles with light and dark values side by side. the large chip is live: it resolves var(name) in the theme currently active

--bc-bg #ffffff light #ffffff dark #1c2230 page background
--bc-surface #f9fafb light #f9fafb dark #2d3748 secondary surface, entries and cards
--bc-surface-raised #f3f4f6 light #f3f4f6 dark #374151 raised surface, code and card fills
--bc-text #1f2937 light #1f2937 dark #f3f4f6 body text
--bc-text-muted #6b7280 light #6b7280 dark #d1d5db secondary text
--bc-border #e5e7eb light #e5e7eb dark #374151 default border
--bc-link #5e41a2 light #5e41a2 dark #a78bfa link text
--bc-link-hover #8169c5 light #8169c5 dark #ffffff link text on hover
--bc-focus-ring #5e41a2 light #5e41a2 dark #8169c5 keyboard focus ring color

primitives (28)

primitives

brand and neutral ramp values the roles are built from

--bc-color-purple #5e41a2 brand purple
--bc-color-lavender #8169c5 brand lavender
--bc-color-lavender-light #a78bfa light lavender, dark-mode link
--bc-color-orange #ff9900 brand orange
--bc-color-orange-dark #e68a00 deep orange, warning and accent hover
--bc-color-navy #1c2230 brand dark navy
--bc-color-white #ffffff pure white
--bc-color-gray-50 #f9fafb neutral ramp 50
--bc-color-gray-100 #f3f4f6 neutral ramp 100
--bc-color-gray-200 #e5e7eb neutral ramp 200
--bc-color-gray-300 #d1d5db neutral ramp 300
--bc-color-gray-400 #9ca3af neutral ramp 400
--bc-color-gray-500 #6b7280 neutral ramp 500
--bc-color-gray-600 #4b5563 neutral ramp 600
--bc-color-gray-700 #374151 neutral ramp 700
--bc-color-gray-800 #2d3748 neutral ramp 800
--bc-color-gray-900 #1f2937 neutral ramp 900
--bc-color-gray-950 #111827 neutral ramp 950
--bc-color-ink-soft #444 soft near-black text
--bc-color-ink #333 near-black text
--bc-color-cyan #06b6d4 interactive cyan
--bc-color-green #10b981 success green
--bc-color-red #ef4444 danger red
--bc-accent #ff9900 accent for emphasis and calls to action
--bc-accent-contrast #1c2230 text or icon color on an accent fill
--bc-success #10b981 success state
--bc-warning #e68a00 warning state
--bc-danger #ef4444 danger state

type scale (14)

type scale

font families, sizes and line heights

--bc-font-sans -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" system sans stack for reading and interface text
--bc-font-serif Georgia, "Times New Roman", Times, serif system serif stack for editorial text
--bc-font-mono ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" system monospace stack for code
--bc-font-size-xs 0.75rem type scale 12px
--bc-font-size-sm 0.875rem type scale 14px
--bc-font-size-base 1rem type scale 16px, body
--bc-font-size-lg 1.125rem type scale 18px
--bc-font-size-xl 1.25rem type scale 20px
--bc-font-size-2xl 1.5rem type scale 24px
--bc-font-size-3xl 1.875rem type scale 30px
--bc-font-size-4xl 2.25rem type scale 36px
--bc-line-height-tight 1.25 line height for headings
--bc-line-height-base 1.6 line height for body
--bc-line-height-relaxed 1.75 line height for long reading

space scale (10)

space scale

bar width equals the token

--bc-space-1 0.25rem space 4px
--bc-space-2 0.5rem space 8px
--bc-space-3 0.75rem space 12px
--bc-space-4 1rem space 16px
--bc-space-5 1.25rem space 20px
--bc-space-6 1.5rem space 24px
--bc-space-8 2rem space 32px
--bc-space-10 2.5rem space 40px
--bc-space-12 3rem space 48px
--bc-space-16 4rem space 64px

radii (2)

radii

corner curves

--bc-radius-sm 4px small radius, inputs and chips
--bc-radius-md 8px medium radius, cards and buttons

border widths (2)

border widths

stroke weights

--bc-border-width-thin 1px hairline border
--bc-border-width-thick 2px emphasis border and focus ring

shadow (1)

shadow

elevation

--bc-shadow 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) the one elevation shadow

motion (4)

motion

durations and easing. hover a row to run the timing; reduced motion collapses durations to zero

--bc-duration-fast 150ms reduced motion: 0ms fast transition; 0ms under reduced motion
--bc-duration-base 200ms reduced motion: 0ms base transition; 0ms under reduced motion
--bc-duration-slow 300ms reduced motion: 0ms slow transition; 0ms under reduced motion
--bc-ease-standard cubic-bezier(0.4, 0, 0.2, 1) standard easing curve

layout (3)

layout

control height, focus offset and reading measure

--bc-control-height 2.75rem minimum height and width of a touch target, 44px
--bc-focus-offset 2px gap between a focused control and its focus ring
--bc-measure 68ch prose measure, the longest comfortable reading line

source

every token above renders from the generator output assets/design-system/dist/tokens.json. edit the generator source, never this page