Experimental // Design System v1

yuichi.blog Design System

Generated with Claude Design on April 2026. This is a test deployment — nothing on this page is active in production. Click any preview to open the standalone HTML file.

Open Full UI Kit →View README.mdView SKILL.md← Back to Lab

[01] Brand

Hero→
brand-hero.html
YB Monogram→
brand-monogram.html
Imagery→
brand-imagery.html
Icons→
brand-icons.html

[02] Type

Hero Headline→
type-hero.html
Display→
type-display.html
Body Prose→
type-body.html
Mono Metadata→
type-mono-metadata.html

[03] Colors

Neutrals→
colors-neutrals.html
Accent & Gradient→
colors-accent.html
Subject Accents→
colors-subjects.html

[04] Spacing

Spacing Scale→
spacing-scale.html
Radii→
radii.html
Shadows→
shadows.html

[05] Components

Article Card→
components-card.html
Buttons & Pills→
components-buttons.html
Status Badges→
components-status.html
Form Inputs→
components-inputs.html
Glass Cards→
components-glass.html
Navbar→
components-navbar.html
Floating Chrome (BGM + Samantha)→
components-floating.html

Test deployment — not connected to production components.

Source: Claude Design output · claude.ai/design