5.1 KiB

Raw Blame History

Design System Master File

LOGIC: When building a specific page, first check design-system/pages/[page-name].md. If that file exists, its rules override this Master file. If not, strictly follow the rules below.

Project: SepComet Generated: 2026-05-03 23:28:50 Category: Portfolio/Personal

Global Rules

Color Palette

Role	Hex	CSS Variable
Primary	`#18181B`	`--color-primary`
Secondary	`#3F3F46`	`--color-secondary`
CTA/Accent	`#2563EB`	`--color-cta`
Background	`#FAFAFA`	`--color-background`
Text	`#09090B`	`--color-text`

Color Notes: Monochrome + blue accent

Typography

Heading Font: Archivo
Body Font: Space Grotesk
Mood: minimal, portfolio, designer, creative, clean, artistic
Google Fonts: Archivo + Space Grotesk

CSS Import:

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

Spacing Variables

Token	Value	Usage
`--space-xs`	`4px` / `0.25rem`	Tight gaps
`--space-sm`	`8px` / `0.5rem`	Icon gaps, inline spacing
`--space-md`	`16px` / `1rem`	Standard padding
`--space-lg`	`24px` / `1.5rem`	Section padding
`--space-xl`	`32px` / `2rem`	Large gaps
`--space-2xl`	`48px` / `3rem`	Section margins
`--space-3xl`	`64px` / `4rem`	Hero padding

Shadow Depths

Level	Value	Usage
`--shadow-sm`	`0 1px 2px rgba(0,0,0,0.05)`	Subtle lift
`--shadow-md`	`0 4px 6px rgba(0,0,0,0.1)`	Cards, buttons
`--shadow-lg`	`0 10px 15px rgba(0,0,0,0.1)`	Modals, dropdowns
`--shadow-xl`	`0 20px 25px rgba(0,0,0,0.15)`	Hero images, featured cards

Component Specs

Buttons

/* Primary Button */
.btn-primary {
  background: #2563EB;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 200ms ease;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
  background: transparent;
  color: #18181B;
  border: 2px solid #18181B;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 200ms ease;
  cursor: pointer;
}

Cards

.card {
  background: #FAFAFA;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-md);
  transition: all 200ms ease;
  cursor: pointer;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

Inputs

.input {
  padding: 12px 16px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 200ms ease;
}

.input:focus {
  border-color: #18181B;
  outline: none;
  box-shadow: 0 0 0 3px #18181B20;
}

Modals

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  width: 90%;
}

Style Guidelines

Style: Motion-Driven

Keywords: Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions

Best For: Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS

Key Effects: Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions

Page Pattern

Pattern Name: Portfolio Grid

Conversion Strategy: hover overlay info, lightbox view, Visuals first. Filter by category. Fast loading essential.
CTA Placement: Project Card Hover + Footer Contact
Section Order: 1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact

Anti-Patterns (Do NOT Use)

❌ Corporate templates
❌ Generic layouts

Additional Forbidden Patterns

❌ Emojis as icons — Use SVG icons (Heroicons, Lucide, Simple Icons)
❌ Missing cursor:pointer — All clickable elements must have cursor:pointer
❌ Layout-shifting hovers — Avoid scale transforms that shift layout
❌ Low contrast text — Maintain 4.5:1 minimum contrast ratio
❌ Instant state changes — Always use transitions (150-300ms)
❌ Invisible focus states — Focus states must be visible for a11y

Pre-Delivery Checklist

Before delivering any UI code, verify:

No emojis used as icons (use SVG instead)
All icons from consistent icon set (Heroicons/Lucide)
cursor-pointer on all clickable elements
Hover states with smooth transitions (150-300ms)
Light mode: text contrast 4.5:1 minimum
Focus states visible for keyboard navigation
prefers-reduced-motion respected
Responsive: 375px, 768px, 1024px, 1440px
No content hidden behind fixed navbars
No horizontal scroll on mobile

5.1 KiB Raw Blame History