A
DESIGN SYSTEM · V2.0

The system behind Adigiit.

A small, opinionated set of materials. Two typefaces, one mono. A warm dark canvas, a gold and an emerald. One stripe. One italic A. Repeated until they mean something.

TYPOGRAPHY Fraunces · Outfit · JetBrains Mono
PALETTE 9 tokens · 1 gradient
VOICE British · plainspoken
01 / FOUNDATIONS

Brand essence.

Adigiit is a British software studio with engineers in India. The system reflects that — restrained, warm, a little literary. Confident without shouting. Built for an audience of intelligent adults.

PRINCIPLE 01

Restraint over noise

One typeface for display, one for body, one for code. One gradient. One italic monogram. The system earns its impact by repetition, not by adding more.

PRINCIPLE 02

Warmth as material

Backgrounds aren't white — they're parchment. Blacks aren't pure — they're warm ink. The palette feels printed, not generated. Software companies feel cold; we don't.

PRINCIPLE 03

Honesty in the small print

Prices are written down. Quotes are anonymised by default. Numbers are real or absent — we don't invent a "98% satisfaction rate". The system supports that, never decorates around it.

03 / FOUNDATIONS

Colour.

Nine tokens. Warm dark, parchment light, gold and emerald accents, three neutrals. One gradient — gold to emerald — used for the structural stripe and for hero typographic moments only.

Anchors

Ink (dark)#120D06
OKLCH 18.4% 0.009 60 RGB 18, 13, 6
Dark canvas. Heroes, CTA sections, footer. Warmer than pure black — closer to printed wet ink.
Parchment (light)#F5F0E8
OKLCH 94.8% 0.011 80 RGB 245, 240, 232
Light canvas. Body, sections, type on dark. Slightly warm — not stark white.

Accents

Gold#C9922A
OKLCH 67% 0.13 80 Hover #E0AA3A
Primary accent. Used for warmth, highlights, ital words in headlines, hero CTAs.
Emerald#0F5132
OKLCH 38% 0.09 155 Hover #1A6B42
Secondary accent. Trust signals, italic emphasis on light backgrounds, success state.

Surfaces & neutrals

Surface#1E1610
Dark cards, raised panels on Ink.
Parchment-2#EBE3D4
Alternating section background. Quiet rhythm.
Sage#D0E8DC
Success-tinted backgrounds, soft callouts.
Stone#9C8E7C
Muted text, captions, mono labels.

Signature gradient

USAGE
Vertical stripe on left edge of dark heroes (4px). Horizontal accent under cards on hover (3px). Hero typographic gradient via background-clip. Never as a section background, never as button fill.
linear-gradient(
  to bottom,
  #C9922A 0%,
  #0F5132 100%
)
04 / FOUNDATIONS

Typography.

Three faces. Fraunces (display, italic-led), Outfit (body and UI), JetBrains Mono (labels and code). All three are variable, all three are free, all three are loaded with a single Google Fonts request.

DISPLAY
Fraunces
Variable serif. opsz 9–144, wght 300–900, italic, SOFT axis. Used for every headline, the logo, italic emphasis. Editorial-grade serif with character without flourish.
Adigiit ships software, on time, on a stable code base, with senior engineers on every change.
BODY · UI
Outfit
Variable geometric sans. wght 300–700. Used for all body copy, buttons, navigation. Clean, modern, with enough warmth to live next to Fraunces.
A British software studio with engineers in India. We build web applications, mobile apps and SaaS products for ambitious teams — at roughly forty percent under London rates, with a one-day response guarantee written into every contract.
CODE · LABELS
JetBrains Mono
Used for all mono labels, eyebrows, technical detail, code samples. Always uppercase + tracked when used as a label. Always normal-case in code.
const page = await db.patients.paginate({
  cursor, limit: 50, orderBy: 'updated_at',
});

Display scale

Fraunces, opsz=96, weight 500 unless noted. Headlines use balanced wrap (text-wrap: balance).

D1 · clamp(48px, 7.5vw, 124px)
Software, delivered right.
D2 · clamp(36px, 4.6vw, 68px)
What we actually build.
H3 · clamp(22px, 2vw, 32px)
Web applications
Lede · 17–21px Outfit
A predictable shape for the work. Same on a six-week prototype.
Body · 16px Outfit
Anonymised on purpose — most of what we build sits inside other people's products.
Caption · 13px Outfit
Pricing is written down. We don't do "let's discuss".
Label · 11.5px Mono
UK-MANAGED · GLOBALLY ENGINEERED
05 / FOUNDATIONS

Scale & spacing.

Fluid by default. Section padding scales with viewport. Inner grid gutters tighten on narrow screens. Three density modes (compact / regular / airy) toggle the page rhythm without re-laying anything out.

Section padding

x · default
clamp(24, 5vw, 96)
y · default
clamp(72, 9vw, 128)
gutter
clamp(20, 2.4vw, 40)

Density modes

compact
y: 56–96
regular
y: 72–128
airy
y: 96–180

Border radii

0 · sections, full-bleed
4 · cards, panels
8 · product UI mocks
999 · buttons, pills
06 / FOUNDATIONS

Motion.

Restrained. One scroll-reveal pattern, one hover lift, one button arrow nudge. No parallax, no sticky video, no scroll-snap.

