$ open design-system.md
design.system
v0.1 · 31 tokens · 7 components
Foundations
01 · Typography
Three typefaces — display for identity, body for readability, mono for terminal personality.
font-display — Satoshi
Roger Castro
HERO · HEADINGS · SECTION LABELS
font-body — Manrope
Full-stack engineer focused on the Vue and Nuxt ecosystem. Clean interfaces backed by solid architecture.
BODY · PARAGRAPHS · UI LABELS
font-mono — Ioskeley Mono
$ init --portfolio
TERMINAL · CODE · TAGS · METADATA
02 · Color
One accent hue (red), two neutrals (black + offwhite), layered with opacity for hierarchy.
Accent
accent
#ff4b4c
accent-hover
#fe6060
accent-dim
#cc3c3d
accent-glow
rgba(255,75,76,0.15)
Text
text-primary
text-secondary
text-muted
Background
bg
#000000
bg-surface
#0a0a0a
bg-elevated
#141414
03 · Spacing
Base-4 scale (0.25rem increments), referenced as Tailwind spacing utilities.
04 · Glass + Surfaces
Three glass variants — card, surface, and pill — built on backdrop-filter blur. Card and surface use superellipse corners (corner-shape) where supported.
.glass-card
Card surface. Squircle radius 1rem. hover transitions.
.glass-surface
Full surface layer. Squircle 0.75rem. No hover state.
.glass-pill
Pill / nav. Border radius 1.25rem with corner-shape. NavPill uses this.
05 · Elevation
6-step z-index scale. Each layer has a single, clear responsibility.
06 · Motion
Two easing curves and three duration presets. Entrance animations use expo-out; state transitions use expo-in-out.
ease-out-expo
cubic-bezier(0.19, 1, 0.22, 1)
entrance, reveals, scroll-triggered fade-ups
ease-in-out-expo
cubic-bezier(0.87, 0, 0.13, 1)
state transitions, tab switches, mode toggles
150ms
fast
300ms
base
600ms
slow
07 · Terminal Effects
CSS utilities for CRT / terminal personality — scanlines, cursors, typewriter, glyphs.
.scanlines
.cursor-blink / .cursor-blink--block
inline_
block
.typewriter
Hello, World.
.term-label · .prompt-symbol
.term-glow
ERROR: module not found — check import path
Elements
08 · Buttons
3 variants (primary, default, ghost) + disabled state. Always monospace, always uppercase.
09 · Inputs
Label-above layout, monospace label text. Focus state: red border + subtle ring.
10 · Links
Two variants: default (underline) and glow (text shadow on hover).
11 · Badges
Monospace chip tags. Default (muted border) and accent (red border) variants.
Components
12 · Cards
default — no terminal bar
Glass card without chrome. Use for content blocks.
terminal — with title bar
Terminal chrome: 3 dots + filename label. Use for code, config, or command output.
:animated="false" — no viewport trigger
Renders immediately without fade-up. Use for above-the-fold content.
14 · Section Headers
Full-width divider headers (default) and compact inline sub-headers (sm). Both animate on viewport entry.
size="default" — full divider
セクション Section Name
size="sm" — inline sub-header
Subsection
15 · Code Blocks
Terminal window pattern: UiCard with terminal=true wrapping a pre block. Used for code samples.
Patterns
16 · Loading States
Two patterns: skeleton shimmer for known structure, boot log for unknown structure.
skeleton shimmer
boot log
› init runtime...
› load assets...
› compile shaders...
› await data_
17 · Page Layout
6-layer stacking model. Each layer has exactly one class of responsibility.