CHIEF CONCEPT · A TENGELY
Chief Concept · 04 Apokalüpszisz · hero detail
A tengely
Five ways to draw the line between Chief and Concept
The green line is the axis between the two halves of the mark. On the left is the solid C: Chief, the leader, what already exists. On the right is the dotted C: Concept, the new thing taking shape. The line is the threshold between them, the moment of the shift.
„A váltásban hatalmas erő van.”
Today the line is 4 px wide inside a 34 px glow and runs the full 900 px of the page, through the headline, the subtitle, the primary button and the client strip. The five concepts keep the idea and replace the execution with one rule: the line lives only between the two Cs, it is one device pixel wide, and every one of its dimensions comes from the mark.
Now
Runs the full 900 px, from the header to the client strip
4 px core inside a 34 px glow (box-shadow)
Crosses the headline, the subtitle and the primary button
Research
What makes one line feel expensive
Ryoji Ikeda
test pattern · data.tron · spectra
Lines exact to the pixel and binary: on or off, never soft. Nothing is decorative, so the precision becomes the aesthetic.
→ Hard ends. No fades as decoration.
Territory Studio · GMUNK
Blade Runner 2049 · Oblivion interfaces
The screens feel advanced because they hold back: one accent colour, very fine strokes, and every element has a job in the story.
→ One colour. Every part explainable.
Nothing
Glyph Interface
The light tells you something: who is calling, how much of a timer is left. It is crisp and segmented, with no halo.
→ Light must mean something. Crisp edge.
Apple
Dynamic Island · visionOS
Shape changes follow the content and spring physics, so they feel inevitable. In visionOS light sits on the edges of materials.
→ Move by physics. Light belongs to an edge.
Dieter Rams · Braun
instrument scales and dials
Fine graduations are registered to the mechanism behind them, and colour marks a single function.
→ Every dimension comes from the object.
Teenage Engineering
OP-1 · engraved markings
Tiny markings line up exactly with the hardware; the detail is functional and rewards a closer look.
→ The detail must survive a 4× zoom.
Anthony McCall
Line Describing a Cone, 1973
A single projected line takes about half an hour to complete its form. The slowness is the material.
→ Change slower than attention reads as calm.
James Turrell
Skyspaces · knife-edge apertures
The edge of the opening is thinned until the sky reads as a flat plane of colour. The edge is where the work happens.
→ The edge itself is the event.
Rules for all five
Their lines feel precise because nothing is left to chance and nothing is there for effect.
- 01It lives only between the Cs, never beyond the full height of the C (y 205.2–354.8 px in the 1440 × 900 hero).
- 02It is one device pixel wide (1 / devicePixelRatio CSS px). Tükörél uses two.
- 03Every length comes from the mark: the height of the C, the height of its jaws, the rows of dots, one grid step.
- 04It sits on x = 50.00 u, the mark’s mirror plane, not on the optical centre of the gap (1.6 px to the right).
- 05Green only: #69D98D, or the site’s deeper #2FB266. Page neutrals are the only other tones.
- 06Each line is a glowing stick: a 1 device px core that brightens toward its centre and fades out at both ends, with a stepped halo of 3 px at 22 % and 8 px at 7 %. No blur, no box-shadow.
- 07Motion begins while or after the Cs land (~1100 ms). Idle movement stays under 2.5 px and repeats no faster than every 13 s.
Process
30 directions, 5 kept
Mirror seen edge-on
→ 01 Tükörél
String between the jaws
→ 02 Húr
Scale registered to the dot rows
→ 03 Mérce
Gap at the centre
→ 04 Nullpont
Line that grows at a steady rate
→ 05 Folyamat
01A shorter, thinner version of today’s beam Less of the same: still an effect, not a detail.
02Ends faded out with a gradient Dissolving the ends avoids deciding where they are.
03Laser with a white-hot core Reads as a lightsaber at any length.
04Glowing point at the centre The pulsing-dot cliché.
05A highlight travelling along the line A scan by another name.
06ISO centre line with symmetry marks Correct, but a blueprint: too technical for owners.
07Vernier: two scales meeting at the axis Precise, but 26 ticks is clutter.
08“VÁLTÁS” in Morse along the line Hidden meaning as a novelty.
09Segmented light strip, one segment per level Borrowed Glyph language; turns into a progress bar.
10A 2 px jog in the middle of the line Reads as a rendering error.
11Balance needle on a pivot Adds an object; the physics idea is better as Húr.
12Self-levelling laser that settles to vertical One good second, then nothing.
13Specular highlight that follows the cursor A shine sweep with extra steps.
14White specular twin (visionOS rim) Disappears on light grey; its idea went into Tükörél.
15Shadow gap with a lit edge Needs a shadow; reads as a drop shadow.
16Two parallel hairlines Reads as a pause sign.
17Afterimage lines toward the dotted C Speed lines.
18The line bowed by the pull of the Cs At rest it just looks bent.
19Visible only during the intro The meaning has to stay on the page.
20Length that encodes the time of day A data gimmick nobody would read.
21Very slow colour drift An opacity loop in disguise.
22Solid upper half, dotted lower half Puts the shift on the wrong axis: top/bottom, not left/right.
23Half-pixel solid beside half-pixel dotted Only visible under a loupe.
24Registration crosshair at the centre HUD.
25An echo drifting toward the dotted C A sonar pulse.
01 / 05
Tükörél
The mirror’s edge
The line is the mirror of the Tükör mark, seen exactly edge-on. Chief looks into it and Concept is what comes back. It is green because the edge of real glass is green.
Live
4× detail · live
C top · 28 u
jaw tip · 35.28 u
centre · 50 u
jaw tip · 64.72 u
C bottom · 72 u
1 device px on a 2× display = 2 px here. Dashed guides are construction only.
Spec
Length
149.6 px = 44 u, the full height of the C it reflects (y 205.2 → 354.8). A mirror has to be as tall as what it shows.
Thickness
2 device px (1 CSS px on retina): 1 px glass on the Chief side, 1 px backing on the Concept side
Colour
Glass: a glowing stick, #69D98D at the ends → #1FCB66 at the centre, fading to 0 at both ends · backing #151518 40 % · glass face #69D98D 12 %, far edge 45 % (only while turned)
Position
Split exactly on x = 50.00 u (720 px), the mark’s mirror plane · 20.9 px from the C’s jaw tips, 24.1 px from the nearest dots
Intro
Appears at 400 ms turned 14° (face 14.5 px wide), 160 ms fade, cubic-bezier(.2,.8,.2,1) · turns edge-on 500 → 1350 ms, 850 ms, cubic-bezier(.3,0,.15,1): it closes as the Cs land
Idle
Turns ±0.9° about its own axis, 22 000 ms period, sinusoidal, from 4 000 ms (amplitude eased in over 4 000 ms) · the visible face never exceeds 0.94 px
Mobile
101.2 px (44 u at 2.3 px/u), same 2 device px, same sequence 300 ms earlier
Reduced motion
Edge-on and still
Lineage James Turrell (the edge is the event) · Apple visionOS (light on the edge of a material)
375 × 812 · mobile · live
Reduced motion · still
With reduced motion the site switches to its vertical layout. The line is drawn in its final state and nothing moves.
02 / 05
Húr
The string
The axis is a string held taut at the height of the two Cs’ jaws. The moment they land it is set in motion once, then holds still: the power in the shift is tension, and here you can see it.
LiveMove the cursor across the axis between the Cs to pluck it.
4× detail · live
C top · 28 u
jaw tip · 35.28 u
centre · 50 u
jaw tip · 64.72 u
C bottom · 72 u
1 device px on a 2× display = 2 px here. Dashed guides are construction only.
Spec
Length
100.1 px = 29.44 u, exactly between the heights of the jaw tips (y 229.95 → 330.05): the Cs hold it where they are open
Thickness
1 device px
Colour
A glowing string: #69D98D at the ends → #1FCB66 at the centre, fading to 0 at both ends
Position
x = 50.00 u · bends as a quadratic bow, maximum at y 280, the centre of both Cs
Intro
Strung at 1000 ms (120 ms, cubic-bezier(.2,.8,.2,1)) · set in motion at 1250 ms as the Cs land: d(t) = 1.8 px · e^(−t/340 ms) · sin(2π · 3.6 Hz · t), still after ≈ 1.5 s
Idle
A 0.5 px tremor every 13 000 ms (first at 8 000 ms), τ = 240 ms · crossing the axis with the cursor plucks it, 0.4–1.6 px by speed
Mobile
67.7 px, amplitudes × 0.68, tremor only (no cursor)
Reduced motion
Straight and still
Lineage Apple Dynamic Island (motion from spring physics) · Teenage Engineering (tactile honesty)
375 × 812 · mobile · live
Reduced motion · still
With reduced motion the site switches to its vertical layout. The line is drawn in its final state and nothing moves.
03 / 05
Mérce
The scale
The axis is a scale: smooth on the leader’s side, graduated on the concept’s side, with one mark for each of the 13 rows of dots. The new is measured against the leader.
Live
4× detail · live
C top · 28 u
jaw tip · 35.28 u
centre · 50 u
jaw tip · 64.72 u
C bottom · 72 u
13 dot rows · 3.3 u
1 device px on a 2× display = 2 px here. Dashed guides are construction only.
Spec
Length
134.64 px = 39.6 u, from the first to the last row of dots (y 210.64 → 345.28)
Ticks
13, one per dot row, pitch 11.22 px (3.3 u) · 2.2 px, 4 px at the first, middle and last row · Concept side only; the Chief side stays smooth
Thickness
1 device px, line and ticks
Colour
Glowing stick #69D98D → #1FCB66 at the centre, fading at both ends · ticks #2FB266, lighter toward the ends
Position
x = 50.00 u · centred on the middle dot row (y 277.96), 0.6 u above the C’s centre, because the scale belongs to the dots
Intro
Line extends from the middle row, 1200 → 1680 ms, cubic-bezier(.2,.8,.2,1) · ticks engrave outward from 1260 ms, 38 ms stagger per row, 220 ms each
Idle
None. A scale does not move; everything else is measured against it
Mobile
91.1 px, pitch 7.59 px, ticks 1.5 / 2.7 px
Reduced motion
Identical to the resting state
Lineage Dieter Rams / Braun (registered graduations) · Teenage Engineering (engraved markings)
375 × 812 · mobile · live
Reduced motion · still
With reduced motion the site switches to its vertical layout. The line is drawn in its final state and nothing moves.
04 / 05
Nullpont
The clear point
Two lines of light stop one grid step short of each other. The shift begins in the empty point between them: the clear, transparent starting point of Apokalüpszisz.
Live
4× detail · live
C top · 28 u
jaw tip · 35.28 u
centre · 50 u
jaw tip · 64.72 u
C bottom · 72 u
1 device px on a 2× display = 2 px here. Dashed guides are construction only.
Spec
Length
Two segments of 44.44 px across the mouth of the Cs (y 229.95 → 274.39 and 285.61 → 330.05)
Gap
11.22 px = 3.3 u, one step of the dot grid, centred on y 280, the centre of both Cs
Thickness
1 device px core, stepped falloff 3 px at 20 % and 5 px at 8 % (device px): ≤ 1 CSS px each side, no blur
Colour
Each segment is its own glowing stick: #69D98D → #1FCB66 at its centre, fading to 0 at both ends
Position
x = 50.00 u
Intro
Both segments grow from the jaw heights toward the centre and stop short, 1100 → 1860 ms, cubic-bezier(.16,1,.3,1)
Idle
The gap opens 11.22 → 13.62 px and closes, 16 000 ms loop, sinusoidal, from 3 000 ms
Mobile
Segments 30.1 px, gap 7.59 px (opens to 9.2 px)
Reduced motion
Gap fixed at 11.22 px
Lineage Ryoji Ikeda (presence and absence, exact) · James Turrell (the opening is the work)
375 × 812 · mobile · live
Reduced motion · still
With reduced motion the site switches to its vertical layout. The line is drawn in its final state and nothing moves.
05 / 05
Folyamat
The process
The line starts as a point, grows at a steady rate until it is exactly as tall as the leader, then turns permanent. New concept, steady progress, standard: the client’s own method, performed in 38 seconds.
Live
4× detail · live
C top · 28 u
jaw tip · 35.28 u
centre · 50 u
jaw tip · 64.72 u
C bottom · 72 u
1 device px on a 2× display = 2 px here. Dashed guides are construction only.
Spec
Length
Grows from a 4 px seed to 149.6 px = 44 u, the full height of the leader’s C, centred on y 280
Thickness
1 device px
Colour
Glowing stick #69D98D → #1FCB66 while it grows; deepens to #2FB266 → #178A4A once it locks
Position
x = 50.00 u
Intro
The seed appears at 1200 ms (120 ms, cubic-bezier(.2,.8,.2,1))
Idle
Grows linearly 1600 → 37 600 ms, 4.04 px/s (linear because steady progress is the point) · locks at 37 600 ms, 600 ms colour change, cubic-bezier(.2,.8,.2,1) · then still
Mobile
Grows to 101.2 px over the same 36 s
Reduced motion
The locked state: 149.6 px, #2FB266
Lineage Anthony McCall (duration as material) · Nothing Glyph (light as progress)
375 × 812 · mobile · live
Reduced motion · still
With reduced motion the site switches to its vertical layout. The line is drawn in its final state and nothing moves.
Critique
Ranking
- 1TükörélThe only concept where the line is part of the mark rather than added to it. The family is called Tükör; this line is the mirror. The green needs no brand argument: the edge of real glass is green. At rest it is a still 1 CSS px line, and its one real movement happens while the Cs land, so it never competes with them afterwards.
- 2MérceThe most rigorous: 13 marks for 13 rows of dots, smooth on the leader’s side, graduated on the concept’s. It rewards a zoom and carries no motion risk. It loses to Tükörél because at a glance ticks can read as a ruler or a UI control, and the idea depends on seeing the dots as rows.
- 3HúrThe most alive, and the most direct reading of “hatalmas erő”: power as tension. One vibration on landing is right; the idle tremor is what I would test hardest, because a second movement on every visit can start to feel playful.
- 4NullpontThe closest link to the clear starting point of Apokalüpszisz. But a line with a gap is the most familiar form of the five, and at 375 px the gap is 7.6 px, where it can be mistaken for a rendering fault.
- 5FolyamatThe best story and the weakest detail.
Ship
01 Tükörél
It is the only concept that comes out of the mark’s own idea, and it explains its colour without a brand argument. It is still at rest; its one real movement happens while the Cs land, so it never competes with them afterwards. Mobile and reduced motion are the same design at a different scale.
Caveat: on 1× displays its two device pixels merge into one 1 px line, so the glass-and-backing reading needs a retina screen. It still reads as a clean hairline there.
Biggest flaw of the weakest
05 Folyamat
It is never the same line twice. Its length depends on how long the visitor has stayed, so most people leave before it finishes its sentence, and every screenshot, press image and pitch deck shows a different, unfinished axis. A brand detail has to be the same every time you see it.