UX Portfolio Design System

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

Overview

This skill provides comprehensive guidelines for building a professional UX portfolio using IBM Plex Sans typography, CSS variables architecture, glassmorphism design language, and a temperature-based accent color system that optimizes visual comfort across light and dark modes.

Design System Components

Typography System

Apply the IBM Plex Sans typography hierarchy using CSS variables:

**Font Setup:**

Primary: IBM Plex Sans (weights: 300, 400, 500, 600, 700)

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

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

Enable ligatures site-wide for improved readability

**Typography Variables:**

Use these predefined CSS custom properties from `_variables.css`:

```css

/* Hero elements */

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

--typo-hero-title-weight: 300

--typo-subtitle-size: clamp(18px, 2.5vw, 32px)

/* Section headings */

--typo-section-title-size: clamp(36px, 5vw, 48px)

--typo-section-subtitle-size: 16px

/* Standard headings (H1-H6) */

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

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

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

--typo-h4-size: clamp(18px, 2.5vw, 20px)

--typo-h5-size: clamp(16px, 2vw, 18px)

--typo-h6-size: clamp(14px, 1.5vw, 16px)

/* Body text */

--typo-body-size: 16px (desktop), 12px (mobile)

--typo-small-size: 14px

```

Apply typography styles consistently:

```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 Palette & Temperature-Based Theming

**Core Color Strategy:**

The accent color system employs temperature-based theming grounded in color psychology:

**Light Mode:** Cool blue (`#15B5FF`) provides chromatic contrast against warm white backgrounds, reduces eye strain through visual recession

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

**Color Variables:**

```css

/* Primary neutrals */

--color-primary: #0f0f0f

--color-secondary: #525252

--color-tertiary: #737373

/* Temperature-based accents */

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

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

/* Neutral scale (50-900) */

--color-neutral-50: #fafafa

--color-neutral-100: #f5f5f5

--color-neutral-900: #171717

```

Link Styles

Use standardized link components from CSS variables:

**Available Link Types:**

1. **Accent Link (`.accent-link`)** - Animated underline

- Color changes based on theme

- Underline animates left-to-right on hover

- Text fades to 50% opacity using `color-mix()`

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

- Same styling as accent link + arrow

- Usage: "Read more" links, case studies

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

- Opens in new tab

- 45-degree arrow indicator

```html

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

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

```

Layout & Spacing

**Container System:**

Max-width: 1200px

Width: 100% (liquid until max-width)

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

**Modular Spacing Scale:**

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

**Spacing Utilities:**

Replace inline styles with these margin utilities:

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

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

**Layout Utilities:**

`.flex-center` - Centers content horizontally

`.flex-column-gap-6` - Vertical flex with 24px gap

`.flex-wrap-gap-6` - Horizontal flex with wrapping

**Grid System:**

CSS Grid with `.grid`, `.grid-cols-{n}`, `.col-span-{n}`

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

Gap options: `.gap-1` (4px) to `.gap-16` (64px)

Glassmorphism Design Language

Apply glassmorphism effects consistently:

**Component Patterns:**

Buttons: Semi-transparent backgrounds with backdrop blur

Cards: Subtle transparency with enhanced shadows

Theme toggle: Circular glass effect

No borders in dark mode for cleaner aesthetic

**Effects:**

```css

backdrop-filter: blur(10-20px);

background: rgba(255, 255, 255, 0.1);

border-radius: 16-20px;

```

Interactive Effects

**Transitions:**

Standard: `transition: all 0.3s ease`

Fast: `transition: all 0.15s ease`

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

**Hover States:**

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

`.hover-scale`: scale(1.02)

`.hover-fade`: opacity(0.8)

Critical: CSS Variable Architecture

NEVER Use Hardcoded Colors

**❌ INCORRECT:**

```css

.link { color: #15B5FF; }

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

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

```

**✅ CORRECT:**

```css

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

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

```

Understanding Variable Cascading

CSS variables that reference other variables do NOT automatically re-evaluate when the referenced variable changes.

**Theme Variable Override Requirements:**

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 (highest specificity)

```css

/* _variables.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 */

}

/* _utilities.css (loads last) */

[data-theme="dark"] {

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

--link-color: var(--color-accent-warm); /* Ensures highest specificity */

}

```

Adding New Theme-Aware Colors

1. Define base color 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

```css

/* Step 1: Define in :root */

:root {

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

}

/* Step 2: Override in BOTH locations */

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);

}

```

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, Padding: 16px 32px */

```

Cards

```css

.card /* Standard card with glass effect */

.glass-card /* Enhanced glass with more blur */

.interactive-card /* Card with hover lift */

```

Interactive Text

```css

.interactive-text /* Underline animation on hover */

```

Portfolio Structure Guidelines

**Page Architecture:**

1. Header with navigation (glass effect)

2. Hero section with large typography

3. Project showcase grid (responsive: 1 col mobile → 2-3 cols desktop)

4. About section

5. Contact/footer

**Project Cards:**

Use `.glass-card` with hover effects

Include thumbnails, titles, descriptions

Maintain consistent spacing

**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 with active state indicators

Coding Best Practices

Avoid Inline Styles

NEVER use inline `style=""` attributes

Use utility classes from `_utilities.css`

Create component classes in `_components.css` for reusable patterns

Inline styles prevent responsive adjustments and theme switching

Responsive Patterns

Use `min()` for responsive sizing: `width: min(500px, 100%)`

Use `clamp()` for responsive typography (predefined in variables)

Prefer CSS Grid and Flexbox utilities

Component Reusability

Create reusable class if pattern appears more than once

Document new components

Keep lab-specific components in dedicated section

Performance Considerations

Optimize backdrop-filter usage (expensive)

Use CSS transforms for animations

Implement lazy loading for images

Maintain accessibility with proper contrast ratios

Implementation Workflow

When building portfolio pages:

1. **Reference the lab page (`lab.html`)** as the source of truth for all color usage

2. **Structure HTML** using semantic elements and utility classes (no inline styles)

3. **Apply typography** using predefined CSS variables

4. **Implement theme switching** ensuring all colors use CSS variables

5. **Add glassmorphism effects** using component classes

6. **Test responsiveness** across breakpoints (mobile-first approach)

7. **Verify theme behavior** in both light and dark modes

8. **Optimize performance** by limiting expensive effects

Content Guidelines

Use sentence case for most text

Maintain consistent voice and tone

Include case studies with problem/solution structure

Showcase diverse project types and skills

Notes

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

Mobile-first responsive approach

Lab page (`lab.html`) serves as the design system reference implementation

UX Portfolio Design System

UX Portfolio Design System

Overview

Design System Components

Typography System

Color Palette & Temperature-Based Theming

Link Styles

Layout & Spacing

Glassmorphism Design Language

Interactive Effects

Critical: CSS Variable Architecture

NEVER Use Hardcoded Colors

Understanding Variable Cascading

Adding New Theme-Aware Colors

Component Library

Buttons

Cards

Interactive Text

Portfolio Structure Guidelines

Coding Best Practices

Avoid Inline Styles

Responsive Patterns

Component Reusability

Performance Considerations

Implementation Workflow

Content Guidelines

Notes

Reviews (0)