Djaunt Branding
Brand guidelines — v1
Djaunt

One identity across music, software, and art. Gold dragon on warm near-black, bone as the second voice, and eight elemental variants for when a project needs a different mood. Everything here is enforced by tokens.css and described for agents in BRANDING.md.

Theme
01 — The mark

Three assets, one dragon

Djaunt lockup
djaunt-lockup.svg
Default. Min width 120px.
Djaunt icon
djaunt-icon.svg
Stands alone. Favicons, app icons, avatars. Min 16px.
Djaunt wordmark
djaunt-wordmark.svg
Text-led contexts. Min width 80px.
Do
  • One flat color: gold or bone on dark, ink on light or gold.
  • Clear space of at least one wordmark D-height on every side.
  • Prefer the currentColor files so themes recolor the mark for free.
  • Crop and scale the dragon as a background graphic at 4–10% opacity.
Don't
  • Gradients, glows, or shadows on the mark itself.
  • Rotate, stretch, redraw, or re-proportion the dragon.
  • Badge it in a circle or rounded square, outside platform app icons.
  • Place it over busy imagery without a solid plate behind it.
02 — Core color

Gold, bone, ink

Gold is a highlight, never a surface. Bone carries every word of body text — pure white is off-brand. Ink is warm-biased near-black, not neutral grey.

GOLD 300#F6D77E
GOLD 400#F0C24B
GOLD 500 ★#D4A017
GOLD 600#A87A12
GOLD 700#6E4A0E
BONE 100#FBF8F1
BONE 200 ★#EDE6D6
BONE 300#C8C0AE
BONE 400#8E887A
BONE 500#615C52
INK 900#0A0908
INK 800 ★#0D0C0A
INK 700#14120F
INK 600#1C1913
INK 500#2A251C
Accent — follows the picker above, not fixed like Gold/Bone/Ink
ACCENT 300--dj-accent-300
ACCENT 400--dj-accent-hi
ACCENT 500 ★--dj-accent
ACCENT 600--dj-accent-600
ACCENT 700--dj-accent-deep
03 — Elemental dragons

Eleven themes, one system

Each theme swaps the accent and the background family. Type, spacing, geometry, and the semantic colors never move. One theme per surface — an element is a mood for a whole product, not a palette to pick from per component. The demo card below defaults to and follows the picker above; its own hoard/fire/frost/… buttons let you preview any theme locally without moving the rest of the page.

Djaunt
data-dj-theme="{{ t.key }}"
{{ t.label }}

{{ t.headline }}

{{ t.note }}

Inline link
Overview Activity Settings
tag tag ● Playing
Streams 4,102
Surface {{ t.surface }}
Raised {{ t.raised }}
Accent {{ t.accent }}
Categorical accents — coding, not mood
--dj-accent-2
--dj-accent-3
--dj-accent-4
hoard#D4A017
fire#FF6B2C
blood#E8475C
earth#B98358
venom#A8E01F
frost#6BA4FF
storm#9B8CFF
bloom#FF6FB0
stone#8E9196
void#CFCFCF
radiant#F4F4F2
Fixed across all themes
success warning danger info
04 — Typography

Archivo, Plex Sans, Plex Mono

Display — Archivo 700 tracking -0.02em · line-height 1.08
Here be dragons
Body — IBM Plex Sans 400 line-height 1.6 · max 72ch

Djaunt covers music, software, and art without splitting into separate identities. The dragon and the gold do the distinguishing work, so the writing can stay plain: say what the thing is, say what it does, and stop. Body copy never runs in the display face, and long text never runs in mono.

Label — IBM Plex Mono 500 uppercase · tracking 0.14em · 12px
Release 004 — Storm / 2026
The mono eyebrow above a display heading is the signature Djaunt text pattern. One per section.
05 — Geometry & motion

Angular, hairline, one glow

Radius
2 · 4 · 8 px Pills are for status dots and avatars only.
Space — 4px base
4 8 12 16 24 32 48 64 96 Err toward more. Dark grounds need room.
Glow — once per view
Playing
--dj-glow The primary action, the live track, the active node. Not two of them.
Icons
1.5px · 24px grid · round caps Stroke, never fill. Lucide is the reference set. No emoji, anywhere.
06 — Terminal & code

Djaunt Hoard, in nine elements

A 16-color ANSI scheme and a matching syntax theme, so a Djaunt tool still looks like Djaunt inside a shell or an editor — every slot below is derived from the active element's own tokens, not hand-picked per theme, so it follows the picker above like everything else.

$ djaunt build --theme storm
reading brand/tokens/tokens.css
✓ tokens resolved (9 themes)
✓ logo assets copied (3)
! wordmark below 80px min — using icon
built in 412ms
$  
// theme is a mood, not a palette
export function applyTheme(el, name = 'hoard') {
  el.setAttribute('data-dj-theme', name);
  return THEMES[name] ?? THEMES.hoard;
}
07 — For agents

