Build your brand once. Use it everywhere.
Define your brand once, and OneHub ensures every website, image, document, and asset it produces matches your identity.
OneHub's design system isn't just a style guide — it's a living, breathing brand foundation that your AI and your team use to create consistent, on-brand content across every surface.
Color System
Define your complete color palette with semantic tokens in OKLch. Primary, secondary, neutral, and status colors mapped to roles like --color-primary and --color-surface so OneHub uses the right color for the right purpose.
Typography
Define display, body, and mono faces with a type scale, line-height rules, and weight system. Choose from a curated library or upload your own web fonts.
Layout & Spacing
A consistent spacing scale, grid system, border radii, border weights, and shadow elevation tokens that govern your brand's visual rhythm across every layout.
Component Library
Pre-built components that inherit your tokens — buttons, cards, forms, navigation, modals, badges, tables, and media. Change one token and every component updates.
The Brand Setup Wizard
Upload your logo. Drop in your logo files. OneHub extracts your primary and secondary colors automatically.
Define your palette. Refine the extracted colors, add secondary and neutral tones, and set status colors.
Choose your type. Select display and body typefaces from a curated library, or upload your own web fonts.
Set your scale. Choose a type scale multiplier and preview how your headlines, body text, and captions will look.
Configure layout rules. Set your spacing scale, grid preferences, border radius, and shadow system.
Review and save. OneHub generates a complete design system document with all your tokens, ready to use.
Import an Existing Brand
Upload a Brand Guide PDF
OneHub's AI reads your brand document and extracts colors, fonts, and rules automatically.
Paste a URL
OneHub fetches your website's CSS and extracts your design tokens from the live styles.
Import a Figma File
Connect your Figma library and OneHub pulls colors, typography, and component styles.
Manual Configuration
For full control, define every token manually in the design system editor. Edit color values in hex, RGB, HSL, or OKLch. Set font families with fallback chains. Define custom spacing, radius, and shadow values. Add custom components with your own markup and styles.
In AI Chat
When you ask OneHub's AI to create something — a website, a document, an image — it reads your design system first. "Build a landing page" uses your colors, fonts, spacing, and components. No need to specify your brand every time.
In the Design Studio
A full visual editor with drag-and-drop components, a token editor that updates every connected component instantly, responsive preview at every breakpoint, and export to HTML, React, Vue, or static images with your tokens preserved.
In Automations
Use your design system in automated workflows — on-brand social posts from templates, marketing emails that match your website, product images with consistent styling, and documents that look like they came from your design team.
Version Control
Every change creates a new version. Roll back to a previous state, compare versions to see exactly what changed, or branch your design system for experiments and clean rollbacks.
Team Access
One shared design system across your entire team. Role-based permissions control who can view, edit, or publish. A full audit trail tracks every change.
Sync & Distribution
Figma sync keeps your design system in sync with your library. Export tokens as CSS custom properties. Generate an NPM package with components and documentation. Query programmatically via API.
Start with a pre-built design system and customize it to your brand. Each template includes a full set of colors, typography, components, and layout rules.
SaaS
Clean, modern design system for software products.
E-commerce
Product-focused system with commerce-specific components.
Agency
Bold, creative system for agencies and studios.
Corporate
Professional system for enterprise brands.
Startup
Flexible, energetic system for early-stage companies.