The Visual Identity of Takeover Software — Plain, Monochrome, and On Purpose

Most food-software brands look the same because most food-software brands are made the same way — by committee, by theme, by whatever is trending on product sites this quarter. Purple gradients. An AI-sparkle icon. A hero illustration of a smiling person holding a tablet in a kitchen that no real kitchen resembles. A pile of feature tiles with three-word headings and stock icons from Figma Community.

We have tried to avoid every one of those decisions.

This post is a walk through the visual identity of Takeover Software and the design system underneath it — what we chose, what we refused, and why the brand looks the way it does. If you would rather read the formal reference, everything below is documented in full in MASTERVAULT/03 - Brand 🎨/ and rendered live inside the admin app at /brand.

The brand in one paragraph

Takeover Software is the company. Everything we ship is under that name. It is not a SaaS brand, not a delivery marketplace, and not a tool for every industry. It is for food businesses in Ireland — cafés, takeaways, restaurants, grocers, dark kitchens, farmers' markets — and it is free at the point of use. We make money when value changes hands (payments, delivery, ads), not when access is granted. That stance dictates almost every visual decision that follows.

Under Takeover Software sit three apps:

• SELLERS — the merchant-side operating system. iPad-first, also web and phone.
• VOID — the consumer marketplace. Mobile. Legacy slug one in the code.
• RIDERS — the courier app. Mobile.

They are apps under Takeover, not independent brands. The Takeover parent mark always leads or sits beside them. The three sub-apps never show up in marketing without being identified as Takeover apps.

Monochrome, on purpose

The interface is black, white, and grey. No brand hue. No accent colour. No purple-to-pink anywhere on the estate.

The pragmatic reason is that colour is a scarce resource. When everything is grey, the one red button for a destructive action actually reads as a warning. When a dashboard has six different hues of blue for six KPIs, every KPI reads as equally important, which is the same as saying none of them do. Monochrome forces you to build hierarchy with type, weight, spacing, and contrast — the things that age well — rather than with palette choices that feel dated within eighteen months.

The less pragmatic reason is aesthetic. The brand is in opposition to the visual language of managerial-class software — screens crowded with approvals, dashboards designed for the audit trail rather than the user, interfaces that serve the seat of power rather than the seat of work. Those products tend to reach for colour and gradient to seem modern. Monochrome is how we say we are not that.

The palette is defined in OKLCH in admin/src/styles.css. OKLCH is a perceptual colour space — equal numerical steps feel like equal visual steps, which is something hex does not give you. The greyscale ramp runs from oklch(1 0 0) for page backgrounds to oklch(0.141 0.005 285.823) for primary text, with a 1.5 % bluish hint so the dark shade does not read as neutral black — that subtle cool tilt keeps the interface from feeling like a receipt printer.

The only colour that appears regularly is destructive red at oklch(0.577 0.245 27.325), reserved for destructive actions and errors. And for data visualisation we have a five-step warm-sequential scale — pale yellow down to burnt orange — used in charts. Five stops. Same hue family. No pie-chart rainbows.

One typeface

The typeface is Geist. Variable weight. Used across web and native. Geist Mono is used for code, prices, and tabular numerics. There is no third face. If a surface looks like it needs Inter as a fallback, then Geist failed to load somewhere, and the fix is to fix the loading, not to add Inter.

Why one face? Because two faces are rarely an improvement and almost always a cost. Brand recall compounds when a single typeface appears on every screen, every PDF, every email, every meta description. Every time a new face arrives, the compound starts over. Geist is also genuinely good — it carries variable weight cleanly at small sizes, its numerals are even, and its open licence means we can bundle it for native without a legal question.

The type scale is semantic, not decorative: text-3xl font-bold for page titles, text-2xl font-semibold for sections, text-lg font-semibold for card titles, text-sm or text-base for body, text-sm text-muted-foreground for descriptors, text-xs font-medium tracking-wide for labels. Prices and any tabular data column are font-mono tabular-nums — a column of money set in a proportional face looks broken, even if the individual glyphs are correct.

Radius of ten

Every radius in the system comes off a single token: --radius: 0.625rem (10 px). From that token we derive seven tiers — sm (6), md (8), lg (10), xl (14), 2xl (18), 3xl (22), 4xl (26). Every rounded element in the product uses one of these.

Why enforce a scale? Because the moment one component uses an 11-pixel radius and another uses a 12, the product loses coherence in a way that no-one can articulate but everyone can feel. Everything descends from the same root number and looks like it belongs to the same family.

Pills (rounded-full) are almost never used. They are reserved for avatars, status dots, the floating action button on mobile, and icon-only circular buttons. Anywhere else, a pill reads as SaaS-marketing — the universal signal that a layout was picked from a component library at random.

One motion vocabulary

