EDGE//ARCHIVE Search the archive /

Glyph contact sheet

All sixteen symbols on the real page background, through both of the mechanisms that deliver them. If a glyph is missing, rimless or invisible here, the build has regressed.

The seven dice

Geometry, not art. A die's shape is its identity — a d6 is a square, a d8 a diamond, a d12 a hexagon — so each is drawn as an SVG data URI in its canonical fill with a lighter rim. At 1em the original pip faces were never legible; the shape now carries what they were failing to. The rim is what separates Setback from the ground and Force from a blank space.

Ability #44D433 d8 diamond
Boost #56A7E9 d6 square
Challenge #BC1414 d12 hexagon
Difficulty #510C91 d8 diamond
Force #E9E9E9 d12 hexagon
Proficiency #FFFF41 d12 hexagon
Setback #2A2A2A d6 square

The nine symbols

Stencils, not images. Solid black in the Obsidian snippet, so invisible on this background. Served as CSS masks with background-color: currentColor, they take whatever colour surrounds them instead — which is why the same file works in body text, in a heading, in a warning, and in print. currentColor inside the SVG does not work: an SVG referenced as an image renders in its own document context.

Success #StarWarsSuccess
Failure #StarWarsFailure
Advantage #StarWarsAdvantage
Threat #StarWarsThreat
Triumph #StarWarsTriumph
Despair #StarWarsDespair
Light Side #StarWarsLightSide
Dark Side #StarWarsDarkSide
Light Dark #StarWarsLightDark

Colour inheritance

The same three stencils in the three contexts the site actually puts them in. They should be body grey, pale teal and sodium orange in turn — never black.

In body copy Two and you are through.
In a teal heading Spend well
In an orange warning — somebody dies

In a sentence

Upgrade the check twice, then add for the crowd. Two and a — you get through the checkpoint, but somebody remembers your face.