01 — Logo
Rings that read like a fingerprint
The mark is a hand-drawn tree cross-section whose growth rings resolve into a fingerprint. In the full lockup it takes the place of the O in IRONBARK, set in Neothic. The identity is single-colour by design: white on dark surfaces, black on light.
Full lockup — white
Full lockup — black
Mark — white (on icon tile #022C22)
Mark — black
Wordmark (plain O) — white
Wordmark (plain O) — black
Clear space & minimum size
Keep clear space equal to the height of the growth-rings mark on all sides of the lockup. Don't set the full lockup narrower than 140px on screen (35mm in print), or the mark smaller than 24px (8mm) — the ring detail fills in below that.
Don't
Stretch or squash it
Recolour it — white or black only
Add glows, shadows or outlines
Place it on busy backgrounds
Prefer the full lockup. The plain-O wordmark exists only for contexts where the hand-drawn mark won't reproduce (embroidery, engraving, very small print).
02 — Colour
Bark outside, heartwood within
Dark "bark" surfaces alternate with warm "heartwood" surfaces, joined by diagonal saw cuts. Eucalypt green is the only working accent; ember is reserved for selection highlights and errors. Click any value to copy it. Contrast ratios are computed against WCAG 2.1.
Bark — dark surfaces
Darkest background: heroes, footer
Use bark-text 15.7:1 AAA · bark-text-soft 9.2:1 AAA · eucalypt 10.1:1 AAA
Raised dark surface: cards, menus
Use bark-text 14.1:1 AAA · bark-text-soft 8.2:1 AAA · eucalypt 9.1:1 AAA
Dark borders and hover fills
Non-text: borders and fills only
Hairlines on dark
Non-text: hairlines only
Text on dark
On bark-0 15.7:1 AAA · on bark-1 14.1:1 AAA
Muted text on dark
On bark-0 9.2:1 AAA · on bark-1 8.2:1 AAA
Heartwood — light surfaces
Light background
Use ink 14.2:1 AAA · ink-soft 7.0:1 AA · eucalypt-deep 4.8:1 AA
Recessed light surface
⚠ Use ink 12.9:1 AAA · ink-soft 6.4:1 AA — eucalypt-deep is 4.3:1: large text (18px+) only
Hairlines on light
Non-text: hairlines only
Text on light
On heartwood 14.2:1 AAA · on heartwood-2 12.9:1 AAA
Muted text on light
On heartwood 7.0:1 AA · on heartwood-2 6.4:1 AA
Accents & semantic
Primary accent on dark: CTAs, focus rings, success tints
On bark-0 10.1:1 AAA · as button fill, bark-0 text 10.1:1 AAA. Never as text on light
Accent hover state on dark
On bark-0 11.8:1 AAA
Primary accent on light: links, eyebrows, success text
On heartwood 4.8:1 AA · white on it 5.3:1 AA
Warm accent: text selection, error borders
⚠ On bark-0 5.4:1 AA. Not for text on light — 3.1:1
Error text, warm hover on light
On heartwood 5.1:1 AA
Favicon / app-icon tile background
White mark on it 15.2:1 AAA
The canonical definitions live in resources/css/app.css, where each token also has an oklch upgrade for wide-gamut displays. Grab them as brand-tokens.css or brand-tokens.json.
03 — Typography
Three faces, three jobs
All fonts are self-hosted at ironbarkcyber.com/fonts — no third-party font CDNs. Headings are Neothic at regular weight only; Archivo and Martian Mono are variable fonts.
- Role
- Display — all headings, ledger & card titles
- Weights
- Regular (400) only, never bolded
- Source
- By Vasily Draigo — free via dafont
- Fallback
- 'Iowan Old Style', Georgia, serif
- Role
- Body — paragraphs, buttons, UI
- Weights
- Variable 100–900 (+italic); 600–650 for emphasis
- Source
- Google Fonts, SIL OFL
- Fallback
- system-ui, -apple-system, 'Segoe UI', sans-serif
- Role
- Mono — eyebrows, nav, codes, dates
- Weights
- Variable 100–800; usually 500, tracked out, uppercase
- Source
- Google Fonts, SIL OFL
- Fallback
- ui-monospace, 'SF Mono', Menlo, monospace
subfinder -d ironbarkcyber.com | httpx -title05 — Imagery & iconography
Drawn, not photographed
The site uses no photography. Atmosphere comes from generative line work in eucalypt greens — the logo mark amplified into decoration.
- Growth rings: concentric dashed circles at 1–1.5px stroke, eucalypt at 16% opacity, slow rotation. The signature background element — shown live at left.
- Timber grain: horizontal topography lines and an feTurbulence noise wash (3–5% opacity) give bark surfaces their texture.
- Interface icons: no icon library. Inline SVG only, 1.5–2px round-capped strokes, single currentColor — matching the nav burger.
- Client logos: rendered greyscale at 75% opacity, full colour on hover.
- Blog covers: 1200×630 illustrated images, no stock photography, no clip-art padlocks or hoodie-wearing hackers.
06 — UI elements
Components, rendered live
These are the site's real components and CSS — not mockups. Radius 6px on controls, 10–12px on cards; shadows are large, soft and always ambient.
On heartwood
hover: translateY(-2px) + shadow 0 16px 40px -24px
motion: cubic-bezier(.22, 1.2, .36, 1) "spring"
| File | Format | Dimensions | Size |
|---|---|---|---|
| brand-assets.zip | ZIP | everything below + README | 704 KB |
| logo-full-white.svg | SVG | vector | 26 KB |
| logo-full-black.svg | SVG | vector | 26 KB |
| logo-full-white.png | PNG | 344 × 48 | 11 KB |
| [email protected] | PNG | 689 × 96 | 26 KB |
| [email protected] | PNG | 1377 × 192 | 27 KB |
| logo-full-black.png | PNG | 344 × 48 | 9 KB |
| [email protected] | PNG | 689 × 96 | 22 KB |
| [email protected] | PNG | 1377 × 192 | 23 KB |
| logo-full-white-on-bark.png | PNG | 1721 × 364 | 37 KB |
| logo-full-black-on-heartwood.png | PNG | 1721 × 364 | 37 KB |
| logo-mark-white.svg | SVG | vector | 13 KB |
| logo-mark-black.svg | SVG | vector | 13 KB |
| logo-mark-white.png | PNG | 75 × 73 | 6 KB |
| [email protected] | PNG | 150 × 145 | 16 KB |
| [email protected] | PNG | 301 × 291 | 46 KB |
| logo-mark-black.png | PNG | 75 × 73 | 5 KB |
| [email protected] | PNG | 150 × 145 | 14 KB |
| [email protected] | PNG | 301 × 291 | 43 KB |
| logo-mark-white-on-tile.png | PNG | 429 × 419 | 72 KB |
| logo-mark-black-on-heartwood.png | PNG | 429 × 419 | 70 KB |
| logo-wordmark-white.svg | SVG | vector | 5 KB |
| logo-wordmark-black.svg | SVG | vector | 5 KB |
| logo-wordmark-white.png | PNG | 344 × 48 | 9 KB |
| [email protected] | PNG | 689 × 96 | 19 KB |
| [email protected] | PNG | 1377 × 192 | 22 KB |
| logo-wordmark-black.png | PNG | 344 × 48 | 8 KB |
| [email protected] | PNG | 689 × 96 | 17 KB |
| [email protected] | PNG | 1377 × 192 | 20 KB |
| logo-wordmark-white-on-bark.png | PNG | 1721 × 364 | 32 KB |
| logo-wordmark-black-on-heartwood.png | PNG | 1721 × 364 | 32 KB |
| og-template.png | PNG | 1200 × 630 | 72 KB |
| brand-tokens.json | JSON | design tokens | 4 KB |
| brand-tokens.css | CSS | custom properties | 2 KB |
| README.txt | TXT | usage notes | 2 KB |
Usage & contact
You're welcome to use these assets as-is to reference Ironbark Cyber — in press coverage, partner materials and integrations. Don't modify the artwork, and don't use it in a way that suggests we endorse or are affiliated with your product or service unless we actually are. Anything beyond that — co-branding, merchandise, or derivative artwork — needs our written approval first.
Questions about brand use: [email protected]