Terraphim Essentialist Design System

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

A Claude Code skill that enforces radical essentialism in web UI design. Combines neumorphic depth, purposeful motion, and expanding grid layouts.

Installation

Via skills.sh (Recommended)

npx skills add terraphim/terraphim-essentialist-design

Manual Installation

Clone into your Claude Code skills directory:

git clone https://github.com/terraphim/terraphim-essentialist-design.git ~/.claude/skills/terraphim-essentialist-design

Or for project-specific installation:

git clone https://github.com/terraphim/terraphim-essentialist-design.git .claude/skills/terraphim-essentialist-design

What This Skill Provides

Category	Description
Design Tokens	oklch colors, 8px grid spacing, fluid typography, timing functions
Neumorphic Depth	Raised/pressed states, interactive buttons, circular elements
Motion Choreography	Staggered reveals, hover physics, View Transitions, scroll animations
Layout Utilities	Expanding gallery grid, stack/cluster/sidebar, container queries
Component Patterns	Buttons, inputs, cards, tile system, navigation
Quality Checklists	Pre-flight review, anti-patterns, decision frameworks

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

When to Use This Skill

• Building web interfaces
• Creating design systems
• Implementing neumorphic UI
• Adding purposeful animations
• Reviewing designs for brand alignment

Reference Files

File	Contents
tokens.md	Colors, spacing, typography, timing, complete CSS 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

Demos

Example implementations demonstrating the design system:

• demos/01-hero-focused/ - Hero-focused landing page
• demos/02-product-features/ - Product features showcase
• demos/03-knowledge-graph/ - Knowledge graph visualization
• demos/04-privacy-first/ - Privacy-first messaging
• demos/05-developer-centric/ - Developer-centric interface
• demo/ - Full comprehensive demo

Brand Foundation

Monochromatic Palette

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

  /* Silver - Surfaces */
  --silver-100: oklch(92% 0 0);
  --silver-50: oklch(96% 0 0);

  /* Signals - State only (use sparingly) */
  --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

Anti-Patterns (Avoid)

• Purple/blue gradient backgrounds
• Multiple button styles (use one primary, one ghost, one destructive)
• Animation duration > 600ms without justification
• Neumorphic text (illegible)
• --depth > 5 (unrealistic)
• Hover effects on non-interactive elements

License

MIT License - see LICENSE file.

Contributing

Contributions welcome. Please follow the essentialism principles:

1. Every new element requires removing two
2. Ask: "What breaks if this is removed?"
3. If an element doesn't score YES on 3+ criteria, eliminate it

---

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