| 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
- Everything decorative is debt - Ornament without function degrades clarity
- Motion reveals hierarchy - Animation exists only to communicate relationships
- 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
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-900: oklch(0% 0 0);
--ink-700: oklch(20% 0 0);
--ink-500: oklch(40% 0 0);
--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);
--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 {
--depth: 3;
box-shadow:
var(--shadow-source)
calc(0.33rem * var(--depth))
calc(0.33rem * var(--depth))
0.6rem;
}
.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);
--ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
--duration-quick: 150ms;
--duration-standard: 250ms;
}
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
- What user problem does this solve? If unclear: REJECT
- What existing element could solve this? If one exists: USE IT
- What breaks without this? If nothing: REJECT
- Does this add cognitive load? If yes: SIMPLIFY or REJECT
Removing Elements (Preferred)
- When was this last essential? If unknown: remove
- What % of users interact? If <10%: remove
- 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.