The canonical design identity for the whole Doozer ecosystem. Every human-authored surface (doozer.work, claim/auth/admin, roots, LiveMusicTonight, GoHe.re, Wuz.ai, AwesomeAddresses) shares one skeleton (neutrals, type, chrome, voice) and varies only its accent hue, so the network feels like one building with differently-lit rooms. Use this to build production-ready UI fast and on-brand.
Doozer builds. The personality is an industrious, honest builder: useful, grounded, warm, confident, a little utilitarian. Never slick-for-its-own-sake, never hype, never a dark pattern. The sign-off is the tagline "We Build Because." The feeling: someone quietly built you something good, and it works. Optimistic green, warm paper, a spark of gold.
doozerMarkSvg() in includes/doozer-brand.php. It replaced a 3D construction helmet on a gear.
The helmet named the inspiration literally, and the inspiration was never the point. In Fraggle Rock the Doozers are not memorable for what they wore — they are memorable for what they built: crystalline lattice, assembled tirelessly and joyfully, eaten, and built again. The legacy worth keeping is the structure, not the worker.
The mark is a D built from a grid, most cells set, one gold, one still open. It reads three ways at once:
| reading | what it is |
|---|---|
| physical | a street grid, a block, a town from above |
| digital | a pixel grid, a data structure, a disk defragmenting |
| the product | an open cell is a place nobody has opened yet |
The third reading is the software. It is the same idea as the blueprint plate the directory draws for an unopened listing, so the brand and the product finally say one thing. 1994's pixel grid and what we build with now are the same lattice at different resolutions.
The incompleteness is the point. The cells are ordered as if built up from a foundation: base and body set, the gold cell going in at the top edge, one outline beside it waiting. The mark is unfinished because the network is.
Rules: drawn from currentColor plus one accent, so it inherits ink on any surface and needs no light/dark variants. Below 20px every cell fills solid — the story is for sizes where it can be read. 1.3KB of vector in place of a 578KB PNG. Static files: assets/images/doozer-mark.svg (on green, for favicons) and doozer-mark-mono.svg.
Two earlier cuts were built, screenshotted and rejected: a 5x5 whose two special cells read as stray teeth, and a 7x7 three-step fade that destroyed the silhouette below 24px. Neither survives in the code.
Every property shares the same skeleton and changes only its accent hue:
muted / line), the type system, the logo lockup + "We Build Because." sign-off, the network footer, the sponsor bar, the voice, and the component shapes (radius, shadow, buttons, inputs, focus).
Moving from doozer.work to LiveMusicTonight to GoHe.re should feel like walking between rooms of one building: same architecture, same materials, a different color of light. This is the coordination the operator wants: distinct, not uniform; unmistakably one network.
--paper:#faf8f2 warm page ground --line:#e4e0d3 hairline borders
--cream:#f2efe4 secondary ground --card:#ffffff raised surfaces
--ink:#111b14 near-black green ink --ink-soft:#33463a body-dim
--muted:#5a6b60 captions / meta
Dark grounds (hero bands, dark sections): #0a0f0b #0d1a12 #111b14 #1a2e20.
--green:#12833c primary brand green
--green-dark:#0c5c2a buttons + small text on light (AA)
--green-bright:#29b356 hover / lively accent
Retuned Aug 2026, deeper and more luminous than the old #1f9d3f. The colours were never the problem; the PAIRING was. Safety-green beside hi-vis amber in equal measure is a work-site palette, and it was carrying more of the construction signal than the helmet did.
--gold:#ffc107 the piece being set — and nothing else
--gold-deep:#c98a00 gold as text on light
Gold is no longer a co-equal brand colour. It appears once, small, as the active cell in the mark and as a genuine highlight. Green carries the identity.
--ink on --paper.--green-dark bg + white text (AA). Do NOT put white text on--green (#1f9d3f is AA-large only) or on --gold.
:focus-visible (gold outline works on every ground).
:root{
--paper:#faf8f2; --cream:#f2efe4; --ink:#111b14; --ink-soft:#33463a;
--muted:#5a6b60; --line:#e4e0d3; --card:#fff;
--green:#12833c; --green-dark:#0c5c2a; --green-bright:#29b356;
--gold:#ffc107; --gold-deep:#c98a00;
--accent:var(--green); --accent-dark:var(--green-dark); /* override per property */
}
A page only needs to redefine --accent / --accent-dark to reskin for its property. (Centralizing these as a brandCssVars() PHP emitter is the natural next step so no surface hand-copies them.)
| Property | Accent | Ground | Feeling |
|---|---|---|---|
| Core (doozer.work, claim, auth, admin) | builder green #12833c / #0c5c2a |
paper | the workshop |
| NearByMeNow | star gold #f5a623 (+ the niche-color rainbow for content) |
paper | the town square |
| LiveMusicTonight | electric violet #8b5cf6 + magenta #ec4899 highlight |
dark-first (#0d1a12) |
after dark |
| GoHe.re (gatherings) | warm tangerine #f97316 |
paper | come together |
| Wuz.ai (presence) | electric cyan #06b6d4 |
paper / light | you are here, now |
| AwesomeAddresses (homes) | slate #334155 + gold |
paper | home, premium |
| Doozer.Cloud / personal | adaptive (Vibe System: Mood x Energy) | user-chosen | your world |
The accents are hue-distinct but all sit on the SAME neutrals and type, so they read as siblings. Directories (NBMN) also use the network-wide category-color system for content chips; the property accent governs its chrome.
System sans everywhere: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif. This is a deliberate choice, not a default: it is fast, free (no webfont cost or FOUT), universal, and its plainspoken honesty is on-brand for a builder. The character comes from weight, scale, tracking, and the green — not a novelty face.
size clamp(2rem, 7vw, 3rem), line-height ~1.05.
--ink-soft for long prose.letter-spacing:.16em, uppercase, weight 800, --gold-deep.ui-monospace, SFMono-Regular, Menlo, monospace): domains, codes,data, addresses.
Exception: Doozer+ bespoke sites and the 100 muse families may use expressive display faces — that is the paid tier's and the product's differentiation. The network chrome stays system-font.
--card on --paper, 1px solid --line, soft shadow0 18px 40px -24px rgba(17,27,20,.5). Primary cards get a 5px left border in --accent.
Subtle and orchestrated, never scattered. A single fade-up on load (translateY(10px)->0, ~0.6s, staggered 60-80ms) is the house move. Always wrap in @media (prefers-reduced-motion: reduce) and disable transforms.
--accent-dark bg, white, radius 11px, weight 800,:active nudges 1px, :focus-visible gold outline.
--paper bg, --ink text, 1.5px --line border.--paper bg, 1.5px --line, focus = accent border + soft accentring. Body-size text.
domain), a cached page screenshot (or a branded placeholder), and a tap-to-open row. See includes/claim-listing.php claimPreview().
(network-footer, sponsor-bar); every property and every muse site carries them so even a wild site feels networked.
Plain, active, warm, confident. Name things by what the user controls. Errors are honest and helpful, not apologetic or vague. No em-dashes in user-visible copy (periods / commas / ·); apostrophes fine. No slop, no hype, no invented taglines (the tagline is fixed: "We Build Because."). See the mission and includes/design-standards.php.
AA contrast (rules above), visible keyboard focus, prefers-reduced-motion respected, mobile-first, body >= 16px, real alt/labels.
per-root themes like elks) and the wrappers around every site (footer, sponsor bar): governed by this brand system.
deliberately diverse; that variety IS the product, governed by design-standards.php + muse-apply.php. They still wear the shared chrome.
Tokens currently declared inline on includes/landing-page.php and includes/claim-listing.php; category content color in includes/niche-colors.php; site-generation rules in includes/design-standards.php. Next step to move faster: a brandCssVars($property='core') emitter (a small includes/brand.php) so any new page drops in the tokens + its accent in one line instead of re-declaring them. This node is the source of truth until then.