One system, every frame.

Rules

Eight rules that never break.

1. 01Dark onlySite, social and promo: one dark theme, no switcher. The system’s high contrast and forced colours are respected.
2. 02One accentBlue or yellow, never both up front.
3. 03Colour in the visualsNever in small text. Text and graphics never share a colour.
4. 04Biggest gets the most contrastWhite headline, grey secondary text, smaller mono labels.
5. 05The avatar signs, the photo introducesThe face of the brand is the avatar logo. A real photo appears only in the About section.
6. 06Accessible by rule4.5:1 contrast, 44 px targets, reduced motion respected.
7. 07Centred on the glyphsText in a tile is centred on the letterforms.
8. 08Light and vector firstSVG for logo, icons and graphics. Raster only for photos and covers, WOFF2 fonts, no third-party scripts.

Colour

Cool neutrals, one blue, colour only for visuals.

Visuals only · never for small text

Measured contrast

Thresholds: 4.5:1 for text, 3:1 for large headings and for borders you need to understand the page. Calculated with the WCAG 2.1 formula on the values of the theme.

Typography

Wide to shout, narrow to explain.

Scale

All other text uses the six fixed sizes, with their token. Declared exceptions: the name in the bar (18 px, part of the logo), measures inside drawings (10 px), samples inside pages, the book block (with its own sizes) and the hidden games. No interface text below 12 px.

Grid and spacing

One grid, multiples of 4.

Grid

1. One container, one edge.1120 px at most, with 16-56 px on each side. The bar runs edge to edge, content and footer start from the same margin.
2. Three breakpoints.560, 760 and 1100 px. A different value belongs to one component only and lives next to it.
3. Space is counted.14-20 px between the cards of a grid. A section gets at least 48 px above and below.

Spacing · multiples of 4

Shape and depth

Sharp corners, one shadow.

Radii

Shadows · just one, hard and blue

Layers

Motion

One gesture, one scene.

1. Quick at the start, soft at the end.One curve for everything: it starts fast and settles gently, like a hand putting down a card.
2. Three timings.0.2 s for borders and colours, 0.35 s for fades, 0.5 s for drawings. With reduced motion they stop.
3. Only the drawing moves.On hover, on focus and, on touch, at mid-screen. The other cards fade to 0.4.

Logo

The curly-haired face.

Rules

Download the logo

The logo is my brand: use it to talk about me or the site, not for a project of yours.

Components

Square in the interface, round in the visuals.

Button states

Button: anatomy and variants

<button class="btn" type="button">Read the story</button>
<a class="btn ghost" href="#work">Skip the story</a>

Field: states

At least 44 px tall, like the button next to it; on phones both go full width. The label is tied to the field with for and id. An error sets aria-invalid="true" on the field and puts the sentence in a paragraph with role="status", so screen readers read it.

<form class="ff-form" novalidate>
  <label for="email">Your email</label>
  <input id="email" name="email" type="email" autocomplete="email" required aria-describedby="note">
  <button type="submit">Subscribe</button>
  <p id="note" role="status"></p>
</form>

Links

Focus: 2 px --link outline, 2 px away, like every other element.

When to use what

Icons

The SVG always has aria-hidden="true". No external set: a few icons drawn here.

<button type="button" aria-label="Close">×</button>
<svg viewBox="0 0 24 24" width="24" height="24" fill="none"
     stroke="currentColor" stroke-width="1.5" aria-hidden="true">…</svg>

Bar and footer

import componenti as C
C.bar('en', crumbs=[('Tools', '/tools/'), ('Mockup 3D', None)])
C.footer('en')

Theme

Tools

Illustrations

One idea, one blue lead.

Yes and no

1. Tools of the craft, not icons.A selection with handles says design. A light bulb says anything at all.
2. People: the logo or a cursor.The avatar logo on a blue tile and grey cursors. Never colourful stick figures.
3. One lead, in flat colour.One blue, the rest grey. No rainbows, gradients or soft shadows.

The eight rules

1. 01Always on the stage.The drawing sits in a dark box with a dot grid every 12 px. A mono number in the top left corner when drawings come in a series.
2. 02One idea, a few big objects.The drawing tells one thing with a few objects that fill the box. No scenes, no decoration around them.
3. 03One blue lead, the rest grey.Blue goes to one object only, the one making the gesture. Everything else stays in the dark theme greys. A visual colour can replace the blue, never sit next to it.
4. 04Tools of the craft, not icons.Draw with what a designer sees: real glyphs, dashed selections with handles, guides, Bézier curves, cursors, tiles, measurements. No stock icons such as light bulbs, gears, rockets or speech bubbles.
5. 05People are the logo or a cursor.Fabio is the white avatar logo on a blue tile, or a cursor with his name. Everyone else is a grey cursor. Never stick figures or generic people.
6. 06Solid shapes, sharp corners.Rectangles and circles in flat colour, no gradients, no shadows. Strokes only for guides, dashes and curves. Rounded corners only on tiles and chips.
7. 07Inside, only measurements and names.Grey uppercase mono labels, like 44 PX, ×10 or 07 / 40, or one big glyph in Anybody. Never sentences: the drawing works in any language.
8. 08The gesture tells the idea.On hover the lead makes the gesture of the idea, it grows, settles, nods or presses, and the rest fades or moves aside. One looping motion at most.

Tone of voice

Short, concrete, first person.

1. 01I talk, to you.First person singular, and the reader is “you”. No corporate “we”, no “the user”.

   “Scroll and I’ll tell you how I got here.”

2. 02Short sentences, one idea each.Headlines are a few words long and end with a full stop.

   “Tables.” “The method, live.”

3. 03Two beats.The first sentence opens, the second one turns.

   “Tools change. The craft doesn’t.”

4. 04Real things, not adjectives.Names, numbers, objects: spacer.gif, ten buttons, thirty times a second. If a sentence stands without an adjective, the adjective goes.

   “AI generates ten buttons in a few seconds. How many actually hold up?”

5. 05Someone who tries, not someone who preaches.I tell what I tried and what held up, even when it didn’t work. AI generates, the designer decides. No promises, no stock enthusiasm.

   “AI generates and you decide.”

6. 06One joke, then back to business.Self-irony about the craft and the past, never about the reader. One per block at most.

   “The client always wants a bigger logo.”

7. 07Clear even when it’s boring.Privacy, confirmations and errors say what happens and what the reader does, without legalese.

   “Until you confirm, you get nothing.”

8. 08The button says what happens.One verb, two words at most, addressed to the reader. Never “Click here” or “Submit”.

   Subscribe · Email me · Notify me · Download PNG

Words and punctuation

• Italian first. English stays where it is the name of the thing: Lab, Tools, mockup, workshop.
• Craft before tools: Figma and AI are tools, not an identity.
• Full stops and colons. No exclamation marks, except in period parodies. No dashes: split the sentence.
• Digits for sizes and data (4:5, 44 px), words in the story (ten years, three editions).

Social graphics

4:5, visual on top, text on the left.

learnfigmanow.com

Download the blank kit

Building this system took me a lot of work. The kit is the part that works for anyone, without my brand: the base rules already written, room for your choices and neutral tokens that work straight away. It's free, so you start from here, not from zero.

What it's for

What's inside

Licence CC BY 4.0: use it and change it as you like, at work and for clients too, crediting fabiostaiano.it. It covers the kit: the logo, the illustrations and the rest of my brand stay mine. The fonts I use are free on Google Fonts under the OFL licence, here is the text for each: Anybody · Instrument Sans · Martian Mono.