# CREATE SOMETHING Design Context

## Philosophy
Weniger, aber besser. Less, but better.
The Subtractive Triad: DRY → Rams → Heidegger

## Visual Vocabulary

### Minimalism
- Negative space: Let elements breathe
- Monochrome first: Color as emphasis, not decoration
- Typography as structure: Type creates hierarchy without ornament
- Grid discipline: Alignment creates order

### Motion
- Purposeful: Animation reveals state, guides attention
- Subtle: --duration-micro (200ms) for most interactions
- Consistent: One easing curve (--ease-standard)
- Reducible: Respect prefers-reduced-motion

### Typography
- System fonts where possible
- Limited type scale (3-4 sizes maximum)
- Line height 1.5-1.6 for body text
- Generous letter-spacing for headings

### Color
- Pure black (#000000) as primary background
- White with opacity for text hierarchy
- WCAG AA compliance minimum (4.5:1 contrast)
- Semantic colors for state (success, error, warning, info)

### Clear Communication
- Performance Lab reference: one literal offer, one outcome sentence, direct actions, readiness state, nearby proof
- Use Are.na discovery to propose Performance Lab references from the feed, then require human approval before corpus entry
- Human-in-the-loop interfaces must be agent-first and mobile-first: agents carry context, operators approve, reject, or redirect from small screens
- Light operational surfaces with clear contrast, stable spacing, and visible boundaries
- Every major claim needs a nearby artifact, receipt, metric, or named system boundary
- Use concrete task language before abstract framework language
- Translate public reference patterns into owned Canon primitives; do not copy generated CSS, fonts, assets, campaign language, or identity

### Anti-Patterns
- Decorative animation (bouncing icons, pulsing elements)
- Gratuitous color (rainbow gradients, neon accents)
- Cluttered layouts (every pixel filled)
- Inconsistent motion (mixed timing, varied easing)

## Canon Token Reference

### Color
--color-bg-pure: #000000
  ← Rams black backgrounds, brutalist web
--color-fg-primary: #ffffff
  ← High contrast accessibility
--color-fg-secondary: rgba(255, 255, 255, 0.8)
  ← Swiss design hierarchy
--color-fg-muted: rgba(255, 255, 255, 0.46)
  ← Rams' muted grays, WCAG AA minimum

### Spacing
--space-sm: 1rem
  ← Swiss grid proportions
--space-md: 1.618rem
  ← Golden ratio (phi = 1.618)
--space-lg: 2.618rem
  ← Golden ratio progression

### Radius
--radius-sm: 6px
  ← Braun product corners
--radius-md: 8px
  ← Braun product corners
--radius-lg: 12px
  ← Braun product corners

### Motion
--duration-micro: 200ms
  ← Minimal motion references
--duration-standard: 300ms
  ← Interface motion patterns
--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1)
  ← Material Design easing

### Typography
--text-body: 1rem
  ← Swiss typography standards
--text-body-sm: 0.875rem
  ← Swiss typography standards

## Source Channels

### Canon Minimalism
Core visual vocabulary for CREATE SOMETHING design system
Principles:
- Negative space lets elements breathe
- Monochrome first, color as emphasis
- Typography creates hierarchy without ornament
- Grid discipline creates order

### Motion Language
Animation and transition patterns for UI
Principles:
- Animation reveals state changes
- 200ms for micro-interactions (--duration-micro)
- Single easing curve for consistency (--ease-standard)
- Respect prefers-reduced-motion

## Property Character
- .space: Experimental (200ms transitions)
- .io: Research (250ms, measured)
- .agency: Professional (250ms, efficient)
- .ltd: Contemplative (500ms, deliberate)

## Relationship Mappings

Rams -> minimalism -> --color-fg-muted, --radius-*
Swiss Design -> typography -> --text-*, grid spacing
Braun -> industrial -> --radius-sm, --radius-lg
Motion Language -> animation -> --duration-*, --ease-standard