UBO Design System Styles

Brand Tokens

Defined in ubo-theme.css as custom CSS variables.

--color-brand-600
#001041

--color-brand-300
#899BD1

--color-brand-200
#B1BDE1

--color-brand-100
#DDE3F8

--color-brand-50
#EFF2FF

Semantic Theme Colors (Syncfusion Theme Settings)

Additional semantic colors are defined in packages/tailwind-config/settings.json. This is where text/background intent values are configured for Syncfusion theme generation.

Note: explicit tokens named foreground / background are not defined as standalone variables in the UBO theme file; semantic text/background intent is represented through tokens like $primary-text and $success-bg-color.

Token	Value	Preview
`$primary`	#3e4760	primary
`$primary-text`	#ffffff	primary-text
`$success-bg-color`	#15803d	success-bg
`$success-border-color`	#15803d	success-border
`$success-text`	#ffffff	success-text
`$danger-bg-color`	#dc2626	danger-bg
`$danger-border-color`	#dc2626	danger-border
`$danger-text`	#ffffff	danger-text
`$info-bg-color`	#0e7490	info-bg
`$info-border-color`	#0e7490	info-border
`$info-text`	#ffffff	info-text
`$warning`	#c2410c	warning
`$warning-bg-color`	#c2410c	warning-bg
`$warning-border-color`	#c2410c	warning-border
`$warning-text`	#ffffff	warning-text

Neutral and Base Palette (Defined)

Also defined in packages/tailwind-config/settings.json. Useful for foreground/background planning.

$white

$coolgray-50

$coolgray-100

$coolgray-200

$coolgray-300

$coolgray-400

$coolgray-500

$coolgray-700

$coolgray-800

$coolgray-900

$black

Status Tokens

Group	Defined variables	Preview
Error	`--color-error-700`, `-600`, `-500`, `-400`, `-300`, `-200`, `-100`, `-25`	error-700 error-600 error-500 error-400 error-300 error-200 error-100 error-25
Warning	`--color-warning-700`, `-600`, `-100`, `-25`	warning-700 warning-600 warning-100 warning-25
Success	`--color-success-700`, `-600`, `-400`, `-300`, `-200`, `-100`, `-25`	success-700 success-600 success-400 success-300 success-200 success-100 success-25
Pending	`--color-pending-700`, `-600`, `-550`, `-500`, `-400`, `-300`, `-200`, `-100`, `-25`	pending-700 pending-600 pending-550 pending-500 pending-400 pending-300 pending-200 pending-100 pending-25

Button Style Definitions

Local button overrides currently include global Syncfusion button padding and custom brand variants.

Class / selector	Defined behavior	Visual
`.e-btn.e-lib`	Global button padding set to `0.55rem`.	Default button padding
`.e-btn.e-primary`	Uses brand primary background and border (`--color-brand-600`).	Primary
`.e-btn.ubo-secondary`	Uses light brand background + border (`--color-brand-50`/`--color-brand-200`).	Secondary
`.e-btn.e-outline` (Syncfusion class)	Outline button style from EJ2 theme (not custom overridden here).	Outline

Other Local Style Hooks

Area	Key selectors/classes	Purpose
Tooltip	`.ubo-tooltip.e-tooltip-wrap`	Brand-colored tooltip background, border, and arrow styling.
Grid utility classes	`.e-grid-hide-filterbar`, `.e-detailrow-remove-indent`, `.e-detailrow-remove-border`, `.e-grid-row-pointer`	Hide/show grid sub-elements and improve row interaction UX.
Loading spinner	`.ubo-loading-spinner`, `.e-spinner-pane ...`	Forces spinner stroke color to brand primary.
Pill Tabs	`.ubo-pill-tabs`	Pill-style tab headers with active state border in brand color.
File Uploader	`.ubo-file-uploader--drop-area`, `.ubo-file-uploader.e-upload`	Custom drag/drop layout and Syncfusion uploader control cleanup.
Input Prefix	`.ubo-prefix-input`, `.ubo-prefix`	Prefixed input layout with shared spacing, borders, and typography.

Recommended Next Steps

Promote this doc as a single source for designers while the design system evolves.
Add screenshot examples from Storybook for each style hook.
Document semantic usage guidance (when to use primary vs secondary vs outline).
Keep style token changes synchronized with Syncfusion component docs.

Atomic Design Coverage Checklist

Snapshot of foundation coverage across current docs. Status labels are practical: Done, Partial, and Missing.

Category	Atom / Foundation	Status	Current coverage	Next action
Color	Brand, semantic, neutral palettes	`Done`	Documented in Brand Tokens, Semantic Theme Colors, Neutral Palette, and Status Tokens on this page.	Keep token values and examples synchronized with theme updates.
Typography	Font family, sizes, semantic text rules	`Done`	Documented in Text Styles page sections for foundations and utility usage.	Add explicit heading/body/caption naming matrix if desired.
Spacing & Sizing	Canonical spacing and dimension scale	`Done`	Documented in the dedicated Spacing & Sizing page with concrete control and layout values.	Keep this table in sync when theme generation or density classes change.
Radius & Borders	Border radius, width, border tokens	`Done`	Documented in the dedicated Radius & Borders page with common scales and selectors.	Keep values aligned with theme generation and UBO override updates.
Elevation	Shadows and elevation levels	`Done`	Documented in the dedicated Elevation page with observed shadow formulas.	Keep shadow hierarchy aligned with future theme generator updates.
Responsive	Breakpoints and responsive behavior matrix	`Done`	Documented in the dedicated Responsive page with breakpoints and behavior examples.	Keep breakpoints aligned with generated Syncfusion theme updates.
Interaction States	Hover, focus, active, selected, disabled	`Done`	Documented in the dedicated Interaction States page with multi-component state matrix.	Expand selectors as new component families are added.
Motion	Durations, easing, transition guidance	`Missing`	No motion token documentation on current docs pages.	Add motion tokens and standard transition patterns.
Layering	Z-index / overlay stacking conventions	`Missing`	No explicit z-index layer scale documented.	Define stacking levels for tooltip, dropdown, dialog, sidebar, toast.
Forms	Input anatomy and validation semantics	`Partial`	InputPrefix and uploader hooks are documented; full form atom model is not.	Add label/helper/error/prefix/suffix and validation state patterns.
Component Inventory	Ready-to-use and core package mapping	`Done`	Covered in Components page with cards/lists and Storybook links.	Keep links current as stories/components evolve.
Governance	Source-of-truth tags and change log linkage	`Partial`	Docs include version footer, but no explicit token changelog or ownership mapping.	Add owner/source fields and a token-level change history section.

UBO Mini Design System Styles