How it works · Atelier

read · 3 files

01ReadYour brief, your files and your design system, before it writes a line.

direction

02DecideA type pair, a palette and one idea for the page to stand on.

wrote index.html · 214 lines

<section class="fb-prices">
  <h2>What it costs</h2>
  <div class="fb-row">
    <span>Fix a flat tyre</span>
    <b>DKK 149</b>
  </div>
  <div class="fb-row">
    <span>Gears and brakes</span>
    <b>DKK 399</b>
  </div>
  …

03BuildReal pages, written as plain HTML and CSS into your project folder.

screenshot · 1440

04LookIt opens the page in a real browser and reads the screenshot, at the size you’ll see it.

● check · 2 issues

Fjord BikesPrices · Hours · Find us

Flat tyre at 8? Ridden home by 5.

Repairs on any bike, while you work. Bring it to Mejlgade 41 before 9.

Book a repair

What it costs

Fix a flat tyreDKK 149

Gears and brakes, tunedDKK 399

Full serviceDKK 795

10px off the grid Contrast 2.1:1, needs 4.5:1

05MeasureIt checks with code what the eye can miss: edges, contrast, fonts, overflow and tap targets.

● check · 0 issues

06FixIt moves the prices onto the grid, darkens them to 7.4:1 and runs the check again.

reply

07ReplyTwo lines on what it made and the one choice worth knowing.

● index.html · ready

→What you getA finished page in your folder, ready to open, edit or ship.

It looks at its own work.