The AI Visual Designer for Brand and Design Systems

Brand is not decoration. It is the fastest signal a company sends to the people it needs to trust it, and in the first ten seconds of a landing page visit, a pitch deck review, or a product trial, the visual layer does most of the work. A design system that uses inconsistent spacing creates cognitive friction that the user cannot name but cannot ignore. A color palette chosen for a developer's taste rather than a brand strategy produces a product that looks competent but does not feel like anything in particular. A type scale that uses four different font weights across six screens produces the visual noise of a product built by a committee, not a product built with intent. These are not problems that require a senior designer full-time, they are problems that require design judgment applied at specific decision points, and that is exactly what most teams are missing. The default approach is to pick a Figma template, apply it inconsistently as the product grows, and end up with a visual system that no one owns and no one can extend coherently. AI visual designer tools that generate pretty mockups accelerate that fragmentation rather than solving it.

Why the generalist approach fails at brand and design systems

A generalist chatbot can describe a color palette in words and generate a few hex values. What it cannot do is produce a color system: a structured set of semantic color tokens with a rationale for how primary, secondary, surface, and interactive states relate to each other; a contrast-checked palette with accessible dark and light mode variants; a set of destructive, warning, and success state colors that form a coherent visual language rather than a collection of individually chosen hues. The difference between a palette and a color system is the same as the difference between a bag of ingredients and a recipe, the structure, the rationale, and the decision about how the elements relate to each other. A generalist produces the ingredients.

Midjourney and Stable Diffusion produce images, not brand artifacts. A logo concept from an image generator is a starting point for a conversation, not a deliverable, because a logo is a mark that needs to work at 16 pixels in a browser favicon and at 16 feet on a trade show backdrop, that needs to work in single-color print and in full color digital, that needs to encode the brand's positioning in its visual grammar rather than just looking attractive in isolation. An image generator does not know what your company stands for, who your target customer is, what the competitive visual landscape looks like, or how the mark will be used. It produces a compelling image. A brand designer produces a system.

Figma design system templates are the most seductive shortcut and the most common source of visual debt. They give you a complete-looking design system, components, tokens, documentation, built for a fictional product. When you apply a template to a real product, the semantic gaps emerge immediately: the template's color naming convention does not map to your product's interaction states, the spacing scale produces the wrong rhythm for your content density, the component library includes things you do not need and is missing the ones you do. Customizing a template to fit a specific product typically costs as much effort as building a system from scratch, but leaves you with a system that still feels like a template rather than a product that was designed. Starting with the brand strategy and working down to tokens and components produces a system that is coherent because it was designed to be, not because it was assembled from a starting point.

What a visual designer actually does

A senior visual designer working on brand identity starts with the brand strategy, the positioning, the target audience, the competitive landscape, the personality dimensions, and translates it into a visual language: the color associations that reinforce the brand's emotional register, the type choices that convey the right level of formality and warmth, the logo grammar that encodes the brand's promise in visual shorthand. The visual decisions are not aesthetic preferences; they are strategic choices grounded in how the target audience will interpret them. A fintech company targeting conservative institutional buyers needs a different visual language than a consumer payments app targeting Gen Z, even if both are in the "fintech" category.

The design system dimension is a distinct but related discipline. A design system is the engineering of the visual language into a set of reusable, documented, and governed tokens and components, the artifact that ensures visual consistency as the product scales and as new contributors join the team. Building it requires design token architecture (how are colors, spacing, and type organized in a way that supports both design tools and code), component specification (what are the states, variants, and edge cases for each component), and documentation (how does a new designer or engineer apply the system without having to ask the person who built it). Design systems are not built once; they are maintained, which means they need to be structured for extension as well as initial use.

Meet Form

Form is Tonone's dedicated AI visual designer, a purpose-built agent for the full brand and design system workflow, from brand strategy translation through design token production and component specification. It does not generate images; it produces the design artifacts that make a visual system work in practice: brand guidelines, token files, component specs, and visual audit reports. Form brings the strategic and architectural thinking of a senior visual designer to the work of building and maintaining a product's visual language, ensuring that every design decision is grounded in brand strategy and every token is structured for maintainability.

Tonone's Form is the AI visual designer that translates brand strategy into color systems, type scales, and design token files, producing the artifacts that make a visual language work across a product at scale.

What Form actually does

Translating brand strategy into a visual identity

The form-brand skill takes a brand positioning brief, or a rough description of the company's mission, audience, and competitive context, and produces a structured brand identity specification: personality dimensions, visual tone, color direction, type direction, and logo grammar guidelines. The output is not a mood board; it is a design brief that tells a designer or Form's other skills exactly what decisions the visual language needs to make and why. Each decision in the brand spec includes its strategic rationale, why this color range reinforces the brand's positioning rather than undermining it, why this type direction conveys the right level of formality for the target audience. The form-brand output also includes a competitive visual audit: a summary of how the major competitors in the category present themselves visually and what white space is available for differentiation. This is the analysis that prevents a brand from inadvertently adopting the visual conventions of the category it is trying to stand out from, a common failure mode when visual decisions are made in isolation from competitive context.

Building a structured color system with accessibility

The form-palette skill produces a complete color system from a brand direction: a set of base colors with their semantic roles (primary, secondary, neutral, surface, interactive, destructive, warning, success), a full palette of tonal variants for each base color (50 through 950 scale), a contrast-verified set of foreground/background combinations meeting WCAG 2.1 AA at minimum, and a dark mode variant where relevant. Each color in the system is presented with its hex value, its HSL coordinates (for understanding the relationships between colors), its WCAG contrast ratio against both white and black, and its semantic role. The palette also includes usage rules, which colors are appropriate for which use cases and which combinations to avoid, with the reasoning behind each rule. The output is structured as a design token format that can be pasted directly into a Figma Tokens plugin or a CSS custom properties file, making the palette immediately usable without a translation step. form-palette also generates the neutral scale, which is the most commonly underbuilt part of a color system and the part that has the most impact on the visual quality of body text, borders, and surface backgrounds.

