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: contact us