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

#### Social Capital

Influence, connections, relationships, trust.

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

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

1. Eliminate petroleum plastic
2. Grow hemp
3. Process cooperatively
4. 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

### 14. uncloseai. Widget

Every content page loads the uncloseai. chat widget via a single script tag. The widget provides free machine learning chat, page translation, & text to speech.

#### Embed Pattern

    <script src="https://uncloseai.com/uncloseai.js" type="module"></script>

Place before `</body>`. The script injects a floating button (bottom right) that opens a chat modal. Translation & TTS features appear as controls inside the modal.

#### Behavior

Feature | Trigger | Notes
--- | --- | ---
Chat | Click floating button | Page context passed automatically
Translate | Globe icon in modal controls | Renders translated page inline via iframe
Text to Speech | Speaker icon in modal controls | Multiple voices, adjustable speed

#### CSS Isolation

The widget loads its own stylesheet (`uncloseai-modal-pico.css` on PicoCSS sites, `uncloseai-modal-builtin.css` elsewhere). All selectors scope to `dialog#uncloseai-embedded-modal`, `dialog#translate-modal`, or `dialog#tts-modal` to avoid leaking into host page styles.

#### Software Page Card

On the software page, `.project-uncloseai` spans full grid width at desktop breakpoints.

← back to the manifesto