Brickheart brand guide

1. Palette

Contrast (WCAG):

Rules:

• Never put #C2410C on dark backgrounds or #F97316 on cream.
• Use accent colour for emphasis and interactive elements only, never for long body text.
• Never rely on colour alone. Links are underlined and states have text or icon cues.

2. Logo files

All files are transparent, with no background rectangle. The hearts are real holes, so the page colour shows through them.

Size rules:

• 100px tall or more: full mortar versions.
• 40 to 60px tall: -small wordmark.
• 32px tall or less: mark only, small version.
• Clear space: at least the height of the B's top bar on every side.
• Minimum wordmark height is 40px on screen. Below that, use the mark.

3. Where each file goes

Landing page (language and light/dark picker)

• Hero: wordmark or wordmark-on-dark, centred and large.
• Before the visitor chooses: follow prefers-color-scheme.
• After the visitor chooses: the choice wins and is saved to localStorage and a cookie.
• Language buttons: text only, in the slab typeface. No logo is needed on them.
• Mode toggle: show the mark-small as the icon behind it if you need one, with the label as text.

Main site (.org)

• Header: wordmark-small on mobile, wordmark on desktop, linked to /.
• Footer: wordmark, plus mark-small if you add a back-to-top.
• Open Graph and social images: PNG exports in shared/brand/icons/, not the SVG files.

404 page

• Hero: brickheart-mark large. The hearts are the character of the page.
• Header: the normal small header so people can navigate away.

Dev blog (.dev)

• Masthead: wordmark at the top of the home page, wordmark-small on article pages.
• Code blocks and syntax colours: use the palette tokens only.
• Favicon: the same favicon.svg.

Web app (.app, offline)

• Header: mark-small or mark-small-on-dark, next to the app name in text.
• Splash and first-run: mark large.
• Offline requirement: import or copy every logo into the app bundle and precache it in the service worker. Never link to the main domain.
• Icons: keep a separate PWA icon set (192, 512 and maskable) with a background, made from the mark.
• Offline page: mark with a calm message. It must work with no network.

Favicon

• Tab and bookmark: favicon.svg. used at https://favicon.io/svg-favicon/ to create full pack.

4. Switching files by theme

Swapping by prefers-color-scheme alone ignores the manual picker on the landing page. Render both and show one with CSS:

<img class="logo-light" src="/brand/brickheart-wordmark.svg" alt="Brickheart">
<img class="logo-dark"  src="/brand/brickheart-wordmark-on-dark.svg" alt="" aria-hidden="true">

:root { --bh-bg:#FFFDF8; --bh-text:#1F2937; --bh-accent:#C2410C; }
:root[data-theme="dark"] { --bh-bg:#000; --bh-text:#fff; --bh-accent:#F97316; }
.logo-dark { display:none; }
:root[data-theme="dark"] .logo-light { display:none; }
:root[data-theme="dark"] .logo-dark  { display:inline; }

data-theme is set before first paint, from the saved choice or prefers-color-scheme, to avoid a flash of the wrong logo.

5. Design language

Idea: built from bricks, with a heart at the centre. Everything is assembled from simple blocks, and warmth lives in the details.

Shape

• Round corners. Radius is 8px, 2px solid.
• Mortar lines as dividers: 2px lines in the text or accent colour.
• The heart appears once per screen, as a small accent, not as wallpaper.

Layout

• Keep reading width to about 65 characters.

Typography

• Headings and buttons: Roboto Slab, weight 800, chosen to match the wordmark.
• Body: a clean sans-serif such as the system font, at 16px minimum and 1.5 line height.
• Brand name is always written "Brickheart" in text, never all caps. This matches the logo, keeps word shape readable, and avoids screen readers spelling it out.
• Code: monospace on a slightly tinted block.

Colour use

• Light mode: cream background, navy text, terracotta for links, buttons and brick elements.
• Dark mode: navy background, cream text, orange for links, buttons and brick elements.
• Orange is accent only. Roughly 90% of any screen is background and text.

Motion

• Short (150 to 200ms), stepped easing for brick-like feedback, such as a button dropping one step on press.
• Respect prefers-reduced-motion: turn animation off, don't just shorten it.

Accessibility

• Focus rings: 3px in the accent colour with a 2px offset, visible in both modes.
• Touch targets: 44px minimum.
• Logos: inline SVG gets role="img" with a <title>. As <img>, use alt="Brickheart". Where the visible text already says Brickheart, use alt="".
• Text size and contrast follow WCAG AA at minimum.
• Language: set lang on <html> from the landing page choice, and on any mixed-language element.