ClassesLumos 0.0.1

Tokens

Every custom property the framework declares: colors, spacing, type, radii, layout. Change a token and everything built on it follows.

Tokens are the framework's Style panel. Every size, color and space in Lumos resolves to one of these custom properties, so a change here moves the whole site at once rather than one element at a time.

Anything shown as a range is fluid: it interpolates between the two values as the viewport grows from 320px to 1440px, so there is no breakpoint where the type or spacing jumps. This page is generated from base.css.

Swatches

Name	Value	Notes
`--light-100`	`#ffffff`	The lightest swatch. The page surface in light themes.
`--light-200`	`#ebebeb`	A step down from white, used for the page ground behind raised surfaces.
`--light-300`	`#d9d9d9`
`--dark-700`	`#453e42`
`--dark-800`	`#2f2b2d`	The raised surface in dark themes.
`--dark-900`	`#1f1d1e`	The page surface in dark themes.
`--brand-500`	`#c6fb50`	The brand color. Used as an accent and as the primary button fill.
`--brand-text`	`--dark-900`	Text color that sits on the brand color, chosen for contrast.

Typography primitives

Name	Value	Notes
`--primary-family`	`var(--font-inter, system-ui, sans-serif)`	The typeface everything uses. Swap this and the whole site follows.
`--primary-regular`	`400`
`--primary-medium`	`500`
`--primary-bold`	`700`
`--primary-trim-top`	`0.4em`	How much of the font's built-in space above the cap height to remove, so headings sit flush with what is beside them.
`--primary-trim-bottom`	`0.38em`	The same below the baseline.

Letter spacing

Name	Value	Notes
`--letter-spacing-tight`	`-0.03em`
`--letter-spacing-normal`	`0em`

Line height

Name	Value	Notes
`--line-height-small`	`1`
`--line-height-medium`	`1.1`
`--line-height-large`	`1.3`
`--line-height-huge`	`1.5`

Borders & focus

Name	Value	Notes
`--border-width`	`0.0625rem`
`--focus-width`	`0.125rem`	Thickness of the focus ring. Never set this to zero.
`--focus-offset`	`0.1827rem`	How far the focus ring sits outside the element.
`--focus-offset-inner`	`calc(var(--focus-width) * -1)`	A negative offset, for a focus ring that must sit inside a clipped element.

Hover motion

Name	Value	Notes
`--hover-duration`	`200ms`
`--hover-ease`	`ease`

Opening motion

Name	Value	Notes
`--open-duration`	`--hover-duration`
`--open-ease`	`--hover-ease`

Radius

Name	Value	Notes
`--radius-small`	`0.5rem`
`--radius-main`	`1rem`
`--radius-round`	`100vw`

Fluid scale range

Name	Value	Notes
`--viewport-min`	`320`	The viewport width, in pixels, where every fluid value sits at its minimum.
`--viewport-max`	`1440`	The viewport width where every fluid value reaches its maximum.

Max width

Name	Value	Notes
`--max-width-small`	`70rem`	A comfortable reading measure for long text.
`--max-width-main`	`calc(var(--viewport-max) / 16 * 1rem)`	The widest the main container gets, matching `--viewport-max`.
`--max-width-full`	`100%`

Nav

Name	Value	Notes
`--nav-height`	`5rem`	The height the fixed nav reserves.

Heading & text styles

