Comprehensive design system and development guidelines for building modern UX portfolios with responsive typography, glassmorphism effects, and temperature-based theming
A complete design system for constructing modern UX portfolios with responsive typography, glassmorphism effects, and intelligent temperature-based theming.
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.
Apply the IBM Plex Sans typography hierarchy using CSS variables:
**Font Setup:**
**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);
}
```
**Core Color Strategy:**
The accent color system employs temperature-based theming grounded in color psychology:
**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
```
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>
<a href="https://example.com" target="_blank" class="external-link">View docs ↗</a>
```
**Container System:**
**Modular Spacing Scale:**
**Spacing Utilities:**
Replace inline styles with these margin utilities:
**Layout Utilities:**
**Grid System:**
Apply glassmorphism effects consistently:
**Component Patterns:**
**Effects:**
```css
backdrop-filter: blur(10-20px);
background: rgba(255, 255, 255, 0.1);
border-radius: 16-20px;
```
**Transitions:**
**Hover States:**
**❌ 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); }
```
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 */
}
```
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);
}
```
```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 */
```
```css
.card /* Standard card with glass effect */
.glass-card /* Enhanced glass with more blur */
.interactive-card /* Card with hover lift */
```
```css
.interactive-text /* Underline animation on hover */
```
**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:**
**Navigation:**
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/ux-portfolio-design-system-w9s47b/raw