Brand — fonts & style¶
Everything Binabik puts in front of a person uses the same three typefaces and the same small palette: the websites, this docs site, the brain UI, slide decks, offers and PDFs, diagrams, email signatures. This page is the short, general version — enough to keep every surface looking like the same company.
The three fonts¶
| Font | Used for | Weights | Get it |
|---|---|---|---|
| Plus Jakarta Sans | Body and UI text — the default for everything you write | 400, 500, 600, 700 | Google Fonts |
| Space Grotesk | Display — headings h1–h4, slide titles, big numbers |
500, 600, 700 | Google Fonts |
| JetBrains Mono | Code, terminal output, technical specs and data labels | 400, 500 | Google Fonts |
All three are free, open-licensed (SIL Open Font License) Google Fonts — no licence to buy, nothing to ask for.
Installing all three locally is mandatory
Every Binabik machine has all three fonts installed. Not optional, not "if you do design work".
The web surfaces load them as webfonts, so they look right for anyone. But
everything offline — a .pptx offer, a Word document, a PDF you re-export,
a Figma file, a screenshot for a deck — falls back to whatever your system
has when a font is missing. The document does not warn you: it silently
re-flows in Calibri or Arial, and the next person sees a broken version of a
layout that was fine when it was made. Installing once removes the whole
class of problem.
How to install¶
On each font's Google Fonts page: Get font → Download all → unzip. Then:
Select all the .ttf files → open them → Install Font in Font Book.
Variable-font files (*[wght].ttf) are enough on their own; if the zip has a
static/ folder too, install the variable file, not both.
Select all the .ttf files → right-click → Install for all users.
Check afterwards that the font list of your editor / PowerPoint / Keynote shows all three by name.
The style, in short¶
The visual language is "Luminous Precision" — premium deep tech that is bright and approachable rather than heavy and industrial.
- Light by default. Soft off-white canvas (
#FAFAFA), white cards. Royal navy (#101820) is reserved for high-impact sections — hero, footer, feature blocks — where it creates contrast instead of weight. - High-contrast type, lots of air. Space Grotesk headings over Plus Jakarta body, generous whitespace, no cramped blocks.
- Red is a laser, not a wall. The brand red (
#DB2424) marks primary actions, active states, thin underlines and small accents. Never large red banners. - Soft edges. 8 px radius on buttons and inputs, up to 16 px on large cards.
Subtle borders (
#E2E8F0) and barely-there shadows instead of flat blocks. - Secondary text is slate (
#64748B) — subtitles, captions, less important data.
Where the details live¶
- Word documents and slide decks — the branded templates on Drive, and how to install them: Templates — Word & PowerPoint.
- Email signature — one design for the whole company, generated with your name, role, phone and LinkedIn in it: Email signature. (It is the one surface that carries none of the three fonts, and deliberately — see the page for why.)
- Web / frontend — the full style guide (palette tables, component classes,
glass navbar, grid) lives with the marketing site:
webpages/binabik-webpage-sample/STYLEGUIDE-NEW.md. - This docs site — already built on exactly these fonts and colours; see
mkdocs.yml(theme.font) anddocs/stylesheets/extra.cssfor the tokens. - Code conventions (which are a separate matter from visual style) — Coding guidelines.