Design System
The Visual Language of Dasheng.dev
A comprehensive guide to the colors, typography, components, and design principles that create a cohesive, accessible, and delightful user experience.
Design Philosophy
Clarity First
Every element serves a purpose. Clean layouts and generous whitespace help content breathe and guide users naturally through the experience.
Accessible by Default
WCAG AA-compliant color contrasts, semantic HTML, and keyboard navigation ensure the site is usable by everyone.
Performance Matters
Lightweight components, optimized assets, and edge delivery via Cloudflare Workers ensure fast, dependable load times.
Delightful Details
Subtle animations, thoughtful hover states, and smooth transitions add personality without sacrificing usability.
Color Palette
A carefully crafted color system designed for accessibility and visual harmony. All colors meet WCAG AA/AAA standards for contrast.
Primary Blue
The main brand color representing trust, professionalism, and depth. Used for links, primary actions, and key UI elements.
50
#E6F0FF
Backgrounds, subtle highlights
100
#CCE0FF
Light backgrounds
200
#99C2FF
Borders, dividers
300
#66A3FF
Hover states
400
#3385FF
Interactive elements
500
#0066FF
Main primary (AAA for large text)
600
#0052CC
Primary buttons, links (AAA compliant)
700
#003D99
Pressed states
800
#002966
Dark mode text
900
#001433
Deep backgrounds
Accent Orange
An energetic accent color that adds warmth and draws attention to key elements and calls-to-action.
50
#FFF4E6
Backgrounds, highlights
100
#FFE8CC
Light backgrounds
200
#FFD199
Borders
300
#FFBA66
Hover states
400
#FFA333
Interactive elements
500
#FF8C00
Main accent (AA for large text)
600
#CC7000
Secondary buttons (AAA for large text)
700
#995400
Pressed states
800
#663800
Dark accents
900
#331C00
Deep backgrounds
Navy
A sophisticated dark palette for backgrounds, text, and creating depth in the interface.
50
#E8EDF5
Light backgrounds
100
#D1DBEB
Subtle backgrounds
500
#194B9B
Deep navy accents
700
#0F2D5D
Dark backgrounds
900
#050F1F
Darkest backgrounds
Semantic Colors
Functional colors that communicate status, feedback, and system states.
Success
#10B981
Positive actions, confirmations
Warning
#F59E0B
Cautions, alerts
Error
#EF4444
Errors, destructive actions
Info
#3B82F6
Informational messages
Typography
A clean, readable type system that balances personality with professionalism.
Inter
Primary font for all body text and headings
Fallbacks: ui-sans-serif, system-ui, -apple-system, sans-serif
Ubuntu Mono
Code blocks and technical content
Fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
Type Scale
Component Library
Reusable UI components built with Svelte 5 runes, TailwindCSS, and accessibility in mind.
Button
Primary interactive element with multiple variants and sizes.
- • Rounded pill shape
- • Hover lift effect
- • Focus ring
- • Disabled state
Card
Flexible container for grouping related content with optional interactivity.
- • Border on hover
- • Shadow elevation
- • Image support
- • Tag display
Tag
Small labels for categorization and metadata display.
- • Pill shape
- • Color coding
- • Interactive variant
Hero
Large banner section for page introductions.
- • Responsive sizing
- • Slot for custom content
- • Theme-aware
ThemeToggle
Dark/light mode switcher with smooth transitions.
- • Sun/moon icons
- • System preference detection
- • Persistent preference
Live Examples
Buttons
Cards
Hoverable Card
Demonstrates the default elevated hover state with tighter copy for concise summaries.
Static Card
Use hoverable=false for purely informational blocks that shouldn’t lift on cursor.
Card With Content
Cards accept slots too - stack short details, callouts, or next-step links.
Tags
Spacing & Layout
Consistent spacing creates rhythm and visual harmony across the interface.
Spacing Values
Container Max Width
max-w-7xl (1280px)
Main content containers
Narrow Content
max-w-4xl (896px)
Prose content, forms
Section Padding
py-16 (4rem)
Vertical section spacing
Container Padding
px-4 sm:px-6 lg:px-8
Responsive horizontal padding
Component Gap
gap-4 to gap-8
Space between cards, items
Responsive Breakpoints
Responsive grid system using CSS Grid and Flexbox
Motion & Animation
Subtle animations enhance the user experience without being distracting.
Transitions
Theme Transition
200ms
background-color, border-color, color
Usage: Theme switching
Interactive Elements
150ms-200ms
transform, opacity, box-shadow
Usage: Buttons, cards, links
Hover Lift
200ms
transform: translateY
Usage: Buttons, clickable cards
Animation Principles
- ▸ Keep animations under 300ms for snappy interactions
- ▸ Use transform and opacity for smooth 60fps animations
- ▸ Respect reduced-motion preferences
- ▸ Animate with purpose - every motion should guide the user
Dark Mode
A thoughtfully designed dark theme that maintains readability and visual hierarchy.
Features
System Preference Detection
Automatically matches user's OS theme preference
Manual Override
Users can toggle between light/dark modes
Persistent Preference
Chosen theme is saved and restored on return visits
No Flash
Theme is determined before render to prevent FOUC
Color Mapping
| Element | Light | Dark |
|---|---|---|
| Backgrounds | white/gray-50 | gray-900/gray-800 |
| Text | gray-900/gray-700 | gray-100/gray-300 |
| Primary | primary-600 | primary-400 |
| Accent | accent-600 | accent-500 |
| Borders | gray-200/gray-300 | gray-700/gray-800 |
That's the Design System!
This system ensures consistency, accessibility, and a delightful experience across every page.
← Back to About