hackers&wizards brand

Colours

Surface and ink

Brand

Status

Night

Roles

Each hue has a base, a text colour on light, one colour on night, and two tints. Text on light clears 4.5:1 on bg and white, night clears 4.5:1 on night and night-2.

Chart order

Series take this order, --chart-1 to --chart-6; on night each takes its hue's night colour.

1. teal
2. purple
3. amber-dark
4. green-dark
5. factory
6. ampersand

Former names, resolving to their successor: --color-subtle → --color-muted.

Type

Spacing, radius, shadow, layout

Corners and icons

radius

font

tracking

leading

spacing

container

breakpoint

logo

shadow

code

motion

gradient

Elements

Every element two or more systems show lives here once: one CSS file, shown live in light and night at each of the four scales. A system sets the scale, never a colour or a shape, and shows its exceptions in full on its own design-system page, beside a tile per hub element it uses. @import "@hackersandwizards/brand/elements.css"; takes them all, elements/<name>.css with elements/scales.css one each; the scale is data-hw-scale="screen | dense | print | stage" on any container. brand-elements measures each element on the system's own page against this rule, in that system's gate.

The list marker is tokens/marker.css. Staying with each system, since they only look alike: total band, section band, stage and status markers, tooltip, chart bars, slide table, header bars, ghost button. The slide engine's number tile, a step's number on a square, is a slide part.

Label .hw-label

elements/label.css · brand v0.33.0

The label: an eyebrow, kicker, fact name or table head. The label role (mono, capitals, its tracking) in teal-dark, teal-night on night. Below 48rem the label role takes the small role's size, so no text on a phone is under 14 px. data-tone="muted" sets it in the muted grey (a callout's label), data-tone="ink" in the text colour (a field's or group's name).

Settings: --hw-label-size · --hw-label-family · --hw-muted

Pill .hw-pill

elements/pill.css · brand v0.33.0

