Skip to content

Component Library

A showcase of typography, color tokens, and interactive UI primitives.

Foundations:
Interaction:
Feedback:
Systems:

01 / Color Tokens

--color-accent • #52FF1A
Surface Base#fcfbf9 / #0e0e0e
Vedis!
Text Primary#1a1a1a / #e5e5e5
Surface Card#f6f4ee / #141414
01.1 / Semantic State TokensFeedback & Status Swatches
Safe--color-safe
Warning--color-warning
Danger--color-danger

02 / Typography Hierarchy

02.1 / Display & Headings
Heading 1 / DisplaySyne 800 • text-4xl sm:text-5xl • tracking-tight
Heading 2 / SectionSyne 700 • text-2xl sm:text-3xl • tracking-tight
Heading 3 / SubtitleSyne 700 • text-lg sm:text-xl
02.2 / Body & Paragraph Text

Portfolio summae efficacitatis cum Astro et Tailwind CSS v4 constructum, typographiam severam cum experimentis technicis coniungens.

Body Lead / IntroOutfit 400 • text-lg sm:text-xl • leading-relaxed

Elementa pura et distincta, ad celeriter onerandum, rhythmum typographicum severum, nihil oneris runtime, et formas flexibiles aptata.

Body Regular / ParagraphOutfit 400 • text-sm sm:text-base • leading-relaxed

Schema structum ad machinas quaerendi, prae-generatio statica, et fines hydrationis instantanei.

