Brand

Brand assets, colour, typography, and the visual rules for using them. Everything here is rendered from the shared brand package and the shared UI package, so what you see is what the products ship.

Principles

Six rules the rest of this page exists to serve. If a swatch, a spacing value or a component below looks off-brand, a token drifted. Fix the token, not this page.

Logos

Four approved marks. The full lockup is the default; the others exist for the places it does not fit. Keep clear space around every mark, never recolour or distort one, and reach for the reverse mark on dark or gradient backgrounds rather than dropping the primary onto a dark card.

• 

  Primary mark

  Light surfaces (the default)

  Download
• 

  Reverse mark

  Dark cards and the gradient only

  Download
• 

  Wordmark

  Type only: nav bars, footers, docs

• 

  Icon mark

  Favicon, app icon, avatar

Colour

Two brand ramps and a set of semantic tokens. Wine is the primary; navy is the gradient partner, reached only through the ramp. haqq.purple still resolves as a deprecated alias of haqq.wine. It is there so old call sites compile, not for new work.

Wine: primary

Default #66023C, exposed as bg-haqq-wine-* and as the --primary token.

Navy: the gradient partner

Default #002C6C, exposed as bg-haqq-navy-*. Navy carries no semantic token of its own: it is the gradient's second colour and the second voice in a diagram, reached directly through the ramp rather than through --secondary, which is a neutral surface (see below).

Semantic tokens

Fourteen tokens, transcribed from libs/web-brand/src/index.css. Interfaces are built from these, not from the ramps directly: a component that reaches past a semantic token to a raw shade is the thing that makes a theme impossible to change later. Four of the fourteen are the status scale (--destructive, --success, --warning, --info), new to this repo as of the PR #480 alignment: before them, 1,509 raw Tailwind palette classes such as bg-green-500 and text-red-500 did the job these tokens do now.

The gradient

