Skip to content

Instantly share code, notes, and snippets.

@rvanbaalen

rvanbaalen/readme.md

Last active January 17, 2026 13:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rvanbaalen/4ec7551c7793c44b2630625922c67190 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rvanbaalen/4ec7551c7793c44b2630625922c67190 to your computer and use it in GitHub Desktop.
Download ZIP
SaaS Dashboard UI Design System - Comprehensive documentation for a clean, professional dashboard UI style
Raw
readme.md

SaaS Dashboard UI Design System

A comprehensive design system documentation for building clean, professional SaaS dashboard interfaces. This guide captures the design language, patterns, and components for a modern developer-focused dashboard UI.

1. DESIGN PHILOSOPHY

This design system follows a clean, professional, data-dense SaaS dashboard aesthetic with:

  • Minimal decoration, maximum information density
  • Subtle depth through shadows rather than gradients
  • Green-tinted neutral palette with teal accents
  • Clear visual hierarchy through typography weight and spacing
  • Professional, developer-focused aesthetic

2. COLOR SYSTEM

Core Palette

/* Backgrounds */
--bg-page: #ffffff;
--bg-weaker: #fcfdfc;          /* Subtle off-white for cards */
--bg-pressed: #ecefec;          /* Pressed/active states */
--bg-hover: #f2f4f2;            /* Hover states */
--bg-sidebar-active: #f2f4f2;   /* Active sidebar item */

/* Text Colors */
--text-strong: #141e12;         /* Primary text, headings */
--text-default: #151715;        /* Body text */
--text-muted: #6b716a;          /* Secondary/helper text */
--text-weak: #818780;           /* Tertiary text */
--text-weaker: #8b918a;         /* Timestamps, metadata */
--text-placeholder: rgba(2, 15, 0, 0.46);

/* Brand/Accent Colors */
--brand-primary: #18b69b;       /* Teal - primary accent */
--brand-success: #30a46c;       /* Green - success states */
--brand-success-text: #208368;  /* Green text variant */
--brand-info: #0091ff;          /* Blue - info/links */
--brand-warning: #f76808;       /* Orange - warnings */
--brand-danger: #ca244d;        /* Red - danger/delete actions */

/* Interactive States */
--link-default: #18b69b;
--link-hover: #0db096;
--link-pressed: #0e6d5d;

/* Borders */
--border-light: rgba(0, 26, 0, 0.15);
--border-default: rgba(1, 34, 1, 0.12);
--border-strong: rgba(2, 42, 2, 0.08);
--border-focus: #151715;

Badge/Tag Color Variants

/* Green Badge (production, connected, running, installed) */
--badge-green-bg: #f1fbf9;
--badge-green-text: #18b69b;
--badge-green-border: rgba(13, 176, 150, 0.19);

/* Orange Badge (worker, warning) */
--badge-orange-bg: #fff1e7;
--badge-orange-text: #f76808;

/* Blue Badge (web, info) */
--badge-blue-bg: #edf6ff;
--badge-blue-text: #0091ff;

/* Neutral Badge */
--badge-neutral-bg: #f2f4f2;
--badge-neutral-text: #151715;

3. TYPOGRAPHY

Font Stack

--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Type Scale

/* Page Title */
.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #141e12;
  line-height: 1.3;
}

/* Section Heading */
.section-heading {
  font-size: 16px;
  font-weight: 500;
  color: #141e12;
  line-height: 1.4;
}

/* Card Title */
.card-title {
  font-size: 14px;
  font-weight: 500;
  color: #141e12;
}

/* Body Text */
.body-text {
  font-size: 14px;
  font-weight: 400;
  color: #151715;
  line-height: 1.5;
}

/* Helper/Description Text */
.helper-text {
  font-size: 14px;
  font-weight: 400;
  color: #6b716a;
}

/* Small Text / Metadata */
.small-text {
  font-size: 13px;
  font-weight: 400;
  color: #818780;
}

/* Code/Monospace */
.code-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #818780;
}

/* Badge Text */
.badge-text {
  font-size: 12px;
  font-weight: 500;
}

/* Danger Heading */
.danger-heading {
  font-size: 16px;
  font-weight: 500;
  color: #ca244d;
}

4. SPACING SYSTEM

Use a 4px base unit with these common values:

--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-8: 40px;
--space-10: 80px;

Common Spacing Patterns

  • Padding within cards/sections: 16px
  • Gap between list items: 0 (use border separation)
  • Section margin-bottom: 32px
  • Inline element gap: 8px or 12px
  • Form field spacing: 16px vertical

5. BORDER RADIUS

--radius-sm: 4px;   /* Badges, small elements */
--radius-md: 6px;   /* Buttons, inputs, cards */
--radius-lg: 8px;   /* Larger cards, modals */
--radius-full: 9999px; /* Avatars, status dots */

6. SHADOWS

/* Subtle elevation (buttons, dropdowns) */
--shadow-sm: 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);

