Focalism

Brutalism made honesty of raw material. Glassmorphism made light of layered glass. Focalism makes hierarchy of focus itself: the interface behaves like a lens, and what you attend to is simply, optically, sharp.

Born inside Squint, a training arcade for the designer's eye, a product about perception deserved a design language about perception. Squint is the reference implementation; this page is the doctrine. Take it, use it, push it further.

The six laws

1. 01 · The interface is a lens

   Hierarchy is focus. Whatever the user attends to is razor sharp; everything else sits at a measured distance from the focal plane. Attention is not decorated; it is focused.

2. 02 · Depth is focal distance

   No drop shadows, no elevation stack. A layer's importance is its focus step: attended (fz-0), near (fz-1), far (fz-2), deep field (fz-3). Glassmorphism blurs backgrounds as garnish; Focalism makes depth-of-field the load-bearing structure.

3. 03 · Motion is optical or mechanical

   Macro transitions are focus racks: the outgoing plane defocuses while the incoming one sharpens. Nothing slides, nothing bounces in from off-screen. Micro interactions are detents: the snap, tick and settle of a fine instrument.

4. 04 · Colour is signal

   The world is warm near-monochrome. Colour appears only when it means something: green is truth, hot orange is error, an accent is identity. And when something errs or falls out of focus, its edges fringe red-cyan: chromatic aberration, the lens catching the miss. Ration it: when everything fringes, nothing means anything.

5. 05 · Type comes into focus, not into size

   Hierarchy in text comes from focus and luminance, not from ever-larger headings. Display type is a voice, not a volume knob.

6. 06 · Warm precision

   A fine instrument in a warm room. Exactness without coldness: charcoal fields, amber focus-light, honest measurements, calm at rest and cinematic only in motion. And the work itself sits on lit paper: however the room is lit, the play surface stays the brightest plane on screen, because colour and type are judged truly against a light ground. Accessibility is part of the optics: the focused plane always reads, and reduced-motion users get fades instead of racks.

Specimens

The doctrine, running live. Click, hover, press.

Adopt it

The whole system is a handful of tokens. Start here and derive the rest:

:root {
  --rack-ms: 340ms;                       /* one easing for every rack */
  --rack-ease: cubic-bezier(.33,0,.15,1);
  --ab-red: rgba(255,70,70,.4);           /* aberration fringes */
  --ab-cyan: rgba(80,220,255,.35);
}
/* focus steps: the depth axis */
.fz-0 { filter: none; }
.fz-1 { filter: blur(2px) brightness(.92) saturate(.95); }
.fz-2 { filter: blur(5px) brightness(.82) saturate(.85); }
.fz-3 { filter: blur(9px) brightness(.68) saturate(.7); }
.fz-0,.fz-1,.fz-2,.fz-3 {
  transition: filter var(--rack-ms) var(--rack-ease);
}
/* error/deep-defocus only; ration it */
.aberrate-text {
  text-shadow: .6px 0 var(--ab-red), -.6px 0 var(--ab-cyan);
}

/* the lit bench: the play surface stays the room's brightest plane */
.paper {
  background: #f2ecdf;             /* warm sketchbook stock */
  color: #2a2118;                  /* drawing ink */
}

/* Rules of thumb:
   - animate blur only during transitions, never at rest
   - never blur a live canvas; dim it instead
   - the focused plane always meets contrast
   - prefers-reduced-motion: fades instead of racks */