( How we work )

Design that works, and a system your team can run without us

How we research, test and design brands, websites, products and campaigns at Mara, and why every project ends with a Brand OS: one system your team and your AI tools both follow.

Every page, screen, ad and deck your company ships is a decision about what your brand is. A few years ago a handful of people made those decisions, slowly, and a designer checked most of them. Now everyone on the team makes them every week, and AI tools make more of them than anyone.

That changes what a design studio is for. Output is cheap: a founder can get a landing page from a prompt before lunch. What's still hard is knowing which page to make, and keeping the hundredth page as good as the first.

So the projects we take on now end with two things in your hands. The first is what you'd expect from a studio: a brand, a site, a product or a campaign built on research, tested with real people and finished by designers who have done it many times. The second took us longer to see. It's a Brand OS: the rules behind that work, written down so your team and your AI tools can keep making things like it after we've left.

  • Research
  • Positioning
  • Voice
  • Identity
  • Art direction
  • Components
  • Tokens
  • Recipes
  • Examples
Brand OSbrand-os/ · 14 files
  • Websites
  • Products
  • Ad sets
  • Decks
  • Social posts
  • Emails
Every page, screen and campaign built from one source of truth.

Different versions of the same company

Picture a company half a year after a good launch. The team has doubled.

The founder makes a new page with AI every Friday. Each one is fine on its own. None of them look like the homepage.

Marketing needs twelve ad sizes by Thursday. The designer is booked until next week, so someone opens Canva and picks whichever logo looks closest.

A new product designer opens the design system on their first day. It was last updated in March. The product has changed four times since. Sales stopped waiting and built their own deck.

Nobody here is doing bad work. Each of them is working from a different version of the company, and customers see every version at once.

AI made the making cheap, and it didn't touch any of this. If anything, it sped it up.

The model the founder uses doesn't know who the customers are, what the competitors promise or why the last page converted, so it fills each gap with the likeliest answer. The marketer and the sales lead each work from their own memory of the brand. And the design system, the PDF, the one person everyone asks, all fall behind within months while the tools keep making decisions without them.

The usual fix is a new PDF, or one person who becomes the answer to every brand question. It holds until that person goes on holiday, or the company launches something the guidelines never imagined.

More output wasn't going to fix this. How the work is made and handed over might.

Over the last few years our process settled into the same ten steps, whether it's a brand, a website, a product or a campaign. We learned to test an idea before paying to execute it, to settle the structure before anyone picks a colour, and to build the system while we design rather than in the last week. What each step produces depends on the work.

Step 01 / 10
  1. Understand
  2. Shape
  3. Make
  4. Hand over
preview.mara.ink / research
( Sources )Competitor pages24Reviews1,240Support tickets380Search queries2,100Interviews8
( In their words )

“Our founder ships a new page every Friday. None of them match.”

“Half of our designer's week goes on resizing banners.”

Insight: teams pay for consistency, not for more output
ResearchUnderstand

Audit of the current site, traffic and conversion data, competitor pages, search demand.

One process for every kind of project. Pick yours to see what each step produces.

Start from what's true, not what's likely

Ask an AI for a landing page and you get one in seconds, and it looks competent. But the model doesn't know who buys from you, what they tried before they found you, what your competitors promise, or what made your last page convert. So it fills every gap with the most probable answer. Your competitors are asking the same model.

AssistantNew chat

Make us a landing page

Sure! Here’s a modern, high-converting landing page for your business:

Transform Your Business TodayThe all-in-one platform that helps teams work smarter, not harder.
⚡ Fast🔒 Secure📈 Scalable
★★★★★ “This changed everything!” — Happy Customer
Get Started Free

What the prompt didn’t say

06 / 06 guessed
  1. 01Who is this for, and what must they believe to buy?GuessedReal answer: research
  2. 02Where is the gap nobody in your market talks to?GuessedReal answer: research
  3. 03What should we leave out?GuessedReal answer: experience
  4. 04What's the shortest path from first visit to sign-up?GuessedReal answer: testing
  5. 05What worked for companies like yours, and what quietly failed?GuessedReal answer: experience
  6. 06What must stay the same on page 1 and page 100?GuessedReal answer: system
Five words in. Six questions answered by guessing.

Those questions decide whether a design pays for itself, and none of them fit in a prompt. So every project starts with research, done two ways.

With AI, we read in days what used to take a team weeks: competitor sites and ads, customer reviews, support tickets, forum threads, your analytics and search data, and what ChatGPT and Perplexity say about your category.

Then we put the model down and talk to people: your team, your customers, the ones who almost bought. We walk through your product as a new user would. And we bring what we've learned across more than a hundred projects, which isn't in any model's training data.

Then we validate. Research produces plenty of ideas that sound right. We put the ones that matter in front of real customers while it's still cheap to be wrong: positioning routes, offers, messages, small paid tests.