/* Card elevation */
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);

/* Dropdown/Modal elevation */
--shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.1);

7. COMPONENT SPECIFICATIONS

Primary Button (Dark)

.btn-primary {
  background-color: #151715;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #151715;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background-color 150ms ease;
}
.btn-primary:hover {
  background-color: #2a2d2a;
}
.btn-primary:active {
  background-color: #0d0e0d;
}

Primary Button with Icon (+ prefix)

.btn-primary-icon {
  /* Same as primary, but with icon spacing */
  padding: 8px 16px 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

Primary Button with Dropdown (chevron suffix)

.btn-primary-dropdown {
  padding: 8px 10px 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Secondary Button (Outlined)

.btn-secondary {
  background-color: #ffffff;
  color: #141e12;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid rgba(0, 26, 0, 0.15);
  transition: background-color 150ms ease;
}
.btn-secondary:hover {
  background-color: #f2f4f2;
}

Danger Button (Ghost Style)

.btn-danger {
  background-color: transparent;
  color: #ca244d;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid rgba(0, 26, 0, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-danger:hover {
  background-color: #fff5f7;
}

Text/Link Button

.btn-link {
  background: transparent;
  color: #18b69b;
  font-size: 14px;
  font-weight: 400;
  padding: 0;
  border: none;
  text-decoration: none;
}
.btn-link:hover {
  color: #0db096;
  text-decoration: underline;
}

Icon Button (three-dot menu)

.btn-icon {
  background: transparent;
  color: rgba(2, 15, 0, 0.46);
  padding: 4px;
  border-radius: 4px;
  border: none;
}
.btn-icon:hover {
  background-color: #f2f4f2;
  color: #151715;
}

Add Button (+)

.btn-add {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(0, 26, 0, 0.15);
  border-radius: 6px;
  color: #6b716a;
}
.btn-add:hover {
  background-color: #f2f4f2;
  color: #151715;
}

Text Input

.input {
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  color: #141e12;
  background-color: #ffffff;
  border: 1px solid rgba(0, 26, 0, 0.15);
  border-radius: 6px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input:focus {
  outline: none;
  border-color: #151715;
  box-shadow: 0 0 0 1px #151715;
}
.input::placeholder {
  color: rgba(2, 15, 0, 0.46);
}

Badge/Tag

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 22px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid;
}

/* Green variant */
.badge-green {
  background-color: #f1fbf9;
  color: #18b69b;
  border-color: rgba(13, 176, 150, 0.19);
}

/* Orange variant */
.badge-orange {
  background-color: #fff1e7;
  color: #f76808;
  border-color: rgba(247, 104, 8, 0.19);
}

/* Blue variant */
.badge-blue {
  background-color: #edf6ff;
  color: #0091ff;
  border-color: rgba(0, 145, 255, 0.19);
}

Status Badge (with checkmark icon)

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 400;
  color: #208368;
  background-color: #e9f9ee;
  border-radius: 4px;
}

Avatar (Initials)

.avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #141e12;
}

/* Green background */
.avatar-green {
  background-color: #e9f9ee;
  color: #208368;
}

/* Teal/Brand background */
.avatar-brand {
  background-color: #e3f9f6;
  color: #18b69b;
}

/* Orange background */
.avatar-orange {
  background-color: #fff1e7;
  color: #f76808;
}

/* Large avatar (profile) */
.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 20px;
}

List Item Row

.list-item {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(1, 34, 1, 0.12);
  transition: background-color 150ms ease;
}
.list-item:hover {
  background-color: #fcfdfc;
}
.list-item:last-child {
  border-bottom: none;
}

Card/Section Container

.card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 26, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(1, 34, 1, 0.12);
}

.card-body {
  padding: 0; /* List items have their own padding */
}

Dropdown Menu (Dark Theme)

