Finish the explorer's move onto the design system: type and the warn colour - #590
Merged
Conversation
warn was Tailwind's #fbbf24, the last of that default ramp still in the explorer. It sat 13.1 from the evidence mark measured as CIEDE2000, which is closer than any pair this palette already treats as distinct: the tightest accepted pair, amber against block-lifted, is 20.4. Saturation was the obvious lever and it does not work. Our "needs review" is hue 35 and the evidence mark is hue 32, so at this ground they are the same colour. Raising saturation at that hue tops out at 15.8, still short. Lowering it reaches 22.4 but only by making the warning duller than the thing it is warning about, which is backwards. So the lever is hue, and yellow is where a caution colour belongs. #e0ca1f measures 20.8 from amber, 30.5 from allow, 35.1 from block, 46.8 from muted and 54.2 from cobalt. Contrast is 11.97 on the floor, between block at 11.66 and allow at 13.08 rather than above the body text, and 9.16 against its own 12% chip tint. This matters beyond tidiness: amber means signed, and a warning that cannot be told from it means the one colour carrying proof is ambiguous. Measured after: zero contrast failures across 321 elements.
The explorer loaded no webfonts at all. Its stack was -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI" for text and ui-monospace, "JetBrains Mono", "SF Mono" for data, so it rendered in San Francisco on a Mac and Segoe on Windows while the website and the home page rendered in Literata and Libre Franklin. Same brand, different typefaces, chosen by the visitor's operating system. Colour, navigation and the wordmark had already been unified here. Type was the one axis left, and it is the most visible one. Literata carries headings, Libre Franklin carries everything read, IoskeleyMono carries everything verified. All SIL OFL, all served from this origin, 268KB for the four files. Headings drop from 600 to 500 and loosen their tracking, because Literata at a given weight is heavier than Libre Franklin at the same one. font-synthesis: none, so a missing weight fails visibly rather than being faked, and font-optical-sizing: auto, which is why Literata was chosen: a 28px view header and a 44px hero are drawn differently rather than scaled. Measured after: all three faces load, zero contrast failures across 330 elements.
creatornader
changed the title
The wordmark here was an amber orb beside the word "atrib" set in the interface face. The protocol site and the home page both carry the drawn Libre Baskerville outline and no orb, so the surface a reader lands on after following "check it yourself" was the one that looked like a different company. The orb also spent amber on being a logo. Amber marks signed things and nothing else, which is the rule that made it the wrong shape here even before the wordmark existed. Header geometry matches the other two now: 56px tall, 24px gutter, mark at 15px sized by its own ink rather than by a font size. The estate ladder regenerates with the same-tab rule, so moving between atrib surfaces stops opening tabs. github still opens one.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two remaining gaps in the explorer's migration. Colour, navigation and the wordmark landed in #574; this closes type and the last Tailwind default.
Type
The explorer loaded no webfonts at all. Its stack was
-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", so it rendered in San Francisco on a Mac and Segoe on Windows, while the website and the home page rendered in Literata and Libre Franklin. Same brand, different typefaces, decided by the visitor's operating system.Literata for headings, Libre Franklin for reading, IoskeleyMono for anything verified. All SIL OFL, all served from this origin, 268KB for four files.
font-synthesis: noneso a missing weight fails visibly;font-optical-sizing: auto, which is the reason Literata was picked, so a 28px view header and a 44px hero are drawn differently rather than scaled.Heading weight drops 600 → 500 with looser tracking, because Literata at a given weight is heavier than Libre Franklin at the same one.
warn
--warnwas#fbbf24, sitting 13.1 from the evidence mark measured as CIEDE2000. The tightest pair this palette already accepts as distinct, amber againstblock-lifted, is 20.4 — so warn was closer to "signed" than two colours we rely on telling apart.Saturation is ruled out by measurement, not taste:
#fbbf24today#e0ca1f, hue 53The amber band is too narrow to hold two meanings, so the lever is hue.
#e0ca1fmeasures 20.8 from amber, 30.5 fromallow-lifted, 35.1 fromblock-lifted, 46.8 frommuted, 54.2 fromcobalt-lifted. Contrast 11.97 on the floor, between block and allow rather than above the body text.This one matters beyond tidiness: amber means signed, and a warning that cannot be told from it makes the one colour carrying proof ambiguous.
Verification
In-browser, compositing translucent layers rather than stopping at the first: zero contrast failures across 330 elements, all three faces confirmed loaded.
Canonical:
atrib-web/designs/fable5-authored-territories-20260721/DESIGN-SYSTEM.md