The Fixathon design system, drawn one pixel at a time.

Hi-vis orange, a ticked box and a running clock. Every logo, pattern and image here is generated by code, so nothing looks like it came out of an image model. Use it for anything you make about the Fixathon, and download the files at the end.

72:00:00Cybersecurity edition clock
01Mark, wordmark and clear space

The ticked box and the pixel wordmark

The mark is a 9 by 9 pixel grid. The brackets take the ground's text colour, and the x is always hi-vis orange.

Mark on paper
Mark on paperInk brackets, orange x
Mark on ink
Mark on inkPaper brackets, orange x
One-colour mark on orange
Mark on orangeOne colour, ink only
App tile
App tileAvatars and icons
Lockup on paper
LockupWordmark baseline sits on the mark's lower bracket row
Lockup on ink
Lockup on inkSite header, slides, social

Clear space and minimum size

3 pixelsMark with clear space shown
  • Keep three mark pixels clear on every side, which is one bracket arm. No text, edges or second logo inside it.
  • Mark at 16px minimum (one screen pixel per mark pixel). The wordmark at 14px tall minimum.
  • Scale in whole multiples of 9px where you can, so every pixel lands on the screen grid.
  • The x is the only orange in the logo, and it is always orange, except in the one-colour version.

Wrong uses

Stretched
Smoothed or blurred
Recoloured x
[x] Fixathon
Retyped in a font
02Colour

Hi-vis orange, and the greys of a site office

Orange is the colour people wear when they fix things in public. Everything else is asphalt, concrete and paper, slightly warm. There is no second accent hue. Click a swatch to copy its hex.

Contrast is shown against paper and against ink. 4.5 or more passes for body text; 3 or more passes for large text and shapes.

Where orange goes

Apply as a fixer72 hours · Porto · 18 to 20 November

Whole surfaces, like a vest

Use orange as a full ground for the one thing you want people to do. Text on orange is always ink, never white: white on this orange fails contrast, and hi-vis vests print in black for the same reason.

VPN exposed, no alerts
Alert fires in 4 min

The fix, and only the fix

In a diagram, a list or a log, orange marks what changed or got solved. If everything is orange, nothing is.

Building. Hour 51 of 72.

Tape for work in progress

The pixel hazard tape means the clock is running: live editions, open applications, the build floor. Never as decoration on finished things.

Heat at the edges

Orange dithered into ink closes a hero or a social image. One per page, at the bottom edge.

03Type

Plex for reading, a dot-matrix clock for numbers

IBM Plex was drawn for engineering documentation, which is close to what our readers do all day. Doto looks like the countdown boards at the front of the room, so it only shows hours, dates and scores.

Fix it
IBM Plex Sans · 400 to 700 · headings and body
09:00 UTC
IBM Plex Mono · 400, 500 · times, labels, code
48:00
Doto · 900 · clocks and big numbers only

Scale

96 · Doto72:00:00
56 · heroFix what actually matters
30 · sectionFive stages from brief to adoption
20 · cardVulnerability discovery agents
17 · leadSeveral teams build solutions to one organisation's real problem, using its own data.
15 · bodyJudging uses withheld test sets, dual scoring and live code review.
13 · mono18 to 20 Nov 2026 · Porto · 72h
12 · smallestNothing smaller than this.
  • Sentence case everywhere, including labels and buttons. No all-caps eyebrows.
  • Headings 700 with −0.02em tracking, line height 1.05 to 1.1. Body line height 1.5.
  • Numbers that line up use tabular figures.
04Shape

Square corners on a 4px grid

The pixel module is 4px, and everything snaps to it. Corners are square: radius 0 for everything, 2px for inputs on touch screens if a browser needs it. Raised things get a hard offset shadow, never a blur.

Spacing steps

4
8
12
16
24
32
48
80

Hit targets 44px. Section padding 72px desktop, 56px phone.

Shadows

raised · 4px
chosen · 4px orange
pressed · 0
05Components

The site's parts, rendered live

Working HTML and CSS built from the tokens above and nothing else. The site is made of the same parts.

Buttons

One primary button per screen. It presses down into its shadow when clicked.

Challenge status

