unturf.
grow food not lawn
Styleguide
+ +
+A living reference for every component, element, & pattern across unturf. pages. This page uses unturf.css layered on Pico CSS v2.0.6 (classless). What you see here matches what appears across all pages.
+
1. Color Palette
+ +Every color lives in a CSS custom property inside :root. Change a variable, change every page.
Brand
+--primary #43a047
+Step Label
+--step-bg #263238
+--step-text #CDDC39
+Callout Boxes
+--honest-border #F44336 (honest box)
+--recipe-border #4CAF50 (recipe box)
+--warning-border #FF9800 (warning box)
+Footnotes
+--footnote-link #CDDC39
+--footnote-highlight-border #CDDC39
+Eight Forms of Capital
+--capital-living #4CAF50
+--capital-material #795548
+--capital-financial #607D8B
+--capital-intellectual #2196F3
+--capital-experiential #009688
+--capital-social #FF9800
+--capital-cultural #9C27B0
+--capital-spiritual #E91E63
++ + + + + +
2. Typography
+ +Pico CSS handles body text via system fonts. unturf. uses ChunkFive ('chunkfiveregular') for branding only.
Brand Font
+unturf. ← class="unturf-brand"
Heading Hierarchy
+<h1> stays reserved for the site logo. Content headings start at <h2>.
h2: Page Title
+h3: Section Heading
+h4: Subsection Heading
+ +Text Styles
+A regular paragraph of body text. Pico CSS provides the base font stack, line height, & color.
+Bold text via <b> tag.
Italic text via <i> tag.
Inline code via <code> tag.
Small text via <small> tag, used for navigation & footer.
Blockquote
+go-rusty-rails-jvm.js+ + + + + +
3. Layout
+ +Two layout widths exist. Apply one class to <main>. Pico CSS provides the centering & padding.
| Class | Max Width | Used On |
|---|---|---|
.content-narrow | 460px | manifesto |
.content-wide | 960px | all other content pages |
+ + + + + +
4. Navigation & Footer
+ +Every content page shares a header & footer pattern. Current page link gets aria-current="page" for bold, reduced opacity styling.
Header Pattern
+<center><a href="/"><h1 class="site-title">unturf.</h1></a></center>
+<center><h3>grow food not lawn</h3></center>
+<center class="nav-links"><small>
+ <a href="...">manifesto</a> ·
+ <a href="..." aria-current="page">current page</a> ·
+ <a href="...">other page</a>
+</small></center>Footer Pattern
+<footer>
+ <center><a href="/software/" class="unturf-brand">unturf. software</a></center>
+ <center>Russell Ballestrini | <span class="unturf-brand">unturf.</span> © 2025</center>
+</footer>+ + + + + +
5. Step Label
+ +Progressive disclosure pattern. A numbered label introduces each section on multi-step pages.
+ +STEP 1 +Example Section Title
+Content follows a step label & heading pair.
+ +<span class="step-label">STEP 1</span>
+<h3>Section Title</h3>+ + + + + +
6. Callout Boxes
+ +Three box types share the same structure (left border, padding, subtle background). Each carries a distinct color & purpose.
+ +<div class="honest-box">
+ <b>Label.</b> Content here.
+</div>
+
+<div class="recipe-box">
+ <b>Label.</b> Content here.
+</div>
+
+<div class="warning-box">
+ <b>Label.</b> Content here.
+</div>+ + + + + +
7. Capital Cards
+ +Eight color coded cards for the eight forms of capital. Each variant sets a left border color & heading color via custom property.
+ +Living Capital
+Soil, water, plants, animals, ecosystems.
+Material Capital
+Stone, metal, timber, tools, servers, networks.
+Financial Capital
+Money, currencies, securities.
+Intellectual Capital
+Ideas, concepts, knowledge, open source code.
+Experiential Capital
+Embodied know-how built from lived experience.
+Cultural Capital
+Shared story, myth, song, art, ceremony, ethics.
+Spiritual Capital
+Karma, faith, presence, connection to a greater whole.
+<div class="capital-card capital-card--living">
+ <h4>Living Capital</h4>
+ <p>Description here.</p>
+</div>Variants: --living, --material, --financial, --intellectual, --experiential, --social, --cultural, --spiritual.
+ + + + + +
8. Diagram Figure
+ +All diagrams wrap in <figure class="diagram">. Images scale to container width. Captions render small & gray.
+ <figure class="diagram">
+ <img src="path/to/diagram.svg" alt="Description">
+ <figcaption>caption text</figcaption>
+</figure>+ + + + + +
9. Footnotes
+ +Inline superscript links point to numbered footnotes at the bottom of a page. Clicking a footnote number scrolls down. A back arrow scrolls up. Targeted footnotes highlight with a lime left border.[1]
+ +Inline Pattern
+<sup id="ref1"><a href="#fn1">[1]</a></sup>Footnote Section
+-
+
- Example footnote demonstrating the pattern. Source title, Publication Name, date. ↩ +
<div class="footnotes">
+ <ol>
+ <li id="fn1">Source text. <a href="#ref1">↩</a></li>
+ </ol>
+</div>+ + + + + +
10. Tables
+ +Pico CSS styles tables from semantic markup alone. No classes needed.
+ +| Capital | Permacomputer Expression | Quadrivium Value |
|---|---|---|
| Living | Durable hardware, repair not replace | Harmony |
| Intellectual | Open source, public domain, seeds to sprout | Truth |
| Social | By people, for people, voluntary | Freedom |
| Spiritual | Love as fuel, wu wei, homeostasis | Love |
+ + + + + +
11. Lists
+ +Unordered
+-
+
- Glass jars for storage +
- Steel water bottles +
- Cotton bags +
- Beeswax wraps +
Ordered
+-
+
- Eliminate petroleum plastic +
- Grow hemp +
- Process cooperatively +
- Compost at end of life +
+ + + + + +
12. Horizontal Rule & Links
+ +A horizontal rule (<hr>) separates major sections:
+ +
Links styled by Pico CSS: home, manifesto, external link.
+ ++ + + + + +
13. Software Page Components
+ +The software page uses a distinct layout. A class="software-page" on <html> scopes all its rules. These classes apply only on that page:
| Class | Purpose |
|---|---|
.software-page | Root scope on <html>, triggers ChunkFive headings & layout rules |
.projects-grid | Responsive grid: 1 column mobile, 2 columns at 768px+ |
.logo-container | Subtle background box for project logos |
.unsandbox-logo | ArialPixel font, gold color |
.neopig-logo | Gradient text effect (pink/orange) |
.project-uncloseai | Spans full width at desktop breakpoint |
+ + + +