A tool to create visual themesthemesthemessystemslanguages, customize colorscolorscomponentscolorstypespacingiconseffectsstatesmotion, and build interfaces with ChatGPTChatGPTChatGPTClaudeCursorGrokanything.
A tool to create visual themesthemesthemessystemslanguages, customize colorscolorscomponentscolorstypespacingiconseffectsstatesmotion, and build
interfaces with ChatGPTChatGPTChatGPTClaudeCursorGrokanything.Select a highlighted word to explore another option.
Balance
$1,200.35
Payment$30.32
DueAug 9th
Pay
$500.00Remaining balanceRecommended
$250.00Half now, half next month
Aa123#&!
GT Standard
RegularMediumHeavy
Page
Company
California
Roles−2+
Admin
StyleFelt
Character
AiryQuietBoldCompact
MotionSnappy
Color
NeutralsMono
Primary actionNeutral
Typography
LicensedGT Standard
Icons
LicensedCentral
ThemeComponents
my-app — zsh
my-app %
⠋Checking registry.
⠋Updating files.
Build Stations
Week
1. 
Jamie Lee Now
#### An issue with pasting images
1:28
2. 
Sarah Thomas 2h
#### Things slow down with more variables and styles
3:15
3. 
Andi Shafer 2h
#### A little friction when inviting the team
2:04
4. 
Matt Holden 1d
#### Finding a faster way through the everyday tasks
0:38
5. 
Kristy Spellman 2d
#### Making space for the details that matter
1:15
Jamie Lee
123
A complete design language.
Colors
Brand colors, neutrals, and status colors for surfaces, text, and controls.
Light and dark
Separate color values for light and dark mode, in one theme.
Typography
Font families, weights, sizes, and line heights for interface text and data.
Spacing and scale
A shared scale for component sizes, padding, and gaps.
Icons
Choose the family and style that fits your theme.
Shape and effects
Corner radii, strokes, and shadows for component shape and depth.
Component states
Customize interactive states of Base UI components in Graphical.
Motion
Springs, easing, and timing for button presses, menus, and other interactions.
Everything you and your agent need to build interfaces.
Your theme
Your colors, typography, and styles, ready to install with shadcn or download directly.
Real components
React components built on Base UI, ready to use and customize.
Context for your agent
`GUI.md`, detailed theme references, and skills for building, adapting, and reviewing your interface.
One-time purchase.
Get our theme builder, launch collection of styles, and foundation components. Use them in unlimited projects, with ongoing updates to the theme builder included.
Buy for $49 , previously $99$99
FAQ
Who is Graphical for?
Graphical is for designers, developers, and anyone building an app with a coding agent. Choose a theme, make it yours, and give your agent the theme files and skills to apply it to existing screens and guide new ones.
What’s included?
The theme builder, 5 customizable styles, theme tokens, and React component source. Each download includes `GUI.md`, detailed theme references for light and dark mode, setup instructions, and three coding-agent skills.
Can I start with my own theme?
Yes. Customize one of the 5 included styles, or start with your own colors, typography, spacing, and styles.
How do I use this with a coding agent?
Download your theme resources and share them with your coding agent along with the included setup prompt. Once set up, describe what you want to build. `GUI.md` and the project skills guide your agent in creating new screens, applying your theme to existing UI, and finding and fixing inconsistent styles.
What are the components built with?
Graphical includes a visual editor for Base UI components, with React source ready to use. Your theme and agent skills provide a design language you can apply across component libraries, frameworks, and languages.
Do I have to use React or Base UI?
No. The theme editor allows you to visually edit Base UI components, but you can use your theme files with any framework, component library, or language.