Neumorphic Soft

# Neumorphic Soft

## Philosophy

Neumorphic Soft turns interface chrome into gentle topography: controls feel pressed from a single continuous material, hierarchy emerges through depth shifts instead of hard separators, and interaction is conveyed by light direction, recess, and cushioned edges. It should feel calm, tactile, and low-friction without becoming toy-like.

### Values

- continuous surface over fragmented panels
- depth as hierarchy
- quiet tactility
- gentle contrast with legible text
- calm productivity

### Anti-Values

- hard skeletal borders
- high-noise ornament
- harsh contrast spikes
- flat severity
- aggressive motion

### Visual Character

- all primary containers are sculpted from a single pale background using paired highlight and shadow layers instead of visible borders
- controls alternate between raised pillows and inset wells to signal clickable versus editable surfaces
- large rounded geometry dominates every region, with pill tabs, capsule buttons, and cards using 20px to 32px radii
- status accents appear as small luminous edge glows or embedded color chips rather than full saturated fills
- section groupings are defined by soft concave trays nested inside a broad padded canvas, creating a molded dashboard look

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#7f8cff` |
| secondary | `#a5afd6` |
| accent | `#7de3c3` |
| background | `#e7edf5` |
| surface | `#edf2f8` |
| text | `#2b3550` |
| muted | `#7d89a6` |
| border | `#d6deea` |
| error | `#e47b8f` |
| success | `#62c9a7` |
| warning | `#f0b86c` |
| info | `#77b7e8` |

### Typography

- **Heading Font**: "Red Hat Display", sans-serif
- **Body Font**: "Manrope", sans-serif
- **Mono Font**: "IBM Plex Mono", monospace
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.55
- **Letter Spacing**: -0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Red+Hat+Display:wght@500;700;800&display=swap

### Spacing

- **Base Unit**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","32px","48px","64px"]

### Radii

- **None**: 0px
- **Sm**: 14px
- **Md**: 20px
- **Lg**: 28px
- **Full**: 999px

### Shadows

- **Sm**: color rgba(255,255,255,0.95), rgba(163,177,198,0.34); offset -3px -3px 6px, 3px 3px 8px
- **Md**: color rgba(255,255,255,0.98), rgba(163,177,198,0.42); offset -8px -8px 16px, 8px 8px 18px
- **Lg**: color rgba(255,255,255,1), rgba(163,177,198,0.5); offset -14px -14px 28px, 14px 14px 30px

### Surfaces

- **Treatment**: gradient
- **Card Style**: raised outer shells with inset internal wells and subtle top-left highlight bloom
- **Bg Pattern**: none

### Borders

- **Default Width**: 0px
- **Accent Width**: 2px
- **Style**: none
- **Character**: borders are replaced by tonal seams and shadow relief; visible outlines appear only as faint internal rims on focus

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: deliberate

### Responsive

- **Breakpoints**: [1200,1024,768,480]
- **Column Progression**: 12 → 8 → 4 → 1

## Rules

### Composition

Compose pages as molded trays within a single field rather than boxed cards scattered on a blank canvas. High-level regions sit in broad raised shells; inside them, data, controls, and summaries sit in inset wells so the interface reads as a landscape of convex and concave forms.

### Hierarchy

Use depth before color: strongest actions are the most raised elements, secondary content sits flush, and editable areas recess inward. Accent color is reserved for chips, progress fills, active tab halos, and micro-indicators.

### Density

Moderate density with generous cushion around clusters. Content can be information-rich, but each cluster needs breathing room and rounded containment to preserve the soft-material illusion.

### Signature Patterns

- every major module uses dual outer shadows plus a subtle inner highlight to create a molded raised shell
- inputs, selects, search bars, and progress tracks sit inside concave inset wells built with inset box-shadows
- active tabs and badges use capsule shapes with tiny external glow halos instead of hard fills or underlines
- alerts and status chips include a small embedded circular light bead aligned to the left edge
- modal panels float inside a larger blurred soft-shadow aura with nested raised header and inset body regions

## Layout

### Grid

Desktop uses a 12-column molded dashboard grid with a hero summary band spanning 8/4 columns, a content row of 7/5 columns, and lower utility bands. Tablet landscape reduces to 8 columns, tablet portrait to 4, and phone to a single stack while preserving nested trays.

### Breakpoints

At 1024px, the hero band collapses to 8-column proportions and side panels drop beneath primary content. At 768px, all split trays become stacked 4-column groups. At 480px and below, action clusters become full-width vertical pills, data tables scroll horizontally, and modal/dialog surfaces shrink to edge-padded sheets.

### Whitespace

Whitespace should feel padded and air-cushioned: 24-32px within trays on desktop, 20px on tablet, and 16px on phone. Avoid narrow gutters that would break the single-material illusion.

## Guidance

### Do

- Use tonal contrast and shadow direction consistently from top-left light source.
- Place related controls inside shared inset wells to reinforce continuity.
- Keep accent colors sparse and purposeful on active or status-bearing elements.
- Use large radii and generous padding to preserve the soft tactile identity.
- Ensure text contrast stays strong even when surfaces are low-contrast.

### Don't

- Do not introduce hard dark borders around standard containers.
- Do not flood large panels with saturated accent fills.
- Do not mix multiple light directions or inconsistent shadow depths.
- Do not compress spacing so tightly that forms lose their cushioned feel.
- Do not rely on color alone when depth can communicate state more elegantly.