Producing design token files for code and design tools

The form-tokens skill produces a complete design token file, in JSON format for code or CSS custom properties for web, covering color, typography, spacing, border radius, elevation (shadow), and animation timing. The token file is structured with three layers: primitive tokens (raw values), semantic tokens (roles: color.text.primary, spacing.section.gap), and component tokens (specific overrides for individual components). This three-layer structure is the architecture that makes a design system maintainable: changing a semantic token updates every component that uses it, and changing a primitive token cascades correctly through the semantic and component layers. The form-tokens output includes documentation for each token: the value, the semantic role, the layer it belongs to, and the components or contexts where it is used. For teams migrating from hardcoded values to a token system, form-tokens also produces a migration map: which CSS variables in the current codebase correspond to which tokens in the new system. The token file can be handed directly to a front-end engineer with no translation required, it is the artifact that connects Form's design decisions to the production codebase.

Specifying UI components with states and variants

The form-component skill produces a complete component specification for any UI component: the anatomy (every sub-element that makes up the component), the states (default, hover, focus, active, disabled, loading, error), the variants (size, hierarchy, destructive), the token usage for each state and variant, the accessibility requirements (ARIA roles, keyboard behavior, focus management), and the edge cases (minimum and maximum content widths, behavior with long labels, behavior in RTL layouts). Each component spec is structured to be directly actionable by a front-end engineer, it includes everything needed to implement the component correctly without going back to a designer for clarification. form-component is particularly valuable for teams building a design system from scratch: rather than discovering edge cases during implementation, the spec surfaces them before any code is written, making the implementation faster and the component more complete. The component specs also serve as the documentation that makes a design system usable by new team members who did not build it.

Auditing visual consistency across a product

The form-audit skill reviews a product's visual implementation, from screenshots, Figma files, or code, for consistency against its own design system or against general visual quality standards. The output is a visual debt report: every place where spacing is inconsistent, color usage deviates from the semantic system, type styles are applied incorrectly, or component states are missing or wrong. Issues are severity-scored (cosmetic, visible inconsistency, broken state) and grouped by type so the team can address them systematically rather than randomly. form-audit is the tool that prevents visual debt from accumulating silently as the product grows, it makes the debt visible and prioritized so it can be addressed incrementally. For teams inheriting a product without a design system, form-audit also produces a reverse-engineered token inventory: the actual color, spacing, and type values currently in use, which becomes the raw material for form-tokens to rationalize into a coherent system.

A worked example

A B2B SaaS startup is launching a product in the developer tools space. They have a name, a rough positioning ("the observability platform that doesn't require a dedicated SRE team"), and a logo concept that their CTO designed in Figma. They run form-brand first to translate the positioning into a visual direction, then form-palette to produce the color system, then form-tokens to generate the token file for their codebase. An excerpt of the token output looks like this:

{
  "primitive": {
    "blue": {
      "50":  { "value": "#eff6ff" },
      "500": { "value": "#3b82f6" },
      "600": { "value": "#2563eb" },
      "900": { "value": "#1e3a8a" }
    },
    "neutral": {
      "50":  { "value": "#f8fafc" },
      "200": { "value": "#e2e8f0" },
      "600": { "value": "#475569" },
      "900": { "value": "#0f172a" }
    }
  },
  "semantic": {
    "color": {
      "bg": {
        "surface":  { "value": "{primitive.neutral.50}" },
        "elevated": { "value": "#ffffff" }
      },
      "text": {
        "primary":   { "value": "{primitive.neutral.900}" },
        "secondary": { "value": "{primitive.neutral.600}" }
      },
      "action": {
        "primary":       { "value": "{primitive.blue.600}" },
        "primaryHover":  { "value": "{primitive.blue.500}" }
      },
      "status": {
        "success": { "value": "#16a34a" },
        "warning": { "value": "#d97706" },
        "error":   { "value": "#dc2626" }
      }
    },
    "spacing": {
      "xs":  { "value": "4px" },
      "sm":  { "value": "8px" },
      "md":  { "value": "16px" },
      "lg":  { "value": "24px" },
      "xl":  { "value": "40px" },
      "2xl": { "value": "64px" }
    }
  }
}

The team hands this token file to their front-end engineer, who wires it into their Tailwind configuration and Figma Tokens plugin in the same morning. The brand spec from form-brand goes to their freelance illustrator as the brief for icon and illustration style. The color system passes WCAG AA across all semantic combinations, which the accessibility audit confirms without additional work. The total elapsed time from positioning description to production-ready token file is under two hours. The visual system is coherent because it was derived from a brand strategy, not assembled from preferences.

Form vs the alternatives

Form is not an image generator and it is not a Figma component library. It produces the design artifacts that make a visual system work in practice: brand strategy translation, structured token files, component specifications, and visual debt audits. The comparison below makes the functional differences concrete.

Tonone's Form form-tokens skill produces a three-layer token file, primitive, semantic, and component, structured for maintainability and wired directly to both Figma and production code.

Tonone's Form form-component skill produces component specifications with every state, variant, token mapping, and accessibility requirement, the artifact that lets engineers implement correctly without going back to a designer for clarification.

Install and try

Tonone is free and MIT-licensed. Install it once and all 23 agents, including Form, are available in your Claude Code session. You pay only for the Claude Code token usage during work. Start with form-brand on your product's positioning brief to get a visual direction before choosing any colors or fonts.