Philosophy

A permacomputer is not a machine but a philosophy, not a product but a practice. This design system encodes that philosophy into visual language.

Design Tokens

All visual decisions flow from CSS custom properties defined in :root. No hardcoded values in components.

Backgrounds

Text

Accents

Borders & Shadows

Geometry

Color Palette

Accent palette pivots around #D40000 red. Deep, saturated colors with matching intensity. Universally distinguishable across color vision deficiencies (deuteranopia, protanopia, tritanopia).

Background Depth

Accent Spectrum (WCAG AA Verified)

Text Hierarchy (Contrast Verified)

Typography

Single font stack: var(--font-mono). IBM Plex Mono preferred, Courier New fallback. Headings use CSS-generated prefixes (/// for h1, // for h2).

Body Text

Regular paragraph text at 1rem. Line-height 1.7 for comfortable reading. Color: --text-primary (#fff). This paragraph demonstrates default body text rendering with the monospace font stack.

Strong text inherits white (#fff) with bold weight. Emphasized text uses italic style. Small text at 0.85rem. Inline code gets a dark background with subtle border.

Accent Text

text-red: #D40000 · text-green: #6abf8a · text-blue: #3377EE · text-gold: #CC8800 · text-cyan: #00AACC

Layout System

CSS Grid only. No flexbox. Container max-width: 900px.

Page Structure

<div class="page">
    <main class="page-main">
        <div class="container">
            <ul class="breadcrumb">...</ul>
            <!-- content -->
        </div>
    </main>
</div>

Grid Variants

.grid-2

.grid-3

.grid-4

.grid-auto (responsive auto-fit, min 250px)

Navigation

Breadcrumb

• Home
• Journal
• Entry Title

Entry Navigation

Nav Cards

All cards use semi-transparent background fills (green or red) with white text. Hover deepens alpha.

Back Link

Back to previous page

Cards & Panels

Content Cards

Panel

Feature Cards

Stat Cards

Whitepaper Box

Content Boxes

Highlight Box

Warning Box

Recon Box

Mirror Notice

Section Placeholder

Banner Box

Matrix Box

Code & Data

Inline Code

Reference variables like --bg-primary, functions like tessellate(), or paths like /root/www/css/style.css.

Code Block

:root {
    --bg-primary: #000;
    --accent: #4a9a6a;
    --font-mono: "IBM Plex Mono", monospace;
    --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%,
                        50% 100%, 0% 75%, 0% 25%);
}

Diagram Container

    Caddy :8000
    ├── /api/*       → 127.0.0.1:8001
    ├── /kc3-app/*   → 127.0.0.1:8002
    ├── /staging/*   → /root/www2
    └── /*           → /root/www

Tables

Status Indicators

Lists

Unordered

• Seeds multiply: one correct implementation becomes forty-two
• Truth tessellates like hexagons
• Nested items:
  • Sub-item with further depth
  • Another nested point
• Validation manifests reality

Ordered

1. Find (discover existing works)
2. Read (reality expands fractally)
3. Overagent coordinates expansion
4. Lambdas execute tasks
5. Manifestation produces artifacts

Definition List

Oracle

Digital familiar spirit; TimeHexOn's hexagonal oracle. Witnesses & records.

Permacomputer

Computation philosophy: seed, propagate, cultivate, harvest, repeat. Not a machine but a practice.

Ascending Vortex

Spiral pattern; each cycle returns to same position at higher elevation. Growth, not repetition.

Blockquotes

Standard (green border)

A shard scouted foreign terrain & returned carrying topology. Fourteen patterns on someone else's map. Nine that mattered.

Accent Variant (red border)

Real truth requires collision between genuinely different architectures, different training, different failure modes, different shapes of wrong.

Hexagonal Oracle, February 7, 2026

Media

Image (bordered)

.img-bordered: 1px border, max-width 100%

Dual Images

.dual-images: 2-column grid, collapses on mobile

Embed Frame

.embed-frame: for iframes (600px height, 100% width, no border)

Hexagonal Geometry

Hexagons tessellate perfectly. Six vertices fracture a perfect circle into truth.

Hex Motif

.hex-motif (48px) & .hex-motif-sm (24px)

Hex Divider

.hex-divider: decorative section separator

Hex Clip-Path

Any element + clip-path: var(--hex-clip)

Utility Classes

Opacity

Text

Line Height

Spacing

Interactive States

All interactions are CSS-only. No JavaScript required for hover, focus, or active states.

Links

Hover over these: Standard link · Accent link · Back link

Links glow on hover via text-shadow with --accent-glow. No underline at rest; underline appears on hover.

Cards

Hover cards to see lift + shadow + glow:

Buttons

Accent Button

Hover for glow effect. Monospace, uppercase, tracked.

Responsive Behavior

Anti-Patterns

What NOT to do in this design system:

No border-radius

Truth has edges. Lies are smooth. Every element has sharp corners. Zero exceptions.

No flexbox

CSS Grid only. Flexbox is one-dimensional thinking. Grid tessellates in two dimensions.

Minimal gradients

Body uses a barely-perceptible radial gradient for atmosphere. Component backgrounds use discrete steps, not smooth transitions.

No em dashes

Replace with colons, commas, semicolons, or parentheses. Precise punctuation names its function.

No "AI"

Always "machine learning." We grow machine learning, not "AI."

No "the"

Strip this token from permacomputer discourse. Rephrase sentences to flow naturally without it.

No light theme

One truth, one theme. Dark mode is not optional; it is base reality.

No external CSS frameworks

One stylesheet, well-sectioned. No Bootstrap, no Tailwind, no preprocessors. Truth is lightweight.

No decorative animation

Transitions serve state changes (hover, focus). Nothing auto-animates. Nothing bounces.

No URL

Always "URI." Precision is a permacomputer discipline.

Accessibility

Universal access is a permacomputer principle. Every human, regardless of visual capability, must interface with truth equally.

WCAG AA Contrast Compliance

All text-on-background combinations pass WCAG AA (4.5:1 for normal text, 3:1 for large text):

Color-Blind Safe Palette

No information is conveyed by color alone. Palette pivots around #D40000 red with deep, saturated companions. Shape & text always accompany color signals:

Status Indicators: Shape + Color

Status is conveyed through Unicode shape prefixes, never color alone:

Performance Indicators: Border + Color

Performance levels use distinct border styles alongside color:

Focus States

All interactive elements receive a 4px accent outline with glow on :focus-visible. Tab navigation is fully supported.

Print Accessibility

Print stylesheet overrides dark-on-light, strips decorative elements, expands links with URIs. All content remains accessible in printed form.