Brand Strategy

Naming a category, not just a product.

How I developed a dual-expression identity system, found uncontested visual territory in a crowded market, and positioned a new category of design tooling. From competitive audit to launch-ready brand.

Loading demo…

The self-authoring sequence, recorded live from intentstudio.design

01

The page that builds itself.

The first version of the landing page was a competent SaaS template. Feature pillars, persona tabs, comparison table, pricing cards, FAQ accordion. Every Figma plugin, every AI tool, every indie SaaS ships that exact skeleton. For designers with high visual literacy who scroll past dozens of these weekly, it registers as “another one” before they even read the copy.

The irony was sharp: a tool that authors bespoke design systems was presenting itself through the most generic possible design system.

The insight
The audience doesn't need convincing that design systems are valuable. They need to feel the compression: weeks of grunt work vanishing into a conversation. The page shouldn't tell them about it. It should perform it.

The solution was a self-authoring page. The visitor opens to an almost-empty canvas: just the ] mark and a blinking cursor in a chat input. A prompt types out: “Build a landing page for a design tool. Warm, craft-forward, monospace accents.” Then the page builds itself. CSS custom properties cascade in and the Atelier palette transitions from nothing to the full brand identity. Sections materialize as if the AI is placing them. Typography locks in. Components snap to grid.

On intentstudio.design, the page you land on is the output. The medium and the message are the same thing.

Three layers run simultaneously. A chat simulation types the prompt with realistic timing. A variable cascade panel shows tokens appearing in real time (--color-primary: #B8741A) while the page's actual styles update in response. And sections materialize with a specific choreography: frame appears empty, auto-layout snaps children into position, then content populates. The sequencing is what makes designers lean forward. Too fast and it feels preloaded. Too slow and people bounce.

Loading demo…
01b

The plugin that authors design systems.

The landing page demonstrates the output. The Figma plugin is the engine. Intent Studio is a conversational AI tool that writes production design systems directly to the Figma canvas: variables, token hierarchies, components with proper bindings, documentation. Not code-first prototypes. Not wireframes. Native Figma elements authored through natural language.

Nothing else in the market does this. Figma Make generates code-first layouts, 3 frames max. Relume builds sitemaps externally. Every other AI tool in the space skips Figma entirely or treats it as an export target. Intent Studio treats Figma as the authoring environment, because that's where designers actually work.

02

Two expressions, one identity.

The brand system has two halves that serve completely different purposes but reinforce each other everywhere they appear. The mark is a symbol. The voice is a language. Together they form an identity that speaks natively to the audience's daily vocabulary.

The mark
]
A closing bracket in Cormorant Garamond 600. The punctuation of completion. Goes where you need pure symbol: favicon, plugin icon, loading states, email signatures.
The voice
--intent: design-system;
A CSS custom property declaration. The colon always in amber. An infinite tagline generator: the value changes, the syntax stays. Social posts, headlines, tutorials.

The ] bracket is the closing punctuation of a design system. It seals the work. It's the last character in the output. As a logomark, it renders cleanly from 128px down to 16px with no loss of legibility.

The --intent: voice is syntactically valid CSS. For the target audience of designers and frontend developers, this isn't a metaphor. It's their literal daily language repurposed as brand expression. Every new feature, every tutorial, every piece of content gets its own resolution: --intent: token-hierarchy;, or --intent: your-next-project;, or --intent: undefined; for the 404 page.

]
Intent Studio
@intentstudio
--intent: your-next-project;
Describe your design system. Watch it author itself in Figma. Variables, tokens, components. All from a conversation.
12:34 PMintentstudio.design
Social post
]
--intent:
Authoring your design system
Loading state
--intent: undefined;
This page doesn't exist yet.
Maybe you should describe it.
Go home
404 page
]
--intent: token-hierarchy;
Primitives, semantics, and components.
How the three-tier system works.
]
Intent Studio
12:47
YouTube thumbnail
From: joe@creativenoyes.com
Subject: Re: Design system scope
Hey Sarah,

Scoped the token architecture for the dashboard. Three tiers: primitives, semantics, component-level. I'll have the first pass ready by Thursday.

Attached the variable mapping for review.
]
Joe Noyes
Intent Studio · intentstudio.design
--intent: design;
Email signature
Figma
]
]
Intent Studio
What would you like to build?
--intent:
Tip: Try "Build a fintech dashboard with accessible slate-neutral variables"
Plugin panel
03

The Atelier palette and typography.

Seven colors. Three typefaces. No dark mode. The palette is named Atelier because it is meant to feel like a workshop, not a dashboard.

Parchment
#F5EFE4
Primary background
Walnut
#1A1410
Primary text
Amber
#B8741A
Accent / CTA
Driftwood
#8A7B6E
Secondary text
Linen
#EDE4D5
Surface
Sand
#D1C7B5
Borders
Cream
#FAF7F2
Elevated surface
Display
Cormorant
Garamond · 400, 600 · italic
Body
DM Sans
400, 500
Voice
IBM Plex
Mono · 400, 500
04

Every competitor looks the same. That's the opportunity.

Before designing anything, I audited the visual identity of every tool in the space. The finding was striking. Every single competitor lives in cold blues, purples, and neutral grays. The entire warm end of the spectrum was completely unoccupied.

Figma Make

Dark + purple
#1E1E1E
#7B61FF
#F5F5F5

Relume

White + green
#FFFFFF
#111111
#00C853

UX Pilot

Blue + slate
#2563EB
#F8FAFC
#1E293B

Figr

Indigo + neutral
#6366F1
#FAFAFA
#18181B
Ours

Intent Studio

Parchment + amber
#F5EFE4
#B8741A
#1A1410