Experience saves the most time here. Many ideas that look new have been tried somewhere, and we've often seen how that ended.

It's the part of the work nobody sees, and the part that decides whether everything after it works.

Structure before style

Before anything gets a colour, we decide what goes where.

For a website that's a sitemap: every page, its sections in order, and the job each section does. For a product it's the information architecture and the flows for every main task. For a brand it's the message hierarchy, what you say first and what proves it. For a campaign, the audiences, stages and formats.

Then we build it in plain HTML, with real copy and real interactions, and click through it. First us, then real users, on their own phones. A flow that looks fine on a diagram often breaks the first time a person tries it. Finding that in a prototype costs an afternoon. Finding it after launch costs a rebuild.

Once the flow holds, it becomes a UX prototype: layout, hierarchy and interactions for every screen and every state, including the empty, loading and error ones nobody draws until they're needed.

Agentbrand-os/ · 14 files

Apply the design system to the landing page

  1. Applied tokens.cssGrounds, ink, accent, 2px corners
  2. Applied type.mdLight display, tight tracking, mono labels
  3. Applied components/Button.tsxPrimary and ghost, uppercase
  4. Applied components/Card.tsxHairline card, pixel glyph
  5. Applied art-direction.mdNavy panel, mono HUD, pixels

5 files applied. Every change is in a preview for review before it ships.

Ask the agent…
preview.mara.inkWireframeDesigned
ServicesProcessPricingLet’s talk
( Brand OS )

Designed by people. Run by your AI

One system your team and your AI both follow, so every page ships on brand.

Get a Brand OSHow it works
( What you get )
01One source of truthTokens, type and components in one place.
02Rules your AI readsAgents build on brand on the first try.
03Every page on brandSite, ads and decks from one system.
The tested wireframe, then one request: apply the design system.

Working in the browser this early changes the decisions. Motion, copy and layout get judged together, in the place they'll actually live, while the direction is still open. It's hard to go back to approving static pictures after that.

Then people design it

AI is good at widening the search. We use it for moodboards, references and quick variations of type, colour and layout, so we can compare more directions in a week than we used to in a month.

Then the senior team narrows them to two or three directions, each with its reasoning, and tells you which one we'd pick and why. Every concept you see is drawn by a designer. We don't present generated layouts as ideas.

The chosen direction becomes the full design in Figma: every page, screen, state and format. This is where taste earns its fee. Spacing, rhythm, type and the small details are what make a product feel expensive or cheap, and they're exactly what a generated layout gets average.

AI does the legwork. People make the calls.

Every decision becomes a part

While we design, each decision turns into something your team can reuse: tokens for colour, type, spacing, radius and motion; components with every variant and state; rules for how they combine and what's never allowed. And the part most handoffs skip: why each decision exists and where it applies, so the next person doesn't have to guess.

They carry the same names in Figma and in code, so design and development speak one language and building goes faster.

Say you decide the accent should be blue, the corners sharper and the headlines sans. In a picture, that's a redraw. In a system, it's one change, and the website, the product and the ads follow.

Local variables
  • color/accentFF6A3D
  • radius/base2
  • font/displayInter
