Brand
Brand assets
The mark, the wordmark, and the palette — with the rules that keep them recognisable and the files to use them.
The mark
A folded document interrupted by a bold </> code glyph. The two solid compound paths keep the silhouette crisp and the identity recognisable without gradients, textures, filters, or background assumptions.
One identity, two color systems
The logo keeps its original bright green. Interface links and buttons use a deeper green because the logo green does not meet WCAG AA for small text on light backgrounds. This preserves the design without weakening the site's accessibility.Palette
The identity uses two fixed colors. The interface palette below adapts for light and dark themes, and every text pairing is held to WCAG 2.2 AA by test — see the accessibility statement.
Brand green
#22c55e
Brand navy
#0f172a
Interface colors
accent
#16803d
accent-strong
#105e2d
ink
#1a1815
ink-body
#413c34
ink-muted
#5c574e
paper
#fdfcf7
raised
#ffffff
line
#e5e2d9
| Token | Role | Light | Dark | On paper |
|---|---|---|---|---|
| accent | Accessible green for links, buttons, and focus states. | #16803d | #22c55e | 4.88:1 |
| accent-strong | Hover and active states for the accent. | #105e2d | #48df80 | 7.68:1 |
| ink | Headings and primary text. | #1a1815 | #f2efe8 | 17.25:1 |
| ink-body | Long-form prose. | #413c34 | #d9d4ca | 10.64:1 |
| ink-muted | Secondary copy and navigation. | #5c574e | #b0aa9d | 6.98:1 |
| paper | The page. A shade off white, deliberately. | #fdfcf7 | #14130f | 1.00:1 |
| raised | Cards and inputs, above the page. | #ffffff | #1d1b16 | 1.03:1 |
| line | Hairlines and dividers. | #e5e2d9 | #33302a | 1.26:1 |
Using it
Do
- Use the full horizontal lockup whenever there is room; use the icon in compact UI.
- Keep clear space around the mark of at least half its height on every side.
- Use the on-dark files on dark backgrounds so the navy portion never disappears.
- Scale proportionally and use the supplied favicon below 24px.
Don't
- Do not add gradients, shadows, strokes, or a container the mark does not have.
- Do not recolour it. The bright green and deep navy are the identity.
- Do not retype or approximate the outlined wordmark.
- Do not stretch, rotate, or crop the mark, and do not separate the glyph from its page.
Files
- Full logo, SVGPreferred master for light backgrounds. Scales without loss.
- Full logo on dark, SVGWhite and brand green, for dark surfaces.
- Full logo, WebP800px lossless raster with transparency for non-SVG workflows.
- Full logo on dark, WebP800px lossless raster with transparency.
- Icon, SVGTwo-color vector mark for light surfaces.
- Icon on dark, SVGWhite document with the original green code glyph.
- Icon, WebP512px lossless raster with transparency.
- Logo, black SVGOne-color version for restricted reproduction.
- Logo, white SVGOne-color reverse version for restricted reproduction.
- App icon, 512 PNGOpaque navy tile for Apple and general install surfaces.
- Maskable icon, 512 PNGSafe-zone inset for Android launcher crops.
- Favicon, ICOTrue multi-size 16, 32, and 48px browser icon.
SVG is the preferred source format. The WebP downloads are lossless fallbacks with transparency; favicons and install artwork stay PNG/ICO where browsers and operating systems require them. Regenerate every derivative from the shared master with npm run icons.
Get started
Bring order to the XML your team can't afford to ignore.
Create a free account and get a private workspace to search, validate, diff, and monitor your XML feeds, sitemaps, schemas, and vendor integrations.