UX Portfolio Design System

A comprehensive design system for constructing modern UX portfolios with consistent typography, temperature-based theming, glassmorphism effects, and responsive utilities.

Overview

This skill provides guidelines and conventions for building a professional UX portfolio using a modular CSS architecture with:

IBM Plex Sans typography system with responsive scaling

Temperature-based accent theming (cool blue for light mode, warm orange for dark mode)

Glassmorphism design language for interactive elements

CSS variable architecture for theme switching

Modular spacing scale and utility classes

Component library for common UI patterns

Typography System

**Primary Font Stack:**

IBM Plex Sans (Google Fonts) with weights: 300, 400, 500, 600, 700

Fallback: `-apple-system, BlinkMacSystemFont, sans-serif`

Monospace: `'SF Mono', Monaco, monospace`

Ligatures enabled site-wide

**Typography Variables:**

All typography uses CSS custom properties defined in `_variables.css`:

```css

/* Hero Title */

--typo-hero-title-size: clamp(48px, 8vw, 96px)

--typo-hero-title-weight: 300

--typo-hero-title-spacing: -0.02em

--typo-hero-title-line-height: 0.9

/* Headings H1-H6 with responsive sizing */

--typo-h1-size: clamp(32px, 5vw, 48px)

--typo-h2-size: clamp(24px, 4vw, 32px)

--typo-h3-size: clamp(20px, 3vw, 24px)

/* Body text: 16px desktop, 12px mobile */

--typo-body-size: 16px

--typo-body-line-height: 1.7

```

Apply typography using variables:

```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 System

**Temperature-Based Theming:**

The accent color system uses complementary color temperatures for optimal visual comfort:

**Light Mode:** Cool blue (`#15B5FF`) provides chromatic contrast against warm backgrounds, reducing eye strain

**Dark Mode:** Warm orange (`#ea580c`) creates vibrant contrast without harsh glare in low-light environments

**Color Variables:**

```css

/* Primary palette */

--color-primary: #0f0f0f

--color-secondary: #525252

--color-tertiary: #737373

/* Accent colors */

--color-accent-cool: #15B5FF /* Light mode */

--color-accent-warm: #ea580c /* Dark mode */

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

/* Neutral scale (50-900) */

--color-neutral-50: #fafafa

--color-neutral-900: #171717

```

CSS Variable Architecture & Theme Switching

**CRITICAL: Variable Cascading Rules**

CSS variables that reference other variables do NOT automatically re-evaluate. You must explicitly override dependent variables in theme blocks.

