Design system

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

Principles

Five 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. 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 — secondary

Default #002C6C, exposed as bg-haqq-navy-* and as the --secondary token.

Semantic tokens

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. The hex beside each triple is computed from it, for pasting into tools that do not speak hsl().

The gradient

One gradient, defined once: linear-gradient(200deg, #66023C 18%, #002C6C 72%). It ships as .gradient-primary, with .gradient-cta as a dedicated alias consumed by the Button component's gradient variant, and --gradient-hero as an 0.8-alpha wash for imagery overlays.

Text can carry it too, through .text-gradient, and that is where the third principle earns its place: the gradient is reserved for a single hero keyword — Digitizing Justice — never for every card title, badge and icon on a page.

Typography

Poppins does everything in Latin script — UI and headings — at four weights: 400, 500, 600 and 700. IBM Plex Sans Arabic covers Arabic and RTL, headings and body. 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, and only four: 400 regular, 500 medium, 600 semibold, 700 bold. The font 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 face. Treat them as unavailable.

Spacing, radius and shadow

Vertical rhythm

Sections carry the brand more than colour does, which is why the fourth principle 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.

Radius

Radius comes from one variable. --radius is 0.75rem, so rounded-lg is the card and input radius, rounded-md is calc(var(--radius) - 2px) — about 0.6875rem, or 11px — for chips, and rounded-full is for pills and controls.

Elevation

Components

These are the shipping components from the shared UI package, rendered live — not pictures of them. Gradient is the Button's default variant, which is a trap worth knowing: it applies the gradient-cta class rather than a bg-* utility, so a className that sets its own background loses the cascade. Always pass an explicit variant on any button you restyle.

Those seven are the whole set — @haqq/web-ui/button ships exactly these. The GRO-970 cleanup removed default, hero, heroFilled, nav, navyText, machine and machineFilled, so there is no variant debt left to work around.

Badge

Card

One card primitive, not six. rounded-lg border bg-card shadow-sm — 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. Hover bumps it to shadow-md. GRO-970 replaced six bespoke pricing shells and the Editorial and Moritz card wrappers with this one component.

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.

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 FAQ on Company Bio 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, the founder bios and the downloadable press photography are on Company Bio; coverage, spokespeople and the media desk are on Press.