Submitteddashed: not yet ours
Scopingoutline: agreed, not started
Buildingtape: clock running
Judginghalf: built, not decided
Adoptedorange: fixed

Shape carries the state, so it works in one colour. Always paired with the word.

Cybersecurity editionhour 52 of 72
20:14:09
72 hour cells, 51 filled, the 52nd orange
Porto · 18 to 20 Novembertime left
Cybersecurity72h

Vulnerability discovery agents

Build an agent that finds the weak points in real organisations’ internet-facing systems, and see whether their detection notices.

When
18 to 20 November 2026
Where
Porto, Portugal · hybrid
Prize
€10,000
Special guest: Kat FitzgeraldVetted teams
Choose this edition →

Form fields

Add the full address, for example example.com.
Your own gut feeling is what we want here.

How it works

1A real problem
2We scope it
3Teams compete
4Judged for real
5First right to adopt

Numbered because it is a real sequence. The orange marker shows where an edition is now.

People

KF
Kat FitzgeraldStaff security engineer who spent her career breaking things at Google, Apple, and Uber so attackers wouldn’t get there first.
AC
Ana CostaHead of Getting It Done

Initials in Doto until we have real photos. Real photos go through the dither tool, see 06.

Questions

How are entries judged?

Judging uses withheld test sets, dual scoring and live code review. The challenge owner gets first right to adopt the winning build.

Who can apply as a fixer?

Teams of engineers, designers and AI builders. Every team is vetted before it is matched.

Where does it happen?

In Porto, Portugal. The cybersecurity edition is hybrid: at least one member of each team is in Porto, the rest can join remotely.

Scoreboard

Example data
Team Lantern86
Team Basalt74
Team Halyard61
Team Quay43

Out of 100. Only the winner is orange. The dotted track is the full scale.

06Visuals and patterns

Patterns made from the brand's own pixels

Each pattern is a script in generators/gen.py, seeded so it comes out the same every time. Each one means something, so use it where that meaning applies.

Repair stripScattered pixels lining up into a grid. Under the hero and as a page divider.pattern_repair()
HeatOrdered dither, ink into orange. The bottom edge of heroes and social cards.pattern_heat()
TapeWork in progress. Live editions and open applications only.pattern_tape()
Hour gridOne cell per hour of an edition. Countdowns, recaps, edition pages.pattern_hourgrid()
StaticError-diffused noise for dark panels. Quiet enough to sit behind text.pattern_static()
Social cardLockup, tagline and heat. Generated at every size we need.social()

Photos: real ones, dithered

Photos of the team, the venue and past editions go through the same two-colour dither, so a phone snapshot and a pro shot look like they belong together. Try it with any photo on your computer.

Original
Dithered, ink on concrete
Stays in your browser. For files use dither_photo().

Rules

  • No images from image models, and no stock photos. If we didn't make it with code or a camera, it doesn't go on the site.
  • Two visuals per page at most. One pattern per section.
  • Pixels stay square: scale patterns in whole multiples and set image-rendering: pixelated.
  • Photos of people only with their permission, and always dithered in the house colours.
07Voice

Short, specific, a little dry

We write the way Ana or Luisa would explain the event across a table.

Write
Not
72 hours, Porto, 18 to 20 November.
An immersive multi-day experience.
A €10,000 prize. The jury may decide no team has earned it.
Life-changing rewards await.
Teams build an agent that finds weak points in real systems.
Unlock cutting-edge offensive innovation.
Every team is vetted before it is matched.
We carefully curate a world-class talent pool.
  • Few em dashes, no exclamation marks, British spelling.
  • Numbers over adjectives. Say what it does.
  • Never name a challenge owner who hasn't agreed to be named.
08Files

Every file, ready to download

All of them are generated by one script from the tokens, so they always match. Click a file to download it. Need a size or format that is missing? Write to hello@fixathon.ai.

Mark and wordmark

logo/fixathon-mark-{256 · 512 · 1024}.pngtransparent

Icons

icons/favicon-{16 · 32}.pngpixel exact

Social and patterns

patterns/{repair · heat · tape · static · hours-48 · hours-72 · edition-48 · edition-72}.png8 patterns