DESIGN_SYSTEM V1.0

Portfolio.DS

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 / #dcdae9
Cards, panels, components
--accent #7c6af5 / #5c4de0
CTAs, highlights
--text-primary #dcdae9 / #202027
Headings, titles
--text-secondary #a6a6bd / #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
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

06

Motion & Easing