**Incorrect (won't work):**

```css

:root {

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

--link-color: var(--color-accent); /* Locks to initial value */

}

body[data-theme="dark"] {

--color-accent: var(--color-accent-warm); /* Only updates accent */

}

```

**Correct implementation:**

```css

: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 Override Locations:**

Override variables in BOTH locations due to CSS cascade:

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

2. **`_utilities.css` (line ~29)** - Final overrides (loads last, highest specificity)

**When adding new theme-aware elements:**

1. Define base variable in `:root`

2. Add to BOTH dark theme blocks if it references another variable

3. Use variables instead of hardcoded hex values

4. Test in both light and dark modes

**Example:**

```css

/* Step 1: Define in :root (_variables.css) */

:root {

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

}

/* Step 2: Override in BOTH dark theme blocks */

body[data-theme="dark"] { /* _variables.css */

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

}

[data-theme="dark"] { /* _utilities.css */

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

}

/* Step 3: Use in components */

.my-button {

background: var(--button-accent); /* ✅ Switches with theme */

}

```

Layout & Spacing

**Container:**

```css

max-width: 1200px

width: 100%

padding: 120px 60px (desktop), 80px 24px (mobile)

```

**Modular Spacing Scale:**

```

xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 48px, xxl: 80px

```

**Spacing Utilities:**

```css

.m-0, .mb-3, .mb-4, .mb-6, .mb-8, .mb-12, .mb-30

.mt-6, .mt-8, .mt-12

```

**Layout Utilities:**

```css

.flex-center /* Centers horizontally */

.flex-column-gap-6 /* Vertical flex, 24px gap */

.flex-wrap-gap-6 /* Horizontal flex with wrap, 24px gap */

```

**Grid System:**

```css

.grid, .grid-cols-{n}, .col-span-{n}

.gap-1 (4px) to .gap-16 (64px)

Breakpoints: 768px (tablet), 1024px (desktop)

```

Link Components

**Standard Link Classes:**

```css

/* Accent link with animated underline */

.accent-link {

color: var(--link-color);

text-decoration: underline;

text-underline-offset: var(--link-underline-offset);

}

/* Accent link with arrow (→) */

.accent-link-arrow {

/* For internal navigation, "Read more" links */

}

/* External link with diagonal arrow (↗) */

.external-link {

/* For external resources opening in new tab */

}

```

**Link Variables:**

```css

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

--link-hover-opacity: 0.5

--link-underline-height: 2px

--link-underline-offset: -2px

--link-transition: 0.3s ease

--link-font-weight: 500

```

Interactive Elements

**Glassmorphism Design Language:**

```css

/* Buttons */

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

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

Border-radius: 50px, Padding: 16px 32px

/* Cards */

.card: Standard card with glass effect

.glass-card: Enhanced glass with more blur

.interactive-card: Card with hover lift effect

Border-radius: 16-20px, Backdrop-filter: blur(10-20px)

```

**Transitions & Animations:**

```css

Standard: transition: all 0.3s ease

Fast: transition: all 0.15s ease

Slow: transition: all 0.5s ease

Smooth: cubic-bezier(0.4, 0, 0.2, 1)

```

**Hover States:**

```css

.hover-lift: translateY(-2px) with enhanced shadow

.hover-scale: scale(1.02)

.hover-fade: opacity(0.8)

```

Coding Best Practices

Never Use Inline Styles

❌ **NEVER:**

```html

```

✅ **ALWAYS:**

```html

```

Always Use CSS Variables for Colors

❌ **NEVER:**

```css

.link { color: #15B5FF; }

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

body[data-theme="dark"] .link { color: #ea580c; }

```

✅ **ALWAYS:**

```css

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

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

```

Responsive Patterns

Use modern CSS functions:

```css

/* Responsive sizing */

width: min(500px, 100%)

/* Responsive typography (already in variables) */

font-size: clamp(16px, 2vw, 24px)

```

Component Reusability

If a pattern appears more than once, create a reusable class

Add to `_components.css` with documentation

Keep lab-specific components separate

Reference `lab.html` as source of truth for variable usage

Common Pitfalls to Avoid

1. ❌ Hardcoded hex colors in components (prevents theme switching)

2. ❌ Using `rgba()` with hardcoded RGB values (use `color-mix()` instead)

3. ❌ Creating theme-specific color selectors (use auto-switching variables)

4. ❌ Inline styles (prevents responsive adjustments)

5. ❌ Forgetting to override dependent variables in BOTH theme blocks

Portfolio Construction Guidelines

**Page Structure:**

1. Header with navigation (glass effect)

2. Hero section with large typography

3. Project showcase grid

4. About section

5. Contact/footer

**Project Cards:**

Use `.glass-card` with hover effects

Include thumbnails, titles, descriptions

Responsive grid: 1 col (mobile) → 2-3 cols (desktop)

**Navigation:**

Fixed/sticky header with glass effect

Theme toggle in top-right (32px × 32px)

Icons: `/assets/icons/moon-outlined.svg`, `/assets/icons/sun-outlined.svg`

Smooth scroll, active state indicators

**Performance:**

Optimize backdrop-filter usage (expensive)

Use CSS transforms for animations

Lazy load project images

Maintain WCAG contrast ratios

Implementation Workflow

1. **Start with variables**: Define all theme-aware colors in `:root`

2. **Add dark theme overrides**: Update BOTH `_variables.css` and `_utilities.css`

3. **Build with utilities**: Use spacing/layout utilities instead of inline styles

4. **Create components**: Extract repeated patterns into reusable classes

5. **Test both themes**: Verify all colors switch properly

6. **Reference lab page**: Use `lab.html` as implementation guide

File Structure

```

styles/

├── main.css # Import order (critical for cascade)

├── _variables.css # All CSS custom properties + dark theme

├── _utilities.css # Utility classes + final dark theme overrides

├── _components.css # Reusable component patterns

└── _typography.css # Typography-specific rules

```

Constraints

All effects require `-webkit-` prefixes for cross-browser support

Mobile-first responsive approach

Maintain accessibility with proper contrast ratios (WCAG AA minimum)

Glassmorphism can be performance-intensive; use sparingly

Test theme switching thoroughly before deploying

UX Portfolio Design System

UX Portfolio Design System

Overview

Typography System

Color System

CSS Variable Architecture & Theme Switching

Layout & Spacing

Link Components

Interactive Elements

Coding Best Practices

Never Use Inline Styles

Always Use CSS Variables for Colors

Responsive Patterns

Component Reusability

Common Pitfalls to Avoid

Portfolio Construction Guidelines

Implementation Workflow

File Structure

Constraints

Reviews (0)