Deep blue-black gradient with soft green and sky highlights.
Style Guide
Steven Woods
Public Site Style Guide
Reference guide for pages that want to match the current public homepage and active project dashboards. Use this page as the shared visual contract for colors, panels, buttons, spacing, and navigation patterns.
Core Palette
Translucent dark surfaces with soft borders and glow.
Rounded pill buttons using the light blue accent family.
Page Structure
Top section: Start with a
hero block containing a heroTop row, an eyebrow label on the left, a top-right ancestor link, one clear page title, and a short lead paragraph.
Main content: Group content into
panel sections. Within panels, use grid for cards or entryGrid for stacked records.
Cards: Use
card for overview tiles and entry for record-style items like publications, ancestors, or archive entries.
Navigation Pattern
- Every child page should include a visible top-right ancestor link using
heroHomeLink. - For top-level reference pages, that ancestor link should go to the public index and typically use the label
Steven Woods. - When a page belongs to a sub-area, keep the top-right ancestor link for the immediate parent and use the lower button row for any secondary navigation.
- Use the lower action row for secondary links such as
Back to archive,Open source, or other contextual actions. - Keep primary actions in the same rounded-button style used on the homepage.
Component Examples
Reference card
Use for static pages linked from the public homepage.
Record entry
Pattern title, short metadata line, then one or more buttonsImplementation Notes
<link rel="stylesheet" href="assets/public-site.css">
<main class="shell shell--narrow">
<section class="hero">
<div class="heroTop">
<span class="eyebrow">Reference Page</span>
<a class="heroHomeLink" href="index.html">Steven Woods</a>
</div>
...
</section>
<section class="panel">...</section>
</main>