terraphim-essentialist-design

name

terraphim-essentialist-design

description

Design system for Terraphim.ai enforcing radical essentialism. Combines neumorphic depth, purposeful motion, and expanding grid layouts. Use when creating UI components, pages, or applications. Triggers: (1) Building web interfaces, (2) Creating design systems, (3) Implementing neumorphic UI, (4) Adding purposeful animations, (5) Reviewing designs for brand alignment. Provides design tokens, component patterns, layout utilities, and quality checklists. Modern CSS with oklch colors, CSS custom properties, container queries, and View Transitions API.

Terraphim Essentialist Design System

"The pursuit of less is not about minimalism. It is about the disciplined pursuit of only what matters."

The Three Laws

1. Everything decorative is debt - Ornament without function degrades clarity
2. Motion reveals hierarchy - Animation exists only to communicate relationships
3. Depth encodes interaction - Shadows are not style; they are affordance

---

Quick Start

1. Load Tokens

<link rel="stylesheet" href="tokens.css">

Or copy from tokens.md.

2. Choose Components

• Neumorphic depth: See neumorphic.md
• Animations: See motion.md
• Layouts: See layouts.md
• Components: See components.md

---

Philosophy

The Vital Few Principles

Principle	Application
Elimination First	Every new element requires removing two
Earned Presence	Ask: "What breaks if this is removed?"
Intentional Emptiness	Negative space guides attention
Single Responsibility	One element, one purpose

The 90% Rule

If an element doesn't score YES on 3+ criteria, eliminate it:

• Functional necessity: Does removing this break usability?
• Hierarchical clarity: Does this clarify information priority?
• Cognitive load: Does this reduce mental effort?
• Brand alignment: Does this reinforce the inverted triangle identity?

---

Brand Foundation

The Terraphim Mark

The inverted triangle with embedded "T" encodes:

• Inverted stability: Question conventional wisdom
• Convergence point: Focus narrowing to the essential
• Horizontal texture: Disciplined layers, data strata

Rules: Never rotate. Never add gradients. Never add shadows to the mark.

Monochromatic Palette

:root {
  /* Ink - Primary text */
  --ink-900: oklch(0% 0 0);
  --ink-700: oklch(20% 0 0);
  --ink-500: oklch(40% 0 0);

  /* Silver - Surfaces */
  --silver-400: oklch(65% 0 0);
  --silver-200: oklch(85% 0 0);
  --silver-100: oklch(92% 0 0);
  --silver-50: oklch(96% 0 0);
  --white: oklch(100% 0 0);

  /* Signals - State only */
  --signal-error: oklch(45% 0.2 25);
  --signal-success: oklch(40% 0.15 145);
  --signal-focus: oklch(45% 0.2 260);
}

Ratios: 70% surfaces, 25% text, 5% signals.

Full token reference: tokens.md

---

Core Patterns

Neumorphic Depth (Summary)

/* Raised: interactive elements */
.raised {
  --depth: 3;
  box-shadow:
    var(--shadow-source)
    calc(0.33rem * var(--depth))
    calc(0.33rem * var(--depth))
    0.6rem;
}

/* Pressed: active/input elements */
.pressed {
  box-shadow:
    inset var(--shadow-source)
    calc(0.25rem * var(--depth))
    calc(0.25rem * var(--depth))
    0.6rem;
}

Full patterns: neumorphic.md

Motion Timing (Summary)

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* Entrances */
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);   /* Exits */
  --duration-quick: 150ms;   /* Micro-interactions */
  --duration-standard: 250ms; /* State changes */
}

Full choreography: motion.md

Expanding Gallery (Summary)

.gallery-grid {
  --grid-cols: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  display: grid;
  grid-template-columns: var(--grid-cols);
  transition: grid-template-columns 400ms var(--ease-out-expo);
}

.gallery-grid:has(.item:nth-child(1):hover) {
  --grid-cols: 6fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

Full layouts: layouts.md

---

Anti-Patterns

The "AI Slop" Checklist

NEVER combine all of these:

• Purple/blue gradient backgrounds
• Inter or system fonts only
• Centered hero with subheading
• 3-column feature cards
• Rounded corners on everything
• Drop shadows on all cards
• #6366F1 as primary color

Essentialism Violations

Anti-Pattern	Correction
Decorative gradients	Flat color or neumorphic depth
Multiple button styles	One primary, one ghost, one destructive
Hover effects everywhere	Hover only on interactive elements
Border radius variance	Use 8px or 12px only
>3 font weights	Use 400, 500, 600 only

Motion Violations

• Duration > 600ms without justification
• Animation without user trigger
• Animation that loops
• Parallax or scroll-jacking
• Loading spinners < 200ms (use skeleton)

Neumorphic Violations

• Neumorphic text (illegible)
• Neumorphic on dark backgrounds
• Mixing neumorphic with drop shadows
• Elements < 24px (too small)
• --depth > 5 (unrealistic)

---

Quality Checklist

Pre-Flight Review

purpose:
  - [ ] Element has one clear purpose
  - [ ] Removing it would break functionality

hierarchy:
  - [ ] Visual weight matches importance
  - [ ] Only one primary action per view

motion:
  - [ ] Animation duration <= 400ms
  - [ ] prefers-reduced-motion respected

neumorphic:
  - [ ] Light source consistent (top-left)
  - [ ] Surface color in silver palette

spacing:
  - [ ] All values on 8px grid
  - [ ] Touch targets >= 44px
  - [ ] Content width <= 72ch

color:
  - [ ] 95%+ grayscale
  - [ ] Signal colors only for state
  - [ ] Contrast >= 4.5:1

Implementation Verification

tokens:
  - [ ] No magic numbers
  - [ ] CSS custom properties for variants

accessibility:
  - [ ] Focus states visible
  - [ ] Semantic HTML used
  - [ ] ARIA labels where needed

performance:
  - [ ] Animations use transform/opacity only
  - [ ] No layout shift during animation
  - [ ] will-change applied judiciously

---

Decision Framework

Adding Elements

1. What user problem does this solve? If unclear: REJECT
2. What existing element could solve this? If one exists: USE IT
3. What breaks without this? If nothing: REJECT
4. Does this add cognitive load? If yes: SIMPLIFY or REJECT

Removing Elements (Preferred)

1. When was this last essential? If unknown: remove
2. What % of users interact? If <10%: remove
3. Could this be revealed on demand? If yes: hide by default

---

Reference Files

File	Contents
tokens.md	Colors, spacing, typography, timing, complete exports
neumorphic.md	Raised/pressed states, buttons, spheres, CSS layers
motion.md	Stagger reveals, hover physics, View Transitions, scroll
layouts.md	Gallery grid, stack/cluster/sidebar, container queries
components.md	Button, input, card, tile system, navigation

---

Closing Principle

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away." -- Antoine de Saint-Exupery

Every violation is a decision. Make fewer decisions. Ship better work.