Product
What your product looks like should be a decision, not a side effect of a prompt.
Stylaform sits before and alongside AI software development. It answers what your product should look and feel like - then keeps every contributor to that answer.
Compare
The same interface, rendered by four different systems.
This is the core of the product: comparison you can actually judge, because everything except the brand stays identical.
Measured, institutional, evidence-led.
Logistics operations
Every shipment, accounted for.
Northstar tracks freight across carriers and flags exceptions before they reach your customer.
This week
- 1,284
- Active routes
- 98.2%
- On-time rate
- 7
- Open exceptions
Exceptions
- NS-4471Customs holdResolve
- NS-4478Late departureResolve
- accent: #14508C
- radius: 4px
- heading: Source Serif 4
- shadow: none
Capabilities
What Stylaform does.
Start from a website
Paste a URL and AI extracts industry, audience, promise, personality, colors, typography and the brand mark, with a staged progress view and undo.
Directions, applied to real interfaces
Explore complete visual systems on realistic product screens instead of judging a palette in isolation.
A single structured source of truth
Colors, typography, spacing, components and rules live as structured data. Every export is generated from it.
Brand mark detection
Finds the logo and wordmark on a site, captures the typeface, weight, colors and structural quirks, and saves the evidence to the asset library.
Asset library
Import assets from a URL or upload. Duplicates are removed automatically by content hash, AI sorts them into logo, mascot or decoration, and previews and metadata stay editable.
Font import
Parses @font-face rules, self-hosts the webfonts and binds them to typography tokens, with a weight and style preview before locking.
Website component scan
Walks a site and reports its real buttons, cards, inputs, gradients, shadows and radii as pasteable CSS.
Anchors
Pin colors and fonts as immutable. No direction can change an anchored value without an explicit confirmation.
Brief Bridge
Generate a prompt for Claude Code, Cursor or Codex, then paste the answer back to fill gaps in the brief. Pasted text is screened for prompt injection.
Measurable checks
Contrast is calculated, not estimated, so accessibility is part of the decision rather than a later apology.
Immutable versions and history
Lock an approved specification. Later changes create a new version, history stays intact, and any two versions can be compared side by side.
Exports built for implementation
CSS custom properties, a Tailwind v4 theme block, tokens JSON and an agent rules markdown file, all generated from the locked version.
Drift awareness
Scan a live URL against a locked version, score it 0-100%, and work through findings ranked by score impact.
Notifications
In-app notifications for reviews, scans and step activity, with bulk actions and workspace or brand filters.
AI cost transparency
Per-feature model tiers - Quick, Balanced and Deep thinking - with the estimated credit cost shown before generation and daily workspace spend caps.
What Stylaform is not
It is not a logo maker, a site builder or another palette tool.
Stylaform is not an AI website builder, a mood-board app, an image generator, or a replacement for Figma or Canva. It is the decision layer those tools assume you already have.
Design tokens
Design decisions become build instructions.
A token is just a decision with a name. Once it has a name, a person can read it, a stylesheet can use it and an agent can be held to it.
| Decision | Token | Value |
|---|---|---|
| Our accent is a deep signal blue | color.accent | #14508C |
| Headings are set in a serif | font.heading | Source Serif 4 |
| Layouts breathe on a 4px rhythm | space.4 | 16px |
| Corners are barely rounded | radius.button | 6px |
| Cards use a border, never a shadow | component.card | 1px solid border |
| No gradients anywhere | rule.forbidden | gradient |
Export
A brand book your AI can actually read.
Traditional brand books are documents written for people, a PDF someone opens twice. Stylaform keeps the brand as structured data and generates documentation a coding agent can parse and follow.
BRAND.md below is the illustrative shape of that file. The generated export is the agent rules markdown, <brand>-brand-rules.md. It is an export, not the database: the structured Stylaform system stays the source of truth, so tokens, CSS and agent rules are all generated from the same decisions.
- <brand>-tokens.cssCSS custom properties, plus @font-face rules and asset URLs.
- <brand>-theme.cssA Tailwind v4 @theme block.
- <brand>-tokens.jsonTokens, the chosen direction, rules and assets, plus fidelity and drift evidence.
- <brand>-brand-rules.mdAgent rules for Lovable, Cursor or Claude, with fidelity and drift evidence.
# Brand System
## Character
Confident, human and precise.
## Typography
Headings: Source Serif 4, 600
Body: IBM Plex Sans, 400
## Components
Primary buttons use the accent token.
Border radius: 6px.
## Required
Visible keyboard focus.
WCAG AA contrast where applicable.
## Forbidden
Do not use gradients.
Do not introduce unapproved fonts.
Do not use pill-shaped primary buttons.Versioning
Decide once. Change deliberately.
A brand begins as a draft. Teams explore and refine it. Once approved, they lock a version - and a locked version cannot silently mutate.
- 01
Draft
Explore and refine freely.
- 02
Review
Test, compare, gather feedback.
- 03Locked
Locked v1
Immutable approved specification.
- 04
New draft
A later redesign starts here.
- 05
Review
The same discipline, again.
- 06Locked
Locked v2
v1 stays exactly as it was.
The result is a known reference point for every build. When someone asks what the brand is, the answer is a version number rather than an opinion.
Guides
Keeping one brand while an agent writes the code
Practical, tool-specific guides on brand consistency with AI coding agents, written for the tools you already have open.
How to build an app with AI without losing your brand
The five decisions to make before the first prompt, and how to hand them to Claude as tokens and a BRAND.md it can follow.
Read the guide →
Brand consistency when building with Copilot
Repository instructions, token files and review habits that stop tab-completion from quietly inventing its own design system.
Read the guide →
AI-powered design systems and how AI uses design tokens
What an agent-readable design system actually contains, why tokens change what a model writes, and who builds one.
Read the guide →
All three guides end in the same place: the tokens and rules Stylaform exports.
Stop letting the prompt choose your brand.
Decide what your product should look like once. Give every human and AI developer the same rules from then on.