DROOdotFOO design-ux
Constraint-based design. Monospace-first. Every pixel earns its place. Zero layout shift. The terminal is the design system's origin; web and mobile are projections from it.
Design decisions flow from constraints, not decoration. Start from the character grid, add only what communicates. If a visual element does not serve information hierarchy, remove it.
What You Get
- Design token systems and theming architecture
- Component composition patterns (React, TUI, mobile)
- Typography, color, and spacing decisions with constraint rationale
- Accessibility audit checklist (WCAG AA)
- Motion primitives, scroll choreography, and reduced-motion contracts
- Terminal-first design principles for monospace layouts
When to Use
- Component architecture and composition patterns
- Design token systems and theming
- Typography, color, and spacing decisions
- Accessibility and WCAG compliance
- Motion, scroll animation, and reduced-motion behavior
- Choosing a design system foundation vs. building on tokens
- Layout and grid systems
- Terminal UI design principles
- Mobile/responsive design
- Design documentation (DESIGN.md)
When NOT to Use
- Code-level patterns (TypeScript, React hooks, error handling) -- use
droo-stack - Raxol framework API (TEA agents, headless sessions, MCP tools) -- use
raxol - Claude/Anthropic SDK integration -- use
claude-api - Solidity/smart contract design -- use
solidity-auditor
Reading Guide
| Working on | Read |
|---|---|
| Design philosophy, constraint-based thinking | shared/principles.md |
| Accessibility, WCAG, keyboard, screen readers | shared/accessibility.md |
| Design token systems, dark/light mode | shared/design-tokens.md |
| React component architecture, composition | web/react-components.md |
| Tailwind utility patterns, DROO-flavored config | web/tailwind-patterns.md |
| Grid, spacing, responsive breakpoints | web/layout-grid.md |
| Type scale, font stacks, vertical rhythm | web/typography.md |
| Color palettes, semantic tokens, contrast | web/color-systems.md |
| Scroll animation, motion primitives, choreography | web/motion.md |
| Choosing a design system vs. rolling your own | web/design-system-selection.md |
| Terminal UI layout, box-drawing, constraints | terminal/tui-layout.md |
| Monospace design language, density, ASCII | terminal/terminal-aesthetic.md |
| Mobile/responsive/touch, native patterns | mobile/responsive-native.md |
| "Design It Twice" agent methodology | process/design-twice.md |
| DESIGN.md template, living documentation | process/design-docs.md |
See also
frontend-slop-audit-- for auditing an already-built page against AI-generated tellsdroo-stack-- for code-level patterns (TypeScript, React hooks, error handling)raxol-- for Raxol TUI framework API (TEA agents, headless sessions)ethskills-- for Ethereum/dApp ecosystem tooling
Common Pitfalls
| Mistake | Why It Fails | Better Approach |
|---|---|---|
| Fixed-width containers | Breaks responsive design and terminal scaling | Use min/max/fit-content constraints |
| Raw hex colors in components | Breaks theming, dark mode fails silently | Use semantic tokens (text-foreground, bg-surface) |
| Decorative visual elements | Noise, obscures info hierarchy | Remove if it doesn't communicate or differentiate |
| Color-only differentiation | Excludes colorblind users (WCAG fail) | Combine color with icon, shape, or text label |
| Keyboard-inaccessible components | Excludes keyboard-only users (WCAG AA fail) | Test all interactive components with Tab key |
| Giant component with boolean props | Unmaintainable, untestable API surface | Compose small focused components |
| Pixel-perfect layouts | Fragile across viewports and font sizes | Constraint-based sizing from content |
| Scroll position in React state | Re-renders every frame, collapses on mobile | Motion values, IntersectionObserver, or CSS timelines |
| Hand-rolling an official system | Drifts on upgrade, inherits none of its a11y | Install the real package, theme its documented surface |
Key Conventions
- Terminal is origin: Design for the character grid first, then project to pixel-based media
- Semantic over literal: Use token names (
text-foreground,bg-surface), never raw values in components - Composition over configuration: Small, composable components beat mega-components with boolean props
- Constraint-based sizing: Prefer
min/max/fit-contentover fixed pixel widths - Monospace default: Sans-serif is the exception, not the rule