tokens.css · generated1/* synced from Figma */2:root {3  --accent: #ff6a3d;4  --radius: 2px;5  --font-display: "Inter";6}

One source. Figma, the code and the AI all read it.

mara.ink
ServicesWorkProcessPricingContact
( Brand OS )

One system.
Every surface

Book a callSee work
Brand.os / tokensLive#FF6A3D · R 2 · Inter
app.mara.ink/brand-os
( Workspace )

Brand OS

New request
Files24Review3On brand100%
  • Logo systemv3 · 12 filesShipped
  • Homepage heroFigma + codeIn review
  • Launch ad set6 sizesIn progress
mara.inkSponsored
( Brand OS )

One rule.
Every surface

Design · Dev
Learn more
Change one decision. The site, the product and the ads follow.

Not everything syncs by itself. Colour and type travel easily between tools; voice and art direction need judgment, and every channel has its own limits. Someone still checks how a new rule lands in each place. But the rule lives in one place, and everyone, human or not, reads it from there.

Why your AI keeps guessing

A brand book might show the homepage with an orange accent. It doesn't say whether orange belongs on a button in the settings screen, on a warning, or nowhere at all. A designer would ask. An AI decides, and every decision it can't ground in a rule moves the work a little closer to what any product would look like. It isn't bad. It's average.

People hit the same gap. Anyone who has handed over a design system knows the questions that follow. How should this hover behave? Do these tokens match the Figma variables? The docs say one width and the site uses another, so which is right? Each question is a decision that was made during the project and never made it into the handoff.

When work was slow, someone caught that drift. Now a company makes more small brand decisions in a month than it used to make in a year. Without the reasons behind the original ones, speed only multiplies the guessing.

  1. 01Settings
  2. 02Pricing
  3. 03Email
Design the billing settings screen, with a note that the March report is ready
Without a systemlocalhost:3000/settings/billing

Billing & Subscription

Manage your billing information and subscription plan.

🎉 Your March report is ready!Unlock powerful insights with seamless, AI-powered analytics.View Report →
Current PlanActive$49/monthPro Plan · Everything you need to grow 🚀Upgrade Plan
💳 Visa ending in 4242Edit
With Mara’s Brand OSapp.mara.ink/settings/billing
Settings / Billing

Billing

The March report is ready. Olena signed it off this morning. We email the PDF to finance on Monday.

Current planActiveRetainerA senior designer and a developer. New work every month.$4,000/ moRenews 1 Dec11 invoices
CardVisa ···· 4242ChangeSave billingDownload invoices
  1. color.md“Accent is orange, max one per screen. Buttons are ink.”
  2. shape.md“Corners are 2px. Hairlines, not shadows.”
  3. type.md“Labels are mono, uppercase. Numbers are light.”
  4. voice.md“Say who does what. No ‘unlock’, no ‘seamless’.”
The same request, with and without a Brand OS.

The AI didn't get smarter. It got your rules.

Brand OS: the system behind the work

Brand guidelines show what your brand looked like on the pages someone already designed. A Brand OS gives the context to make the ones nobody has designed yet.

It's a folder of plain files that a person can browse and an AI agent can read, in Claude, ChatGPT, Cursor or Figma. Open one and it reads like the notes a good designer would leave a new teammate. Strategy comes first: positioning, how you talk, the words you use and the ones you never do. Then the visual side: colour, type, the logo, art direction and the tokens, each with the reason it exists. Then the real components and how to build with them. Then recipes for the jobs that keep coming back, a landing page, an ad campaign, a sales deck. And at the end, checks the AI runs on its own work before anyone sees it.

It also tells an agent where to start. A campaign needs positioning, voice and art direction; a product screen needs tokens and components. The readme maps each job to the files it needs, so nobody, and no model, reads the whole system every time.

A Brand OS, open. Watch which files the agent reads for each job.

For brand and marketing work we add small creative tools built on the system: pick a template, drop in a photo and a line, export every size. Your team makes the everyday assets themselves, and they stay on brand.

We test it on someone who's never seen it

Before handoff we give the Brand OS to a fresh AI agent with no other context and ask it to make something nobody has designed. We look at what it gets right and where it makes things up. Every guess points to a missing rule or an unclear file. We fix it and run the test again, until a stranger to the brand can make new work that looks and sounds like you.

That's also why the system isn't assembled in the last week. Research, strategy and design happen the way they always have, led by people. But as each decision lands, it goes into the system with the reason behind it. Months later anyone can see why a component behaves the way it does, or why a rule changed, without digging through old files.

Handoff, then development

If the project is design only, your developers get the Figma files, specs, the design system and the Brand OS. We walk them through it, answer questions during the build and review the result before launch.

If we build it, the same team carries on: websites in Framer, Webflow or Next.js, products in React and Next.js. Coding agents draft from the design system, every change arrives with a preview, and senior developers review the code. Nothing goes live without their yes, and yours.

Then we sit down with your team for working sessions on real tasks, a page, an ad set, a deck, made with the system while we're in the room.

Our test is simple: your team ships something new without asking us how.

It rarely happens on day one. A few weeks of questions back and forth usually gets a team there, and every question makes the system better for the next person.

When it works, it's the best part of the job.

You run the routine. We do the new.

Here's what an ordinary Tuesday looks like a few months later. Someone in marketing needs a banner for next week's webinar and makes it before lunch. Sales builds a deck for a new market from the deck recipe. A product manager drafts a page for a new feature, and the agent picks the right sections on its own. Nobody waited for a designer, and all of it still looks like you.

Your designers get back to the product. A new hire learns the rules in their first week. And when something has to be new, a launch, a rebrand, a new product, a campaign that has to stop people scrolling, that's when you call us. It's the work we're best at, and honestly the work worth paying a studio for.

Keeping a system alive is the hard part, and we won't pretend otherwise. New teams, channels and tools raise questions the first version didn't answer. Some need a new rule or component, some need a decision. We stay on for that if you want us to, and everything we build together is yours from day one.

More and more, our value isn't in making each output. It's in defining the decisions behind them.

If you're about to hire a studio

Ask what your team will actually receive. Ask how a new hire will use it, how your AI tools will find the right guidance, and what happens when you launch something the guidelines didn't plan for.

Whoever you work with, ask for the decisions behind the work, not just the files.

We started asking ourselves the same questions a few years ago. The answers are why we work the way we do now.

( Let's talk )

Tell us what you're making. We'll tell you which steps it needs.

A 30-minute call. We look at what you have and you leave with a plan, a timeline and a fixed price.

What do you need?