microbooks.ai

Brand kit for people and agents

The MicroBooks brand, in one place.

The logo, the palette, the type, and the rules, published so a person or an LLM can build on-brand reports and interfaces without guessing. Everything here is generated from the live site, so it never drifts. Agents should fetch /brand.json.

The mark

mark
reversed
favicon
16 / 24 / 32

Colour

--cream
#fbf8f1 · oklch(98.0% 0.010 87.5)
Page ground
--cream-2
#f6f2e7 · oklch(96.1% 0.015 90.2)
Alternating bands
--ink
#14120f · oklch(18.3% 0.007 78.1)
Headlines and body text
--ink-soft
#5f5850 · oklch(46.5% 0.016 71.1)
Secondary text
--rule
#e4ddcf · oklch(89.9% 0.020 84.6)
Hairlines and borders
--card
#fffdfa · oklch(99.5% 0.004 82.5)
Raised surfaces
--paper
#fcfaf6 · oklch(98.5% 0.006 82.5)
Text on dark surfaces
--amber
#f0b429 · oklch(80.4% 0.156 82.5)
Primary accent, highlight, CTA
--amber-deep
#966300 · oklch(54.0% 0.122 76.0)
Small amber text (passes AA on cream)
--black
#16130f · oklch(18.9% 0.009 75.1)
Dark sections
--green
#2f7a57 · oklch(52.3% 0.093 160.2)
Posted / verified states only

For agents

Fetch the brand, generate on-brand output.

One JSON manifest with the palette, the logo as inline SVG and as URLs, the type, a paste-in CSS starter, and the usage and voice rules. Link the SVGs directly, or inline the CSS starter into generated HTML and it is on-brand immediately.

/brand.jsonEverything below, machine-readable
/brand/mark.svgThe mark, full colour
/brand/mark-reversed.svgThe mark for dark backgrounds
/brand/favicon.svgFavicon / app tile
/brand/wordmark.svgThe wordmark

CSS starter

:root {
  --cream: #fbf8f1;
  --cream-2: #f6f2e7;
  --ink: #14120f;
  --ink-soft: #5f5850;
  --rule: #e4ddcf;
  --card: #fffdfa;
  --paper: #fcfaf6;
  --amber: #f0b429;
  --amber-deep: #966300;
  --black: #16130f;
  --green: #2f7a57;
  --tile: #181510;
}
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -0.03em; font-weight: 800; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--amber-deep); font-weight: 500;
}
.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 12px; padding: 20px;
}
.btn {
  display: inline-block; padding: 10px 16px; border-radius: 8px;
  font-weight: 650; text-decoration: none; background: var(--amber); color: var(--ink);
}
mark, .mark { background: var(--amber); color: var(--ink); padding: 0 4px; }

Using the logo

Voice