Coming Soon

OmniDS

The design system layer

Brand tokens, themed components, and design guidelines. Transform OmniUI's generic components into your company's visual identity.

Back to OmniUI

What is OmniDS?

OmniDS bridges the gap between a component library and a complete design system. While OmniUI provides unopinionated building blocks, OmniDS adds the branding, theming, and design guidelines that make those components uniquely yours.

Currently in Planning

OmniDS is being designed to work seamlessly with OmniUI. Want to influence the direction? Open an issue on GitHub.

Planned Features

Brand Token System

Define your brand once, apply everywhere:

  • Primary and secondary brand colors
  • Typography scales and font stacks
  • Spacing and sizing systems
  • Motion and animation tokens

Themed Components

OmniUI components with your brand applied:

  • Branded buttons, cards, and forms
  • Custom color variants
  • Typography treatments
  • Component-specific customizations

Design Guidelines

Documentation for consistent implementation:

  • Usage guidelines and best practices
  • Do's and don'ts with examples
  • Accessibility requirements
  • Content and voice guidelines

Theme Generator

Tools to create and manage themes:

  • Visual theme builder
  • Color palette generator
  • Contrast checker for accessibility
  • Export to CSS variables

OmniUI vs OmniDS

OmniUI

  • Generic, unopinionated components
  • Semantic color tokens (primary, danger, etc.)
  • Functional, accessible by default
  • Framework-agnostic
  • No brand opinions

OmniDS

  • Branded, opinionated implementation
  • Your company's color palette
  • Design guidelines and documentation
  • Theme customization tools
  • Your visual identity

The Omni Stack

OmniDS sits between the components and the application:

OmniShell - Application structure and layouts
OmniDS - Brand tokens and themed components (you are here)
OmniUI - Core components

Each layer builds on the one below. Use what you need.

Example: Before and After

See how OmniDS transforms generic components into branded ones:

OmniUI (Generic)

OmniDS (Branded)

Note: OmniDS theming is done through CSS custom properties, allowing complete visual transformation without changing markup.

Stay Updated

Watch the GitHub repository for updates on OmniDS development:

Watch on GitHub