unturf.

grow food not lawn

manifesto · eight forms of capital · single-use plastics · hemp bioplastic · recipe · free software

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 inherits --primary (#43a047)

--step-text #fff

Callout Boxes

--honest-border #F44336 (honest box)

--recipe-border #4CAF50 (recipe box)

--warning-border #FF9800 (warning box)

Footnotes

--footnote-link inherits --primary (#43a047)

--footnote-highlight-border inherits --primary (#43a047)

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> &middot;
  <a href="..." aria-current="page">current page</a> &middot;
  <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> &copy; 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.

Honest box. Caveats, corrections, uncomfortable truths. Red border signals caution about claims or expectations.

Recipe box. Procedures, instructions, actionable steps. Green border signals constructive action.

Warning box. Safety notes, hazards, things that could cause harm. Orange border signals attention required.

<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.

Example diagram: eight forms of capital from foundation to emergence — example caption: from living capital at the foundation to cultural capital as emergent community property

<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">&#8617;</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

← back to the manifesto