UX Portfolio Design System

A comprehensive design system for constructing modern UX portfolios with glassmorphism effects, temperature-based theming, and modular component architecture.

Overview

This skill provides guidelines and patterns for building a professional UX portfolio with:

Typography System

Use the standardized typography variables for all text elements:

**Hero & Display Text:**

**Section Headers:**

**Headings (H1-H6):**

**Body Text:**

**Implementation:**

```css

.my-heading {

font-size: var(--typo-h2-size);

font-weight: var(--typo-h2-weight);

letter-spacing: var(--typo-h2-spacing);

line-height: var(--typo-h2-line-height);

}

```

Color Theory & Theming

**Temperature-Based Accent Strategy:**

The design system uses complementary color temperatures across themes for optimal visual comfort:

**Color Palette:**

CSS Variable Architecture (CRITICAL)

**Understanding Variable Cascading:**

CSS variables that reference other variables do NOT automatically re-evaluate when the referenced variable changes. You must explicitly override dependent variables.

**Correct Theme Implementation:**

```css

/* ✅ CORRECT - Explicitly override dependent variables */

:root {

--color-accent: var(--color-accent-cool);

--link-color: var(--color-accent);

}

body[data-theme="dark"] {

--color-accent: var(--color-accent-warm);

--link-color: var(--color-accent-warm); /* Must explicitly override */

}

```

**Theme Variable Override Locations:**

Variables must be overridden in BOTH locations:

1. **`_variables.css`** (line ~222) - Base dark theme overrides

2. **`_utilities.css`** (line ~29) - Final dark theme overrides (loads last)

This ensures theme variables have highest specificity in the cascade.

**When Adding New Theme-Aware Colors:**

1. Define base color variable in `:root`

2. Add it to BOTH dark theme blocks

3. Use variables instead of hardcoded hex values

4. Test in both light AND dark modes

Link Components

Three standardized link types with animated underlines:

**1. Accent Link (`.accent-link`)** - Standard internal links

**2. Accent Link with Arrow (`.accent-link-arrow`)** - Navigation

**3. External Link (`.external-link`)** - External resources

**Usage:**

```html

<a href="#section" class="accent-link">Internal link</a>

<a href="/case-study" class="accent-link-arrow">Read case study →</a>

<a href="https://example.com" target="_blank" class="external-link">Documentation ↗</a>

```

Layout & Spacing

**Container:**

**Modular Spacing Scale:**

**Spacing Utilities (use instead of inline styles):**

**Layout Utilities:**

Component Library

**Buttons:**

```css

.btn-primary: Dark glass with white text (light), light glass (dark)

.btn-secondary: Light glass with dark text (light), subtle glass (dark)

Border-radius: 50px (pill-shaped)

Padding: 16px 32px

```

**Cards:**

```css

.card: Standard card with glass effect

.glass-card: Enhanced glass card with blur

.interactive-card: Card with hover lift

Border-radius: 16-20px

Backdrop-filter: blur(10-20px)

```

**Interactive Effects:**

Coding Best Practices

NEVER Use Inline Styles

❌ **INCORRECT:**

```html

<div style="margin-bottom: 24px; display: flex;">

```

✅ **CORRECT:**

```html

<div class="mb-6 flex-center">

```

ALWAYS Use CSS Variables for Colors

❌ **INCORRECT:**

```css

.link { color: #15B5FF; }

.element { color: rgba(21, 181, 255, 0.5); }

```

✅ **CORRECT:**

```css

.link { color: var(--link-color); }

.element { color: color-mix(in srgb, var(--link-color) 50%, transparent); }

```

Common Pitfalls to Avoid

1. ❌ Never use hardcoded hex colors in components

2. ❌ Don't use `rgba()` with hardcoded RGB values

3. ❌ Don't create theme-specific selectors for colors

4. ✅ Always use CSS variables for theme-responsive colors

5. ✅ Use `lab.html` as source of truth for component patterns

Responsive Patterns

Portfolio Page Structure

1. **Header:** Navigation with glass effect, theme toggle top-right

2. **Hero Section:** Large typography, accent color highlights

3. **Project Showcase:** Responsive grid (1 col mobile → 2-3 cols desktop)

4. **About Section:** Maintain consistent spacing

5. **Contact/Footer:** Use glass cards

**Project Cards:**

Performance & Accessibility

Content Guidelines

Theme Toggle Implementation