Quadretti

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.

PixelItaly · “little squares”radius 0px / 0pxcompact densitynone shadows

Use Quadretti Design language (Markdown)Tokens JSON

Design language

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.

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.

Designing new components in Quadretti

MIAN does not ship every component you will need. To make a new one that belongs in Quadretti, build it from --mn-* tokens inside [data-noodle="quadretti"] and follow these rules.

Do

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

[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; }

The same guide, for AI tools: /ai/noodles/quadretti.md · MCP tool get_design_language.

Colour, type and brand

What Quadretti says before anyone reads a word, and what kind of brand it suits. Tendencies, not laws: see the guides on colour, type, branding and logos.

Primary · Blue

#1d3fbf · mid, saturated

Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.

Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.

Accent · Red

#c7381a · mid, saturated

Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.

Watch for: It is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words).

Page · White and paper

#fbfcff · pale, saturated

Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.

Watch for: Empty is not the same as calm: white space needs a grid behind it.

Blue against red, close to complementary: strong contrast, so the accent must stay rare. The page itself 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.

Personality

Reads as grid, pixel, playful, technical, retro. Intensity 3 of 5.

Suits

games, developer tools, data products, education, creative tools. Less suited to luxury, wellness.

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.

Inspired by the noodle

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

Specimen

The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.

Try your brand colour

Your own

Open in the studio

Light

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

Table

Invoice	Status	Amount
INV-001	Paid	€250.00
INV-002	Pending	€150.00
INV-003	Overdue	€350.00

Feedback & motion

Deployed

Your site is live.

Cart
Pay
Done

Dark

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

Table

Invoice	Status	Amount
INV-001	Paid	€250.00
INV-002	Pending	€150.00
INV-003	Overdue	€350.00

Feedback & motion

Deployed

Your site is live.

Cart
Pay
Done

Use it

<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="quadretti">

<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/quadretti.css">

<!-- or scope it to one element -->
<section data-noodle="quadretti" data-mode="dark">…</section>

Palette

Left half light, right half dark. Every text pair is verified for WCAG AA contrast when the site is built.

Background#fbfcff

Surface#ffffff

Muted surface#eef2fb

Foreground#0f1830

Muted text#505a75

Border#d5ddef

Input border#9fb0d6

Primary#1d3fbf

On primary#ffffff

Secondary#eef2fb

Accent#c7381a

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#1d3fbf

Typography & shape

--mn-font	-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-font-heading	-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-radius-field / box / badge	0px · 0px · 0px
density	compact
shadows	none