Design System.
A live reference of the operator console tokens, components, and motion that render adityacprtm.dev. Every swatch reads the current data-theme; toggle the theme in the header to see it react.
Color System
Tokens flip automatically between :root and [data-theme="dark"]. Prefer semantic tokens over raw hex.
Text
Accent
Semantic
State (Rack / Nav)
Shadow
Skeleton
Typography
Body pairs --font-body (Poppins) with --font-mono (JetBrains Mono / SF Mono) for operator console cues.
Body — var(--font-body)
The quick brown fox jumps over the lazy dog. 0123456789
Mono — var(--font-mono)
const status = "operational"; // 0xDEADBEEF
| Token | rem | px | Role | Sample |
|---|---|---|---|---|
--font-xs | 0.6875rem | 11px | Tiny labels | Aa 01 |
--font-sm | 0.75rem | 12px | Captions, badges | Aa 01 |
--font-btn | 0.8125rem | 13px | CTA, back-link | Aa 01 |
--font-body-sm | 0.875rem | 14px | Bullets | Aa 01 |
--font-body-xs | 0.9375rem | 15px | Blog mobile | Aa 01 |
--font-base | 1rem | 16px | Body (WCAG) | Aa 01 |
--font-md | 1.0625rem | 17px | Body large | Aa 01 |
--font-lg | 1.125rem | 18px | Heading small | Aa 01 |
--font-xl | 1.25rem | 20px | h4 / large | Aa 01 |
--font-2xl | 1.375rem | 22px | h3 | Aa 01 |
--font-2lg | 1.35rem | 22px | Header identity | Aa 01 |
--font-3xl | 1.5rem | 24px | h2 | Aa 01 |
--font-4xl | 1.625rem | 26px | h1 alt | Aa 01 |
--font-stat | 1.875rem | 30px | Stat numbers | Aa 01 |
--font-5xl | 2rem | 32px | h1 | Aa 01 |
H1 · title--h1
H2 · title--h2
H3 · title--h3
Body copy at --font-base. The system favours short paragraphs, restrained line-lengths, and generous vertical rhythm.
Spacing Scale
Rem-based rhythm. Bar width visualises the increment.
| rem | px | Visual |
|---|---|---|
0.125rem | 2px | |
0.25rem | 4px | |
0.375rem | 6px | |
0.5rem | 8px | |
0.75rem | 12px | |
1rem | 16px | |
1.25rem | 20px | |
1.5rem | 24px | |
1.875rem | 30px | |
2rem | 32px | |
2.5rem | 40px |
Buttons
Live samples. Hover / focus to see states.
.header-action__ctaDownload CV
.filter-btn
.filter-btn.active
.explore-chip
.back-linkBack to overview
.pillTerraform
.pill--activeProduction
.pill--toggle
Cards
Container primitives. All ride the same shadow + radius rules from .box.
.stat-card
42Projects shipped
.scope-card
Infrastructure
Terraform · Kubernetes · Cloudflare · AWS · GCP
.portfolio-card
Portfolio Frontend
Vue 3 · vite-ssg · Cloudflare Pages
.exp-card
2024 — Present
DevOps Engineer
Company · Jakarta, ID
.edu-card
2018 — 2022
B.Sc. Computer Science
University Name
.client-card
Client Co.
Consulting engagement
Pills & Badges
.pillDefault
.pill--monov1.4.0
.pill-smsm
.pill--activeActive
.pill--toggle
.availability-badgeAvailable for work
status · warningDegraded
status · errorDown
Segmented Controls
.seg-control-nav
.seg-control-locale
Form Inputs
Navigation Rack
Mono, uppercase, LED-cued. The rack is the site's spatial anchor.
Elevation & Shadows
--c-shadow-smDefault surface lift
--c-shadow-mdCard hover state
--c-shadow-lgModal / overlay
--c-glowAccent glow
Motion & Animation
All keyframes respect prefers-reduced-motion. Use sparingly — high-signal moments only.
| Name | Duration | Easing | Usage | Demo |
|---|---|---|---|---|
blink | 1s | step-end infinite | Cursor / caret | |
ledPulse | 2s | ease-in-out infinite | Status LED | |
boxEntrance | 0.6s | cubic-bezier(.2,.7,.2,1) | Card reveal | |
signalFadeIn | 0.5s | ease-out | Signal wash | |
status-pulse | 1.8s | ease-in-out infinite | Availability dot |
blink — cursor caret
ledPulse — status indicator
status-pulse — availability dot
Accessibility
WCAG AA compliance at minimum. Full validation still requires manual testing with assistive technologies.
Focus Visible
Every interactive element gets a 2px solid var(--c-accent) outline on keyboard focus. The :focus outline is suppressed; only :focus-visible fires.
Reduced Motion
Wrap all keyframe usage in @media (prefers-reduced-motion: no-preference). Transitions above 200ms should be guarded.
@media (prefers-reduced-motion: no-preference) {
.reveal { animation: boxEntrance 0.6s; }
}Colour Contrast
--c-text on --c-bg: ≥ 7:1 both themes.--c-border-ui meets AA for UI components (3:1).
Accent on white / dark surface also AA-compliant.
Skip Link
A visually-hidden #main-content skip link is rendered in App.vue. Tab once from the address bar to reveal it.