Neo-Kawaii Tech

# Neo-Kawaii Tech

## Philosophy

Neo-Kawaii Tech reframes advanced software as an emotionally reassuring companion product. It merges glossy consumer-tech interfaces with playful mascot energy, turning dashboards, automation tools, and device controls into cheerful spaces that feel collectible, tactile, and socially expressive rather than corporate or clinical.

### Values

- emotional softness over sterile efficiency
- visible delight in micro-interactions and decorative framing
- high clarity through color coding and oversized labeling
- friendly futurism that makes technical systems feel approachable
- collectible interface moments that reward exploration

### Anti-Values

- grim enterprise minimalism
- flat monochrome austerity
- hard-edged industrial severity
- hidden system status
- emotionless control surfaces

### Visual Character

- pill-heavy panels with oversized 24px to 36px radii and inflated silhouettes that feel plush rather than rectangular
- candy-gradient surfaces layered over milky translucent cards with soft inner highlights and luminous edge strokes
- floating mascot chips, starburst badges, and rounded status bubbles anchored around primary modules as decorative utility markers
- thick white or lavender outline rings around cards, buttons, and avatars to create sticker-like separation from the background
- dense clusters of tiny hearts, sparkles, dot grids, and orbital lines used as atmospheric scaffolding behind content areas

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#FF5FCF` |
| secondary | `#7E7BFF` |
| accent | `#7CF7D4` |
| background | `#FFF7FD` |
| surface | `#FFFFFFCC` |
| text | `#34234D` |
| muted | `#8B79A8` |
| border | `#E7D9FF` |
| error | `#FF6C8E` |
| success | `#33D6A6` |
| warning | `#FFB84D` |
| info | `#69B7FF` |

### Typography

- **Heading Font**: Baloo 2
- **Body Font**: Nunito
- **Mono Font**: JetBrains Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.55
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=JetBrains+Mono:wght@500;700&family=Nunito:wght@400;500;600;700;800&display=swap

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 14px
- **Md**: 22px
- **Lg**: 32px
- **Full**: 9999px

### Shadows

- **Sm**: 0 8px 20px rgba(145, 120, 201, 0.14)
- **Md**: 0 18px 44px rgba(136, 102, 196, 0.18)
- **Lg**: 0 28px 80px rgba(126, 123, 255, 0.22)

### Surfaces

- **Treatment**: glass
- **Card Style**: milky translucent cards over candy gradients with inner highlight blooms and sticker-like shine
- **Bg Pattern**: dots

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: soft luminous outline rings with toy-like sticker edges and pastel glow seams

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: snappy

## Rules

### Composition

Build scenes as layered social-tech habitats: one dominant hero control surface, a supporting conversation or activity column, and several floating utility cards orbiting around the main workflow. Modules should overlap slightly and use decorative badges to imply constant liveliness.

### Hierarchy

Prioritize oversized rounded headlines, thick status pills, and color-coded labels before dense data. Important controls should look collectible and tap-ready. Secondary metrics can sit inside tiny capsules or mini cards.

### Density

High visual density is acceptable when softened by radii, pastel grouping, and consistent sticker framing. Use many small supportive details, but keep every functional cluster clearly bounded.

### Signature Patterns

- every primary card uses a double-layer shell: a translucent gradient surface plus a 2px white outline ring and inset top highlight
- section labels appear inside uppercase capsule tags with wide letter spacing and pastel backgrounds
- interactive buttons use stacked shadows and slight translateY lift on hover to feel like gummy hardware controls
- decorative sparkle, heart, and orbital dot motifs are rendered with absolute-position CSS shapes behind major sections
- avatars, toggles, and stat chips are enclosed in thick sticker-like borders that separate them from the candy background

## Layout

### Grid

Use a 12-column desktop grid with a large central hero zone spanning 7 columns, a right utility rail spanning 5 columns, and nested card clusters inside each zone. Tablet collapses to 8 columns with stacked hero/supporting clusters. Mobile becomes a single-column feed of plush modules.

### Breakpoints

Desktop at 1280px+, tablet at 760px-1279px, mobile below 760px. Decorative background motifs should reposition rather than disappear so the atmosphere survives at all sizes.

### Whitespace

Whitespace is soft and cushiony rather than sparse: keep generous internal padding, moderate inter-card gaps, and small decorative overlaps that make the interface feel layered and toy-like.

## Guidance

### Do

- pair technical information with mascots, chips, or mood labels to keep complex systems emotionally legible
- use multiple pastel hues simultaneously, but anchor each cluster with a clear dominant color family
- style form fields and toggles as plush controls with explicit custom chrome
- apply glass blur, inner highlights, and sticker borders consistently across cards, buttons, and avatars
- design full application scenes such as device orchestration, creator commerce, or companion dashboards instead of component catalogs

### Don't

- flatten the interface into generic SaaS rectangles
- use grayscale-only panels or harsh black keylines
- leave browser-default inputs, checkboxes, or selects unstyled
- treat decoration as separate from function; decorative markers should help orient the user
- swap in neutral corporate typography that removes the toy-tech character