Editorial Monochrome
A minimal black-and-white editorial system. Hierarchy is built with typography and white space.
Reference Archive · Structure First · Ready to Use
Design System Archive
A structured reference archive of design systems ready for real-world use. Provides standardized MD documents with color tokens, typography, and component patterns for AI tools and developers to reference and reuse immediately.
Warm Humanist
A warm earth-tone palette with humanist typefaces. Creates friendly, approachable interfaces.
Neo Brutalist
Thick borders and bold typography. Exposes structure with unapologetic confidence.
Corporate Navy
Deep navy primary on a neutral gray scale. Role-based semantic tokens deliver enterprise-grade consistency.
Toss TDS
A fintech super-app style system. Generous radii, a single blue accent, and a fine-grained gray scale convey trust and simplicity.
LINE LDSG
A global messenger style system. Brand green accents on a white base with strict semantic colors create friendliness.
KT Seamless Flow
A dark-first system. Red accents on deep charcoal surfaces express the dense flow of telecom services.
KRDS
Korean government design system style. Accessibility-first principles, government blue, and Pretendard GOV build public-service trust.
Apple HIG
Apple Human Interface Guidelines style. System colors, restrained hierarchy, and platform-native clarity.
Samsung One UI
Samsung One UI style. Large radii, generous touch targets, and a blue accent optimized for one-handed use.
Gmarket GDS
A large-scale e-commerce system. Strict separation of brand green and sale red with high-density product information design.
SOCAR Frame
A mobility system. Vivid blue that stays legible over maps, with real-time state representation at its core.
당근 SEED
A local community system. Carrot orange accents, plain grays, and a single token source aimed at multi-platform delivery.
Material Design 3
Google Material Design 3 style. Semantic role tokens derived from tonal palettes, with dynamic color at the core.
IBM Carbon
IBM Carbon style enterprise system. Square geometry, the 2x grid, and IBM Plex create data-product precision.
Microsoft Fluent
Microsoft Fluent 2 style. Restrained use of light, depth, and motion with 4px radii and productivity-tool density.
Shopify Polaris
Shopify Polaris style admin system. White cards on a light gray canvas with clear, merchant-first action design.
Midnight Green
An ownership-app system of midnight black neutrals and an active green accent. Expresses vehicle connection in restrained cool grays.
Copper Monotone
Black monotone with a copper accent and crisp 2px corners. Achromatic hierarchy builds a premium quiet-luxury tone.
Yeogi YDS
A travel-platform style system. Lively red and cyan blue with clearly separated roles, plus tokenized yds radius and shadow scales.
Astryx
Meta open-source system style. Semantic tokens, a theme builder, and 90+ copy-ready components including chat and AI patterns.
Wanted Montage
A career-platform style system. Cool-neutral scales, Wanted blue, and opacity-based label and line tokens aim at a single multi-platform spec.
How to Use
01
Pick a system from the archive
Choose the design system that fits your project. Check the overall mood with the color palette, typography, and component previews.
02
Download the MD document
Use the Download MD button to save a structured markdown file containing color tokens, typography rules, component patterns, and CSS code.
03
Apply it to AI tools or your project
Add the MD file as context to prompts in Claude, Gemini, or Codex — or copy the CSS variables and code samples directly into your project.
04
Extend from structure and rules
AI generates components and layouts that follow the system tokens and rules. Because everything is token-based, dark mode and brand customization come easily.
FAQ
What is Design System Vault?
Design System Vault is a structured reference archive of design systems for real-world use. It provides systematically organized MD documents containing color tokens, typography rules, and component patterns — not just a gallery, but a ready-to-use resource platform.
What is a design system?
A design system is a coherent design language that includes UI components, color tokens, typography rules, and spacing scales. By standardizing design decisions and rules, it lets an entire team build a consistent user experience.
How do I use Design System Vault with AI tools like Claude or Gemini?
Download the MD file and paste it as context in your AI prompt. Tools like Claude, Gemini, and Codex will generate code that follows the design system's tokens, typography, and component specifications.
Which design systems are included in the archive?
Design System Vault currently includes 22 design systems — Editorial Monochrome, Warm Humanist, Neo Brutalist, Corporate Navy, Toss TDS, LINE LDSG, KT Seamless Flow, KRDS, Apple HIG, Samsung One UI, Gmarket GDS, SOCAR Frame, 당근 SEED, Material Design 3, IBM Carbon, Microsoft Fluent, Shopify Polaris, Midnight Green, Copper Monotone, Yeogi YDS, Astryx, Wanted Montage — and is continuously updated.