Point a tool at this repo

Full instructions live in BRANDING.md. This is the short version.

<link rel="stylesheet" href="brand/tokens/tokens.css"> <link rel="icon" href="brand/favicon/favicon.svg"> <html data-dj-theme="hoard">
  1. Import tokens.css; consume role variables only, never a raw hex.
  2. Load Archivo, IBM Plex Sans, IBM Plex Mono. No fourth family.
  3. Default to dark and hoard unless the brief names an element.
  4. Copy the logo files you need out of brand/logo/ — prefer the currentColor variants.
  5. Shallow radii, hairline borders, one glow, stroke icons, no emoji.
  6. Need several simultaneous meaningful colors on one surface (categories, lanes, a gauge)? Use --dj-accent-2/3/4 before inventing anything project-specific.
  7. If a decision isn't covered, choose the more restrained option.
Djaunt — guidelines v1 — 2026
08 — Shared components

Pulled once, not rebuilt per repo

Built on tokens.css, not React — plain CSS and a markup contract, extracted from real Djaunt sites once the same pattern showed up twice. See components/ for the full list.

Layout & navigation
components/hero
A field guide

Draw your own comics.

Kicker, heading, lede, actions row — the masthead shape every Djaunt site starts with.

A page-top masthead — blended from djaunt-bean-guide, djaunt-dot-agents, djaunt-browser-tools, and cartoonist-drawing-curriculum.
components/section-nav
A sticky jump-link bar with scroll-spy — this very page uses the real thing at the top of it.
components/tab-bar
A mobile bottom nav bar for an app's fixed top-level sections — blended from mealeo's AppShell.
Content & data
components/data-table
BeanSimmer time
Black beans45–60 min
Pinto beans60–90 min
A scrollable table with a mono-uppercase header row — blended from djaunt-bean-guide and djaunt-dot-agents.
components/list-row
Collapsible rows in a scrollable list — blended from three djaunt-browser-tools extensions that had each built it separately.
components/divided-list
  • 01

    Grind runs coarse

    Dial the grinder two steps finer.

  • 02

    Water's too hard

    Switch to filtered water.

A stack of hairline-divided rows, plain or with a leading marker slot — blended from djaunt-bean-guide and cartoonist-drawing-curriculum.
components/badge
draft current complete low coverage critical in progress
A small uppercase tag, colored by a custom property — blended from djaunt-dot-agents, cartoonist-drawing-curriculum, and djaunt-bean-guide.
Controls & input
components/buttons
Hero and footer CTAs, plus plain in-app actions — ported from djaunt-dot-agents and djaunt-bean-guide.
components/filter-bar
12 results
A bordered search field with an optional icon and result count — blended from djaunt-bean-guide and cartoonist-drawing-curriculum.
components/popup
Header, switch, segmented control, button, footer — the set that shipped seven djaunt-browser-tools extensions.
components/dropdown-menu
A small panel anchored to a trigger — an avatar, a kebab, a "more" link — blended from mealeo's account menu.
components/bottom-sheet
A mobile slide-up panel — filter & sort, an add/edit form, a kebab action list — blended from mealeo's Pantry redesign.
components/checkbox
Tile
A native checkbox, plus a larger touch-target tile for a cook-mode-style step list — blended from mealeo.
components/typeahead
A chip multi-select combobox with keyboard nav and a create-new option — ported from mealeo's tag & category fields.
Feedback & state
components/callout
Skip / deprioritize One rule that actually matters.
Why it matters Inline text right after the tag.
A bordered note, colored by semantic meaning — blended from djaunt-bean-guide and cartoonist-drawing-curriculum.
components/progress
3 of 5 steps complete
All checks passed
A fill-driven meter — blended from djaunt-bean-guide's pot progress and cartoonist-drawing-curriculum's overall bar.
components/steps

Clone the repo

Run the sync

A connected, auto-numbered list — the number is CSS-generated, never hardcoded in markup.
components/empty-state

No pots yet — add one above to get started.

The muted italic line shown in place of an empty list, table, or grid.
components/skeleton
Shimmering bone placeholders for content still loading — built ahead of need, for mealeo's restyle and whatever's next.
components/spinner
An indeterminate loading ring — a button mid-submit, an inline "working" state. Colors with currentColor.
components/status-line
Saving… Saved Couldn't save — will retry
A small live-region message for a background action in progress — an autosave, a sync.
<link rel="stylesheet" href="brand/tokens/tokens.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tory37/djaunt-branding@main/components/buttons/buttons.css"> <a class="dj-button dj-button-primary" href="...">Primary action</a>