Style Guide
Published on February 21st, 2026
This page is a living style guide — a single place to see every visual element used across the site. It's meant to keep things consistent and serve as a reference when building new pages. If you add a new pattern, drop it here too.
Colors
The core palette is defined as CSS custom properties on the body.
#29435c
#568091
#5bb598
#4a97b8
#55c892
#332e2e
#fff7f2
#2f5362
#16688b
Typography
Two font families are used: Source Serif 4 (--p-font) for body copy and Poppins (--a-font) for
headings and accents.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Body text at 1.7rem / 1.8rem on tablet+. Source Serif 4, weight 400. This is what most of the content on the site looks like.
Links
Internal links use the default --link-color and transition to --link-hover
on hover.
External Links
Outbound links get the gradient accent bar, bold weight, and ↗ arrow treatment automatically.
Astro · MDN Web Docs · Google Fonts
Buttons
The .line-button is the primary interactive element — a double-border
pill that highlights on hover.
Inline Code
Inline code uses a reversed color scheme: background: --text-color
and color: --background-color with a 4px border-radius.
Example: Use <script is:inline> to bypass processing.
Blockquotes
Blockquotes are large, italic, with a left accent bar using --contrast-background-color.
Design is not just what it looks like and feels like. Design is how it works.
Tips
Tips are sidebar callouts that attach to the left or right gutter on
desktop. They use --highlight-accent as a translucent backdrop.
This is a left-aligned tip. On wide screens it floats in the left gutter alongside the content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore. This paragraph sits next to the tip on desktop and gives it context.
This is a right-aligned tip. On wide screens it floats in the right gutter.
And this paragraph sits beside the right-side tip. On mobile, tips stack normally in flow.
Lists
Unordered List
- First list item with some content
- Second list item — a bit longer to see how wrapping behaves
- Third item
Ordered List
- Step one: set up the project
- Step two: add styles
- Step three: ship it
Figures
Figures use a thin border with --text-color and centered content.
On desktop, they break out to span the full article grid.
Solo Line
The .solo-line class adds a decorative accent bar beneath an element
that fills on hover. Used on the header nav and footer.
Hover me to see the accent bar fill
Double-Border Frame
The card frame used in .recentItems — an outer stroke, a color-gap
border, and an inner stroke. Hover changes the gap color.
Card Title
A short description that sits inside the double-border frame.
Typography Hero
Every page starts with a hero block: page title in Poppins 700
at 5rem (7.5rem on desktop), an optional subtitle, and a green accent bar bordered
by --text-color.
Page Title
An optional subtitle line
Spacing & Layout
The site uses a 3-column CSS grid (.site) with areas for
header, main, sidebar, and footer. Content sits in .content
with 3rem 2.5rem padding, and articles max at 55rem
(or 120rem with the 3-col grid on desktop).
Animation
Transitions default to 0.3s ease. Accent-specific animations
include a gentle pulse for instructional elements and the sad bounce on
emoji. Custom cursor on hover.
↕ Pulse animation
😢CSS Custom Properties Reference
All variables defined on :global(body):
--p-font Source Serif 4 Body text --a-font Poppins Headings, accents --primary-color #29435c Deep brand tone --secondary-color #568091 Muted complement --accent-color #5bb598 Hero bars, accents --highlight-secondary #4a97b8 Blue highlights --highlight-accent #55c892 Green highlights --text-color #332e2e Default text --background-color #fff7f2 Page background --link-color #2f5362 Link default --link-hover #16688b Link hover --contrast-background-color var(--primary-color) Blockquote bar --tablet 768px Breakpoint