Smart Compliance Hub Logo

Time Until the EU AI Act Enforcement

---Days
--Hours
--Minutes
--Seconds

Smart Compliance Hub

Design System & Style Guide

A comprehensive collection of reusable components, guidelines, and design tokens that ensure consistency across all Smart Compliance Hub interfaces.

Color Palette

Primary Colors

#000000
Primary Black
#FFFFFF
Primary White

Slate Scale

#334155
Slate 700
#1e293b
Slate 800
#0f172a
Slate 900

Blue Accent Scale

#60a5fa
Blue 400
#3b82f6
Blue 500
#2563eb
Blue 600
#1d4ed8
Blue 700

Light Theme Color Palette

Light Theme Base

#FFFFFF
Background White
#F9FAFB
Gray 50

Gray Scale

#E5E7EB
Gray 200
#D1D5DB
Gray 300
#4B5563
Gray 600
#111827
Gray 900

Blue Accents (Light Theme)

#EFF6FF
Blue 50
#3B82F6
Blue 500
#2563EB
Blue 600
#1D4ED8
Blue 700

Typography - Dark Theme

Heading 1 - Display Large

text-4xl font-bold

Heading 2 - Display Medium

text-3xl font-bold

Heading 3 - Display Small

text-2xl font-semibold

Heading 4 - Title Large

text-xl font-semibold

Body text - This is regular paragraph text with proper line spacing and readability considerations.

text-gray-300 leading-relaxed

Small text - Used for captions and secondary information

text-sm text-gray-400

Caption - Label Text

text-xs uppercase tracking-wider text-gray-400 font-medium

Highlighted text - Important information

text-blue-400 font-semibold

Typography - Light Theme

Heading 1 - Display Large

text-4xl font-bold text-gray-900

Heading 2 - Display Medium

text-3xl font-bold text-gray-900

Heading 3 - Display Small

text-2xl font-semibold text-gray-800

Heading 4 - Title Large

text-xl font-semibold text-gray-800

Body text - This is regular paragraph text with proper line spacing and readability considerations for light backgrounds.

text-gray-700 leading-relaxed

Small text - Used for captions and secondary information

text-sm text-gray-600

Caption - Label Text

text-xs uppercase tracking-wider text-gray-500 font-medium

Highlighted text - Important information

text-blue-600 font-semibold

Buttons - Dark Theme

Primary

bg-gradient-to-r from-blue-600 to-blue-700

Secondary

bg-slate-800 hover:bg-slate-700

Ghost

text-blue-400 hover:bg-slate-800/50

Danger

bg-red-600 hover:bg-red-700

Button Sizes

Buttons - Light Theme

Primary

bg-gradient-to-r from-blue-600 to-blue-700

Secondary

bg-gray-100 hover:bg-gray-200

Ghost

text-blue-600 hover:bg-blue-50

Danger

bg-red-500 hover:bg-red-600

Button Sizes

Form Elements - Dark Theme

bg-slate-800 border-slate-700 focus:ring-blue-500
textarea with resize-none
select with consistent styling

Form Elements - Light Theme

bg-white border-gray-300 focus:ring-blue-500
textarea with light theme styling
select with light theme styling

Cards & Containers - Dark Theme

Basic Card

A simple card container with consistent spacing and hover effects.

bg-slate-900 border-slate-700

Content Card

Enhanced card with icon and lift effect on hover for better interactivity.

hover:-translate-y-1

Highlighted Card

Special emphasis card with blue accent border for important content.

border-blue-500/30

Cards & Containers - Light Theme

Basic Card

A simple light card container with consistent spacing and hover effects.

bg-white border-gray-200

Content Card

Enhanced light card with icon and lift effect on hover for better interactivity.

hover:-translate-y-1

Highlighted Card

Special emphasis card with blue background tint for important content.

bg-blue-50 border-blue-200

Navigation Elements - Dark Theme

Main Navigation

hover:text-blue-400 hover:border-b-2 hover:border-blue-400

Content Links

Standard content link with underlineButton-style link
text-blue-400 hover:text-blue-300

Navigation Elements - Light Theme

Main Navigation

text-gray-700 hover:text-blue-600 hover:border-b-2 hover:border-blue-600

Content Links

Standard content link with underlineButton-style link
text-blue-600 hover:text-blue-700

States & Feedback - Dark Theme

Loading States

Loading...
animate-spin border-b-2 border-blue-500

Focus States

focus:ring-2 focus:ring-blue-500

Hover Effects

Hover to see lift effect

hover:-translate-y-1 hover:shadow-xl

Transitions

transition-all duration-200

States & Feedback - Light Theme

Loading States

Loading...
animate-spin border-b-2 border-blue-600

Focus States

focus:ring-2 focus:ring-blue-500 focus:ring-offset-white

Hover Effects

Hover to see lift effect

hover:-translate-y-1 hover:shadow-xl

Transitions

transition-all duration-200

Layout Examples

Two Column Grid

Left Column

Content for the left side of a two-column layout.

Right Column

Content for the right side of a two-column layout.

grid grid-cols-1 lg:grid-cols-2 gap-8

Three Column Grid

Column 1

First column content.

Column 2

Second column content.

Column 3

Third column content.

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

Usage Guidelines

Do's

  • • Use consistent spacing patterns (4, 6, 8, 12 units)
  • • Apply hover states to interactive elements
  • • Use blue accents for primary actions in both themes
  • • Maintain proper color contrast ratios
  • • Keep dark header with light main content
  • • Use slate scale for dark sections, gray scale for light
  • • Apply smooth transitions for better UX
  • • Use appropriate focus ring offsets for each theme

Don'ts

  • • Don't mix light and dark theme elements inconsistently
  • • Avoid using dark theme colors on light backgrounds
  • • Don't skip hover states on clickable elements
  • • Avoid using pure white text on light backgrounds
  • • Don't use arbitrary spacing values
  • • Avoid abrupt state changes without transitions
  • • Don't mix different blue shades within same theme
  • • Avoid insufficient contrast ratios

Theme Usage Guidelines

Dark Theme (Header/Navigation)
  • • Use for navigation and headers
  • • Apply slate color scale (700-900)
  • • Use white/gray-300 for text
  • • Blue-400 for interactive elements
Light Theme (Main Content)
  • • Use for main page content
  • • Apply gray color scale (50-900)
  • • Use gray-700/900 for text
  • • Blue-600 for interactive elements