aerulion / Nyx
Rev 01 / Monochrome
Night, the primordial ground
Two inks. Two angles. One mark.
The design language behind aerulion.net. Everything here is derived from one mark, an equilateral triangle with a 30/60 bolt cut. Nothing in it is here to decorate, so nothing in it has a reason to sit off the grid.
Back to the siteThe name
01 / 14
The system is named for the ground it is built on, not for anything it puts there. Every part of it carries that name and one plain noun, so a thing can be asked for by the name it is filed under.
Nyx is the Greek night, not dusk, not shadow, and not a mood. She is primordial: the ground that was there before anything was drawn on it, and the thing everything else is drawn out of. That is the exact relationship this system has with its two inks. In Hesiod she arrives near the beginning and most of what follows is her descendant, which is the other half of the fit: everything here is derived from one figure.
#000 is not a dark theme and not a background colour. It is the ground: the untouched surface, the state of every pixel nobody has claimed. #fff is not a colour either. It is the only thing that exists on that ground, and a figure is either drawn or it is not.
That is also why there are no greys. A grey is a half-drawn figure, a thing caught between existing and not, and this system has no vocabulary for that. Where a field needs to recede it thins until it is gone, so the ink stays absolute and the night stays absolute, and the whole hierarchy is built out of how much of the ground is still showing.
Lineage
02 / 14
Five older traditions are doing most of the work here. Each is taken in part, and the part that was left out is the more useful half of the description.
A design system that calls itself new is usually one nobody has read against its ancestors. A triangle, a hairline, a grid and a readout were not invented here; every one of them was settled long before this page. What is particular here is only which of them were kept, and how far the keeping was pushed.
So the names below are not badges, and not one of them is claimed whole. Each entry says what was taken and what was refused, because a system is described as much by the neighbour it declined to become as by the one it resembles.
The rules
03 / 14
These are the whole identity. If a change breaks one of them it is not a variation, it is a different system, and it belongs somewhere else.
I
Exactly #000 and #fff. No greys, no tints, no alpha on text. Hierarchy comes from size, position and density, never from dimming.
II
Both angles are taken from the mark. Panels bevel at 30°, the lattice is a 60° triangular grid, and there is no third angle anywhere in the system.
III
An in-plane rotation is off-grid for all but six frames of its cycle, so nothing here sweeps through one. Where a figure has to change orientation it snaps between on-axis positions, or it turns in four dimensions and is projected back.
IV
A 1px rule does the work a box, a card or a background would do elsewhere. Fills belong to the mark, to a primary button, and to the inverted state of a control under hover, focus or selection. Nothing else gets a surface.
V
Small uppercase mono readouts frame each block, the way a print registration mark or a telemetry panel would. A readout always names something true.
VI
Where a field recedes it thins. The lattice dithers vertices and segments in and out so it never renders a grey pixel. That is law I restated for anything generative.
Ground and ink
04 / 14
Two things exist here: the ground, and what has been drawn on it. There is no accent, no secondary and no tint ramp. A warning reads as a warning because of what it says and where it sits, not because it turned a colour.
The page, every panel, and the ground behind the mark. Never softened to a near-black. A near-black reads as a night with something lit behind it.
Every rule, every glyph, every fill. Never dimmed to carry hierarchy. That is what size and position are for.
The only permitted inversion is a solid white field carrying black type: a primary button, any control under hover or focus, and selected text. The only alpha in the system lives inside the unfold, on the shells it passes through, and it is spent on depth rather than hierarchy, never on text, a rule or an edge. The lattice, the one thing here that recedes, holds a flat #fff and thins instead. 21 : 1 is the contrast ratio that falls out of all of that.
The parts
05 / 14
Both angles come off the mark. Every named part below is one of them applied to a different job, which is why the system holds together without a style guide policing it.
| Token | Value | Governs |
|---|---|---|
| --tan-30 | 0.5773502692 | The one constant every bevel is derived from |
| --cut-x | clamp(26px, 2.6vw, 52px) | Horizontal run of the cut |
| --cut-y | --cut-x × --tan-30 | Vertical drop of the cut, never set by hand |
| --hairline | 1px | Every rule, border and registration mark |
| CELL / ROW | 40px / 40 · sin 60° | Lattice pitch |
| RADIUS / PULL | 420px / 26px | Pointer reach, and how far a vertex may travel |
| BAND | 34px | Clearance the lattice keeps from anything it finds |
The mark
06 / 14
The mark is drawn in four moves, and after the first two there is almost nothing left to decide. Every angle it ends up with was already implied by the triangle it started as.
01
Start with an equilateral triangle, apex up, side S. Its base angles are already 60°, so the first two edges of the mark are on-axis before anything else is decided.
02
Drop one vertex on the centre axis, exactly one third of the triangle’s height below its base. That single choice forces the two lower edges to 30°. The tail angle is not picked, it falls out.
03
The result is 0.75 triangle and 0.25 tail, so the height is S × 2 ÷ √3 and the box is exactly √3 : 2, width to height. The base line always sits at three quarters of the height.
04
A lightning cut is taken through the body, every edge of it running along one of the four boundary edges offset inward by a whole number of bands. The finished outline has no angle, and no width, the triangle did not already imply.
The bolt is not drawn freehand inside the silhouette. Each of the four boundary edges is offset inward by whole multiples of one band width, and every edge of the finished outline runs along one of those twelve lines. That is what makes each stroke and each cut come out the same width, and it is what leaves the mark with no measurement in it that was taken by eye.
The width every stroke and every cut in the mark is held to.
Four families of three, one family square to each boundary edge.
Fifteen edges, each one running along a line from that set.
| Edge | Axis | Bands in | Measured from |
|---|---|---|---|
| e0 | 150° | 0 | Tail, right |
| e1 | 60° | 1 | Apex, right |
| e2 | 150° | 2 | Tail, right |
| e3 | 30° | 2 | Tail, left |
| e4 | 120° | 2 | Apex, left |
| e5 | 150° | 3 | Tail, right |
| e6 | 60° | 1 | Apex, right |
| e7 | 120° | 1 | Apex, left |
| e8 | 30° | 1 | Tail, left |
| e9 | 150° | 1 | Tail, right |
| e10 | 60° | 2 | Apex, right |
| e11 | 150° | 0 | Tail, right |
| e12 | 30° | 0 | Tail, left |
| e13 | 120° | 0 | Apex, left |
| e14 | 60° | 0 | Apex, right |
The finished outline has fifteen edges, and every one of them is exactly on an axis: the outline is not fitted to the grid, it is solved on it, from a single side length. The counts below are not balanced, and were never meant to be: the bolt cuts the tail’s lower-right edge in two, which is why 150° carries five.
The resting state, and the answer wherever a single static mark is needed.
For large sizes and calm surfaces, and the first beat of every intro.
Inside a circular crop the mark is held to 84% of the radius, so the unfold never touches the edge.
The outline is classified into the four lattice directions, lifted into four dimensions, rotated there, and projected back down. That is why the mark can turn without ever spinning in the plane, and why every silhouette it passes through on the way is still built from 30° and 60° edges. Two arcs travelling the same way close a full turn, so a loop built that way has no seam.
| Measure | Value | Note |
|---|---|---|
| Outline edges | 15 | Every one exactly on an axis, by construction rather than by fitting |
| Triangle side | X = 24 | The one number chosen; every other measure falls out of it |
| Band | X (2√3 − 3) / 3 | One width for every stroke and every cut; 3.712813 at a side of 24 |
| Bounding box | √3 : 2 | Width is the triangle side, height is that times 1.1547 |
| Perimeter | 2(1 + √3) X | The length the draw traces; 131.1384 at a side of 24 |
| Base line | 0.75 H | Where the equilateral triangle closes and the tail begins |
| Tail drop | 0.25 H | One third of the triangle height, which is what makes it 30° |
| Module | 0.25 H | The tail drop, reused as the unit of clear space |
| Axis corners | 2w / 4w | Two corners of the cut sit on the centre line, which is what pins the band |
| Context | Minimum | State |
|---|---|---|
| Favicon, chat avatar | 16 px | Inked only |
| Profile avatar, app icon | 64 px | Inked; the unfold from 128 px up |
| Drawn outline | 96 px | Below this the hairline breaks up |
| 12 mm | Inked, solid black or solid white |
Spacing
07 / 14
Distance in this system comes from two places and nowhere else: a spacing ramp that doubles every second step, and a module of clear space read straight off the mark.
Steps alternate × 1.5 and × 1.333, which means the scale doubles every second stop. It is two interleaved octaves, 4 / 8 / 16 / 32 / 64 / 128 and 6 / 12 / 24 / 48 / 96, so any two adjacent steps are far enough apart to read as a decision. The bottom two stops exist because the ramp used to start at 8px, and everything finer than that had to invent a value: forty-two of them had, by the time anyone counted. The rules below are drawn at their true length.
Almost no gap on this site is fixed. A flow step doubles, which is exactly two stops of the ramp, so both of its ends land on the ramp too: it holds the lower stop below 640px, grows across the band, and reaches the upper one at 1280px. Because the ramp is geometric and the band is the same for every step, the vw coefficients come out as the ramp over again: 1.875, 2.5, 3.75, 5, 7.5. Each rule below is drawn at the width its step is resolving to right now, so narrowing this window walks them down their span.
One quarter of the mark’s height, the same drop the tail makes below the triangle’s base.
One module on all four sides, measured off the mark’s own box, holding nothing but ground.
One module from the mark to the first letter, and one module of ground around the pair.
The plate
08 / 14
There is one column, cropped by four rules pinned inside the viewport. Everything in that column is ranked by how short its line is: the title is the narrowest thing on the page and the small print is the widest.
Five measures, and a block takes the one its rank calls for rather than the one its container happens to offer. A longer line is a quieter line, so the ladder does the work a second type size would do elsewhere. The rules below are drawn in proportion to the longest of them.
Six widths, and no more. They are written as literals because a media query cannot read a custom property, which is the one place in this system a number is allowed to be loose in the stylesheet, so they are listed here instead. Nothing else may invent a seventh.
| Token | Value | Governs |
|---|---|---|
| --layer-field | 0 | The lattice, under everything it deflects around |
| --layer-page | 1 | The column and the footer |
| --layer-raised | 2 | A rail lifted clear of the panel it sits on |
| --layer-plate | 40 | The crop rules, the bleed and the gauge |
| --layer-entry | 60 | The skip link, which has to clear the plate |
| --layer-curtain | 90 | The routing curtain, over all of it |
| Token | Value | Governs |
|---|---|---|
| --plate-width | 1600px | The widest the column is allowed to run |
| --plate-gutter | --flow-xl | Ground held between the crop rules and the column |
| --plate-inset | clamp(0.5rem, 1vw, 1.15rem) | How far the plate sits inside the viewport |
| --gauge-inset | clamp(3rem, 7vh, 5rem) | Where the gauge starts and stops on the right rule |
A name is only worth having if the code answers to it. Every part above is filed in the source under the name it carries here, so a thing can be found by the word used to ask for it. If a part cannot be named in this table, that is the first sign it does not belong to the system.
| Part | Component or class | Module | Attribute or token |
|---|---|---|---|
| Nyx Mark | Mark, MorphingMark | mark-geometry, mark-hull, morphing-mark | data-morphing-mark |
| Nyx Rule | — | — | --hairline |
| Nyx Cut | .panel-cut | — | --cut-x, --cut-y, --tan-30 |
| Nyx Lattice | LatticeField | lattice-field, lattice-obstacles, distance-field | data-collide |
| Nyx Plate | Plate | — | --plate-width, --plate-gutter, --plate-inset |
| Nyx Gauge | .gauge | gauge | data-station |
| Nyx Curtain | Curtain | curtain | data-curtain |
| Nyx Glyph | Glyph | glyphs | GLYPH_BOX, GLYPH_CELL |
| Nyx Scale | — | — | --spacing-*, --flow-* |
Icons
09 / 14
An icon is not a second vocabulary bolted on beside the first. It is drawn on the lattice, at hairline weight, in the five directions this system already has. If a subject will not go on that grid, it does not get an icon.
Seven so far, and the list grows only when something on the page needs one. Every arrowhead opens 30° each side of its shaft; the descent runs at 30° because that is the direction a block already travels when it reveals. There is no down arrow, because a vertical is not one of the five directions.
Type
10 / 14
A face never takes another’s job. Headings are not set in Tektur, and a label is always mono, always uppercase, always tracked open.
Tektur
--font-family-accent
Wordmark
aerulion
700, set tight and always lowercase. Never used for headings or copy.
Chakra Petch
--font-family-display
Headings
Performance-focused plugins
600, uppercase, tracked slightly open. Also carries statistics and sub-heads.
Space Grotesk
--font-family
Copy
Professional Java development for custom Minecraft systems and long-term server architecture.
400 at 1rem, line height 1.6, measure held between 52 and 72 characters by rank.
IBM Plex Mono
--font-family-mono
Instrumentation
Node / 001 / Status / Active
400 at 0.6875rem, uppercase, tracked 0.2em. Tabular figures, so a rolling readout never reflows.
Eight fixed steps. Seven of them are the conventional text ladder, 11 and then even pixels from 12 to 24. The eighth is that ladder taken up one turn of the ramp, 24 × 1.5, for a statistic. Nothing larger is fixed: a heading is clamped against the viewport instead, so a title keeps its measure rather than its point size.
| Token | Value | Governs |
|---|---|---|
| --label-size | 0.6875rem | Every instrumentation label, at every size |
| --font-size-xs | 0.75rem | Code set in a table cell |
| --font-size-sm | 0.875rem | Notes, captions, table bodies |
| --font-size-base | 1rem | Running copy |
| --font-size-lg | 1.125rem | A lede, at the top of its clamp |
| --font-size-xl | 1.25rem | A sub-head in the display face |
| --font-size-2xl | 1.5rem | The standfirst |
| --font-size-3xl | 2.25rem | A statistic; the 2xl taken up one ramp turn (× 1.5) |
| --label-tracking | 0.2em | Tracking on every label; 0.16em below 768px |
Motion
11 / 14
Things draw themselves, ink themselves and deflect. Nothing eases in from nowhere, nothing bounces, and the system has to be complete with all of it switched off.
| Token | Value | Governs |
|---|---|---|
| --dur-xs | 250ms | A control inverting under hover, focus or selection |
| --dur-sm | 375ms | A stroke fading out from under the ink it was tracing |
| --dur-md | 500ms | The curtain covering and lifting; a node arriving |
| --dur-lg | 750ms | A block revealing; a rule drawing itself across |
| --dur-xl | 1000ms | A figure tracing its own outline; the intro hold |
Access
12 / 14
Nothing here is a concession. Two inks is the highest contrast a screen can render, one column is a reading order that cannot come apart, and motion that is construction is motion nothing depends on. The system pays for its access by being what it is.
Misuse
13 / 14
Each of these breaks a law, and each is the shortcut that gets reached for first. None of them are variations: a surface that does any of them is a surface in a different design language, and it should be given a different name.
01
A dimmed white is a half-drawn figure, and the system has no vocabulary for one. Where something must recede, thin it, space it further out, or take it away.
02
45° is not a rounding of 30°. The only right angle in the system is where two rules of the plate meet; every other edge is 30, 60, 120 or 150.
03
Nothing sweeps through an in-plane rotation. If a figure has to change orientation it snaps between two on-axis ones, or it rotates its four-axis lift and projects back down, which is the whole reason the unfold exists.
04
1px, at every size and every distance. A heavier line is a different idea, not a louder one. The focus ring is the single exception, and only because it has to be told apart from a border.
05
Surfaces belong to the mark, to a primary button, and to a control inverted under hover or focus. A card, a chip, a callout or a tinted panel is a different design language.
06
Not for a season, not for a partner, not to mark a state. There is no palette to extend, and a coloured mark is not this mark.
07
The box is √3 : 2 and it does not negotiate. Scale it, crop it, invert it. Never set its width and its height independently.
08
A circular crop belongs to the client, not to the mark. The mark is never given a ring, a backing panel, a shadow, a glow or a corner radius of its own.
09
The shells the unfold passes through are frames of an animation, not a variant of the mark. A static mark is inked, or it is drawn as one closed outline.
10
A glyph pulled from an icon set arrives filled, curved and off-axis, and breaks three laws before it is even placed. Two of them sat on this site for a year. Draw it on the lattice or do without it.
11
The wordmark is aerulion: lowercase, Tektur 700, set tight. Never title-cased, never letterspaced apart, never outlined, and never set in one of the other three faces.
12
The ground is #000, not “dark”. If the surface underneath is an image, a texture or a gradient, the mark does not go on it.
Applications
14 / 14
Every surface here is cropped by something the system does not control. One rule carries all of them: let every hairline bleed off an edge, so no crop can sever a frame.
600 × 240
128 / 256 / 512
1290 × 2796
1920 → 6016