Name	Value	Notes
`--display`	`64px → 112px (fluid)`
`--display-line-height`	`--line-height-small`
`--display-letter-spacing`	`--letter-spacing-tight`
`--display-text-transform`	`none`
`--display-margin-top`	`--space-7`
`--display-margin-bottom`	`--space-6`
`--display-font-family`	`--primary-family`
`--display-font-weight`	`--primary-medium`
`--display-trim-top`	`--primary-trim-top`
`--display-trim-bottom`	`--primary-trim-bottom`
`--display-text-wrap`	`balance`
`--h1`	`48px → 80px (fluid)`
`--h1-line-height`	`--line-height-small`
`--h1-letter-spacing`	`--letter-spacing-tight`
`--h1-text-transform`	`none`
`--h1-margin-top`	`--space-7`
`--h1-margin-bottom`	`--space-6`
`--h1-font-family`	`--primary-family`
`--h1-font-weight`	`--primary-medium`
`--h1-trim-top`	`--primary-trim-top`
`--h1-trim-bottom`	`--primary-trim-bottom`
`--h1-text-wrap`	`balance`
`--h2`	`40px → 64px (fluid)`
`--h2-line-height`	`--line-height-small`
`--h2-letter-spacing`	`--letter-spacing-tight`
`--h2-text-transform`	`none`
`--h2-margin-top`	`--space-7`
`--h2-margin-bottom`	`--space-5`
`--h2-font-family`	`--primary-family`
`--h2-font-weight`	`--primary-medium`
`--h2-trim-top`	`--primary-trim-top`
`--h2-trim-bottom`	`--primary-trim-bottom`
`--h2-text-wrap`	`balance`
`--h3`	`36px → 48px (fluid)`
`--h3-line-height`	`--line-height-medium`
`--h3-letter-spacing`	`--letter-spacing-tight`
`--h3-text-transform`	`none`
`--h3-margin-top`	`--space-6`
`--h3-margin-bottom`	`--space-5`
`--h3-font-family`	`--primary-family`
`--h3-font-weight`	`--primary-medium`
`--h3-trim-top`	`--primary-trim-top`
`--h3-trim-bottom`	`--primary-trim-bottom`
`--h3-text-wrap`	`balance`
`--h4`	`28px → 32px (fluid)`
`--h4-line-height`	`--line-height-medium`
`--h4-letter-spacing`	`--letter-spacing-tight`
`--h4-text-transform`	`none`
`--h4-margin-top`	`--space-6`
`--h4-margin-bottom`	`--space-4`
`--h4-font-family`	`--primary-family`
`--h4-font-weight`	`--primary-medium`
`--h4-trim-top`	`--primary-trim-top`
`--h4-trim-bottom`	`--primary-trim-bottom`
`--h4-text-wrap`	`balance`
`--h5`	`22px → 24px (fluid)`
`--h5-line-height`	`--line-height-medium`
`--h5-letter-spacing`	`--letter-spacing-tight`
`--h5-text-transform`	`none`
`--h5-margin-top`	`--space-5`
`--h5-margin-bottom`	`--space-4`
`--h5-font-family`	`--primary-family`
`--h5-font-weight`	`--primary-medium`
`--h5-trim-top`	`--primary-trim-top`
`--h5-trim-bottom`	`--primary-trim-bottom`
`--h5-text-wrap`	`balance`
`--h6`	`16px → 18px (fluid)`
`--h6-line-height`	`--line-height-medium`
`--h6-letter-spacing`	`--letter-spacing-tight`
`--h6-text-transform`	`none`
`--h6-margin-top`	`--space-5`
`--h6-margin-bottom`	`--space-3`
`--h6-font-family`	`--primary-family`
`--h6-font-weight`	`--primary-medium`
`--h6-trim-top`	`--primary-trim-top`
`--h6-trim-bottom`	`--primary-trim-bottom`
`--h6-text-wrap`	`balance`
`--text-large`	`18px → 20px (fluid)`
`--text-large-line-height`	`--line-height-large`
`--text-large-letter-spacing`	`--letter-spacing-normal`
`--text-large-text-transform`	`none`
`--text-large-margin-top`	`--space-4`
`--text-large-margin-bottom`	`--space-4`
`--text-large-font-family`	`--primary-family`
`--text-large-font-weight`	`--primary-regular`
`--text-large-trim-top`	`--primary-trim-top`
`--text-large-trim-bottom`	`--primary-trim-bottom`
`--text-large-text-wrap`	`pretty`
`--text-main`	`16px → 18px (fluid)`
`--text-main-line-height`	`--line-height-huge`
`--text-main-letter-spacing`	`--letter-spacing-normal`
`--text-main-text-transform`	`none`
`--text-main-margin-top`	`--space-4`
`--text-main-margin-bottom`	`--space-4`
`--text-main-font-family`	`--primary-family`
`--text-main-font-weight`	`--primary-regular`
`--text-main-trim-top`	`--primary-trim-top`
`--text-main-trim-bottom`	`--primary-trim-bottom`
`--text-main-text-wrap`	`pretty`
`--text-small`	`14px → 16px (fluid)`
`--text-small-line-height`	`--line-height-huge`
`--text-small-letter-spacing`	`--letter-spacing-normal`
`--text-small-text-transform`	`none`
`--text-small-margin-top`	`--space-4`
`--text-small-margin-bottom`	`--space-4`
`--text-small-font-family`	`--primary-family`
`--text-small-font-weight`	`--primary-regular`
`--text-small-trim-top`	`--primary-trim-top`
`--text-small-trim-bottom`	`--primary-trim-bottom`
`--text-small-text-wrap`	`pretty`

Site layout

Name	Value	Notes
`--site-margin`	`16px → 48px (fluid)`	The space between the page edge and its content.
`--site-gutter`	`16px → 32px (fluid)`	The space between grid and flex children.
`--site-width`	`calc(100% - var(--site-margin) * 2)`	The content width once the site margins are taken off.

Spacing

Name	Value	Notes
`--space-1`	`6px → 8px (fluid)`
`--space-2`	`10px → 12px (fluid)`
`--space-3`	`14px → 16px (fluid)`
`--space-4`	`20px → 24px (fluid)`
`--space-5`	`28px → 32px (fluid)`
`--space-6`	`32px → 40px (fluid)`
`--space-7`	`36px → 48px (fluid)`
`--space-8`	`40px → 64px (fluid)`
`--section-space-small`	`48px → 80px (fluid)`
`--section-space-medium`	`64px → 112px (fluid)`
`--section-space-large`	`88px → 160px (fluid)`
`--section-space-nav-overlap`	`160px → 224px (fluid)`	Top padding for the first section under an overlapping nav, so the bar does not cover its content.