DESIGN_SYSTEM V1.0

Portfolio.DS

purple-black combo // dark & light theme // Syne + JetBrains Mono
01

Colour Palette

// BACKGROUND
base
surface
elevated
subtle
// ACCENT
900
800
600
500 - main
400
300
100
// SEMANTIC
success
warning
danger
info
token value preview usage
--bg-base #0c0c0f / #f6f5fc
Page background
--bg-surface #202027 / #f1effd
Cards, panels, components
--accent #7c6af5 / #7c6af5
CTAs, highlights
--text-primary #f1effd / #202027
Headings, titles
--text-secondary #ccccdd / #49495a
Descriptions, paragraphs
02

Typography

display Syne 800 · 48px · -0.03em Hello, World
h1 Syne 700 · 36px Section Title
h2 Syne 600 · 24px Sub-heading
body JetBrains Mono 400 · 14px This is an example of text using typography intended for body of text
label JetBrains Mono 400 · 11px React · TypeScript · Node.js
code Tokyo Night · Language JavaScript
script.js 
                        
const root = document.documentElement;
let isDark = true;

function toggleTheme() {
    isDark = !isDark;

    root.setAttribute('color-scheme', isDark ? '' : 'light');

    toggleThemeIcon();
    toggleCodeTheme();
}

document.getElementById('themeToggleBtn').addEventListener('click', toggleTheme);
03

Spacing

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px
04

Components

buttons
badges
JavaScript
Documentation
Archive
Finished
In Progress
Deprecated
inputs
↑ must be at least 8 characters
project card

Project DS

Next.js · TypeScript

In Progress
A project that does X and Y.
68%
05

Radii & Elevation

border radius

none
0px

sm
6px

md
10px

lg
16px

full
9999px

elevation

flat

sm

md

lg

glow

06

Motion & Easing

fast - 150ms

Hover, badge changes

base - 250ms

Button interactions

smooth - 600ms

Panel open/close

bounce - 300ms

Notifications

.motion-up → translateY(-4px);
.motion-down → translateY(4px);
.easing-fast → 0.15s ease
.easing-base → 0.25s ease
.easing-smooth → 0.6s cubic-bezier(0.16, 1, 0.7, 1)
.easing-bounce → 0.3s cubic-bezier(0.6,-1, 0.4, 2)
07

Iconography

all icons sourced from
lucide.dev

              
<i data-lucide="flower" width="3rem" height="3rem"></i>
<i data-lucide="feather" width="3rem" height="3rem"></i>
<i data-lucide="hourglass" width="3rem" height="3rem"></i>
<i data-lucide="coffee" width="3rem" height="3rem"></i>
<i data-lucide="crown" width="3rem" height="3rem"></i>