REVEAL

Sections appear on scroll

opacity 0 → 1, translateY 28px → 0, 800ms, cubic ease-out. Threshold 12% in view.

HOVER LIFT

Primary actions rise 1px

translateY(-1px) at 200ms. No shadow change. Subtle, not bouncy.

ARROW NUDGE

CTAs nudge right on hover

The shifts translateX(3px) on parent hover. Tells you it's a link.

07 / COMPONENTS

Buttons.

Three styles, two roles. Primary (ink) for the main action. Accent (gold) for hero moments and conversion. Ghost for the secondary path. Link-style for inline action.

Read the full story ↘
Read the full story ↘
08 / COMPONENTS

Pills & eyebrows.

Eyebrows precede every section and orient the reader. Pills are inline metadata — used for status, category, count. Both always in mono caps with tracked letters.

EYEBROW · MONO CAPS · TRACKED 0.04EM
NEW PROJECT SHIPPING BLOCKED
· UK · · IN · · YOU ·
09 / COMPONENTS

Cards.

Two kinds. Dark cards on dark sections — gradient stripe on the left, mono eyebrow, Fraunces title, Outfit body. Light cards on light sections — single-line bottom rule animates in on hover.

· OPTION B ·

Fixed-scope build

You bring a defined product or feature; we deliver against a fixed price, with weekly demos and a 90-day warranty.

· UK ·

Strategy & ownership

A UK lead owns the relationship, the architecture and the outcome. Same person from kickoff to handover.

CRAFT

Senior reviews

Every PR touches a senior engineer before it merges — the UK lead or one of the two principals in India.

Web applications

Marketing-grade frontends and dashboards that survive contact with real users. Next.js, Remix, Vue, Django, Rails.

Mobile apps

Cross-platform when it fits, native when it matters. We ship through TestFlight and Play Console every week.

SaaS products

Multi-tenant, billing-aware, audit-trailed. We carry MVPs through to enterprise procurement.

10 / COMPONENTS

Section patterns.

Three repeating shapes. Eyebrow-headline-lede gives every section context in two lines. Sections alternate parchment / dark to establish rhythm. Watermark "A" sits on dark heroes, never on light.

A
CAPABILITIES
What we actually build.
Six disciplines, one team. We don't lead with a stack — we lead with the problem, and choose tools that suit the lifespan of the thing we're making.
11 / COMPONENTS

Product surfaces.

We don't use stock photography. The site shows what we build, by showing what we build. Four reusable mock formats — phone, dashboard, architecture diagram, code review — all on the same dark canvas as the brand.

[ MOCK · phone ]
240 × 480 px · iOS-shaped bezel
screen content in Fraunces + Outfit
[ MOCK · dashboard ]
full-width · sidebar + main
three stat tiles, timeline rows
[ MOCK · architecture ]
grid of service nodes
edge / service / data tiers, status dots
[ MOCK · code-review ]
PR header + diff + review comment
shows craft without claiming clients

Live versions on the homepage Selected Work section.

12 / VOICE

Tone & copy.

British English. Plainspoken. Confident without being smug. Specific over abstract. Honest about the things most agencies hide.

DO
  • Write down the price. "From £18k/month" beats "let's discuss".
  • Name the awkward thing. "UK-managed, India-engineered" — say it, don't dance around it.
  • Use real numbers, or none. "142ms p95 latency" is good. "98% satisfaction" is not.
  • Anonymise honestly. "A UK clinic group" reads better than a made-up brand name.
  • Use italic for emphasis once per paragraph. Then stop.
DON'T
  • Don't say "innovative" or "cutting-edge". The work either speaks or it doesn't.
  • Don't pretend to be UK-only. Procurement teams will find out, and you'll have lost the room.
  • Don't list every framework. Stack matters to a few people; outcomes matter to everyone.
  • Don't open with a question. "Looking for a software partner?" — no.
  • No emoji in headers, no AI-icon trios. Restraint is the brand.
13 / VOICE

Voice, in copy.

Same idea, written two ways. The left column is how the site sounds; the right column is what we never let through editorial.

DO
"Adigiit is a UK-managed software studio with engineers in India. We build web, mobile and SaaS products — at roughly forty percent under London rates."
Specific. Honest about the model. Names the value without overclaiming.
DON'T
"At Adigiit, we leverage our global engineering excellence to deliver innovative, cutting-edge software solutions for forward-thinking enterprises."
Six adjectives, no information, no human in the sentence.
DO
"Replaced an eight-year monolith without a big-bang cutover. Zero incidents. Roughly 40% lower infra costs."
Concrete outcome, real number, plain language.
DON'T
"Successfully transformed a legacy system to deliver outstanding business value and exceed client expectations."
Vague verbs, no specifics, ends in marketing-speak.
DO
"Reply within one working day, or we cover next month's retainer fees. Signed into every contract."
Specific promise, real consequence, written commitment.
DON'T
"We pride ourselves on industry-leading response times and best-in-class client communication."
Pride is not a promise. "Industry-leading" is unverifiable.
END · v2.0

Use it. Add to it. Don't redecorate.

If you find yourself adding a new colour, a new typeface or a new gradient — pause. The system is small on purpose. Push the existing pieces harder before reaching for another one.

See it live