Body Small / CaptionOutfit 400 • text-xs sm:text-sm
02.3 / Brand Logotypes & Specimen Marks
<yovan
gunardio;
//darmawan/>
Portfolio Developer LogotypeSyne 900 + 400 • Scaled-Down Syntax Accents (<, ;, //, />) • Exact Hero Proportions
mcTextureGhost icon
mcTextureGhost
mcTextureGhost LogotypeSyne 700 + Press Start 2P 400 • Fixed Neon Green #52FF1A • Pixelated Mascot
HYPE-BOX
HYPE-BOX Display LogotypeSyne 900 • text-xl sm:text-2xl • tracking-tight • uppercase

03 / Spatial Depth Cards & Surface Elevation

LINEA DISIUNCTAdashed • 0dp
Level 00 // Dashedelevation="dashed" • 1.5px dashed
SUPERFICIES PLANA0dp • z: 0px
Level 0 // Planarelevation="flat" • solid 1px • 0dp
ELEVATIO PRIMA4dp • z: 4px
Level 1 // Contactelevation="low" • subtle shadow • 4dp
ELEVATIO MEDIA12dp • z: 12px
Level 2 // Raisedelevation="mid" • ambient depth • 12dp
ELEVATIO SUBLIMIS32dp • z: 32px
Level 3 // Floatingelevation="floating" • deep shadow • 32dp

04 / Buttons & Micro Action Triggers

04.1 / Action Buttonscta · primary · secondary
CTA Pulsevariant="cta" • Syne 700
Primary Solidvariant="primary" • Syne 700
Secondary Dashedvariant="secondary" • Syne 700
04.2 / Micro & Icon Triggers (size="micro" • 32×32px)Tactile Utility Controls
Primarysize="micro"
CTAsize="micro"
Secondarysize="micro"
Ghostsize="micro"
Dangersize="micro"

05 / Kinetic Expand-on-Hover Triggers

05.1 / Dynamic Label Reveal & Micro StatesDynamic Label Reveal
Expand Left DashedexpandDirection="left" • 44px dashed
Expand Right SolidexpandDirection="right" • 44px solid
Micro Expand CTAsize="micro" • 32px cta
Micro Toggled Activesize="micro" • active=true

06 / Form Selection Controls & Sliders

06.1 / Checkboxes24px dashed square
Regular Checkboxchecked=false • 800ms loading • 24px dashed square
3-State Checkboxindeterminate=true • instant 3-state • 24px solid square
06.2 / Radio Buttons24px dashed circle
Standard Radiochecked=true • 800ms loading • 24px dashed circle
Option Radiochecked=false • instant select • 24px dashed circle
06.3 / Toggle Switches44×22px pill track
Loading Transition Switchchecked=true • 800ms loading • 44×22px pill track
Standard Switchchecked=false • instant toggle • 44×22px pill track
06.4 / Range Sliderscontinuous tactile rail
75%
Gradus saturationis et luminositatis photographicae
Percentage Slidermin=0 • max=100 • value=75 • unit="%"
60 FPS
Fines imaginum per secundum ad motum lenem
Step Interval Slidermin=30 • max=120 • step=5 • unit=" FPS"

07 / Text Inputs & Soft-Limit Textarea

07.1 / Text InputsSyne label · Outfit input
Nomen ad systema notum.
Standard Inputlabel="... (optionale)" • tips present
Hoc est requirentur
Error StatehasError=true • errorMsg inline
Confirma valorem
Haec inscriptio possit conflictum causare.
Warning StatehasWarning=true • amber border + tips
Validum!
Safe / Valid StateisSafe=true • green border
07.2 / Text Area & Passwordoverflow highlight · validation cues
EXTRA LIMITEM | 60/40
Typa ultra 40 litteras ut excessus ruber appareat.
Soft-Limit TextareamaxLength=40 • live backdrop overflow highlight
* Debilis
✓8+ litterae
✓Littera maiuscula
✓Numerus singularis
✓Signum speciale (!@#$)
Secure Password Inputdisc masked • toggle visibility • live rule cues

09 / Loaders (Square Wave)

Square Wave / Accentcount=5 • size=14 • #52FF1A
Square Wave / Inkcount=5 • size=14 • currentColor
Square Wave / Microcount=4 • size=8 • currentColor

10 / Status Badges (High-Contrast Solid)

STATUS_VIVUSVERSIO_STABILISSYNCHRONIZATIONON_CONNEXUMSTAGIO_PROBATIO
Solid Status Variantsrounded (4px) • high-contrast solid • Outfit Bold text-xs
0KB JS PRIMUMASTRO v5TAILWIND v4REACT 19VERSIO CANARIADEPRECATUM
Compact Tech Stack Badgessize="sm" • rounded (4px) • text-[10px] tracking-wider

11 / Metric Cards (System Telemetry)

01 // LIGHTHOUSE PERFOPTIMUM
100/100
Optimisatio, Praestantia, et Mores Optimi
02 // JS RUNTIME PAYLOADSTATIC_SSR
0 KB
Nihil oneris JavaScript in pagina oneranda
03 // ANIMATION BUDGETHARDWARE_ACCEL
60 FPS
Formae GPU acceleratae et physica motus

12 / Project Tiles (Case Study Cards)

STATUS_VIVUS
HYPE-BOX

01 // SYSTEMA INTERACTIVUM

HYPE-BOX SYSTEMA TABERNAE

Programma tabernae photographicae tactu directum, cum motu sexaginta imaginum per secundum et ordine sine interrete firmo.

  • ELECTRON
  • REACT 19
  • TAILWIND v4
  • SQLITE
hypebox-photobooth-kiosk-orchestration-engine-firmware-v5-production-runtime.bin
MMXXVI // FEBRUARIUSINSPICE SPECIMEN
VERSIO_STABILIS
HYPE-BOX

02 // PLATFORMA CURATIONIS

PORTA CURATORIS TABERNAE

Analytica summae praestantiae, gubernatio telemetriae tabernae, designator formarum, et ordinatio solutionum.

  • LARAVEL 13
  • REVERB
  • FILAMENT
  • MIDTRANS
photobooth-vendor-portal-admin-console-telemetry-dashboard-cluster-spec.git
MMXXVI // IANUARIUSINSPICE SPECIMEN
PROTOTYPUS

03 // GIS ET COMPUTATIO SPATIALIS

SYSTEMA CARTOGRAPHICUM INTERACTIVUM

Tabula cartographica interactivum cum polygonis limitum vecturae et telemetria spatiali directa in tempore reali.

  • LARAVEL
  • LEAFLET.JS
  • GEOJSON
  • TAILWIND
systema-cartographicum-interactivum-geospatial-polygon-telemetry-cluster-node-stream-v3.json
MMXXV // NOVEMBERINSPICE SPECIMEN
DOCUMENTATIO
<yovan
gunardio;
//darmawan/>

04 // ARCHITECTURA DESIGNATIONIS ET SYSTEMA

BIBLIOTHECA COMPONENTIUM ET TYPOGRAPHIAE

Systema designationis rigorosum cum signis typographicis Syne, formis experimentalibus, et coloribus accentus dynamicis.

  • ASTRO v5
  • TAILWIND v4
  • CSS MODULES
  • TOKENS
component-library-token-manifest-and-design-system-specifications-rev5-full-audit.ts
MMXXVI // AUGUSTUSINSPICE SPECIMEN

13 / Directory & Tree Index Pattern (With Brand Logo Headers)

13.1 / Typography Logo Headerbrand type mark • Syne 700 titles • 5 items
HYPE-BOX
CLASSIS SYSTEMATIS PRINCIPALIS
2026

HYPE-BOX Pagina Prima

stack:
Astro v5.3Tailwind CSS v4.0TypeScript 5.7
2026

Taberna Photographica: Machina Tactilis, Orchestratio Hardware Universalis, Telemetria Directa et Gubernatio Periphericorum Kiosk in Tempore Reali

stack:
Electron 34React 19.1Anime.js EngineVite 6 BundlerSQLite Embedded DBTailwind CSS v4Native Node-IPC PipelineDirect CUPS / USB Printer Driver ProtocolGStreamer Video Buffer StreamWebRTC Camera Feed PipelineHardware Watchdog ServiceOffline First Local Cache EngineMulti-Touch Gesture RecognizerLow-Latency State Machine
2026

Porta Curatoris Tabernae

stack:
React 19.1Vite 6 SPACSS Modules ArchitectureAnime.js
2026

Exemplum Tabernae Photographicae

stack:
React 19.1Anime.jsVite 6Canvas Engine
2026

API REST et WebSocket Tabernae

stack:
Laravel 13ReverbGoogle Cloud StorageSQLite
13.2 / Image Logo Headerimage/icon logo • Syne 700 titles • 3 items
GEOSPATIALIA ET ARCHITECTURAINVESTIGATIO EXTERNA ET REGULAE
2025

Systema Cartographicum Interactivum: Computatio Spatialis, Polygonorum Vectorialium Flumen, Clustered Markers et Telemetria Geospatialis Directa in Tempore Reali

stack:
Laravel 13Leaflet.js 1.9GeoJSON Polygon Vector StreamAJAX Vector Layer TilingRedis PubSub Spatial Event QueueHaversine Coordinate Mathematical EngineTailwind CSS v4Clustered Marker QuadTree IndexHigh-Throughput GPS Coordinate Ingestion APIPostGIS Geospatial Geometry PipelineInteractive Heatmap Renderer
2026

Director Fluminis Telemetriae

stack:
Node.js 22 LTSRedis PubSubWebSocket Server Engine
2026

Series Libellorum Securitatis OWASP

stack:
Threat ModelingOWASP GuidelinesSAST Engine

14 / Application Window Mockup (Interactive Showcase Frame)

Hypebox Vendor Management Dashboard Preview

15 / Exploded 3D Isometric System Topology

HYPE-BOX System Architecture DiagramAn exploded isometric diagram showing 4 layers: Client Layer (Electron Kiosk App) at top, Persistence (MySQL and GCS Buckets) second, Laravel API Core Backend third, and Tenant Portal (Vite + React Dashboard) at the base.CLIENT LAYERElectron Kiosk AppPERSISTENCEMySQL & GCS BucketsLARAVEL APICore Backend ChassisTENANT PORTALVite + React Dashboard

16 / Telemetry Trend Spline (Monotone Cubic Curve)

16.1 / Telemetry Trend CurveMonotone Cubic Spline SVG
HEBDOMADA CURRENS
HEBDOMADA PRAETERITA
MEDIA: 46
COMPARATIO // VII DIES
96480
74
Media praeterita (46)
sess.
LunMarMerIovVenSatSol
Weekly Telemetry Trend Splinedata={...} • 7-day comparative spline • past week benchmark • interactive delta tooltip

17 / Activity Schedule Timeline (Multi-Track Gantt)

17.1 / Activity Schedule TimelineMulti-Track Schedule Gantt
STATUS // ORDINES:ACTIVAPRIMARIAORDINARIA
AUGUSTUS 2026
SEPTEMBER 2026
OCTOBER 2026
NOVEMBER 2026
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
NOCTURNA CELEBRATIO
CALIBRATIO HARDWARE // DNP-RX1
AESTIVUS FESTUS // STRIP-04
EXPEDITIO PRIMA // HYPE-01
OMNIA // RATIO UNIVERSALIS
Multi-Track Gantt Schedulecampaigns={...} • 44px/day dynamic grid • smooth today scroll

18 / Filmstrip Asset Ranking (Proportional Filmstrip Slots)

18.1 / Filmstrip Asset Ranking ChartProportional Filmstrip Slots
01
COMPOSITIO AESTIVA RETRO125 sessiones
48%
02
MARGINALIA POLAROID CLASSICA85 sessiones
32%
03
VELUM CYBERPUNK NOCTURNUM42 sessiones
16%
04
FORMA MONOCHROMATICA24 sessiones
9%
Filmstrip Popularity Rank Barframes={...} • 12-slot proportional filmstrip • rank index badges
CC BY 4.0 / Creative Commons Attribution

Free to use and adapt for personal and commercial projects with credit to Yovan.

A backlink attribution is preferred but not required for private client work, internal company projects, or cases where attribution conflicts with business requirements.

View Terms ↗