A field guide to living worlds.

01 / Identity

The complete logo family.

Primary use is ink on chalk. Use chalk or mint artwork on a quiet ink background. Every production logo is supplied separately as an outlined SVG, a vector PDF and transparent PNG exports. Black and white masters are included.

The compact wordmark is a fixed outlined composition derived from IBM Plex Sans Condensed Bold. Use the artwork; do not reconstruct it by typing DUSK.

02 / Logo rules

Protect the shape and the space.

Reserve 0.5H on every side, where H is the symbol height. The asset files are tightly cropped; add the space in layout. The app icon has its own fixed padding.

Asset	Minimum
Primary horizontal	160px wide
Signature / product lockup	240px wide
Stacked / wordmark	96px wide
Standard / micro symbol	32px / 16px high
Built with Dusk	140px wide
Outline study	96px high

Below 32px high use the micro symbol: it removes the thin path and enlarges the central node. Do not stretch, rotate, add effects, redraw the gaps, type a replacement wordmark or place the logo on a busy image.

View the size and background proof

03 / Color

Chalk first. Mint for action.

70% chalk / 20% ink and field / 8% mint / 2% signal. Proportions describe brand layouts; they are not quotas for charts or data panels.

Use ink for small text on chalk (13.79:1), or on mint (11.46:1). Field is for diagrams; small muted text uses #47615B on chalk and #B2C8BD on ink. Orange is an indicator and illustration accent. Success, warning, error and focus colors are separate semantic tokens, paired with words or icons.

HEX / RGB / CMYK CSV · GIMP palette · Vector palette · Brand tokens · Light tokens · Dark tokens

sRGB HEX values are the color masters. CSV CMYK values are unprofiled approximations; convert through the intended printer profile for production.

04 / Typography

IBM Plex. Three roles.

Web starting scale: hero 72/78, page title 48/52, section 32/38, reading text 16/25, controls 14/20, metadata 12/18px. Keep paragraphs naturally spaced; reserve tracking for short technical labels.

Self-hosting rules are in styles/fonts.css. Original OFL licenses are in fonts/licenses/. Official source URLs and weights are recorded in fonts/sources.json.

05 / Graphic language

Structure that explains.

Use a 4px spacing grid, 24px gutters, square corners and fine 1px rules. Registration ticks, contour lines and isometric construction grids sit in margins and support the content.

12 separate SVG icons / 24-unit grid / 1.5-unit strokes / square ends. Inline SVG uses currentColor. A sprite is also supplied at icons/ui/sprite.svg.

06 / Illustration

The world as a specimen.

Graphite pen lines, mint washes, contour layers and one small orange focus. Keep broad silhouettes and make every layer legible. Shared activity and place lead; characters stay small.

Keep logo and copy separate from illustration. Preserve the full terrain silhouette or make a deliberate detail crop; never distort it. These are generated brand illustrations. Use actual in-engine screenshots when demonstrating what Dusk renders.

07 / Interface style sheet

Clear tools, day or night.

Use 44px interactive targets, a visible keyboard focus ring, 140ms feedback transitions and labeled status feedback. Honor reduced motion. Keep rich illustration outside precise editor work areas.

<link rel="stylesheet" href="branding/styles/brand.css">
<main class="dusk-brand" data-dusk-theme="light">
  <h1>World Atelier</h1>
  <button class="dusk-btn">Create a world</button>
</main>

Component style sheet · CSS variables · Webfont declarations

08 / Brand architecture

One engine. Many worlds.

Dusk is the master brand. World Atelier, Observatory and Physics Lab are its tools. Darkwind keeps its own game name, character art and interface identity. Use the smaller Built with Dusk badge in game credits or a footer; it supports the game brand.

Voice: specific, curious, capable.

Lead with what someone can do. “Inspect the world. Change what happens.” “Build a place. Invite someone in.” Keep the existing tagline, “Worlds worth sharing.” Prefer active verbs and concrete examples to fantasy jargon and grand claims.

09 / Applications

Ready to put to work.

SVG favicon · ICO favicon · 180px touch icon · 192px app icon · 512px app icon · Web app manifest

Campaign SVGs are self-contained; imagery and outlined text travel together. Change template copy in source/build_assets.py and rebuild. The letterhead leaves its content area open.

10 / Handoff

Separate files. Reproducible sources.

Package instructions · Brand specification · Eight-page PDF guide · Built-in image-generation prompts

To rebuild, install source/requirements.txt and librsvg, then run build_assets.py, build_guide.py and validate_package.py from source/. The supplied files work without rebuilding or network access. prepare_fonts.py refreshes official font sources and is the only network-dependent step.