This isn't just an aesthetic choice. Color territory is a competitive moat. When every competitor is a shade of purple, the tool with warm earth tones is immediately distinguishable at a glance in a plugin panel, a social feed, or a search result. You don't need to read the name to know it's different.

I explored three full visual directions with strategic rationale for each. The Atelier (craft-forward, warm earth tones). The Operator (dark, precision engineering, terminal aesthetic). The Editorial (typographic-led, black-and-white with amber accent). The Atelier won on three criteria: competitive white space, audience alignment with how designers see themselves, and longevity beyond current tech-trend aesthetics.

05

Why I renamed the product three months before launch.

The product started as “Schemely.” It sounded like a wireframing tool. Every demo required me to first correct the assumption that this was some kind of layout generator. The name was creating an expectation gap that marketing would have to constantly fight against.

Schemely
Sounds like wireframes. Sounds like "schemey." Nobody remembers how to spell it.
Intent Studio
Purpose-first. Professional craft environment. You communicate the goal.

“Intent” communicates what the product is actually about. You describe your intent, your design direction, your goals. The tool handles the execution. It positions directly against code-first tools where you write instructions, not outcomes.

“Studio” signals a professional craft environment. Not an app. Not a generator. A studio is where serious work happens. Combined with “Intent,” it frames the product around what the designer cares about.

Key language decision
We don't call it a “generator.” That word implies randomness. You author systems. That's precise, intentional, and ownable. “Design system authoring” is the category. Everyone else generates, converts, or manages.
06

The gap nobody was filling.

Building a production design system in Figma takes 8 to 12 weeks with a two-person team. Getting it into code is closer to six months. For freelancers juggling multiple clients and small agencies running lean, that timeline is the difference between delivering a proper system and delivering a pile of unconnected components.

I mapped every tool in the AI + Figma space and found a clear, open niche. Figma Make generates code-first prototypes, 3 frames max. Relume builds sitemaps externally. Figr Identity uses click-based UIs. Lovable and Bolt skip Figma entirely. Nobody was building conversational AI that writes native design system elements directly to the canvas.

The market data backed it up. 30% of Figma's highest-value enterprise customers were already using AI-assisted design weekly. 61% of small-company Figma users said AI was critical to staying competitive. The demand existed. The tool didn't. And based on Figma's code-first trajectory, the window to establish this category was 12 to 18 months.

07

Writing for people who build things.

The target audience is freelance designers and small agency teams. People who already know what design systems are. They don't need the concept explained. They need to see that this tool understands their workflow and respects their time. The voice principles follow from that.

"Authored," never "generated." Authoring implies craft and intentionality.

AI hype: "revolutionary," "game-changing," "unlock the power of."

Written by a senior designer who built the tool they always wanted.

Qualifiers and hedging: "can help you," "try to generate."

Designer vocabulary: tokens, variables, variants, semantic, primitive.

Over-explain what design systems are to people who build them.

Lead with the output. Headlines describe what gets authored.

Position against Figma Make in headlines. Let the FAQ handle it.

The messaging adapts to three segments, each with different pain points and different proof points.

SegmentKey messageProof point
FreelancersBuild your next client's design system in a conversation, not a week.1,000+ elements authored in a single session.
Agency leadsStop bottlenecking on system creation. Give your team production-ready systems from a prompt.Consistent, token-based systems with variables, components, and documentation.
Dev-designersDescribe your design system architecture. Intent Studio builds it while you focus on code.Full variable collections, auto-linked tokens, proper component hierarchy.
08

GTM positioning.

The go-to-market is built around one bet: designers try tools when they see the output, not when they read the pitch. Every channel exists to get the demo in front of the right people. Everything else is distribution for that moment.

The model is land and expand. Land with a free tier that lets individual designers author a single component set on real work inside five minutes. No credit card. No onboarding flow. Just open the plugin and describe what you want. Expand into paid when they hit the second or third file and the monthly credit allotment becomes the obvious next step.

Channel strategy is three lanes. A steady drip of short-form case studies on LinkedIn aimed at agency design leads. A small set of long-form writeups on the product blog for the IC product designer audience who wants to understand how the token architecture works.

09

What the brand work taught me.

The rename was the single highest-leverage decision in the entire project. “Schemely” required every conversation to start with what the product isn't. “Intent Studio” lets the conversation start with what it does. I underestimated how much a name that creates the wrong expectation costs in ongoing correction. No amount of marketing spend recovers that.

The visual audit changed how I think about positioning. I went in expecting to find a color I liked and came out understanding that color territory is a strategic asset. Every competitor in this space uses some variation of blue, purple, or neutral gray. Moving to the warm end of the spectrum wasn't a preference. It was a defensible position. You can see Intent Studio in a plugin panel or a social feed and know it's different before you read a word.

The --intent: voice proved a notion I believe strongly from my years of agency work: the best brand languages aren't invented from scratch. They're borrowed from the audience's own vocabulary and given a new context. CSS custom properties are something designers and developers write every day. Turning that syntax into a brand expression made the whole identity feel native instead of imposed. It wasn't clever for the sake of being clever. It was just the right language for the audience.

The CSS-native brand voice achieved immediate resonance with technical audiences in a way that a conventional tagline never would have. When your brand literally speaks the same language your users type into their editors, the gap between “marketing” and “product” collapses. That was the goal.

Deliverables produced: Brand audit and competitive visual analysis. Naming strategy (Schemely to Intent Studio). Dual-expression identity system (] mark and --intent: voice). Atelier color palette and three-font typography system. Self-authoring landing page concept and implementation. Messaging framework across three audience segments. Voice principles and usage guidelines. Go-to-market positioning and channel strategy.
Path 02

See the product design

Token architecture, the five-pass pipeline, cost engineering, and the three stories I learned the hard way.

Read path 02 →