Legal intelligence, simplified.
This sheet is the reference for anyone building or designing for eulaw.ai: our own engineers, an agent working in the codebase, or an external agency. Every value here is taken from the shipped stylesheets, not from a mood board, so what you see is what production actually renders.
The engineering companion, with file paths and the rules an agent must follow, is
brand/BRAND.md in the product repository. The authority for the public marketing
site specifically is frontend/docs/brand-style-guide.md, measured from the live
pages; where it and this sheet disagree about the site, that guide wins.
This sheet lives at https://eulaw.ai/brand/. Link to it rather than passing a copy around, so nobody works from a stale version. It prints cleanly from the browser if you need it on paper.
The mark
Twelve stars, one circleOn light
eulaw.aiOn dark
eulaw.aiShown above at its real size. The lockup is measured from .nav-logo on the
live site, not redrawn.
- Mark 20×20px, gap 12px (
0.75rem). - Wordmark is Inter 400 at 20px, letter-spacing -0.05em. It is not the Newsreader used for headings, the two are different faces on purpose.
- Never bold and never a serif. Setting the wordmark in the heading face is the usual mistake.
.aisits a shade brighter thaneulaw:#E5E5E5with#ffffffon dark, both#14171Donce the navbar goes solid.- Minimum size 20px. Below that the star ring fills in and reads as a smudge.
- The mark does not change between themes. It is a white circle with dark stars on light and on dark alike, one asset used unmodified. Do not invert it, do not recolour it, and do not cut a white-on-transparent version for dark backgrounds. The white circle is part of the mark, not a background to be removed.
Colour
Two themes, always. The marketing site is dark by default and opts into light per page. The product is light by default. Nothing ships until it has been seen in both.
Marketing pages, as they render
These are measured off the live / and /about. Marketing pages
render light by default. Use these values when designing a page.
Headings, emphasised text#1a202cParagraphs, subheadings#4a5568Captions, metadata#7A7A7APage background#ffffffFull navbar#1a202cSection rulesrgba(128,128,128,0.25)data-theme, so --text-primary resolves to its bare dark
value and a heading styled with it renders white on white. This has caused four
separate bugs. Use a literal, or pair the token with a
:global(.light-landing) override. The --lp-* tokens below are the
exception, they are defined per theme on the element itself.
Landing component tokens
Dark — the default
--lp-bg#181818
--lp-surface-2#252525
--lp-text#FFFFFF
--lp-muted#7A7A7A
--lp-accent#E6CC80
--lp-on-accent#181818
--lp-ok#4ade80
--lp-warn#f59e0b
Light
--lp-bg#ffffff
--lp-surface-2#eef0f4
--lp-text#181818
--lp-muted#4a5568
--lp-accent#7A5C1E
--lp-on-accent#ffffff
--lp-ok#007029
--lp-warn#a4610a
Product
Dark
--bg-app#181818
--bg-chat-area#1A1A1A
--bg-dark-surface#252525
--text-primary#FFFFFF
--text-muted#5A5A5A
--border-dark#5A5A5A
--citation-fg#E6CC80
Light — the default
--bg-app#F5F5F5
--bg-chat-area#FFFFFF
--bg-dark-surface#E8E8E8
--text-primary#181818
--text-muted#5A5A5A
--border-dark#D1D5DB
--citation-fg#8A6A1F
#E6CC80 on white fails contrast and is
never permitted. Light mode uses a darkened bronze instead: #7A5C1E for
marketing accents, #8A6A1F for citation markers. This is the single most
common way to break the brand.
The green button
One colour, one job. #01300a is a near-black green and it means
this is the action that converts. Hover is #005a15, text is white.
Get Started Try for free Secondary action
--lp-ok), not for decoration. If a design needs two green
buttons, one of them is not the primary action.
Type
/ still sets its serif through --font-serif-display, which is
Georgia. /about and the menu pages moved to Newsreader on 2026-08-17. Unifying
them is a one-line change that has deliberately not been made, because the landing hero is
the highest-traffic surface on the site. New content pages follow the /about
column. Do not change it as an implementation detail.
Scale: 12 · 14 · 16 · 18 · 20 · 24 · 32 · 40 px. Body line-height 1.6, headings 1.2. Headings are sentence case, never Title Case.
.12em to .18em on uppercase mono.
Spacing, radius, motion
Spacing
Radius
Buttons
| Kind | Padding | Radius | Size |
|---|---|---|---|
| Standard | 12 × 24 | 8 | 14 / 600 |
| Hero | 16 × 32 | 12 | 16 / 600 |
Motion
Voice
Do
- British English: organisation, analyse, licence.
- Say the number. “17% to 33%”, not “a high rate”.
- Sentence case in headings.
- Every public claim needs a source that survives being asked about.
- Name the limitation before someone else finds it.
Do not
- No em dashes. Use a comma, a full stop, or restructure.
- No superlatives we cannot measure.
- No stock photography of gavels, scales or courtrooms.
- No screenshots that are mockups. Use the real product.
- No hardcoded hex in a component. Use a token so it can follow the theme.