Design System

A showcase design and components used across h3 SLOP!

Copied!

Color Palette

Primary
#0090ff
Background
#000000
Secondary BG
#0a0a0a
Text Primary
#ffffff
Text Secondary
#a0a0a0
Glass
rgba(0, 144, 255, 0.15)

Typography

Heading 1 - Lora Bold

Heading 2 - Lora Semi-Bold

Heading 3 - Lora Medium

Body text - Lora Regular. This is the primary font used throughout the site, providing elegant serif typography that enhances readability and adds sophistication to the design.

Italic text - Lora Italic. Used for emphasis and quotes.

Buttons

Cards

Card Title

This is a card component with glass morphism effect, hover states, and smooth transitions.

Interactive Card

Hover over cards to see the elevation effect and border color change.

Glass Morphism

Cards use backdrop-filter blur and semi-transparent backgrounds for a modern glass effect.

Shadows

Small Shadow - var(--shadow-sm)
Medium Shadow - var(--shadow-md)
Large Shadow - var(--shadow-lg)
Extra Large Shadow - var(--shadow-xl)
Blue Shadow - var(--shadow-blue)

Spacing Scale

1
--space-1 (0.25rem)
2
--space-2 (0.5rem)
4
--space-4 (1rem)
6
--space-6 (1.5rem)
8
--space-8 (2rem)
12
--space-12 (3rem)

Border Radius

SM
MD
LG
XL
2XL
Full

Glass Morphism

Glass Effect

This component uses backdrop-filter blur, semi-transparent backgrounds, and subtle borders to create a modern glass morphism effect.

CSS Variables

:root {
  --primary-color: #0090ff;
  --bg-primary: #000000;
  --text-primary: #ffffff;
  --glass: rgba(0, 144, 255, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
  --radius-lg: 0.75rem;
  --space-4: 1rem;
}

H3 Fluid

Super secure password generator! (aka H3 Fluid)