The pill: a label holding a value, a fact, a role or a tag. The pill corner; the hue at 15 % on white, its text the hue mixed 40 % into ink, weight 500 (the website's training list chip): a value from a scale, the hue its place on the scale. On night the hue's night tone at 20 % on night under night ink. Variants, each one meaning: data-tone="neutral" a value without a scale (a fact, a free tag, an amount): ink at 7 %, its text ink at 70 % data-variant="outline" no value set, or a plain tag: a hairline on no fill, in ink data-variant="add" adds a value: the hairline dashed, on no fill, muted data-caps the words in the label role (mono capitals), as a document's type tag data-editable a value changed here (a menu opens on it): takes --hw-pill-edit-corner Trailing parts, as children after the words: hw-pill-chevron (an empty span: opens a menu that changes the value) and hw-pill-remove (a button: removes the value). A leading icon is an svg child. With any of them the pill lays its children out in a row, 0.25em apart.

Settings: --hw-pill-hue · --hw-pill-hue-night · --hw-pill-size · --hw-pill-pad · --hw-pill-edit-corner · --hw-hairline · --hw-label-size · --hw-label-family · --hw-muted

Card .hw-card

elements/card.css · brand v0.33.0

The card: the brand corner, a hairline, white, the card padding. data-variant="tint" is the emphasised card: teal at 7 % with a 40 % teal line. On night the card is glass, white at 7 % with a 15 % white line; the tinted one takes teal-night. Layout, shadow and hover stay the surface's.

Settings: --hw-card-pad · --hw-card-corner · --hw-hairline · --hw-line

Callout .hw-callout

elements/callout.css · brand v0.33.0

The callout: a box that sums up or flags, before or beside the body ("In short"). A teal rule on the left, teal at 7 %, the brand corner with the rule bending into it, text in weight 500; its label is an hw-label with data-tone="muted". data-hue="purple" marks a result. On night the night tones of the hue.

Settings: --hw-callout-pad · --hw-card-corner · --hw-rule-accent

Quote .hw-quote

elements/quote.css · brand v0.33.0

The quote: the words upright behind a purple rule, in ink. data-tone="muted" sets an excerpt of a source in the muted grey. On night purple-night and night ink. Who said it, and any portrait, stay the surface's.

Settings: --hw-quote-rule · --hw-quote-gap · --hw-muted

Ruled table .hw-table

elements/table.css · brand v0.33.0

The ruled table: hairlines under every row, no fill, no frame; column heads in the label role in the muted grey; cells in the small role, top-aligned, the last column flush right. On night the line is white at 15 %. Scrolling, stacking on a phone and column widths stay the surface's.

Settings: --hw-table-size · --hw-label-size · --hw-label-family · --hw-muted · --hw-cell-pad · --hw-hairline · --hw-line

Link in text .hw-link

elements/link.css · brand v0.33.0

The link in running text: teal-dark, underlined 0.2em below the baseline, ink on hover; on night teal-night, white on hover. hw-link on the link, or hw-links on a prose column to mark every link in it. A link that is a row, a button or a person's name is not this element.

Settings: --hw-underline

Focus ring .hw-focus-ring

elements/focus.css · brand v0.33.0

The focus ring, on every screen: solid purple (5.4:1 on white), purple-night on night (6.4:1), outside the element. The ring follows the element's own corners; a link set in text rounds its ring with the small corner. hw-focus-ring on the page's root (or any container) turns it on for everything inside.

Settings: --hw-focus-width · --hw-focus-offset

Round icon control .hw-icon-button

elements/icon-button.css · brand v0.33.0

The round icon control: a button that holds only an icon (play, pause, previous, next, theme), on every surface a circle. Ink at 7 %, 15 % on hover, the icon in ink; on night white at 15 % and 25 % with a white icon. data-on="picture" is the control over a picture: solid teal, white icon. The icon is its svg child, sized here; the target keeps its size when text is enlarged, since the settings are px on screen.

Settings: --hw-control-size · --hw-control-icon

Gradient strip .hw-strip

elements/strip.css · brand v0.33.0

The gradient strip: the brand gradient from teal to purple, left to right, along the top edge of a page, a header or a document, mixed in oklab as the website draws it (Tailwind's gradient). The same on night.

Settings: --hw-strip

Code block .hw-code

elements/code.css · brand v0.33.0

The code block: the code palette's ground (night, night-2 on a night page) and text, the small corner, the code role, no ligatures (JetBrains Mono would join -> and == into glyphs a reader cannot type), scrolling sideways on screen. Syntax colours come from the code palette: Shiki with code-theme.json and the transformer codeClasses (code.ts) sets the hw-code-<role> classes below, which survive a surface that drops inline styles; a hand-set span takes a class too. data-variant="panel" is the run log beside a slide's text, or a panel with a header of its own: the card corner and a hairline of white at 7 %.

$ bun run check
# 0 findings

$ claude --continue

$ bun run check
# 0 findings

$ claude --continue

$ bun run check
# 0 findings

$ claude --continue

$ bun run check
# 0 findings

$ claude --continue

$ bun run check
# 0 findings

$ claude --continue

$ bun run check
# 0 findings

$ claude --continue

$ bun run check
# 0 findings

$ claude --continue

$ bun run check
# 0 findings

$ claude --continue

Settings: --hw-code-size · --hw-code-pad · --hw-code-corner · --hw-card-corner · --hw-hairline

Button .hw-button

elements/button.css · brand v0.33.0

The button on a client surface (website, certificate verifier): the brand corner, a teal hairline, weight 500 in the body role. Filled teal with white text by default, the line and fill purple on hover; data-variant="secondary" is the outline, teal text on no fill, purple text and line on hover, and with data-filled a white fill, so it stands out on a tinted ground (night: the night ground). From 64rem it stands 48 px tall, below 44 px. On night the outline takes white at 40 % with white text and a 15 % purple wash on hover. The side padding keeps its px size under enlarged text, so the label keeps its width on a phone. The apps' button is expert.css's btn-primary.

Settings: --hw-button-height · --hw-button-pad

Arrow link .hw-arrow-link

elements/arrow-link.css · brand v0.33.0

The arrow link: a link that is an item in a list or the way on ("Verify another certificate →"), never underlined. teal-dark, ink on hover, its arrow moving 4 px along; data-tone="muted" sets it in the muted grey. The arrow is a span hw-arrow after the label's last word and a no-break space, holding the glyph in a span of its own; on a link to another site the glyph turns up and right (data-external on hw-arrow), since Inter's subset has no ↗. Display and spacing between links stay the surface's. On night teal-night, white on hover, the muted one night-muted. Markup: <a class="hw-arrow-link">Label<span class="hw-arrow" aria-hidden="true">&nbsp;<span>→</span></span></a>

Settings: --hw-arrow-link-pad

Field with button .hw-field

elements/field.css · brand v0.33.0

The field with its button: an input and the button that sends it, on a client surface. The field is white with a border-strong hairline (3:1, WCAG 1.4.11), ink on hover, amber-dark when aria-invalid; the brand corner; 48 px tall; its text in the body role, its placeholder muted. data-joined on hw-field-row sets field and button in one framed row, the button a teal-dark square holding an icon (the website's search), both 44 px tall; without it the button is an hw-button beside the field, 0.75rem apart, stacking under 40rem (the verifier's lookup). On night the field is night-2 with a night-muted line and white text. Markup: <div class="hw-field-row"><input class="hw-field"><button class="hw-button">…</button></div>

Settings: --hw-field-height · --hw-field-pad · --hw-field-family

Facts list .hw-facts

elements/facts.css · brand v0.33.0

The facts list: a record's facts, each an hw-label (data-tone="muted") over its value, 4 px apart, so "DE" reads as the language and a name as the trainer. A dl whose children are a div per fact holding dt and dd. data-variant="ruled" stacks the facts between hairlines. How the facts flow (a row that wraps, a grid of columns) and the value's weight stay the surface's.

Settings: --hw-hairline · --hw-line

Segmented control .hw-segmented

elements/segmented.css · brand v0.33.0

The segmented control: one choice of a few, each segment a link or button in one framed row (a view mode, a filter category, a page's mode). The small corner, a frame 2 px around the segments in the field line (the foreground at 70 % on the page, 3:1 as WCAG 1.4.11 asks of a control's boundary), the UI size; a segment at the foreground's 70 %, the full foreground and the muted fill on hover; the chosen one (aria-current, aria-pressed="true" or data-active="true") filled with the accent and its on-accent text. A leading hw-label names the category. On night the expert set's night roles.

Settings: --hw-segment-pad · --hw-segment-line

List row .hw-row

elements/row.css · brand v0.33.0

The list row: one record in a list, a stripe in the record's colour at its left edge, the lead (title and chips) shrinking with an ellipsis, the trail (figures, dates) keeping its width. The page's ground, a hairline under each row, the muted fill at 70 % on hover. The stripe is a span hw-row-stripe, its colour a background the surface sets; corner clipping belongs to the frame round the list. On night the expert set's night roles. Markup: <div class="hw-row"><span class="hw-row-stripe"></span><div>lead</div><div>trail</div></div>

Settings: --hw-row-pad · --hw-row-stripe · --hw-row-gap · --hw-row-fill

Breadcrumb .hw-breadcrumb

elements/breadcrumb.css · brand v0.33.0

The breadcrumb: the way back up from a detail page, an ordered list whose last item is the page itself and links nowhere. The UI size at the foreground's 70 %, a slash between items, the ancestors in the accent and underlined on hover. Spacing above and below stays the surface's. On night the expert set's night roles. Markup: <nav class="hw-breadcrumb" aria-label="Breadcrumb"><ol><li><a href="…">…</a></li><li><span aria-current="page">…</span></li></ol></nav> Settings: none; the size is the UI step (--text-ui).

Settings:

Status box .hw-status

elements/status.css · brand v0.33.0

The status box: a note whose colour says what a state means, a gap to act on (warning), a fault (error), something done (success) or a fact to read first (info). data-tone names it; the tone at 40 % as a hairline, at 7 % as the ground, the brand corner and the card padding. The tone is the expert set's status role: on light red, amber-dark and green-dark mixed 70 % with ink, which clear 4.5:1 on their own wash, and teal-dark; on night red-night, amber, green and teal-night. The box sets no text colour: a heading in it takes the tone, the body the foreground.

Settings: --hw-card-pad · --hw-card-corner · --hw-hairline

Dashed frame .hw-frame

elements/frame.css · brand v0.33.0

The dashed frame: an empty slot waiting for content, or a group of parts that belong together. A dashed line in the border colour, the brand corner, no fill; padding and content stay the surface's. On night white at 18 % over night.

Settings: --hw-frame-width · --hw-card-corner

Key figure .hw-kpi

elements/kpi.css · brand v0.33.0

The key figure: a figure under its label, read at a glance (a dashboard's pipeline value, a readout's share). The label is an hw-label child; the figure, hw-kpi-value, in the stat role's family and weight, figures of one width, set tight. Its colour stays the surface's, the colour of what the figure counts. Rules between figures and their layout stay the surface's. Markup: <div class="hw-kpi"><span class="hw-label" data-tone="muted">Pipeline</span><span class="hw-kpi-value">€ X</span></div>

Settings: --hw-kpi-size · --hw-kpi-tracking

Prose block .hw-prose

elements/prose.css · brand v0.33.0

The prose block: Markdown read in an app (a record's notes, a handbook page, a knowledge article), on top of Tailwind Typography's prose, so a surface writes class="prose hw-prose". Headings step down to the app's page, heading and subheading sizes so they nest under the page title, an h2 opens with a hairline, paragraphs in a list item lose their margin, inline code sits on the muted fill, list bullets are the brand marker (marker.css), and a task item's checkbox is painted like a field, ticked in the accent. Typography's colours point at the theme roles, so night follows the page. Tables, code blocks and quotes are the hw-* elements, marked not-prose, which the block only spaces. Unlike the other elements these rules sit in no layer: Typography's prose rules come in Tailwind's utilities layer, which a layered rule would lose to.

Settings: --hw-prose-check-x

Expert: the apps

The pieces os and the trainer hub both render, dense, in two themes: the expert components (AppHeader, PageHeader, Pill, FilterChip, FilterChipBar, SpaceNav, SpaceNavTree, ThemeToggle), shown on each app's design-system page, and the plain-CSS parts below, which any surface may take.

Dropdown

A native <select> with the brand chevron in place of the system's arrow: border-strong on light, night-muted on night. @import "@hackersandwizards/brand/select.css"; and the class hw-select, or form-input under the expert layer. The file draws the arrow and its room only; corner, border, height and focus stay the surface's, here the website's field.

Disclosure

A native <details> with the brand chevron in place of the browser's triangle: Lucide's chevron-right in the summary's text colour, turned down while open. @import "@hackersandwizards/brand/disclosure.css"; and the class hw-disclosure, or the expert layer, which imports it. hw-disclosure-chevron places the chevron inside the summary instead, hw-disclosure-count is the count pill. Type, colour and padding stay the surface's.

Logos

Four logos, each one line. The ground picks the cut: on light the day file; on night, black and black textile the night cut, with a grey edge round the wizard; on Purple Love, Stargazer and the gradient the outline cut, a white outline round the letters and a white edge round the wizard. Gap, lift and alignment: README.md, "Use it in another repo".

Which logo goes on which surface: the logo table of the Brand Guide in Company OS, which owns it.

lockup

The standard logo: the wizard beside the pixel wordmark.

Clear space: the height of the h in the name, on every side. Minimum width: 190 px on screen, 50 mm in print.

.svg.pngnight.svgnight.pngoutline.svgoutline.png

lockup-compact

The wizard over the wordmark, for small spots.

Clear space: the height of the h in the name, on every side. Minimum width: 150 px on screen, 40 mm in print.

.svg.pngnight.svgnight.pngoutline.svgoutline.png

wordmark

The wordmark alone. Its white and black cuts carry every letter in that one colour.

Clear space: the height of the h in the name, on every side. Minimum width: 150 px on screen, 40 mm in print.

.svg.pngnight.svgnight.pngoutline.svgoutline.pngwhite.svgwhite.pngblack.svgblack.png

lockup-screen

The lockup as a smaller file (the wizard embedded at 128 px, 15 KB instead of 50 KB), identical on screen, for a header up to 40 px tall.

.svgnight.svg

Applications: the brand in use

Every family of brand files in use. The files sit in applications/ of this repo.

Backgrounds for devices and calls

The dark (night) family: the lockup on every file, low on the device screens (bottom right on the landscape ones, centred on the others), small above the head in calls. Set on the devices by hand.

applications/backgrounds

Booth banners

Pixlip frames, 1 x 2 m and 1 x 1 m: the brand gradient over the whole banner, the logo in its outline cut and only large white type. The 1 x 2 m takes the lockup, the 1 x 1 m the wordmark with the large wizard below it, whole inside the margins. Each PDF is the print file (final format plus 20 mm bleed), with a PNG preview beside it.

applications/booth

Channel banners

The airy set, one file per platform: the LinkedIn company cover with its Canva copies, both slides of the LinkedIn profile carousel, the LinkedIn Featured-link image, the X profile header, the XING and Sessionize profile covers, YouTube and OMR Reviews.

applications/channel-banners

LinkedIn post images

Every post image, 1080 x 1350: the headline in white on the gradient band, the image as a card below it, the lockup on the tint. The package ships three commands: brand-linkedin-frame frames a photo, a sketch or a terminal; brand-linkedin-terminal renders the dark terminal window from a spec; brand-linkedin-sketch-prompt prints the prompt for a generated marker sketch and the worked examples, each sketch-example card here with the filled prompt that drew it.

applications/linkedin-visuals

Avatars and workspace icons

The white hw on the brand gradient, one file per platform, the hw at 62.5% of the tile width, the largest that stays inside a maskable icon's safe circle; generate.ts builds them. The Google Workspace logo is the wide avatar, the hw centred on the gradient at 320 x 132. The Qonto invoice logo is the compact lockup, full width and top-aligned in a transparent 1000 px square.

applications/avatars

Gradients

Linear, mesh and radial brand gradients, with the Illustrator source.

applications/gradients

AI

Merch

Each product as it is printed, drawn from its print file; each file as SVG in millimetres with a PDF beside it.

applications/merch

Device stickers

One sticker combination per company device, upright like the Apple logo and centred left to right. Drawn to scale from Apple's dimensions (MacBook Pro 14-inch, iPhone 18 Pro, iPad Pro 11-inch); the dashed line is the device's centre, the measure runs from the bottom edge to the centre of the wordmark sticker. The print files are under Merch.

applications/device-stickers

Mail signature

One signature for every mail from an h&w account, new mails and replies alike, from one template with placeholders: the typed wordmark in colour, name, role, contact line and the three lines § 35a GmbHG requires. `bun run brand-mail-signature` writes an HTML file to open in a browser and copy into the mail client, and a plain-text file for the iPhone. Links in teal #1A7285 (5.54:1 on white). Shown with a fictitious person.

applications/mail-signature

template.htmltemplate.txt

Slides

Decks come from the slide engine, the package @hackersandwizards/slides; there is no template file. Its catalog shows one slide of every type. The slide logo: the lockup on the title and the closing slide, the wordmark alone on every other slide. A concept slide that claims a mechanism in a few short cards may carry a generated marker sketch beside them: brand-slide-sketch-prompt prints the prompt and the worked example, the sketch-example card here; the slides README, "Deck structure", says which slides get one.

Slide catalogslides on GitHub

applications/slide-visuals

Documents

Proposals, rate cards, Leistungsnachweise, certificates and handouts come from the document engine, the package @hackersandwizards/documents, rendered by Company OS and the trainer hub. Its catalog shows every document type with invented data.

Document catalogdocuments on GitHub

Pressekit

The photos of the press kit, which the website's press page offers with the logos as one ZIP. Credit: "Photo: Francesca Amann". Each photo is listed with what it shows in press/press.json.