# Quadretti: a MIAN design language

Little squares, graph paper, pixels. Quadretti are tiny squares of egg pasta cut from a sheet with a knife in both directions and cooked in broth. Quadretti is a pixel system on graph paper: square everything, stepped pixel corners, square knobs and checkboxes, progress and charts built from squares, and a spinner of four squares.

- Family: Pixel · Origin: Italy · “little squares” · License: MIAN License (free to use)
- Traits: grid, pixel, playful, technical, retro · intensity 3/5 · contrast high · density compact. Good for: games, developer tools, data products, education, creative tools. Less for: luxury, wellness.
- Use: `<html data-noodle="quadretti">` (or on any element to scope it). Add `data-mode="dark"` or `"light"` to force a mode.
- Everything: https://mian.ro/dist/mian.css · Only this noodle: https://mian.ro/dist/mian-core.css + https://mian.ro/dist/noodles/quadretti.css
- Page: https://mian.ro/noodles/quadretti

## Design philosophy

Quadretti is drawn on graph paper. Little squares of pasta cut in both directions become a pixel system: a faint blue grid behind every surface, square controls, pixel-stepped corners instead of curves, progress and charts built from square cells, and a spinner of four squares stepping round. Things step into place: nothing slides.

## Principles

- Square everything: 0 radius; corners are stepped with clip-path (--qd-step) rather than rounded.
- The grid shows: surfaces carry a 12px graph-paper grid (--qd-grid).
- Cells, not bars: progress, sliders, switches and chart columns are divided into square cells.
- Motion uses steps(); focus is a vermilion square outline.

## The language

- **Shape.** 0px radius, pixel-stepped corners on buttons, badges, tabs and avatars.
- **Surface.** Graph paper: a 12px blue grid on white; floating panels cast a square offset shadow.
- **Colour.** Graph blue ink (#1d3fbf) with a vermilion accent.
- **Type.** System sans 600–700; mono for labels and table heads.
- **Motion.** quadretti-in: revealed in three steps; the switch knob steps across three cells.
- **Data.** Columns made of 8px cells on the grid; square line points; a square radial.

## Colour, type and brand

- **Primary** #1d3fbf: blue (mid, saturated). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #c7381a: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #fbfcff: white and paper (pale, saturated). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Blue against red, close to complementary: strong contrast, so the accent must stay rare. The page is cool.
- **Type.** One voice throughout: system sans (the device’s own typeface). Headings are semibold, which reads as confident without shouting. Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.
- **Reads as** grid, pixel, playful, technical, retro.
- **Tone of voice.** Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
- **Logo.** Square and angular marks fit: a wordmark in capitals or a solid block symbol.
- To keep this noodle’s shape with your own brand colours: POST https://mian.ro/api/v1/noodles/create or the MCP tool `create_noodle` (base: "quadretti").

## Inspired by the noodle

- Cut into squares in both directions → a graph-paper grid behind everything and square controls
- Tiny squares → pixel-stepped corners on buttons and cards instead of curves
- Floating in broth → squares that step into place, never slide
- Blue-lined exercise books → graph blue ink with a vermilion accent

## Designing new components in Quadretti

Build new components from `--mn-*` tokens, scoped with `[data-noodle="quadretti"]`, and follow these rules. Any `--x-*` variables named below are defined by this noodle's skin and can be used inside its scope.

- border-radius: 0; clip-path: var(--qd-step); background: var(--qd-grid), var(--mn-surface).
- Quantities as cells: background: var(--qd-cells), <fill>.
- Transitions: steps(2–4, end); focus: outline 2px solid var(--mn-accent); outline-offset: 2px.

Avoid:

- Rounded corners
- Smooth easing
- Gradients and blur

Recipe: a selectable tile in this language:

```css
[data-noodle="quadretti"] .tile { padding: 10px 14px; border: 1px solid var(--mn-input); border-radius: 0; background: var(--qd-grid), var(--mn-surface); clip-path: var(--qd-step); }
[data-noodle="quadretti"] .tile[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
[data-noodle="quadretti"] .tile:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: 2px; clip-path: none; }
```

## Tokens

- Fonts: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 0px, box 0px, badge 0px
- Density: compact · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #fbfcff | #0a0f1f |
| surface | #ffffff | #0f1630 |
| surface2 | #eef2fb | #16203f |
| fg | #0f1830 | #eef2ff |
| muted | #505a75 | #9aa6c7 |
| border | #d5ddef | #22305a |
| input | #9fb0d6 | #3c4f8a |
| primary | #1d3fbf | #8ea8ff |
| primaryFg | #ffffff | #0a1030 |
| secondary | #eef2fb | #16203f |
| secondaryFg | #0f1830 | #eef2ff |
| accent | #c7381a | #ff8a66 |
| accentFg | #ffffff | #2a0a00 |
| ring | #1d3fbf | #8ea8ff |
| success | #15803d | #4ade80 |
| successFg | #ffffff | #052e16 |
| warning | #b45309 | #fbbf24 |
| warningFg | #ffffff | #1f1300 |
| danger | #dc2626 | #f87171 |
| dangerFg | #ffffff | #210505 |
| info | #0369a1 | #38bdf8 |
| infoFg | #ffffff | #03202d |
| primaryText | #1d3fbf | #8ea8ff |
| secondaryText | #6d7485 | #798197 |
| accentText | #bc361b | #ff8a66 |
| successText | #15783c | #4ade80 |
| warningText | #aa4f0b | #fbbf24 |
| dangerText | #c82527 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1d3fbf | #8ea8ff |