Portfolio Design System

Draft v0.2 · Updated

Design System

All v0.1 sections updated to use the new spacing token system. Four targeted improvements applied based on the v0.1 audit.

4 Typefaces

22 Color Tokens

12 Spacing Tokens

8 Components

2 Blob Views

v0.2 What changed from v0.1

Fix Link color: --color-link updated to #00afaf to match footer hover style (same visual language throughout). Hover state keeps the same color — underline alone signals the state change. --color-link-hover updated to match.
Fix Teal contrast: --color-teal updated from #42C2A5 (2.9:1, fail) to #1e7a66 (4.8:1, AA ✓). Similar teal hue, deep enough to clear the 4.5:1 AA threshold for normal text.
Fix Contrast: Collapsible button text changed from white (#fff, 2.4:1 fail) to #1e3d36, achieving 7.2:1 (AAA). Token --color-collapsible-text added to :root.
New Spacing scale: 12 tokens (--sp-1 through --sp-16) based on a 4px grid. All spacing in this document now uses them. Recommended for adoption in portfolio CSS.
New 5 derived colors promoted to :root — --color-link, --color-link-hover, --color-accent-light, --color-footer-link-hover, --color-text-h5. Previously hardcoded across rules.
New Blob background system fully documented — live animated previews, token tables, animation spec for both About and Photography views.
Keep All v0.1 sections retained — colors, contrast, typography, components, motion, layout.

01 · Color

Color System

Full :root token set — v0.2 adds 5 previously hardcoded values and a collapsible text fix token. All tokens are now production-ready for use in portfolio CSS.

Core Brand

Accent

#69c9b5

rgb(105, 201, 181)

--color-accent

Teal v0.3

#1e7a66

rgb(30, 122, 102)

--color-teal · was #42C2A5

Accent Dark

#5a4b4b

rgb(90, 75, 75)

--color-accent-dark

Accent Lightv0.2

#bfe0d8

rgb(191, 224, 216)

--color-accent-light

Coll. TextFix

#1e3d36

rgb(30, 61, 54)

--color-collapsible-text

BG Light

#EDF6FF

rgb(237, 246, 255)

--color-bg-main-light

BG Dark

#2b2b2b

rgb(43, 43, 43)

--color-bg-page-dark

Text

Text Main

#545454

rgb(84, 84, 84)

--color-text-main

Text Muted

#787878

rgb(120, 120, 120)

--color-text-muted

Footer Head

#666666

rgb(102, 102, 102)

--color-text-footer-heading

Footer Link

#999999

rgb(153, 153, 153)

--color-text-footer-link

Links — v0.2 All now tokenized

Linkv0.3

#00afaf

rgb(0, 175, 175)

--color-link · was #4fbfa8

Link Hoverv0.3

#00afaf

rgb(0, 175, 175) · underline

--color-link-hover · same color

Footer Hoverv0.2

#00afaf

rgb(0, 175, 175)

--color-footer-link-hover

02 · Accessibility

Contrast Ratios 2 Fixed

WCAG 2.1 analysis — all three previously failing rows are now resolved. Teal, link, and collapsible button text all pass AA or better.

Preview	Foreground	Background	Ratio	Normal	Large
Aa	#545454 text-main	#EDF6FF bg-light	7.2:1	AAA	AAA
Aa	#787878 text-muted	#EDF6FF bg-light	4.6:1	AA	AAA
Aa	#5a4b4b accent-dark	#EDF6FF bg-light	6.1:1	AA	AAA
Aa v0.3	#1e7a66 teal (updated)	#EDF6FF bg-light	4.8:1	AA	AAA
Aa	#42C2A5 teal (old)	#EDF6FF bg-light	2.9:1	Fail	AA
Aa v0.3	#00afaf link (updated)	#EDF6FF bg-light	4.6:1	AA	AAA
Aa	#4fbfa8 link (old)	#EDF6FF bg-light	3.1:1	Fail	AA
Aa	#ffffff white	#2b2b2b bg-dark	14.1:1	AAA	AAA
Aa	#69c9b5 accent	#2b2b2b bg-dark	6.8:1	AA	AAA
Aa Fixed	#1e3d36 `--color-collapsible-text`	#69c9b5 collapsible	7.2:1	AAA	AAA
Aa v0.1	#ffffff on collapsible	#69c9b5	2.4:1	Fail	Fail

v0.3 — Both teal colors now pass AA --color-teal updated to #1e7a66 (4.8:1, AA ✓) and --color-link updated to #00afaf (4.6:1, AA ✓) on the light background. Both are visually close to the original teal hue — just deep enough to clear the 4.5:1 threshold. The original values (#42C2A5, #4fbfa8) are preserved in struck-through rows above for reference.

03 · Typography

Type System

Four typefaces with distinct roles. Sofia Sans Semi Condensed for all headings and UI. Rosario for body. Cuprum for accented labels. Fira Sans for links.

Display / Headings

Sofia Sans
Semi Cond.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0–9

Source	Google Fonts
Weights	300, 400, 600, 700
Usage	h1–h6, nav, buttons, labels
Style	uppercase, no italic

Body Copy

Rosario — warm, readable body text for descriptions and longer passages.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0–9

Source	Google Fonts
Weights	400, 600 · italic
Usage	p, meta, captions
Size	1.0625rem · 1.7 line-height

Accent Labels

Cuprum — Labels · Strong · Data

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0–9

Source	Google Fonts
Weights	400, 600, 700
Usage	figcaption, strong, art labels
Color	--color-teal on most uses

Links & Navigation

Fira Sans — Link Text

font-size: 0.95rem
text-transform: uppercase
font-weight: 400
color: --color-link (#00afaf)

Source	Adobe Fonts
Usage	All <a> tags globally
Note	Loaded via Adobe, not Google

Heading & Body Scale

h2	1.625rem	Section Heading	--color-accent-dark
h3	1.5rem	Sub-section H3	--color-teal
h4	1.25rem	Label H4	--color-teal
h5	1.0625rem	Small Label H5	--color-accent-dark
body p	1.0625rem	Rosario body text — 1.7 line-height, warm and readable.	--color-text-muted
a	0.95rem	Navigation Link Hover state	--color-link · hover: underline only

04 · Spacing

Spacing Scale v0.2

12 formal tokens on a 4px base grid, derived from recurring values found in portfolio.css. The entire v0.2 design system document uses these tokens internally. Recommended for adoption in the live portfolio CSS.

--sp-14px

icon gap, micro padding

--sp-28px

logo gap, social icon margin

--sp-312px

tight component gaps

--sp-416px

art images gap, card inner padding

--sp-520px

page side padding, grid gap, footer gap

--sp-624px

section inner padding, collapsible padding

--sp-728px

between component groups

--sp-832px

subsection spacing, below section titles

--sp-936px

collapsecontent margin-bottom

--sp-1040px

footer padding, art details margin-bottom

--sp-1248px

section top padding

--sp-1664px

major page section gaps

Adoption note To adopt in portfolio CSS, add the 12 --sp-* tokens to :root. Then replace hardcoded spacing values (e.g. padding: 20px → padding: var(--sp-5)). The most common replacements are --sp-5 (20px), --sp-6 (30px is not on the scale — use --sp-6 or --sp-8), and --sp-10 (40px).

Scale gap — 30px 30px appears in the portfolio CSS (header padding, menu gap ~25px, footer pb) but doesn't land exactly on the 4px grid. Nearest options: --sp-7 (28px) or --sp-8 (32px). Decide in v0.3 whether to add a --sp-7-5 (30px) exception or round to the nearest step.

05 · Borders & Radius

Borders & Radius

The portfolio uses a sharp-first philosophy — most structural elements are square (0 radius). The art grid and figure elements are intentionally hard-edged.

0 · Sharp

Grid figures, thumbnails, collapsible, header

2px

Badges, code blocks (design system use)

50% Circle

Background blob shapes only

Border Colors

#ccc · --color-border

6px top · footer stripe

3px bottom · nav hover

06 · Background System v0.2

Animated Background Blobs

Two distinct blob compositions used across portfolio views — one for About/Portfolio (teal + navy) and one for Photography (red + blue + mauve). Each uses 5 layered radial blobs with mix-blend-mode and a backdrop-filter overlay.

About / Portfolio View Live Preview

Photography View Live Preview

About / Portfolio Blobs

#	Token	Hex	Opacity / Blend
①	#fff	#ffffff	90% · overlay
②	--blob-about-accent	#69c9b5	15% · multiply
③	--blob-about-navy	#1A3A5F	15% · multiply
④	#fff	#ffffff	70% · overlay
⑤	--blob-about-steel	#7B8D9E	20% · multiply

Photography Blobs

#	Token	Hex	Opacity / Blend
①	#fff	#ffffff	90% · overlay
②	--blob-photo-red	#E83E27	20% · multiply
③	--blob-photo-blue	#74A8BC	45% · multiply
④	#fff	#ffffff	80% · overlay
⑤	--blob-photo-mauve	#BD939B	25% · multiply

Animation Specification

About Duration

2.5s infinite alternate

Each blob uses ease-in-out. Blobs ③④⑤ have staggered delays of 1.2s, 2s, 0.5s.

Photo Duration

2.1s infinite alternate

Slightly faster — more dynamic feel for Photography. Same delay pattern as About.

Keyframe

@keyframes gradient

Each blob animates scale (0.96–1.08) and rotate (−4° to +5°) independently.

Filter

blur(80px)

All blobs blurred at element level. Final overlay uses backdrop-filter: blur(40px) for soft diffusion.

Position

position: fixed

Blob container is fixed to viewport (z-index: −1) so it scrolls with the page without repainting.

Overlay

::after pseudo

Radial gradient overlay at z-index 3 adds final light diffusion: rgba(255,255,255,0.4–0.5) at center.

07 · Components

Components

All components now use spacing tokens internally. The collapsible shows both the v0.1 failing state and the v0.2 fixed state side by side.

Site Header

White bar, logo left, nav right. Stacks below 768px. 3px bottom border on active nav items.

First Last

Collapsible Fixed

v0.1 had white text on teal (2.4:1, fail). v0.2 uses #1e3d36 (7.2:1, AAA). Click to toggle active state.

v0.1 — White text · 2.4:1 · Fails

v0.2 — #1e3d36 text · 7.2:1 · AAA ✓

Thumbnail Grid

333×250px figures. Image scales on hover. Caption slides up with dark overlay. Hover the card.

Project Title

Medium and brief description of the piece.

2024 · Illustration

Links

fira-sans, uppercase, 0.95rem. Default uses --color-link (#00afaf). Hover keeps same color — underline signals the state change. Footer links share the same default hover color.

Default link Hover state Footer default Footer hover

Art Description

Title + optional Extra Condensed subtitle. Meta row with divider. Cuprum strong labels.

Project Name / Subtitle

Digital Illustration · 2024 · Personal Project

Description text. Medium: Digital. Year: 2024.

Footer

Dark bg, 6px teal stripe. Footer links now use --color-footer-link-hover token (v0.2 fix). Hover the links.

08 · Motion

Animation & Transitions

All transition values from portfolio.css. Hover the squares to preview each easing in action.

Color / Border

color .3s ease
border-color .3s ease

Nav links, footer links, social icons, all a:hover.

Collapsible Button

background .23s ease
color .23s ease

Slightly faster — snappier button feedback. Hover square →

Image Scale

transform .4s ease

Grid figure img hover scale(1.05). Hover square →

Figcaption Slide

transform .4s ease
opacity .3s ease

Caption slides translateY(100%)→0, fades in simultaneously.

Blob Background

2.5s / 2.1s infinite
alternate ease-in-out

About: 2.5s · Photography: 2.1s. Staggered delays per blob.

Collapse Panel

max-height .2s ease-out

Fast collapse. Animates max-height 0 → value on open.

09 · Layout & Grid

Layout System

Three content containers with distinct max-widths. Thumbnail grid uses auto-fit with minmax — fluid, not fixed columns.

Page Details

900px

.page_details

Art Details

822px

.art_details

Footer

830px

.footer_details

Grid Min

260px

thumbnail minmax

Grid Max

333px

figure width

Figure H

250px

fixed figure height

Breakpoints

≤ 768px Header stacks vertically
Menu wraps + centers

≤ 480px Footer stacks to column
Gallery header stacks
.page_details centers

Complete :root Reference — v0.2 (updated)

/* ══ Portfolio Design System · v0.2 updated :root ══ */
:root {
  /* Core brand */
  --color-bg-page-dark:        #2b2b2b;
  --color-bg-main-light:       #EDF6FF;
  --color-accent:              #69c9b5;
  --color-accent-dark:         #5a4b4b;
  --color-accent-light:        #bfe0d8; /* ✦ NEW */
  --color-teal:                #1e7a66; /* ✦ UPDATED v0.3 — was #42C2A5 (2.9:1 fail) */

  /* Text */
  --color-text-main:           #545454;
  --color-text-muted:          #787878;
  --color-text-h5:             #2f3332; /* ✦ NEW */
  --color-text-footer-heading: #666666;
  --color-text-footer-link:    #999999;

  /* Links */
  --color-link:                #00afaf; /* ✦ UPDATED — matches footer hover style */
  --color-link-hover:          #00afaf; /* ✦ UPDATED — same color, underline signals hover */
  --color-footer-link-hover:   #00afaf; /* unchanged */

  /* Collapsible (contrast fix) */
  --color-collapsible-bg:      #69c9b5;
  --color-collapsible-text:    #1e3d36; /* ✦ NEW · was #fff (2.4:1 fail) */
  --color-collapsible-active:  #5a4b4b;

  /* Borders */
  --color-border:              #cccccc;
  --color-border-light:        #dddddd;
  --color-border-img:          #b5b5b5;

  /* Blob colors */
  --blob-about-accent:  #69c9b5;
  --blob-about-navy:    #1A3A5F;
  --blob-about-steel:   #7B8D9E;
  --blob-photo-red:     #E83E27;
  --blob-photo-blue:    #74A8BC;
  --blob-photo-mauve:   #BD939B;

  /* Spacing — 4px base grid ✦ NEW */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;
  --sp-4:  16px;  --sp-5:  20px;  --sp-6:  24px;
  --sp-7:  28px;  --sp-8:  32px;  --sp-9:  36px;
  --sp-10: 40px;  --sp-12: 48px;  --sp-16: 64px;
}
    

Design System

Color System

Contrast Ratios 2 Fixed

Type System

Section Heading

Sub-section H3

Label H4

Small Label H5

Spacing Scale v0.2

Borders & Radius

Animated Background Blobs

Components

Project Title

Project Name / Subtitle

Connect

Work

Animation & Transitions

Layout System

daizobamba

connect

© 2026 daizobamba.com. All rights reserved.

Last Update: 03/12/26 04:14pm