.dropdown-menu {
  background-color: #151715;
  border-radius: 8px;
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 4px;
  transition: background-color 100ms ease;
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-item-shortcut {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

Dropdown Menu (Light Theme - User Menu)

.dropdown-menu-light {
  background-color: #ffffff;
  border: 1px solid rgba(0, 26, 0, 0.15);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dropdown-item-light {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 14px;
  color: #141e12;
  border-radius: 6px;
}

.dropdown-item-light:hover {
  background-color: #f2f4f2;
}

Command Palette / Search Modal

.command-palette {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
  width: 560px;
  max-height: 400px;
  overflow: hidden;
}

.command-input {
  padding: 16px;
  border-bottom: 1px solid rgba(1, 34, 1, 0.12);
}

.command-input input {
  width: 100%;
  border: none;
  font-size: 16px;
  color: #141e12;
  outline: none;
}

.command-input input::placeholder {
  color: #6b716a;
}

.command-list {
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.command-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: #141e12;
  border-radius: 6px;
}

.command-item:hover,
.command-item.active {
  background-color: #f2f4f2;
}

.command-item-icon {
  color: #6b716a;
}

.command-footer {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid rgba(1, 34, 1, 0.12);
  font-size: 12px;
  color: #6b716a;
}

Navigation Tabs

.nav-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(1, 34, 1, 0.12);
}

.nav-tab {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #6b716a;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}

.nav-tab:hover {
  color: #141e12;
  background-color: #f2f4f2;
}

.nav-tab.active {
  color: #141e12;
  font-weight: 500;
  border-bottom-color: #151715;
}

Sidebar Navigation

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.sidebar-link {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
  color: #6b716a;
  border-radius: 6px;
  transition: background-color 150ms ease, color 150ms ease;
}

.sidebar-link:hover {
  background-color: #f2f4f2;
  color: #141e12;
}

.sidebar-link.active {
  background-color: #f2f4f2;
  color: #141e12;
  font-weight: 500;
}

Header/Top Navigation Bar

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(1, 34, 1, 0.12);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: #f2f4f2;
  border-radius: 6px;
  font-size: 14px;
  color: #6b716a;
  border: 1px solid rgba(0, 26, 0, 0.15);
}

.search-button kbd {
  font-family: var(--font-sans);
  font-size: 12px;
  color: #818780;
}

Breadcrumb

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.breadcrumb-item {
  color: #141e12;
  font-weight: 500;
}

.breadcrumb-separator {
  color: #6b716a;
}

.breadcrumb-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 4px;
}

.breadcrumb-dropdown:hover {
  background-color: #f2f4f2;
}

Details Panel (Key-Value List)

.details-panel {
  padding: 16px;
}

.details-heading {
  font-size: 14px;
  font-weight: 500;
  color: #141e12;
  margin-bottom: 12px;
}

.details-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
}

.details-label {
  color: #6b716a;
}

.details-value {
  color: #141e12;
  font-weight: 400;
}

Metrics Display

.metrics-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.metric-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #30a46c; /* Green for healthy */
}

.metric-dot.warning {
  background-color: #f76808;
}

.metric-dot.danger {
  background-color: #ca244d;
}

.metric-label {
  color: #6b716a;
}

.metric-value {
  color: #141e12;
}

Empty State

.empty-state {
  padding: 40px 24px;
  text-align: center;
  color: #6b716a;
  font-size: 14px;
  background-color: #fcfdfc;
  border-radius: 8px;
}

Footer

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  font-size: 14px;
  color: #6b716a;
  border-top: 1px solid rgba(1, 34, 1, 0.12);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-link {
  color: #6b716a;
  transition: color 150ms ease;
}

.footer-link:hover {
  color: #141e12;
}

8. HOVER & INTERACTION EFFECTS

General Transitions

/* Default transition for all interactive elements */
--transition-fast: 100ms ease;
--transition-default: 150ms ease;
--transition-slow: 200ms ease;

/* Easing curves */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

Hover Effect Patterns

/* Background fade on hover */
.hoverable {
  transition: background-color 150ms ease;
}
.hoverable:hover {
  background-color: #f2f4f2;
}

/* Text color change on hover */
.link-hoverable {
  transition: color 150ms ease;
}
.link-hoverable:hover {
  color: #141e12;
}

/* Underline on hover for links */
.text-link:hover {
  text-decoration: underline;
}

/* Subtle scale on icon buttons */
.icon-btn:active {
  transform: scale(0.95);
}

Focus States

/* Default focus ring */
.focusable:focus-visible {
  outline: 2px solid #151715;
  outline-offset: 2px;
}

/* Input focus */
.input:focus {
  border-color: #151715;
  box-shadow: 0 0 0 1px #151715;
}

9. LAYOUT PATTERNS

Page Container

.page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}

Two-Column Layout (Content + Sidebar Details)

.two-column {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
}

Settings Layout (Sidebar + Content)

.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
}

Section Spacing

.section {
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

10. ICON GUIDELINES

  • Use outline/stroke icons (not filled)
  • Icon size: 16px for inline, 20px for buttons
  • Icon color matches text color of context
  • Use Heroicons or similar clean icon set
  • Status icons (checkmark, warning) use brand colors

11. KEY DESIGN PRINCIPLES TO FOLLOW

  1. Minimal borders - Use light borders sparingly, prefer spacing and background colors for separation
  2. Subtle shadows - Almost no visible shadows, just very subtle elevation hints
  3. Green-tinted neutrals - The gray palette has a slight green undertone
  4. Teal as primary accent - Use #18b69b for links, active states, and brand elements
  5. Dark buttons sparingly - Primary CTAs use the dark button, everything else is outlined
  6. Dense but readable - Pack information tightly but maintain 1.5 line-height for readability
  7. Consistent 6px radius - Most interactive elements use 6px border-radius
  8. Monospace for technical data - IP addresses, paths, commands use monospace font
  9. Status badges are subtle - Light background with matching text color, thin border
  10. Dropdowns are dark - Context menus use dark background for clear separation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment