How game websites carry identity without art #48
No Assignees
Notifications
Due Date
No due date set.
Blocks
#54 The ornament and frame component set
ShadowsOverWestgate/sow-nodebb-theme
#56 Page width and density system
ShadowsOverWestgate/sow-nodebb-theme
Reference: ShadowsOverWestgate/sow-nodebb-theme#48
Reference in New Issue
Block a user
Part of #47
Question
How do live game websites — not studio or publisher sites — carry a strong visual identity using chrome, typography, and ornament rather than photography? Look at the actual pages of Path of Exile, Warframe, RuneScape, EVE Online, and Albion Online, plus one or two smaller persistent-world or MMO community sites.
Come back with concrete, copyable patterns, not adjectives:
Note explicitly which patterns survive with zero images, since that is a standing law of this map.
Resolved. Findings committed as
docs/research/game-site-chrome.mdon branchresearch/game-site-chrome(commit dcadc72, not pushed).Method. Live shipped CSS and HTML only, fetched 2026-07-28, read directly — 19 properties: Path of Exile (+ its wiki), Warframe (+ forums, wiki), Old School RuneScape, RuneScape 3, OSRS Wiki, EVE Online (+ forums, EVE University wiki), Albion Online (+ forum, wiki), and five smaller worlds: Arelith (NWN persistent world), Project 1999, Discworld MUD, Aardwolf, Zalanthas. Achaea, UO Outlands and UO Second Age surveyed and discarded, reasons recorded. Every number below is a declaration in production right now.
The headline result
Only four big-studio home pages survive image removal, and two barely. EVE's home page is a
<video>and three headings. Albion's is 47 headings, every one a caption on a photo. RuneScape 3 renders its section headings as PNGs of words with the real text attext-indent:-9999px, and PoE does the same for forum category headers withalt=""— both sites literally have no headings with images off. So the copyable vocabulary is not in the big-studio home pages. It is in five places: EVE'sFramecomponent, Warframe'shome.css, the dense list pages of PoE and RuneScape, the OSRS Wiki's.tiletokens, and two twenty-year-old text worlds.Count: 68 patterns survive with zero images. 8 die. 3 survive rebuilt. 2 are bugs to design out. The zero-image law is not a handicap — nearly the whole vocabulary is CSS, and the image-dependent parts are the expensive bits that date fastest.
Frame vocabulary
The workhorse hairline is DARKER than the surface. PoE's forum: row
#1a1b18, ruleborder-top:1px solid #050505, header band#1e1f1e, zebra#0f0f0f— four values inside 6% lightness, and the divider is the darkest. Panel isborder:1px solid #1b1b1b; box-shadow:0 0 3px #1b1b1b— the shadow is a blurred copy of the border. No border anywhere in its 939 KB exceeds 2px. Westgate does the inverse (gold lighter than panel); worth prototyping the dark rule in #54. SURVIVES.EVE's
Frameis a full notched-panel system inclip-path, zero images. The border is not aborder— it is a filled div in#29353a/95% clipped to a 1px ring, over content at#212121/95%, so the hairline follows the notches. ~20 modifiers from three parameters: bottom-right chamfer always 10px; notch x-range 45→108px (small) or 108→191px (medium/large); depth 5px or 8px.border-radiusis0more often than any other value. Cautions: the ring can't animateborder-color, absolute notch offsets can exceed a narrow card, and a clipped element can't showbox-shadow. SURVIVES.Cheaper notch, use this first: EVE's card tab is three borders on a zero-height element —
border-bottom:5px solid #29353a; border-left/right:5px solid transparent; width:83px. Four lines, works at any density, and unlikeclip-pathit can ride a forum row. Warframe's wiki does a parallelogram plate withskew(30deg)+ innerskew(-30deg). SURVIVES.RuneScape has one panel rule, repeated 14× verbatim:
background:black; border:2px solid #382418; padding:7px 15px— nav boxes, pagination, tabs, dropdowns, login bar, hiscores buttons. It becomes a bevel by recolouring edges:border-top:2px solid #8E7246overborder-bottom:2px solid black. RS3's pressed button does the four-colour version (top/left #9f4000,bottom/right #f0d079). Soft surfaces:rgba(60,39,11,.5)wash +box-shadow:0 0 3px 3px #4a381f— no offset, 3px blur, 3px spread: a second frame, blurred. Four values carry all of it. SURVIVES.Warframe's
home.cssis the most stealable file found. Gold#ddc57dashsla(45,59%,68%,α)so alpha moves without the hue. Alpha ladder .5 / .15 / .1 (card border / structural hairline / wash) — Westgate's is .08/.14/.22, so Warframe's top rung is more than double. Then:border:1px solid hsla(45,59%,68%,.15)on an overlay:beforewithmask-image:linear-gradient(180deg,#000,rgba(0,0,0,.1)), full at top, 10% at bottom;border-top:1px solid hsla(45,59%,68%,.5)+linear-gradient(180deg,hsla(45,59%,68%,.1),transparent 32px);filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))instead ofbox-shadow, so the shadow follows a clipped or masked shape. All SURVIVE.Gradient borders, arrived at independently by two sites: Warframe
border-image:linear-gradient(to left,#1d1c20 50px,var(--panel-accent-color) 50px) 1(first 50px of the edge accented); Albionborder-image:linear-gradient(90deg,#FFFFFF00,#FFD972FF 50%,#FFFFFF00) 1(fades to nothing at both ends). Caveat: a gradientborder-imagekillsborder-radius. SURVIVES.A ribbon made entirely of borders — Albion's wiki banner:
background:#912e16; border:.875em solid transparent; border-left-color:#531405; border-right-color:#531405; line-height:0. A banderole, a very gothic shape, with no asset at all. SURVIVES.Parchment as an inset shadow, not a texture — Albion:
background-color:#f6f5f1; box-shadow:inset 0 0 120px rgba(102,81,35,.28). That is the entire aged-paper effect. Westgate'sinset 0 0 34px rgba(96,32,68,.11)is this device with plenty of headroom on both radius and alpha. SURVIVES.Panels with no border at all: Albion's cards are a
hsla(50,8%,72%,.5)wash + 10px padding + 18px rhythm, bleedingmargin:0 -6pxpast the column. Project 1999 has no border property on its panels —cellspacing="1"over.tborder{background:#D1D1E1}makes every cell gap a hairline, with three header tiers (#869BBF/#5C7099/#3E5C92) and two zebra values carrying the whole hierarchy in 6 KB of inline CSS. SURVIVES.What dies: PoE's ornate crests are nine absolutely-positioned PNG slices per frame (
tl/tr50×32,bl52×34,br51×35, two repeat-y side strips, two flanking pieces) plusborder-image:url(border1.png) 3 3 3 3 repeat; its status bar is a 359×41 sprite window; its top nav is a 119×50 sprite withtext-indent:-9999em. RuneScape's parchment caps,border.webp(slice 62), 26 nav bullet GIFs. RS3'spoint-border.png 40andbox-border-gold.png 18 round. Warframe's 105px filigree strips.Two things to notice anyway: ornament always lives in the left/right gutters of the column, 23–105px wide, never inside the content (PoE, Warframe and Albion's wiki reached this independently; Albion drops it entirely below 1385px). And Warframe recolours instead of re-exporting —
background-color:var(--shop-filigree-color,#ddc57d); mask:url(bg-shop-filigree.svg). If Westgate ever gets one ornament asset, ship it as a mask over a token, not as a coloured image — one file then serves every state, accent and forced-colors mode, versus PoE's nine slices and thirteen separator PNGs.Section headers: when one earns ornament
Warframe states it outright in shipped CSS — two parallel scales, not a header plus decorations.
.h1alt/.h2alt= title face +text-transform:uppercase+ 3rem/2.5rem +line-height:1.3–1.4. Plain.h5/h5= subtitle face +text-transform:none+ 1.4375rem +line-height:1.25. Same component, one class swap. And a section title earns emphasis by overriding one token —.HomeNewsTitle{--color-title:#ddc57d}— not by gaining a rule. Markup is<h2 class="h1alt HomeNewsTitle">: size class decoupled from semantic level. The rule: a header earns ornament by switching to the display face and uppercase. It does not earn ornament by gaining a rule, a flourish or a background. SURVIVES.The plaque — the cheapest big win, and Westgate has nothing like it. OSRS:
.banner__options{background:black; border:2px solid #382418; display:inline-block; padding:3px 15px; margin-top:45px}wrapping theh1plus one secondary link.display:inline-blockis the whole idea — a name plate, not a band. Reduced form on the same page is a bare<h2 class="slu-quick__title">. And.home .banner__options{display:none}— suppressed on home, because the logo does that job; you don't get both. Type ladder is fiveemsteps and nothing else: 3.5 / 1.9 / 1.5 / 1.3em / 15px. No tracking, no uppercase, no rules. SURVIVES.The straddling legend — same site:
.home-nav__box{border:2px solid #382418; position:relative}with.home-nav__title{position:absolute; top:-7px; width:100%; text-align:center}. A title sitting on its own panel border; on black the border just stops behind the text. A<fieldset>legend by hand. SURVIVES.The plaque is also the one primitive Albion carries across the density boundary. Four components share one rule —
.news-banner__headline, .news-category-header, .titled-box__headline, .top-table__headline { background:#441003; margin:0 -6px; padding:8px 10px; font-size:1rem; font-weight:700; text-transform:uppercase; color:#fff }— and the wiki repeats it byte-identically at#531405withmargin:-0.5em -0.5em 0.5em.margin:0 -6pxis the bleed-past-the-card-edge trick: the header is 12px wider than its container, so it reads as a band nailed across the card rather than a row inside it. (Itsbox-shadow:inset inset …is a shipped typo, so the plaque is in fact flat.) Strongest evidence for map #47's one-shell law: the thing that survived the density boundary was the plaque — not the frame, not the texture, not the layout. SURVIVES.The tick — EVE:
:before{content:""; background:#5ccbcb; width:4px; min-height:30px}(6px/34px at wide),margin-left:15–20px, on a heading withletter-spacing:0. Note EVE tracks its small labels heavily and its headings not at all — exactly Westgate's Engraving Rule. SURVIVES.The full-ornament centred header — EVE: uppercase
h336px weight 500 tracking 0, over a light uppercaseh426px weight 300 tracking.05em, over.headings_line{background:#154f5b; height:3px; margin:0 auto}animating width 0→340px. Two details worth stealing: the rule is#154f5b, a darker relative of the accent#5ccbcb, so it frames without competing; andline-height:55pxon a 24px title reserves the air that makes it read as a title page rather than a row. PoE's wiki does the eyebrow version with a bloom instead of a rule:.h1-1{font-size:26px;letter-spacing:.07em}over.h1-2{font-size:38px;bold}, both on a sharedradial-gradient(ellipse at center, rgba(154,2,0,.9) 0%, transparent 65%), headingtext-shadow:0 0 10px rgba(209,28,0,1). Very close to Westgate's existing etch — the radial bloom behind the heading is what's missing. SURVIVES..tile h2 { border:none }— the heading that knows it is inside a panel. OSRS Wiki: MediaWiki's defaulth2carries a bottom rule; the tile strips it, because a heading inside a bounded panel doesn't need its own boundary. Header ornament is conditional on the container. Its tokens are also the model for #55 — named for the panel, not the colour:--tile-border-color:#cabe9b,--tile-background-color:#f9f3eb,--tile-dark-bg:#5d6773, plus a six-step--body-main/-light/-mid/-dark/-borderramp. Its byline is an eyebrow before the heading with.tile .byline + h2{margin-top:-0.5em}. SURVIVES.Ornament as a character. Project 1999 prefixes every plaque header with
»and encodes nav depth in the number of glyphs —» Project 1999, then» » Forum Home,» » Wiki. Zalanthas uses✦as a section divider. Draw it (::before{content:""}, aria-hidden) rather than typing it, but the idea — one repeated mark meaning "this is a section" — is free and is the whole reason P1999's sidebar reads as designed. Note it also puts live data in the header string:» Online Users: 25,581. SURVIVES.Ornament as tracking — Discworld MUD, the purest case.
h1{letter-spacing:3pt; font-size:14pt; bold},h1.topborder{border-top:1px solid #BDB7B1},h3{border-bottom:1px solid #BDB7B1}— heading level encoded by which side the rule sits on, with two named opt-outs (h3.subhead,h3.plain) proving the rule is the default.#sidebar a{font-variant:small-caps}is the second and last ornament. Four colours total (#fff,#444,#BDB7B1,#E7E5E3), exactly one bounded panel type (blockquote), zero radius, zero shadow. This is the floor for an artless site, and it is defensible. But read it as evidence for Westgate's Engraving Rule, not against: Discworld gets away with 3pt on a compact humanist sans; Cinzel already carries the engraved weight in its letterforms and would disintegrate.The failure mode, cited only as that. PoE's forum category headings are server-generated PNGs — the base64 decodes to
{"string":"…","size":18,"fontColour":"rgba(206,197,159,1)","tPad":3,"lPad":6}— shipped withalt="", so a screen reader gets nothing where the section name should be. RS3 does the same plus two 70×80px sprite ornaments as:before/:after. DIES, and should. The buried correct instinct: PoE reuses that same#cec59flive in CSS —.layoutBoxTitle{color:#cec59f; font-size:180%; text-shadow:0 0 2px rgb(171,156,91)}.Divider inventory
Full 40-entry table in the doc, at weights 1 / 2 / 3 / 4 / 5 / 8 / 25px + glyphs. The distinct kinds, all zero-image unless noted:
1px — darker than surface (
#050505on#1a1b18); olive card rule (.news-article:after{background:#6B7B17;height:1px;bottom:0}, so first/last card have no stray edge); neutralhsla(0,0%,69%,.2); gold at .5; gold at .15 fading down via mask; fading at both ends (two techniques, below); part-accented along its length; inset 5% each side (.forumTable hr{margin:0 5%}); recoloured by role; 50%-width centred; top rule + 32px wash; full grid on both axes (RuneScapeth,td{border:1px solid #382418}); vertical 1px between nav items (height:50%; transform:translateY(-50%)); fromcellspacing; top rule (Discworld h1/h2) vs bottom rule (h3); dashed (1px dashed #80808080); dotted withcursor:help; and a double rule bevel — RS3 dropdown rowsborder-top:solid 1px #223843; border-bottom:solid 1px #000.2px — heading underline; dashed; top-light/bottom-dark bevel (
border-top:2px solid #8E7246; border-bottom:2px solid black);border:2px outset. 3px — centred animated#154f5b; heading underline. 4px — vertical tick; blockquote spineborder-left:4px solid #ECEDEE; sub-nav underline. 5px — three-border trapezoid tab. 8px — accent spineborder-width:1px 1px 1px 8px. 25px — CSS trapezoid bezel.The rule that dissolves, two techniques — pick by whether you need radius:
Route B should be Westgate's house divider.
PoE proves both routes in one codebase and the cheap one wins. It needs a divider whose colour encodes a class. For item rarities it shipped 13 separate PNGs (7–13px, one per rarity). For forum post roles it shipped one
hrplus aborder-coloroverride —.staff/.support/.valued-poster/.valued-thread .content-container hr{border-color:#a87a00}. Same requirement, 13 files versus one line, and the one-line solution is on the page players look at daily. Its own wiki goes further and tokenises outright: 20--poe-color-*properties + one.item-boxframe + a modifier class per rarity. That is the shape #55 should take.Role emphasis with no fill:
.forumTable tr.staff{outline:1px solid #db9f00; border:1px solid #db9f00}— five roles, five colours (staff#db9f00, support#867747, official#5e84ab, valued-poster#9d9d9d, valued-thread#614506), bothoutlineandborder* because table rows are unreliable about which paints. Same five recolour the quote blocks and thehr`. No tinted row, no badge, no icon. Directly applicable to Westgate's staff/DM posts, and better than a tinted background under the Sparing Red Rule. SURVIVES.The separator that doesn't get copied: Jagex draws all of them as pseudo-elements —
.news-article__time:before{content:'|'; margin:0 5px},.server-list__status-link:before{content:'['}/:after{content:']'},.breadcrumb li:before{content:'>'}. SoGame Updates | 22 July 2026has a pipe that isn't in the markup and a copied timestamp comes back clean. The OSRS Wiki reaches it from the other side:<span style="user-select:none"><b>•</b></span>. SURVIVES.On tracked caps — the honest count corrects the obvious guess.
text-transform:uppercaseoccurrences: Albion 109, Warframeapp.css77, EVE 72, RS3 responsive all of h1–h6 globally, PoE 6 in 939 KB, OSRS 1, Arelith/P1999/Discworld 0. Butletter-spacing: Albion two uses in 631 KB, RS3 responsive none in 388 KB, Arelith zero, OSRS one, PoE mostly negative (-.025em×19). Only EVE has a real tracking scale (.01–.2em) and it applies it exclusively to uppercase while giving prose negative tracking (-.01em). So: uppercase is near-universal; tracking is rare and caps-only. DESIGN.md's Engraving Rule matches EVE's actual practice exactly — keep it tight. The warning is against reaching for more tracking when a header needs presence; every site here answers that with the display face, the frame or the colour.For #59: two of the largest game sites ship Cinzel in production. PoE's font chunk has
@font-face{font-family:Cinzel; src:local("Cinzel-Regular"),url(/font/Cinzel-Regular.woff)}plusCinzel-Medium, alongside OptimusPrincepsSemiBold, FrizQuadrataC and four Fontin cuts. RS3 declares@font-face{font-family:"cinzel"}and uses it on tabs (font-size:2.2em; letter-spacing:0.04em), sidebar article titles, and inside hand-typed news posts. Also: nobody in the survey pairs two sans faces — RuneScape (Kingthings Petrock + Arial), Albion (Lora + Open Sans), Arelith (Neverwinter + Roboto Slab), PoE (Fontin/Friz/Optimus + Verdana). Cinzel + Jost is the same shape.Iconography
Very few, almost all load-bearing. A stat gets a word, not a picture. PoE prints
<strong>Threads:</strong> <span>14899</span>andPosts: <span>31657</span>— no icon, no tooltip; its only load-bearing icon is a 15×15 sprite for read/unread state. OSRS has skill icons in HiScores (the icon is the row identity) and three Grand Exchange trend markers; the whole home page has zero UI icons. EVE has essentially none in CSS. Arelith's 18 destination tiles carry no icons at all. P1999 has two icon types in the entire site.Where they'd reach for an icon, they use words or CSS: OSRS's sort controls are links whose text is literally
ascendinganddescending; its sort arrows arelinear-gradient(#1d4f1b,#61ca5c)circles with a CSS-triangle:after(red variant#990A03→#D83530); its external-link mark is a 24-pointclip-path:polygonin#90c040. EVE University's wiki main-page search control is a<div role="button">labelled🔍 Search the EVE University Wiki— honest about the cost of an icon system.Budget for Westgate: an icon only where the icon is the data. Two notes — Westgate inherits Bootstrap Icons / Font Awesome via Harmony, so icon fonts and inline SVG are not "images" for the zero-image law; this is the one place the law doesn't bind. Which makes
GAME_ICONS.mdmatter more than any ornament budget: decorative icons cut first, state icons last. And Warframe's technique —--icon-filter:invert(1),.Filigree.is-themed{filter:var(--filter-filigree)}, 18 faction variants all one property — is how one monochrome source serves gold, ash and wax-seal; prefercurrentColoron inline SVG over ahue-rotatechain. SURVIVES REBUILT.Texture — and the recommendation is: don't
Only one site ships one. Warframe:
background: top/172px 104px repeat url(bg-pattern-lotus.png); opacity:.25; position:absolute; inset:0; z-index:-1on three section pseudo-elements over#111. Section-scoped, never global, never behind body text. PoE's texture strip is overridden by a gradient on the next line and never renders. Albion ships none (its parchment is the 120px inset glow). EVE'sstars.jpgis art, not texture. The only CSS-generated texture in the entire survey is the Warframe wiki'srepeating-linear-gradient(-45deg, …)hazard stripe.The arithmetic on cheap displays is unkind. A tile at
opacity:.25over#111(RGB 17) with darks near RGB 40 moves each pixel by about 6 levels out of 255. A 6-bit TN/budget IPS panel quantises to 64 levels — steps of 4 — so a 6-level swing is one or two steps: it reads as banding, not grain, and panel dithering makes it crawl on scroll. On OLED, near-black is genuinely black and the same 6 levels are clearly visible, so it's stronger than intended. One declaration, three different outcomes.Verdict: DIES as shipped, and CONDITIONAL even with images. If Westgate wants grain, generate it (
repeating-linear-gradientat a fractional angle, or inline SVGfeTurbulencedata URI) — but the same quantisation applies, so: never behind body text; keep the swing above the 6-bit step (~8–10 levels, which means it will not be subtle — pick one); drop it underprefers-reduced-transparency/prefers-contrast:more. Honest recommendation: DESIGN.md already gets its texture from the velvet gradient, and Albion shows that device has room (120px radius, 28% alpha vs Westgate's 34px/11%). Warframe's live site and everyone else's absence both say stop there.Home-page IA with no hero art
Heading counts and survival: EVE 3 (a
<video>) — no. Albion 47, all photo captions — no. RS3 news 0 rendered — no. Warframe 16 — yes. OSRS 11 — mostly. Arelith ~20 — structure yes, mood no. Project 1999 — yes, completely. Discworld 4 — yes. The pages that survive are the ones whose home page is a news list or a directory, not a showcase.The block order, consistent across all survivors:
<p class="screenreader"><a href="#welcome">Skip to main content</a></p>as the literal first element in<body>is the one correct exception.h1+ one short paragraph. OSRS 67 words, Arelith 13.<a><img></a>banner that collapses (OSRS), or one fixed backdrop on its own layer (Arelith). Never a grid of art holes.Status is never above the fold, with exactly one exception: OSRS puts its player-count sentence third on the page. Everyone else has it in a rail plaque, a directory tile, a one-line link, or nowhere.
The news item worth copying verbatim (OSRS, and RS3 uses the same geometry and the same
#6B7B17rule — it has survived two brand redesigns):.news-article{width:540px;padding:20px 0},:after{background:#6B7B17;height:1px;bottom:0},__figure{float:left;width:175px},__details{float:right;width:350px},__sub{font-style:italic},__time:before{content:'|';margin:0 5px}. The thumbnail is a separate<figure>sibling — delete it and the details block is a complete, well-formed news item (the 350px float just becomes 540px). Category and date share one italic meta line with a real<time datetime>. The affordance is inside the sentence, not a button below it.The best zero-image answer to "no hero art" is Warframe's masthead:
A gold horizon glow, one gradient, 10vw tall, over a flat black field. And the art slot degrades cleanly because the overlay is
linear-gradient(to bottom, transparent 0 56px, #000 88px)— with the art absent, that gradient over nothing is flat black and no layout moves. Also note Warframe's lead story isgrid-row:1/span 3+font-size:2.5remagainst the others' 1.1875rem — hierarchy by span and type size, not by bigger art, so it survives losing the images. Its tiles shipalt="": Warframe declares its own news thumbnails decorative.Project 1999 is the leanest working home page found: logo, login row, navbar, then two columns — prose + 5 announcements, and a
width="190"right rail of eleven collapsible plaques (» Navigation,» Log in,» Online Users: 25,581,» Server Status,» Donate,» Stats,» Current Poll,» Recent Threads…). A fixed-width rail of small labelled plaques is a complete home page.Arelith needs a correction, and it's the useful part. Structure transfers perfectly:
h1+ 13-word tagline, then four press pull-quotes with attributions as the above-the-fold ("Arelith's players sink themselves into a world where their actions feel consequential." — Vice, plus PC Gamer, Massively OP, Engadget), then 18 destination tiles, each a linked title plus exactly one sentence, no icons, no images. Its display face is scoped to two strings only —--chakra-fonts-accent:'Neverwinter',serifon the logo and the one hero heading; every otherh2is plain bold 1.25rem with no rule;letter-spacingappears zero times. But: its atmosphere is 22 dimmed in-game screenshots behind translucent glass (position:fixed; filter:grayscale(30%)+ 50%-black scrim + 60s crossfade, panelsblackAlpha-700+backdrop-filter:blur(20px), all borders zeroed by Chakra preflight). Strip the images and you get black glass rectangles with Roboto Slab in them. Arelith is the cautionary case, not the model — right structure, mood leased entirely from screenshots. Westgate cannot make that trade, which is exactly why it needs the frame vocabulary Arelith skipped. (Two things to steal anyway: the one-sentence-per-tile rule, and press-quote-shaped text as an above-the-fold — Westgate has no press quotes but has epigraphs, proclamations, ledger entries; text set as a quotation reads as content, where a large empty ornament reads as a missing image.)Status and server widgets
Half of them don't have one. EVE has nothing — I checked the home SSR payload, the 1.07 MB JS bundle, the news pages, the forums,
/statusand/api/server-status; grepping fortranquility|players online|server.?statusreturnsbackend:"tranquility"and a recruitment URL, neither a widget. The count lives only in ESI:{"players":20008,"server_version":"3444265","start_time":"2026-07-27T11:02:58Z"}— the absence of a 200 is the offline state. Community sites display it; CCP doesn't. Albion's is a bare JSON endpoint (/statusand/serverstatusboth 404,status.albiononline.com403). Warframe's world-state widget lives on the community wiki. PoE has none at all —#statusBaris the account bar.The one good implementation is RuneScape's world list (
/slu). Five columns — World, Players, Location, Type, Activity — 318 rows:Six load-bearing details:
<p class='player-count'>There are currently 68,432 people playing!</p>,font-size:1.3em; text-align:center. No big number, no label, no gauge, no icon. It cannot look broken because there is no chrome to be empty.Players, cell37 players. A cell read out of context still makes sense; a screen-reader row is a sentence. No singular form in 318 rows;0 playersrenders as-is.-. Not blank, not "N/A", not "None", not a hidden cell. One character that keeps the row's rhythm and claims nothing.ascending/descending), brackets are CSS (:before{content:'['})..server-list__row--pvp .server-list__row-cell{color:red}over a uniform#362D1Awith no zebra. 70Activitystrings do the rest in plain words (Deadman - Permanent,High Risk World,Role-playing,Trade - Free).Header row bevel:
background:#362D1A; border-top:2px solid #8E7246; border-bottom:2px solid black. SURVIVES, 100% — every part is text in a table.Discworld's home form is one sentence with no box:
<p><a href="…?status">Game Status</a>: Driver <a>rebooted</a> about 33 days ago, 49 people logged in.</p>— the label is the link, the value is inline prose. Its detail page is<h1>System Status</h1>+ a bare unstyled label-colon-value table (Driver uptime: 33 days and 4 hours,Number of users: 44,Using MCCP: 36,Plain telnet: 8,Objects: 175759,Memory usage: 2140 MBytes) where44 = 36 + 8and two labels link into the in-game docs. SURVIVES.Two named bugs to design out, both live:
0as the resting value. RS3 ships<span id="playerCount">0</span> Onlineand re-polls only when<1 || isNaN— so a failed poll reads0 Onlineindefinitely, and on a cold fetch that is exactly what it shows. Arelith's/portalships<h2>Total players: 0 (0 Hidden)</h2>server-side, so with JS off or slow it states that the world is empty. Not a skeleton, not an em-dash — a confident0. A resting0is indistinguishable from an outage and, unlike a missing value, looks authoritative.<b><font color="green">UP<br>267per shard (Green/Blue/Red, labelsStatus:/Players:/Total Players:,<hr>between) — a shard that went down would print itsDOWNin green. Tags left unclosed, noDOWNstring and no unknown placeholder anywhere in the markup.Real contracts observed. Albion, 56 bytes:
{ "status" : "online", "message" : "Server is online." }— a machine enum plus a human sentence rendered verbatim, so the page never has to invent copy. Its weakness: no third value, so a fetch failure is indistinguishable from an outage. Arelith's/api/portalis richer: per shard{id, name, address, port, playerCount, state, startup}plus a top-levelhiddencount.stateis a numeric enum (8everywhere) with no published mapping;ids are non-contiguous (1,2,5,6,8,9 — retired shards left gaps);startupis per-shard, and five of six within 10 seconds of each other makes a coordinated restart visible in the data — uptime per shard tells you more than a boolean.Warframe's wiki has the label grammar for a clock, and it removes the loading problem entirely: three forms —
"<Entity> in"(recurring reset),"<Entity> arrives in"(scheduled),"<Entity> is present for"(window currently open) — with epoch, period and a format mask (D h m s) as data attributes, computed client-side from a server-seeded epoch. There is no loading state and no empty state because there is nothing to load. The only placeholder string in the whole page is the wordUnknown.Proposed contract for #51, synthesising Albion's shape + Arelith's richness + the three lessons:
statedrives styling (never the template),messagerenders verbatim,sincegives per-shard uptime,checkedAtlets the UI say "last heard from the watch 4 minutes ago" instead of pretending the number is live. Resting render is a sentence — a sentence has a natural unknown form ("The gates are unattended.") where a stat block's unknown form is a hole with a border round it. Missing field inside a row is-. Never render an empty framed panel: every ornamented empty container in this survey reads as a failed image; Warframe'salt=""and OSRS's collapsing<a><img></a>both show the right instinct — the optional thing is a child that disappears, not a slot that stays. Under the Sparing Red Rule,offlineis a state colour andunknownis Dust Text; red for "we couldn't reach our own endpoint" over-states it.One thing to steal outright: Arelith's portal also carries an in-fiction dual calendar —
15:15 on day 22 of month 3 (Ches), 190 AR (1390 DR). Arelith Reckoning plus Dale Reckoning. The best example in the survey of a status widget carrying setting rather than data — and it needs no server feed at all. Westgate has a city, a court and a calendar.Density
The measured gap is about ten to one, on one scale. Showcase section padding: EVE
120px×7,100px 0×5,80px×6,.Download{padding:90px 0 230px}, articlepadding-top:200px; Warframe128px,80px×7,60px×6; Albion120px,0 150px,60px×5; OSRS.content{padding:50px 75px}; PoE150px,140px. Dense cells: PoE5px×70 (its single most common value in 939 KB),10px×35,4px×17,2px×18; EVE20px×26,10px×23; Warframe8px×18,8px 16px×7; Albion forum7px×24. Not two systems — one scale at opposite ends. Westgate's--wg-space-*tops out at2rem, so there is no token for a showcase rhythm at all; #56 needs rungs above it or showcase pages get hand-written pixels.Widths. OSRS
.page-wrap{width:815px;padding:0 50px}→ 715px content; PoE forum and all showcase pages share 920px, withvertOrnate1giving820pxinside it — 50px of ornament gutter per side, ~11% of the column; EVE shell1310→1370px(xlWide 1680px) but prose capped at 850/700/600/500px; Warframe--page-content-width:1760pxbut single-columnmax-width:800px; Albion marketing67.5rem = 1080px, forum1240px, wiki1385px(dropping its side ornament below that); RS3 legacy1000px, responsive2600px; P1999, Discworld and Aardwolf have nomax-widthat all. Westgate's1420pxis a reasonable shell but far too wide as a measure — prose needs its own 715–850px cap. And if flanking ornament is wanted, that's ~11% of a column that isn't 1420px.The uncomfortable finding: most studios don't carry ornament into the forum.
secure.runescape.com/m=forum/forums302s to a news post, "A Farewell to our Forums" (<time datetime='2024-03-28'>), pointing at Discord, Reddit and the community wiki. The RS3 header still shows a "Forums" nav item; it links to the farewell.--primary:#dddddd; --secondary:#222222; --tertiary:#0f82af; --quaternary:#c14924; --header_background:#111111; --highlight:#11263b) and lets Discourse derive ~80 ramp steps. Plus exactly one custom line in the document: a webfont<link>. NoFrame, noclip-path, no chamfer, no notches, no tracked caps. The palette doesn't even match — forum links#0f82af, site accent#5ccbcb. Its category table is down to two columns:Category|Topics.#382418on black vs 1px#cabe9b; Kingthings vs default; 715px vs40emtiles). Same material, different vocabulary..layoutBox1 .layoutBoxFull .forumTheme— the same panel component as its marketing pages, same 920px, same near-blacks. Achievable precisely because that vocabulary is cheap: 1px#1b1b1b, 2px radius on the end caps, a 3-stop gradient band, a 4px warm inset.So map #47's one-shell law is more ambitious than four of six studios manage. The lesson: the shared vocabulary has to be cheap enough to survive a 25px table header row. EVE's
clip-pathframe is beautiful and cannot ride a forum row. PoE's band can. The three-border tab can. The plaque is the one thing Albion actually carried across. Design forpadding:5pxfirst and let showcase surfaces add — never the reverse.And the fallback if the law proves too expensive is not "make the forum plain". It's EVE's and Albion's real fallback: carry the identity in the copy. Every EVE category has a one-sentence description and 13 of 22 begin with the same three words — "The place for…" / "The place to…" (
Fiction Portal— "The place to discuss the lore of New Eden, and post in character."). Albion puts the game's own zone metaphor on the boards:Beginner's Questions— "This is the forums' 'Green Zone'.";Forum Banter— "This is the Black Zone of the forums. … Enter at your own risk." No CSS, no assets, and it is the highest-identity-per-byte move in the whole document. Available today.Mechanically, express density as Warframe does — one variable block per surface (
#home{--masthead-footer-height:10vw; --shop-bar-height:4rem; …}) withvar(--token, fallback)in every component, so a component is correct unscoped and re-tuned by one wrapper class. Better than PoE's seven theme classes sharing one rule. Caution for #55 from the same file: Warframe declares six font tokens (--font-family-navigation/-body/-title/-subtitle/-form/-button) and all six resolve toRoboto,Arial,Helvetica,sans-serif. Name the axes you actually vary.Against DESIGN.md / PRODUCT.md as they stand
Confirmed: gold as edging not paint (Warframe's identical
.5/.15/.1ladder); hierarchy by panel tone and border alpha not shadow (PoE's four values inside 6%); tracked caps restricted to small labels (EVE tracks only its caps and gives prose negative tracking; RuneScape ships one uppercase declaration; PoE tightens); Cinzel (PoE and RS3 both ship it); serif display + humanist/geometric sans body (nobody pairs two sans faces); red as state only (no site uses its danger hue as a surface); and restraint over ornament — Discworld and P1999 carry two decades of identity on four colours and no ornament at all, which is the strongest confirmation in the document.Missing, worth adding in #54, ranked by value per line: (1) the plaque; (2) the masked fading rule as the house divider, which brings the fading frame free; (3) the radial horizon glow as the no-hero answer; (4) the role ring; (5) the three-border trapezoid tab; (6) the band frame; (7) the straddling legend; (8)
.tile h2{border:none}— heading ornament conditional on container; (9)content:'|'separators; (10)filter:drop-shadowfor masked surfaces; (11) a wider inset bloom (Albion's 120px/28% vs Westgate's 34px/11%); (12) the border-only ribbon if a banderole is ever wanted.Deliberately not transferring: EVE's chamfer geometry (the
clip-pathtechnique is perfect, but a 10px 45° cut is a sci-fi signature — the gothic equivalent is a pointed or ogee edge, also aclip-path:polygonproblem, so keep the technique and reject the geometry); tiled texture; Discworld's 3pt tracking (right instinct, wrong typeface); any ornament needing an asset (every site with one maintains 10+ PNGs); Warframe's six-token font contract.Inputs to sibling tickets
-for a missing field, the two named bugs (0as resting value; colour on the template), epoch-seeded client-side computation where the datum is a clock, and the in-fiction date line as a status widget needing no feed.padding:5pxtest.--poe-color-*set and the OSRS Wiki's--tile-*/--body-*ramps as the worked examples (tokens named for role or panel, not colour); Warframe's six identical font tokens as the anti-pattern.1420pxis fine as a shell, far too wide as a measure (prose 715–850px); spacing scale needs rungs above2rem; density as one variable block per surface class; ornament gutters cost ~11%.What this does not answer
Wiki reader typography has no good reference. All five wikis read are community MediaWiki installs; the best shares a palette with its game site but no component, face or measure, and the worst share nothing. #58 will have to invent it — the nearest transferable pieces are the OSRS
.tiletokens and the four infobox patterns (PoE's.item-box, Warframe's1px dashed #80808080row rule, OSRS's2px solid var(--body-dark)label rule and itsheight:0.5em; border:0spacer-row idiom). Also unanswered: any modern dense list carrying heavy chrome (only PoE does it, and PoE's forum is a<table>); down-state renderings — every server checked was up, so the missing-data guidance is reasoned from the patterns rather than copied from an outage, and is worth re-checking during a real maintenance window; texture on real 6-bit hardware (5.2 is arithmetic, not measurement); and recruitment/gallery surfaces, which have no analogue in this set.Not readable, and no conclusion rests on them: Warframe forum CSS (Cloudflare), live PoE Wiki CSS (Anubis proof-of-work — Wayback used, dated in the doc), the English-language Albion board listing (Cloudflare).