Your product’s visual language, ready to build.

Shape color, type, spacing and motion on real components, then hand the result to your coding agent.

Open the editorFree. Try it without an account.

Available

$4,820.50

Next payment: $86.40
Due: Nov 14

Aa123

Geist

Regular

Medium

Bold

#2F6BFF

Company

Seats

Annual billing

Revenue

$128.4k

The new onboarding flow reads much better. Could we tighten the spacing on step two?

On it, sending a pass this afternoon.

Reply to Mara…

New

Signal. Crisp, confident product UI with a bright blue accent. Start from Signal

Map how people move through it.

A product is a chain of moments: signing in, getting set up, inviting a team. Start each one from a proven pattern, adapt it, and click through it in your style before anyone builds it.

Make it yours.

The editor’s own panel on a real screen: start from a style, move across the Character grid, then shape color, type, spacing, shape, icons, states and motion. What you make here is what the editor opens.

Hand it to your agent.

Install a style straight into your project with shadcn, or export everything as a ZIP. Your agent gets the stylesheet, the components and a guide to your design language written for it.

$ npx shadcn@latest add https://opalina.app/r/signal-kit.json

theme.css: Your tokens for light and dark, as a Tailwind v4 stylesheet.
components/ui: 59 React components built on Base UI, styled by your theme.
GUI.md: Your design language, written down for coding agents.
Agent skills: Build, adapt and review UI, laid out for Claude Code, Cursor, Codex and GitHub Copilot.
tokens.json: Design tokens for Figma, Style Dictionary, iOS and Android.
FLOWS.md: How people move through your product, screen by screen.

Shape every part of it.

Each setting changes real components while you work, in light and dark.

Color: Ramps from your brand, neutral and status colors, with contrast checks as you go.
Light and dark: Separate values for each mode, in one theme.
Typography: Google Fonts or your own, a type scale, weights, leading and tracking.
Spacing: One slider re-spaces everything, on Tailwind's spacing scale.
Shape and effects: Radius, borders, five shadow styles, grain and frosted glass.
Icons: Lucide or Phosphor, with their stroke or weight.
States: Hover, press, focus ring and disabled, the same on every control.
Motion: Durations, easing curves and a spring, exported as plain CSS.
Components: Give buttons, inputs and cards their own font, radius, padding and border.
Flows: Map sign-in, onboarding and invites from proven patterns, then click through them.

Questions

Is it free?

Yes. There's no payment. Try the editor without an account, or sign in to keep your work as projects, with history, on any computer.

Which coding agents does it work with?

Claude Code, Cursor, Codex and GitHub Copilot: the export puts GUI.md and the skills where each one looks for them. Any other agent can read GUI.md as it is.

Do I have to use React?

No. The editor shapes React components built on Base UI, and those come with the export. theme.css works in any Tailwind v4 project, and tokens.json in Figma, Style Dictionary, iOS and Android.

Can I start from my own brand?

Yes. Start from Blank or any style, set your brand color, and bring your fonts from Google Fonts or your own stylesheet. A theme you exported before opens again from its ZIP, GUI.md or opalina-theme.json.

What are flows?

Flows map how people move through your product: signing in, getting set up, inviting a team. Start from a proven pattern, such as passkey first or an email code, adapt it, click through it, and export it as FLOWS.md for your agent.

Start from a style. Make it yours.

Open the editor