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.
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.
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.
A consistent spacing scale, grid system, border radii, border weights, and shadow elevation tokens that govern your brand's visual rhythm across every layout.
Pre-built components that inherit your tokens — buttons, cards, forms, navigation, modals, badges, tables, and media. Change one token and every component updates.
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.
OneHub's AI reads your brand document and extracts colors, fonts, and rules automatically.
OneHub fetches your website's CSS and extracts your design tokens from the live styles.
Connect your Figma library and OneHub pulls colors, typography, and component styles.
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.
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.
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.
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.
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.
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.
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.
Clean, modern design system for software products.
Product-focused system with commerce-specific components.
Bold, creative system for agencies and studios.
Professional system for enterprise brands.
Flexible, energetic system for early-stage companies.