DisplayAnybody
Variable weight 100 to 900, width 50 to 150W06 / 01Development
The expertisejournal
Entry 01 / Development
The clearest evidence of how something is built is the thing itself. This is the architecture of the publication you are reading: seven routes around one transition engine, and the systems each of them relies on. Hover a node to read it, select a page to travel there.
W06 / 02Digital Design
Digitaldesign
Entry 02Design here is a system before it is a style: a type scale, a palette with a role for every colour, and a grid everything snaps to. These are the real tokens of this publication. Tune the scale, copy a colour, switch the grid on and off.
Modular type scale
- 67 pxUniverse
- 51 pxUniverse
- 38 pxUniverse
- 28 pxUniverse
- 21 pxUniverse
- 16 pxUniverse
Twelve column grid
Masthead / 12 columnsType is architectureEvery block starts and ends on a column line, so the page reads as one composition.
Palette / Select to copy
EditorialInstrument Serif
Roman and italic for voice and contrastTextInstrument Sans
Variable weight 400 to 700 for readingLabelsJetBrains Mono
Metadata, readouts and codeW06 / 03Creative Coding
Creativecoding
Entry 03Code is a drawing tool. This fragment shader runs once for every pixel on the right, sixty times a second. Its four uniforms are wired to the sliders, and the source beside it updates as you play.
1uniform float uTime;
2uniform float uFrequency; // 1.40
3uniform float uWarp; // 0.60
4uniform float uSpeed; // 0.25
5uniform float uHue; // 0.00
6varying vec2 vUv;
7
8vec3 palette(float t) {
9 vec3 a = vec3(0.55, 0.45, 0.6);
10 vec3 b = vec3(0.45, 0.4, 0.4);
11 vec3 d = vec3(0.0, 0.18, 0.42) + uHue;
12 return a + b * cos(6.28318 * (t + d));
13}
14
15void main() {
16 vec2 p = (vUv - 0.5) * 2.0;
17 float t = uTime * uSpeed;
18 float n = snoise(vec3(p * uFrequency, t));
19 p += uWarp * vec2(n, snoise(vec3(p * uFrequency + 7.1, t)));
20 float rings = sin(length(p) * uFrequency * 6.0 - t * 4.0);
21 vec3 color = palette(rings * 0.5 + n * 0.5);
22 gl_FragColor = vec4(color, 1.0);
23}
Fragment shader / live
W06 / 04Technology
The stack
Entry 04 / TechnologySix layers hold this publication up. Scroll to pull them apart, then hover a layer to read what it does here, on this page, right now.
W06 / 05Creative Process
Creative process
Entry 05Six stages, one continuous line. It is the same path this publication travelled from a brief to the page you are reading.
- Stage 01
Research
Study the references, the content and the people it is for. Learn what makes the best work in the field feel special before deciding anything.
- Stage 02
Concept
Name the idea in one line. Here it became Typographic Universe: a publication where type, motion and space speak as one language.
- Stage 03
System
Lay the foundation: typefaces, palette, grid, a constructed alphabet and the components every world will share.
- Stage 04
Motion
Design how things move: easing, timing, continuity. Each world receives its own rhythm, some fast, some deliberately calm.
- Stage 05
Build
Engineer in stages: architecture, navigation, scenes, transitions, then every page, without shrinking the vision along the way.
- Stage 06
Refine
Audit as a creative director and as an engineer: performance, mobile, accessibility and every detail, until it holds up.