The four animations in the system are animate-float (a slow 6-second loop for hero decoration), animate-fade-up (a 0.6-second up-and-in for content reveal), animate-scale-in (a 0.5-second subtle scale for toasts and dialogs), and hover-lift (a 0.3-second translate-and-shadow for interactive cards). That is the full library.

If an animation you are adding does not fit one of those four, it is usually the wrong animation. Motion is not decoration; it is feedback. The floor price of inventing a new animation is that it will become someone else's unfamiliar one in six months. Keeping the vocabulary tight is cheaper than keeping it broad.

The parent and the apps

The parent mark is a black rounded-square with a white capital T, set in Geist Bold. At small sizes (16–32 px) we generate it in the component tree so it is immune to rasterisation — no file to serve, no alt text to forget, no SVG path that quietly drifts. At larger sizes the PNG at takeover-software/public/takeover-logo.png is the stable export. The wordmark is "Takeover Software" set in Geist with tracking-tighter for the lockup.

The three sub-apps each have their own icon: vendors.icon for SELLERS, one.icon for VOID, rider.icon for RIDERS. Each is provided as an iOS .icon bundle (Apple's 2024 tinted + dark + light format), an Android adaptive-icon PNG, and light / dark splash variants. The icons share the monochrome palette and are designed to read at 32 × 32 px on a crowded home-screen.

When the parent and a sub-app appear together, the parent leads — always. Not because of ego but because a new reader encountering "SELLERS" alone has no way to know this is a Takeover app. We write "SELLERS, by Takeover" in marketing, or show the parent mark beside the sub-app, so the brand architecture is legible the first time someone meets it.

The voice

The brand's voice is documented in full at MASTERVAULT/06 - Knowledge 🧠/voice.md — the file is long, but the short version is: plain language, specific nouns, short sentences. We say "commission", not "take rate". We say "Friday night", not "peak demand window". We do not say "empower", "unlock", "supercharge", "elevate", or any of the verbs that populate a pitch-deck template.

We also do not state numbers, rates, or rankings about third parties as fixed facts without a linked source. Every claim about platform commission rates in our blog posts cites its source document, not because we expect readers to click through, but because writing down the source is the cheapest insurance against a claim drifting from "roughly 25–35 %" to "over 40 %" in an email a year later.

The villain framing of the brand is deliberate — we are against platform landlordism, managerial-class interface design, and the "AI-first" repositioning of software that should be reliable. But the villain is a class, never a named individual. You will not find us calling a specific competitor a crook; you will find us arguing that a model where a third party stands between a small food business and its customer is the wrong model.

Accessibility is a floor, not a feature

The design tokens are chosen so that every paired combination of --foreground on --background, --primary-foreground on --primary, --muted-foreground on --muted, and so on, passes ≥ 4.5 : 1 contrast at body sizes. Focus rings are always present — we never remove the :focus-visible outline. Tap targets on native are a minimum of 44 × 44 px; on web, 32 × 32 px for icon-only buttons.

These are baseline commitments. They do not make the UI accessible by themselves — that requires the whole pipeline from content to keyboard behaviour — but they mean the foundation is not fighting us.

Why write it all down

A design system that is not written down drifts. Someone changes oklch(0.92 0.004 286.32) to oklch(0.93 0.004 286.32) on a Friday because they think it reads better, and now the admin's border is one perceptual step off everywhere else. Someone else uses rounded-xl on a button because it "felt right", and now the button looks different from every other button. Over a year, the brand decays one imperceptible decision at a time.

The fix is the written system. MASTERVAULT/03 - Brand 🎨/ holds the prose version. admin/src/styles.css holds the canonical tokens. The admin app at /brand renders the tokens live, so there is no way for the document and the code to silently disagree. And MASTERVAULT/03 - Brand 🎨/llms.md holds a compressed, machine-readable version for any LLM that generates brand-adjacent output — which is increasingly every tool we use.

The payoff is that when we ship a new product surface, the decisions are already made. Colour — use the tokens. Type — use the scale. Radius — one of seven. Motion — one of four. There is no committee call about whether this dashboard "feels right". It feels right because it is built out of the same pieces as the last dashboard.

What this looks like, in short

• Takeover Software is the parent. SELLERS, VOID, RIDERS are its apps.
• Monochrome OKLCH palette. No brand hue. Destructive red only.
• Geist everywhere, Geist Mono for code and prices.
• 10-pixel radius root. Seven radius tiers. No pills except avatars and dots.
• Four animations. One shadow level. One glass level. One grid pattern.
• Plain language, specific nouns, cited sources.
• Every decision written down in MASTERVAULT/03 - Brand 🎨/ and rendered live at /brand inside the admin.

None of this is clever. All of it is opinionated. That is the point.

Read next

• The live design system — /brand inside the admin app.
• The prose reference — MASTERVAULT/03 - Brand 🎨/.
• The machine-readable reference — MASTERVAULT/03 - Brand 🎨/llms.md.
• The voice document — MASTERVAULT/06 - Knowledge 🧠/voice.md.