← BACK

Portfolio Design System

The visual language of Ethan Anderson's SWE Portfolio.

Process

From Figma spec to shipped Astro & React.

01
Figma spec with redline spacing measurements spec.png

Design

Designed, Iterated, Spaced and Specced in Figma to the pixel.

02
Figma Dev Mode showing the layer tree and MCP inspect panel layers.png

Handoff

Structured into semantic layers, then implemented both by hand and via the Figma Desktop MCP bridge.

03
The shipped portfolio homepage rendered in the browser build.png

Build

Leaning on Astro's "component island" architecture, Astro components and plain HTML render the layout statically, while React components hydrate interactivity. JavaScript ships only where it moves.

Source →

Color Palette

Primary BG
Primary Background
#1c1c1c
Text
Primary Text
#fefefe
Accent
Accent Color
#7fee40
Secondary Accent
Secondary Accent (Hover)
#e071e3
Subtle
Subtle Text (70%)
rgba(255, 255, 255, 0.7)
Muted
Muted Text (50%)
rgba(255, 255, 255, 0.5)

Typography

Portfolio Name Heading
Ethan Anderson
Font: Fit | Size: 100px | Weight: 400 | Color: #7fee40
Section Title
PROJECTS:
Font: Iosevka Fixed | Size: 100px | Weight: 400 | Letter-spacing: 0.05em | Text-transform: uppercase
Bio Heading
Creative tools & DX
Font: Iosevka Fixed | Size: 45px | Style: Italic | Line-height: 1
Card Title
Project Title
Font: Barlow Condensed | Size: 30px | Weight: 400 | Text-transform: uppercase
Card Description
A brief description of the project content goes here with multiple lines to show line height and spacing.
Font: Barlow Condensed | Size: 15px | Line-height: 1.6 | Color: rgba(255, 255, 255, 0.7)
Card Link
GitHub | Live
Font: Barlow Condensed | Size: 15px | Transition: 200ms ease
Card Meta Details
REACT | TYPESCRIPT | TAILWIND
Font: Barlow Condensed | Size: 13px | Letter-spacing: 0.05em | Text-transform: uppercase | Color: rgba(255, 255, 255, 0.5)

Buttons & CTAs

Navigation Buttons
GitHub Button: 100px × 50px, #fefefe bg, 40px radius
Blog Button: 100px × 50px, #7fee40 bg, 40px radius
Resumé Button: 100px × 50px, #e071e3 bg, 40px radius
Font: Barlow Condensed, 800 weight, 22px, 0.91em line-height, UPPERCASE
Hover state: background rgba(255, 255, 255, 0.5)
GITHUB BLOG RESUMÉ
Primary CTA Button — "GET IN TOUCH"
800px × 158px (full portfolio width)
#7fee40 bg, 77px radius
Font: Guisol, 85px, #1c1c1c text, UPPERCASE
Hover state: background #e071e3, text #fefefe
Note: Height 158px provides intentional padding around text
GET IN TOUCH

Card Components

Project Title

A brief description of the project content goes here showcasing multiple lines.

GitHub | Live

REACT | TYPESCRIPT | TAILWIND

Another Project

A brief description of the project content goes here showcasing multiple lines.

GitHub | Live

NEXT.JS | SUPABASE | FIGMA

Blog Post

A brief description of the blog post content goes here with insights about development.

Read More...

ASTRO | WEB DEV | DESIGN

Spacing System

XS
4px
SM
8px
MD
16px
LG
24px
XL
32px
2XL
48px

Motion

Guisol
Blur-fade

The site's signature transition — content resolves out of an 8px blur as it fades in. Drives both the design-systems carousel and blog page navigation.

opacity: 0 → 1 · filter: blur(8px) → blur(0)

0.8s carousel / 0.4s page · cubic-bezier(0.4, 0, 0.2, 1)

Tchotchkes

Decorative ornamental designs scattered through the site for texture.

Tchotchkes strip — row of decorative marks
Tchotchkes Strip
340 × 29
Wave mark
Wave
35 × 30
Liquid mark
Liquid
34 × 32
Asterix mark
Asterix
20 × 20

Design Tokens Summary

Token Value Usage
Colors
--color-bg #1c1c1c Primary background
--color-text #fefefe Primary text
--color-accent #7fee40 Accent — CTA, highlights
--color-accent-secondary #e071e3 Hover / secondary accent
--color-button-text #1c1c1c Text on accent-colored buttons
--color-subtle rgba(255, 255, 255, 0.7) Subtle text (70%)
--color-muted rgba(255, 255, 255, 0.5) Muted text (50%)
Typography
--font-fit 'Fit' Portfolio name
--font-guisol 'Guisol' CTA button
--font-iosevka 'Iosevka Fixed' Bio italic; section headings
--font-barlow 'Barlow Condensed' Nav buttons, card title/description/link/details
Sizing
Nav buttons 100px × 50px Radius 40px
CTA button 800px × 158px Responsive, no max-width; radius 77px
Portfolio layout 1280px Fixed max-width
Type Scale
Portfolio Name 100px Fit
Section Titles 100px Iosevka Fixed, uppercase
Bio Top 45px Iosevka Fixed, italic
Bio Bottom 40px Guisol
Card Title 30px Barlow Condensed, uppercase
CTA Button 85px Guisol, uppercase
Nav Buttons 22px Barlow Condensed, 800 weight, uppercase
Transitions
--transition-fast 200ms ease Hover states