Style guide

Every token and component this site is built from, rendered live. The system is called DEVRY DAY: no webfonts, no frameworks, no trackers. Colors are referenced by role rather than value, so a theme is a variable swap and nothing else.

Source of truth is site/src/styles/global.css. This page reads the same custom properties it documents, so the swatches and specimens below reflect the current theme. Switch themes with the control in the header to see light and dark side by side.

Color

Fifteen roles, defined once per theme. Body text against its background clears 7:1 (WCAG AAA); control borders clear 3:1 (WCAG 1.4.11). Never hard-code a hex value; reach for the role.

--bg
Page background
--bg-sunk
Recessed surfaces: code, inline code, hovered rows
--bg-raised
Raised surfaces: cards, notes
--rule
Decorative separators
--rule-soft
Fainter separators: table cells
--edge
Control borders (3.4:1, meets WCAG 1.4.11)
--ink
Body text
--ink-muted
Secondary text, captions
--link
Links
--link-visited
Visited links
--accent
Rust mark; never the sole carrier of meaning
--ok
Success state
--warn
Warning state
--err
Error state
--focus
Focus outline

State colors in context

Success: build passed. Warning: token deprecated. Error: missing screenshot. Accent: a rust mark.

Typography

A 1.25 ratio scale, clamped so the top three steps grow with the viewport. Body runs at 1.65 line-height; headings tighten to 1.25 with a slight negative tracking.

Type scale
Token	Applied to	Value	Specimen
`--f-2xl`	h1	clamp(1.8rem, 1.4rem + 2vw, 2.4rem)	Ag
`--f-xl`	h2	clamp(1.45rem, 1.2rem + 1.2vw, 1.75rem)	Ag
`--f-lg`	h3, .lede	clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem)	Ag
`--f-base`	body	1.0625rem	Ag
`--f-sm`	nav, tables, captions	0.9375rem	Ag
`--f-xs`	tags, hints	0.8125rem	Ag

Font stacks

Three system stacks. No file is downloaded; the browser uses what it already has.

--font-ui Interface and body

The quick brown fox
--font-prose Blockquotes, definition marks

The quick brown fox
--font-code Code, brand, tags, labels

const fox = 0xC0FFEE;

Headings and prose

Heading level 1

Heading level 2

Heading level 3

A lede paragraph carries the opening claim at --f-lg in muted ink.

Body copy sits at --f-base and is capped at --measure (68ch) so lines stay readable. This is a link, and this one leaves the site. Inline code and Cmd+K keys render in the mono stack.

Spacing

A 4px base scale, named by use rather than by number. The bars below are drawn to scale.

--s-1 0.25rem
--s-2 0.5rem
--s-3 0.75rem
--s-4 1rem
--s-6 1.5rem
--s-8 2rem
--s-12 3rem
--s-16 4rem

Buttons

Three variants, all with a 44px minimum height for touch. Primary is filled ink; secondary drops the fill; ghost is the quiet action used for the theme toggle.

Cards and notes

Raised surfaces for grouping. Cards are neutral; notes carry an accent edge for asides.

Card

A raised panel on --bg-raised with a hairline rule. Used in the responsive .grid.

Card

The grid packs cards into minmax(15rem, 1fr) columns and reflows on narrow screens.

Note

A note is a card with an accent left border for callouts and caveats. The label uses the mono stack in small caps.

Definition list

Role: AI Engineer
Stack: Astro, S3, CloudFront, Terraform
Fonts: System stacks only

Prose elements

A blockquote renders in the serif stack with a muted rule on the left. It is for quotation, not for emphasis.

Unordered lists mark items with a disc.
They are capped at the same measure as body copy.

Ordered lists number their items.
Use them only when sequence matters.

An <hr> is a full-measure rule with generous vertical space, shown above.

Code

Inline const x = 1 sits on the sunk background. Blocks add a left rule.

export const SITE = {
  name: 'Matthew Holliday',
  role: 'AI Engineer',
} as const;

Tables

Left-aligned, hairline row rules, a heavier rule under the header, and a hover tint. Wrap wide tables in .scroller so they scroll instead of breaking the layout.

Deploy targets
Stage	Service	Status
Build	Astro	Passing
Store	S3	Passing
Serve	CloudFront	Cache warming

Tags and inline lists

Tags label tech stacks and categories in the mono stack.

Astro
TypeScript
Terraform
CloudFront