Foundation
Color · Type · Space
Core tokens and typography rules for consistent visual rhythm.
18+ token utilities
KubeDB Design System
Premium component showcase built primarily with utility classes from _utilities.scss.
Components
Buttons · Cards · Alerts
Reusable UI patterns built from shared DS tokens and utilities.
6 component groups
Utilities
Responsive + State Helpers
Fast composition with spacing, layout, and interaction utilities.
Bulma-style utility classes
Colors
Palette
Core brand and semantic tokens used across KubeDB UI.
Primary
.has-background-primary
Secondary
.has-background-secondary
Success
.has-background-success
Gradient
.has-background-gradient-primary
Typography
Type Scale
Display / is-text-4xl
Heading / is-text-3xl
Subheading / is-text-2xl
Body / is-text-base
Spacing
Spacing Utilities
p-2
p-4
p-6
p-8
p-10
Cards
Card Patterns
Standard
Default container with subtle depth.
Interactive
Elevates on hover for clickable surfaces.
Featured
Hero card for emphasis.
Alerts
System Messages
Success: Deployment completed.
Info: Rolling upgrade scheduled.
Warning: Storage usage above 80%.
Error: Primary node unreachable.
Forms
Inputs
Loading
Loading States
Tabs
Tabs
Overview
Metrics
Logs
Switch active state by toggling background and text utilities.
Grid
Grid System
is-grid-cols-1 md:is-grid-cols-2 lg:is-grid-cols-3
Card 2
Card 3
<div class="is-grid is-grid-cols-1 md:is-grid-cols-2 lg:is-grid-cols-3 has-gap-4"> <div class="has-background-white has-border is-radius-xlarge p-4">...</div> </div>