# !Boring Software — Design System

## North Star
> Andy Allen's portfolio for Not Boring software — playful, sticker-rich, app icons as the heroes.

**Theme:** light
**Category:** personal
**Tags:** `muted` · `cool` · `playful` · `vibrant` · `premium` · `creative` · `soft-corners` · `display-fonts`

## Description
Andy.works is a design playground built around hyper-detailed 3D-rendered app icons (weather, calculator, habits) on a soft pastel canvas. Massive sculpted display numerals like a 3D '2' anchor sections, and the whole page reads like a print magazine spread for a design studio. A signature yellow CTA strip ('Get Updates') hits midway. Type rotates between a confident editorial sans for headers and tight body copy. The personality is craft-obsessed and gleeful.

## Colors
| Name | Hex | Group | Role | Tailwind |
|---|---|---|---|---|
| neutral-950 | `#000000` | neutral | neutral step 950 | — |
| neutral-700 | `#333333` | neutral | neutral step 700 | — |
| neutral-800-1 | `#232323` | neutral | neutral step 800 | `neutral-800` (Δ0.012) |
| neutral-50 | `#ffffff` | neutral | neutral step 50 | `zinc-50` (Δ0.015) |
| blue-600 | `#0000ee` | blue | blue step 600 | — |
| neutral-800-2 | `#292929` | neutral | neutral step 800 | `zinc-800` (Δ0.009) |

## Surfaces (Elevation)
| Level | Name | Hex | Purpose |
|---|---|---|---|
| 0 | background | `#ffffff` | Page background |
| 1 | surface-1 | `#333333` | Cards / elevated panels |
| 2 | surface-2 | `#292929` | Elevation tier 2 |
| 3 | surface-floor | `#000000` | Elevation tier 3 |

**Elevation philosophy.** Soft elevation throughout — drop shadows on every icon to give material presence. Section background colors create the canvas-tier elevation; the icons float gently above.

## Typography

### Arial — weight 400
*body*

### Founders Grotesk — weight 700
*display*

### Jet Brains — weight 400
*link*

## Type Scale
| Role | Size | Line-height | Tracking |
|---|---|---|---|
| `display` | 76px | 1 |  |
| `h2` | 76px | 1 |  |
| `h3` | 44px | 1.2 |  |
| `link` | 36px | 1 |  |
| `ui-input` | 24px | 1.43 |  |
| `body` | 14px | 1.43 |  |

## Spacing & Radius

**Radius**
- `none`: 0
- `sm`: 4px
- `md`: 8px

**Spacing**
- `base`: 1px

## Layout
Long vertical magazine layout — hero icon trio, big paragraph, sculpted numeral, more icons, yellow band, More posts grid. Each section is its own composition.

## Imagery
3D-rendered app icons in dimensional, materially-rich detail (glass, foam, metal). Big sculpted typographic moments. A single illustrated photo at the bottom (a couch scene). Otherwise, all imagery is rendered icons.

## Do
- Make the app icons the heroes — render them in 3D at huge sizes against soft canvases
- Use display-scale sculpted numerals as section dividers instead of headlines
- Punch a single yellow CTA band into the editorial flow as a high-contrast moment
- Mix soft pastel section backgrounds with white canvas to create rhythm

## Don't
- Don't flatten the icons — depth and material are the personality
- Don't use a uniform card grid; mix featured, supporting, and trio layouts
- Don't avoid color — every section should feel slightly different in tone
- Don't lose the playfulness; technical perfection without joy is not the brand