Superflat Pop Graphics

# Superflat Pop Graphics

## Philosophy

A UI language translating Superflat art into interface form through stacked iconography, candy-bright chroma, crisp outlines, and deliberate depthlessness. It treats screens as poster-fields where cheerful symbols, flower medallions, and compressed layers create intensity without physical realism.

### Values

- graphic immediacy over subtle skeuomorphic depth
- iconic repetition and character-like motifs as navigation cues
- joyful saturation balanced by rigorous edge control

### Anti-Values

- soft glassmorphism and atmospheric blur
- neutral corporate minimalism

### Visual Character

- Large circular flower medallions and smile-face badges repeat across panels as flat vector ornaments with hard edges and no realistic shading.
- Interface sections are framed by thick ink-dark outlines and offset sticker-like color blocks that create separation without using box-shadow depth.
- Type and UI chips sit on loud candy-color rectangles, dots, and rounded capsules layered tightly so the screen feels compressed and poster-like rather than spacious.
- Illustrative motifs use uniform fills, concentric rings, and simple facial geometry to keep every decorative element visibly two-dimensional.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#ff2d96` |
| secondary | `#20d6ff` |
| accent | `#ffe14d` |
| background | `#fff7fb` |
| surface | `#ffffff` |
| text | `#131019` |
| muted | `#6f6580` |
| border | `#151120` |
| error | `#ff5a5f` |
| success | `#18c47d` |
| warning | `#ffb21a` |
| info | `#3b82f6` |

### Typography

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

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 10px
- **Md**: 18px
- **Lg**: 30px
- **Full**: 9999px

### Shadows

- **Sm**: 4px 4px 0 #151120
- **Md**: 8px 8px 0 #151120
- **Lg**: 12px 12px 0 #151120

### Surfaces

- **Treatment**: flat
- **Card Style**: Bright white cards with solid ink outlines, internal color bands, and sticker-like decorative badges instead of translucent layers.
- **Bg Pattern**: dots

### Borders

- **Default Width**: 3px
- **Accent Width**: 6px
- **Style**: solid
- **Character**: Borders behave like manga ink lines: blunt, dark, assertive, and present on every major shape.

### Motion

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

## Rules

### Composition

Build each screen like a dense poster collage with anchored hero blocks, floating motif clusters, and strong sectional framing that keeps everything legible through contour rather than emptiness.

### Hierarchy

Headlines are oversized and bubbly, metadata is carried in compact rounded chips, and action areas are separated with color bars or medallions instead of subtle typographic shifts.

### Density

High-density but controlled: decorative repetition is welcome as long as every content zone retains a clear bordered container and readable internal spacing.

### Signature Patterns

- Every major card uses a heavy dark outline plus an offset pseudo-element color shadow, making the interface read like stacked printed stickers rather than soft floating panels.
- Decorative flower or smile motifs appear as repeated circular modules built from concentric shapes and placed at corners, headers, and empty gaps to create rhythmic visual compression.
- Buttons, tabs, and stat pills use thick rounded capsules with all-caps micro labels and contrasting fill colors so controls feel like collectible character badges.
- Section headers include full-width color ribbons with overlaid badges or counters, replacing conventional minimalist dividers with loud graphic separators.

## Layout

### Grid

Use a poster-like 12-column desktop grid with one oversized hero column and adjacent stacked utility columns; collapse to 6 columns on tablet and a single column on mobile while preserving motif placement.

### Breakpoints

Desktop 1440+, tablet 768-1023, mobile 375-767 with cards stacking vertically and secondary sidebars moving below the primary story area.

### Whitespace

Keep whitespace intentionally compressed; use short but consistent gutters so the composition feels packed and energetic without becoming crowded.

## Guidance

### Do

- Use decorative motifs as active structure, not merely wallpaper.
- Pair saturated fills with dark outlines so forms remain crisp.
- Keep illustration geometry simple and repeatable across components.

### Don't

- Do not introduce realistic gradients or ambient shadows.
- Do not mute the palette into generic pastel SaaS tones.
- Do not leave large empty neutral areas that break the compressed poster rhythm.