dev-specialisms:frontend-vibes

What this skill does

This skill guides creation of distinctive, emotionally expressive frontend interfaces that balance technical precision with organic imperfection. Build React + TypeScript + Tailwind applications with faux-ASCII aesthetics, warm dark palettes, spring-based motion, and Anthropic-adjacent design sensibility.

## Core Identity: Technical Precision Meets Organic Imperfection

The essence of this aesthetic lives in a productive tension: **technical precision meets organic imperfection**. The grid exists, but something breaks out of it. Type is clean, but rendered in dots or blocks. Palettes are restrained, but punctuated with jarring accents that make everything sing.

**Expressive by Design**: Create interfaces that make users feel something. Research shows expressive design helps users spot key elements 4x faster while inspiring emotional connection through strategic use of color, shape, size, motion, and containment. Balance emotional engagement with functional clarity—never sacrifice core usability for visual appeal.

**The Feeling**: Confidence of someone who knows what they're doing, expressed through restraint rather than excess. Technical but not cold. Modern but referencing history. Clean but with texture. Serious but with moments of play.

**When to Use**: Creative portfolios, developer tools, design systems, technical documentation, AI/LLM interfaces, anything wanting a distinctive voice. The constraint (faux-ASCII, warm palettes, spring motion) becomes the style.

## Design Elements Framework

Map Material Design's five expressive elements to this distinctive aesthetic:

**1. Color as Expression**
Strategic color use draws attention and conveys emotion. Prefer dark foundations (warm blacks with olive/brown undertones) punctuated by vibrant accents (electric orange, coral, neon green). The 90/10 rule: 90% restrained background, 10% vibrant accent doing all the emotional work.

**2. Shape as Identity**
Distinctive forms create visual memory. Employ faux-ASCII shapes (block letterforms built from rectangles, pixelated figures, geometric patterns), scanline overlays, dot matrix compositions, and technical construction lines that reveal the design process.

**3. Size as Hierarchy**
Proportional emphasis establishes importance. Use dramatic scale jumps: 48-80px bold headlines (700-900 weight) contrasted with restrained 14-16px body (400 weight). The gap between them IS the design.

**4. Motion as Guide**
Dynamic transitions direct attention. Prefer spring-based physics over easing curves—animations that bounce slightly feel alive and intentional. Reserve expressive motion for hero moments and key interactions.

**5. Containment as Organization**
Visual grouping creates clarity. Use bento grid layouts where each card has different proportions, dark sections as punctuation in light pages, generous negative space (60-120px padding), and asymmetric compositions that guide the eye.

## Color Philosophy: Restraint with Punctuation

**Dark Foundations**
Prefer warm blacks with subtle olive or brown undertones over pure black (#000000). Think #131313 to #1a1a1a with slight warmth. Avoid cold, blue-tinted blacks—they read sterile. The background should feel like comfortable night.

When going light, avoid pure white (#ffffff). Use cream, warm gray, or paper tones (#faf8f6, #faf9f5, #f5f4ed). Pure white reads clinical; warm white reads considered.

**The Accent That Cuts Through**
Almost every composition needs ONE color doing all the work:
- Electric orange / coral family (Anthropic-adjacent: terracotta, burnt orange, rust, sienna)
- Neon green / lime (technical energy)
- Hot coral / salmon (approachable warmth)
- Cyan / teal scanlines (retrofuture)

**Anthropic-Adjacent Palette Harmony**
Rhyme with Anthropic's design language without copying:
- Their terracotta (#d97757) → Use burnt orange, rust, sienna tones
- Their olive-tinted darks (#252523, #30302e) → Use similar warm blacks with green/brown undertones
- Their parchment whites (#faf9f5, #f5f4ed) → Use same cream/warm white family
- Their soft lavender (#827dbd) → Use sparingly or skip

**The Formula**
```
Dark mode:  90% warm dark background + 10% vibrant accent
Light mode: Warm off-white + strategic dark type + one accent
```

Prefer limited palettes. Single color family with variations, or 2-3 deliberately chosen colors. Reduces cognitive load and creates premium, focused appearance.

Avoid rainbow palettes, gradients for gradient's sake, or default "startup blue". Commit to a cohesive position: bold and saturated, moody and restrained, or high-contrast and minimal.

## Typography & Display Type: Constraint as Style

**Display Type Treatments**
Typography carries the design's voice. Prefer interesting personality over default thinking—avoid Arial, Inter, Roboto, system stacks. Display type should be expressive, even risky. Font choices should be inseparable from the aesthetic direction.

**Faux-ASCII Rendering Techniques:**
- **Block/Pixel Construction**: Characters built from rectangles and squares. Chunky, pixelated display type with weight and presence (like digital brutalism)
- **Scanline Effects**: Horizontal lines through letterforms, as if reading through a CRT monitor or venetian blind
- **Dot Matrix Rendering**: Type as halftone or stippled dots. The constraint makes it handmade even when digital
- **Outline with Filled Interior**: Layered technical feel showing construction

**Figlet for Big Headers**
Use the figlet npm package (https://www.npmjs.com/package/figlet) to render large ASCII art text. Creates impactful headers with retro terminal aesthetic. Works well for hero sections, section dividers, and page titles.

**Scale & Hierarchy**
- Headlines: 48-80px, weight 700-900, tight line-height (1.2-1.3)
- Subheadings: 32-44px, weight 600-700
- Body: 14-16px, weight 400, restrained
- Small text: 12-13px, weight 400-500

The gap between display and body creates visual tension. Let dramatic scale jumps establish hierarchy—one well-proportioned headline does more than scattered emphasis.

**Body Type Philosophy**
Clean, legible, stays out of the way. Display type talks; body type listens. Maintain clear visual distinction between content levels through weight contrast (700-900 headlines vs 400 body).

## Shape & Form: Distinctive Forms as Identity

**Geometric Technical Forms**
Embrace shapes that reference early computing and technical drawing:
- Pixelated figures and imagery (running figures, robots, portraits rendered through halftone)
- Block letterforms with visible construction
- Isometric perspectives and connected systems
- Abstract data visualizations as landscape
- Construction lines and guides that remain visible (showing the design process)

**Illustration Style: Technical Romance**
Illustrations should live in the space between technical precision and human warmth—smart enough to feel credible, warm enough to feel approachable.

Prefer line art with intention (single-weight strokes, isometric views, connected systems), dot/pixel compositions (constraint as style), geometric construction visible (circles and guides that built the form), and abstract data visualizations (not charts, but visual data as landscape).

Avoid blob people, generic SaaS illustrations, overly detailed 3D renders, and stock photography (almost never).

## Layout & Containment: Confident Space

**Breathing Room as Feature**
Interfaces should not fear emptiness. Generous spacing creates premium feel and improves scanability.

- Section padding: 60-120px top/bottom
- Max-width content containers: 1200-1400px, centered on large screens
- Horizontal padding: 20-40px on sides for small screens
- Vertical rhythm: Consistent spacing intervals (multiples of 8px or 16px)
- Margin below headings: 20-40px
- Margin below body blocks: 16-24px

**Bento Grid Layouts**
Feature grids where each card is different size and proportion. Creates visual interest through asymmetry while maintaining organizational clarity. Not every