One visual base for every interface
A reusable UI system built for shipping, not rethinking.
bahri-ui-kits turns recurring UI decisions into a stable system of themes, typography, semantic tokens, and production-ready primitives for web, apps, dashboards, widgets, and internal tools.
Theme control
Reusable settings surface
Color roles
18
Type scale
10
Motion
2
Semantic token
Action / Primary
Component state
Button set
Foundations
System rules that travel across products
The point of the system is not a fixed aesthetic. It is a reliable baseline of readable contrast, disciplined spacing, stable typography, and semantic styling decisions.
Color architecture
Reference values map into semantic roles so themes can change without breaking component intent.
Canvas
bg.canvas
Surface
surface.default
Primary action
action.primary
Success
feedback.success
Typography system
One bilingual family, clear hierarchy, restrained weights, and consistent reading rhythm.
Display
bahri-ui-kits
Heading
Structured and adaptable
Body
IBM Plex Sans Arabic keeps Latin and Arabic interface text visually coherent without feeling generic.
Shape and rhythm
Spacing, radius, border, and elevation decisions are intentionally quiet so components stay reusable.
Spacing
4 / 8 rhythm with scalable steps
Radius
Soft geometry, not pill-heavy
Elevation
Restrained shadows for grouping
Motion
Fast transitions, no theatrical motion
Components
Primitives shown in real compositions
Instead of isolated controls only, the showcase now presents primitives inside panels that feel closer to production surfaces.
Theme authoring panel
Buttons, fields, badges, and helper text working together in a realistic settings view.
Status and navigation
Badges and tabs should communicate state without hijacking the hierarchy.
Default
Successful
Warning
Danger
The selected tab uses the primary hue as a signal, not as a full-size call to action.
System coverage table
The table stays data-first and restrained so it can work across products.
| Primitive | Theme coverage | Status |
|---|---|---|
| Button | Light + dark | Implemented |
| Input / Select / Textarea | Light + dark | Implemented |
| Card / Badge / Tabs | Light + dark | Polishing |
Layout
Basic layout and spacing examples
Spacing and layout examples make the token scale concrete, so implementation surfaces stay consistent while still adapting to product needs.
Spacing scale preview
Raw spacing tokens shown as bars so visual rhythm can be judged quickly.
space-8
space-12
space-16
space-24
space-32
Two-column product shell
A compact dashboard-like scaffold built from the same spacing and surface rules.
Content A
Content B
Content C
Uses the same spacing tokens as components, so macro layout and micro UI stay aligned.
Delivery
Implementation shape and next steps
The showcase is intentionally framework-neutral so the same design decisions can be wrapped for web stacks first, then reused elsewhere.
Files in play
These artifacts now define the current reusable UI baseline.
themes/theme-vars.css themes/fonts/ibm-plex-sans-arabic.css components/primitives/showcase.html components/primitives/*/showcase.html showcase/index.html showcase/showcase.css
Validated decisions
The value of v0.1.2 is in stable decisions, not only in pretty screenshots.
- base light and dark themes - IBM Plex Sans Arabic as the self-hosted family - semantic color and typography mapping - quiet spacing, radius, and shadow rules - reusable primitives ready for wrappers
Next build track
The strongest follow-up is to turn this into a richer component and pattern library.
Add pattern-level compositions
Empty states, settings blocks, dashboards, and auth flows.
Create framework wrappers
React first, then adapt the same system elsewhere.
Document usage rules
Make extension predictable so future work stays coherent.