name: generic-static-design-system description: Complete design system reference for static HTML/CSS/JS sites. Covers colors, typography, component patterns, animations, and accessibility. Use when implementing UI, choosing colors, or ensuring brand consistency.

Static Site Design System

Design system patterns for minimalist static sites (pure HTML/CSS/JS).

Extends: Generic Design System - Read base skill for color theory, typography scale, spacing system, and component states.

Pure CSS Approach

No preprocessors, no Tailwind, no build tools. Just CSS.

CSS Custom Properties

:root {
  /* Brand colors - keep palette minimal */
  --bg-primary: #000000;
  --text-primary: #ffffff;
  --accent: #00ff00;

  /* Spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  /* Timing */
  --transition-fast: 0.15s;
  --transition-base: 0.3s;
}

System Font Stack (No Web Fonts)

/* System fonts = zero load time */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

code {
  font-family: "SF Mono", Monaco, "Courier New", monospace;
}

Responsive Typography with clamp()

/* Fluid sizing, no media queries needed */
h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

body {
  font-size: clamp(1rem, 3vw, 1.125rem);
}

CSS-Only Animations

Keyframe Animations

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

Transition Patterns

/* Hover effect - GPU accelerated */
.link {
  transition:
    transform var(--transition-base) ease,
    color var(--transition-base) ease;
}

.link:hover {
  transform: translateY(-2px);
  color: var(--accent);
}

Staggered Animation with nth-child

.menu a {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.menu.visible a {
  opacity: 1;
  transform: translateY(0);
}
.menu.visible a:nth-child(1) {
  transition-delay: 0.1s;
}
.menu.visible a:nth-child(2) {
  transition-delay: 0.2s;
}
.menu.visible a:nth-child(3) {
  transition-delay: 0.3s;
}

CSS-Only Interactive Patterns

Hidden/Visible Toggle

.hidden {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.visible {
  max-height: 300px; /* Must be > content height */
}

Icon Rotation

.arrow {
  transition: transform 0.3s ease;
}

.rotated .arrow {
  transform: rotate(180deg);
}

Focus States

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

Component Patterns (No JS)

Accessible Button

<button class="btn" type="button">Click Me</button>

.btn {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-base) ease;
}

.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-primary);
}

Navigation

<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>

nav a {
  padding: var(--space-sm);
  text-decoration: none;
  color: var(--text-primary);
}

nav a:hover {
  color: var(--accent);
}

Performance Targets

See Also

• Generic Design System - Token organization, spacing
• Design Patterns - Core patterns
• UX Principles - Visual hierarchy