One gradient, defined once as --gradient-primary: linear-gradient(200deg, var(--color-haqq-wine-500) 18%, var(--color-haqq-navy-500) 72%), which resolves to linear-gradient(200deg, #66023C 18%, #002C6C 72%). It ships as the .gradient-primary utility, with .gradient-cta as a legacy alias that the Button component's gradient variant reads.

.text-gradient still exists in the stylesheet and it is not brand expression, it is an effect. Use text-foreground or text-primary on a heading instead of reaching for it.

Typography

Poppins does everything in Latin script (UI and headings) at four weights: 400, 500, 600 and 700. Cairo covers Arabic and RTL, headings and body: the same face the product apps use, so the typeface does not change when a reader crosses from the marketing site into eFirm or Legal AI. Cairo carries Latin too, so a product name or a numeral inside an Arabic sentence stays in one face. There is no third family.

Nothing sets the Arabic face by hand. @haqq/web-brand/index.css switches the whole document to it on html[lang="ar"] and html[dir="rtl"], headings and body together, so a page that renders correctly in English renders correctly in Arabic without a font class anywhere in it.

Weights

Four are loaded: 400 regular, 500 medium, 600 semibold, and 700 bold. Two are yours to type: font-medium and font-semibold. 400 is the body default. 700 stays loaded only because <strong> in prose renders it by browser default; font-bold is not a class the system uses, and a heading that needs more presence takes a larger size instead. The face is not loaded at any other weight, so font-light, font-extrabold and font-black render as a browser-synthesised approximation rather than the real thing. Treat those as unavailable.

Spacing, radius and shadow

Vertical rhythm

Sections carry the brand more than colour does, which is why the fifth principle above is about space. A standard section is py-16 md:py-24; a hero or marquee band is py-24 md:py-32. There is no third value.

Containers and gutters

Three container widths carry the whole site.

Every container carries the same gutters, px-4 sm:px-6 lg:px-8, so content never touches the viewport edge on a phone. Inside one, three grid gaps do all the work: gap-6 between cards, gap-8 between feature rows, and gap-4 for tight lists. Body copy is measured, not full-bleed (about 68 characters), via max-w-[68ch] or the prose container.

Component spacing

Below section rhythm sits a tighter, component-level scale. gap and space-y run on 1, 1.5, 2, 3, 4 and 6. Padding runs on p-3, p-4, p-6; px-2, px-3, px-4, px-6; and py-2, py-2.5, py-3, py-4. A marketing section's own vertical rhythm, above, is allowed to run higher because that is layout, not a component.

Icon sizes

size-4 is the default icon, matching a Button or an Input's own scale. size-3.5 is for a dense row, and size-3 is what an icon takes automatically inside a Badge or a Chip.

Radius

Radius comes from one variable and resolves to one class. --radius is 0.625rem, and every corner in the interface is rounded-md (calc(var(--radius) - 2px), 8px). Cards, inputs, buttons, chips, avatars, tabs and controls all take it. rounded-lg, rounded-xl, rounded-2xl, rounded-3xl and rounded-full are not part of the system: there is no circle and no pill anywhere in HAQQ. Across chat, efirm and this package's fifty-six primitives combined, rounded-full appears seven times, and every one is a mark under 12px: an unread dot, a status dot, a workload pip. At that size the exemption is not even needed: a border radius clamps to half the shorter side, so an 8px radius on any box up to 16px square already renders a full circle. size-2 rounded-md is a circle for free.

Elevation

Components

These are the shipping components from @haqq/web-ui, rendered live, not pictures of them. The Button's implicit default, no variant prop at all, is a solid bg-primary fill, not the gradient: gradient is a real variant and it is allowlist-only (see above), kept mainly so this page and its equivalent in apps/main can keep showing the true contract.

Those seven are the whole set @haqq/web-ui/button ships. An eighth, wine, is a deprecated alias of the default (the same bg-primary fill): six call sites remain from before the Button's default flipped off the gradient, and it takes no new ones.

Badge

Card

One card primitive, not six. @haqq/web-ui/card renders the root as rounded-md border bg-card text-card-foreground shadow-sm, the same 8px radius every other surface takes. The border and the shadow do the lifting, never a different background hue, which is the second half of the “legal-serious means quiet” principle. GRO-970 replaced six bespoke pricing shells and the Editorial and Moritz card wrappers with this one component.

Input

@haqq/web-ui/input renders h-9 rounded-md border border-input bg-background px-3 py-1 text-base shadow-xs, with a focus-visible:ring-[3px] on the border rather than the old 2px ring with an offset. Same height as the Button's default size, so a form row lines up without a wrapper forcing it.

Eyebrow: retired

The uppercase kicker line above a heading is gone sitewide. @haqq/web-ui/eyebrow still exists and still typechecks, but it renders null: it was kept as an empty shell so the roughly fifty existing call sites compile without a churn PR. Do not add a new one, and do not hand-roll the uppercase tracking span it used to produce. The Eyebrow row in the type scale above is still a real level (docs uses it for the small labels on this page). It is the marketing pattern that was retired, not the type size.

Illustration and ink

Every drawing on any HAQQ surface is an inline SVG built from the same frame and the same palette. There are no raster illustrations, no icon fonts and no third-party illustration packs.

Ink: colour where a class cannot go

The first principle above is “tokens or it doesn’t ship”, and an SVG is where it is hardest to keep. A fill attribute, a <linearGradient> stop, a canvas export and a build-time OG-card script can none of them resolve a Tailwind class, so for years each one typed the hex. @haqq/web-brand/ink is the module that ends that: every value below is read from the same ramp Tailwind compiles, so a drawing cannot invent a colour.

Anywhere a class works, use the class: fill-haqq-wine, stroke-border, fill-card, fill-muted-foreground. Those follow the semantic layer and adapt with it. Reach for INK only where a class cannot go.

The three kinds, and when to redraw

They look alike and they age in opposite directions. Getting this wrong is how a changelog quietly starts lying about what shipped in 2025.

Surface chrome

Four frames (the eFirm shell, the chat window, a browser, a phone) live in one module and are shared by every release and interface drawing. The shape of the frame answers “where does this live” before a word is read, which only works while there is exactly one of each. Six hand-drawn browsers would drift, and the drift would destroy the only signal the system provides. Draw a fifth frame only for a surface HAQQ actually ships to.

Brand voice

Every line below is quoted from live product copy, not written for this page. There is no locked tone-of-voice guide in the repo; this is the sourced inventory, so treat it as evidence of how HAQQ sounds rather than as a rulebook.

Primary

“Everyone deserves a great lawyer.” (the homepage H1, home.hero.h1).

Supporting line (home.hero.description): “Good legal help used to depend on your budget and where you live. HAQQ changes that: the same reasoning top firms use now reads your lease, drafts your contract, and answers your question, secure and governed throughout.”

The signature phrase “Digitizing Justice” is set in the gradient and nothing else. It is the founders' own words rather than a marketing line. The founder Q&A on Founder's story describes the mission as “to digitize and systematize justice delivery” and “justice should never be out of reach”, which is what the phrase is compressing. The company one-liner is “HAQQ is an AI-powered legal practice management platform that combines advanced AI with comprehensive law firm tools.”

Per-product taglines

Each line below is the string a visitor actually sees, with the key it renders from, so a deck or a pitch quoting one can be checked against the live site rather than against somebody's memory of it.

Products

Five products, each with one tagline and one description. The descriptions are the exact meta description each product page ships (seo.*.description), the same words a visitor or a search engine sees, so quoting one here cannot drift from the live page.

The company boilerplate is on About HAQQ, the founder bios on Founder's story, and the spokespeople and downloadable photography on People; coverage, announcements and the media desk are on Press.