Muhai Dheen

Generated May 18, 2026

DESIGN.md for www.deepseek.com

www.deepseek.com/en

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design System Inspired by DeepSeek

1. Visual Theme & Atmosphere

DeepSeek embodies a modern, intelligent aesthetic grounded in cutting-edge AI technology. The design merges the boundless curiosity of scientific exploration with sleek, minimalist interfaces. The visual language leverages soft, frosted glass effects combined with vibrant primary blue, creating an atmosphere of innovation and accessibility. The fluid background gradients suggest exploration and depth—aligning with the brand's mission to "unravel the mystery of AGI." Every element feels purposeful yet approachable, inviting users into an advanced yet intuitive experience.

Key Characteristics

Frosted glass cards with subtle transparency and layered shadows
Clean, minimal typography hierarchy emphasizing clarity
Soft blue gradient backgrounds evoking depth and exploration
High contrast between primary blue accents and neutral grays
Smooth, generous spacing encouraging visual breathing room
Refined shadow system adding gentle elevation without heaviness

2. Color Palette & Roles

Primary

Brand Blue (#4D6BFE): Core interactive elements, headings, primary CTAs, and brand identity accents
Brand Blue Light (#BED2FE): Subtle backgrounds and light interactive states

Accent Colors

Deep Blue (#DBE7FF): Pale accent fills and hover states for interactive elements
Primary Blue Gradient (from #4D6BFE to lighter variants): Used for visual emphasis and decorative elements

Interactive

Interactive Gray (#94A3B8): Secondary text, disabled states, and subtle UI elements
Interactive Dark Gray (#475569): Hover states, active navigation, and medium-emphasis text
Slate (#64748B): Tertiary text and muted interactive states
Charcoal (#334155): Dense text, strong emphasis, form labels

Neutral Scale

Black (#000000): Primary text, headings, strong contrast elements
White (#FFFFFF): Elevated cards, primary surface backgrounds
Light Gray (#E5E7EB): Borders, dividers, subtle backgrounds
Cloud Gray (#F6F9FD): Very light backgrounds, alternate surfaces
Snow (#F7F8FC): Minimal backgrounds, near-white surfaces
Silver (#E2E8F0): Fine borders and delicate separators
Ghost (#F5F5F5): Neutral background fills

Surface & Borders

Border Light (#E5E7EB): Primary border and divider color
Surface Overlay (rgba(255, 255, 255, 0.5)): Frosted glass card backgrounds
Shadow Overlay (rgba(0, 0, 0, 0)): Transparent container backgrounds

3. Typography Rules

Font Family

Primary: quote-cjk-patch, system-ui, -apple-system, sans-serif Secondary: quote-cjk-patch, Segoe UI, Roboto, sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	quote-cjk-patch	48px	600	56px	-0.02em	Hero heading, main page titles
H1	quote-cjk-patch	40px	600	48px	-0.01em	Section headings, prominent titles
H2	quote-cjk-patch	32px	600	40px	-0.01em	Subsection headers
H3	quote-cjk-patch	24px	600	32px	0em	Card titles, feature headers
H4	quote-cjk-patch	20px	600	28px	0em	Smaller headings, nav items
Body	quote-cjk-patch	14px	400	21px	0em	Primary content, descriptions, card text
Body Small	quote-cjk-patch	12px	400	18px	0em	Secondary descriptions, footnotes
Label	quote-cjk-patch	14px	500	20px	0.05em	Form labels, UI labels
Link	quote-cjk-patch	14px	400	20px	0em	Hyperlinks, navigation text
Code	`Menlo`, `Monaco`, monospace	13px	400	19px	0em	Code snippets, technical text

Principles

Maintain consistent 14px base size for body text and links across most interfaces
Use 600 weight exclusively for headings to establish clear visual hierarchy
Preserve generous line heights (1.5x to 1.75x multiplier) for readability
Letter spacing remains neutral (0em) except for displays where -0.02em adds sophistication
Ensure all text meets WCAG AA contrast standards (minimum 4.5:1 ratio)

4. Component Stylings

Buttons

Primary Button

Background: #4D6BFE
Text Color: #FFFFFF
Font Size: 14px
Font Weight: 600
Padding: 12px 24px
Border Radius: 8px
Border: 0px solid transparent
Box Shadow: 0px 4px 12px rgba(77, 107, 254, 0.3)
Hover: Background #3D56EE, Box Shadow 0px 6px 16px rgba(77, 107, 254, 0.4)
Active: Background #2D46DE, Box Shadow 0px 2px 8px rgba(77, 107, 254, 0.2)

Secondary Button

Background: rgba(255, 255, 255, 0.5)
Text Color: #000000
Font Size: 14px
Font Weight: 600
Padding: 12px 24px
Border Radius: 8px
Border: 2px solid #E5E7EB
Box Shadow: rgb(241, 245, 249) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px
Hover: Background rgba(255, 255, 255, 0.7), Border 2px solid #DBE7FF
Active: Background rgba(255, 255, 255, 0.9), Border 2px solid #BED2FE

Ghost Button

Background: transparent
Text Color: #94A3B8
Font Size: 14px
Font Weight: 400
Padding: 12px 16px
Border Radius: 6px
Border: 0px solid transparent
Box Shadow: none
Hover: Text Color #4D6BFE, Background rgba(77, 107, 254, 0.05)
Active: Text Color #3D56EE, Background rgba(77, 107, 254, 0.1)

Cards & Containers

Default Card

Background: rgba(255, 255, 255, 0.5)
Text Color: #000000
Font Size: 14px
Font Weight: 400
Padding: 24px 32px
Border Radius: 16px
Border: 0px solid #E5E7EB
Box Shadow: rgb(241, 245, 249) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 12px 24px 0px
Line Height: 21px

Elevated Card

Background: rgba(255, 255, 255, 0.7)
Text Color: #000000
Font Size: 14px
Font Weight: 400
Padding: 32px 40px
Border Radius: 18px
Border: 0px solid #E5E7EB
Box Shadow: rgb(241, 245, 249) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 8px 0px, rgba(0, 0, 0, 0.08) 0px 16px 32px 0px
Line Height: 21px

Accent Card

Background: rgba(0, 0, 0, 0)
Text Color: #4D6BFE
Font Size: 14px
Font Weight: 400
Padding: 0px
Border Radius: 18px
Border: 0px solid transparent
Box Shadow: none
Line Height: 21px

Inputs & Forms

Text Input

Background: rgba(255, 255, 255, 0.8)
Text Color: #000000
Font Size: 14px
Font Weight: 400
Padding: 12px 16px
Border Radius: 8px
Border: 2px solid #E5E7EB
Box Shadow: 0px 1px 2px rgba(0, 0, 0, 0.05)
Focus: Border 2px solid #4D6BFE, Box Shadow 0px 0px 0px 3px rgba(77, 107, 254, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.05)
Placeholder: Color #94A3B8, Font Weight 400

Form Label

Font Size: 14px
Font Weight: 500
Color: #334155
Margin Bottom: 8px

Disabled Input

Background: #F6F9FD
Text Color: #94A3B8
Border: 2px solid #E2E8F0
Cursor: not-allowed

Navigation

Navigation Link (Active)

Text Color: #4D6BFE
Font Size: 14px
Font Weight: 600
Border Bottom: 2px solid #4D6BFE
Padding Bottom: 8px

Navigation Link (Inactive)

Text Color: #475569
Font Size: 14px
Font Weight: 400
Border Bottom: 2px solid transparent
Padding Bottom: 8px
Hover: Text Color #334155, Border Bottom 2px solid #E5E7EB

Navigation Link (Hover)

Text Color: #4D6BFE
Background: rgba(77, 107, 254, 0.05)
Transition: all 0.2s ease-in-out

5. Layout Principles

Spacing System

Base Unit: 4px

Scale:

4px: Fine micro-interactions, icon padding
8px: Tight component spacing, small gaps
12px: Input padding, small container gaps
16px: Padding in contained elements, medium gaps
24px: Card padding, section small gaps
32px: Card large padding, container padding
40px: Large container gaps, section spacing
64px: Section margins, major layout spacing
112px: Full section separation (smaller viewports)
128px: Full section separation (primary spacing)
160px: Hero section padding, major spacing

Usage Context:

Micro (4px–8px): Component internals, icon spacing
Small (12px–24px): Cards, inputs, buttons, tight sections
Medium (32px–40px): Container padding, feature spacing
Large (64px–128px): Section separation, hero padding
Extra Large (160px): Full-screen sections, dramatic padding

Grid & Container

Max Width: 1200px for content sections
Column Strategy: 12-column grid for desktop, 6-column for tablet, 4-column for mobile
Container Padding: 40px on desktop, 24px on tablet, 16px on mobile
Gutter: 24px between columns, 16px on smaller screens
Hero Section: Full viewport width with 160px padding vertical, 40px horizontal

Whitespace Philosophy

Generous whitespace permeates the design, supporting cognitive clarity and visual rest. Spacing increases proportionally with hierarchy—headings receive more breathing room, body text sits in moderate gutters, and components maintain consistent internal padding. The frosted glass aesthetic requires sufficient air around elements to maintain visual separation. Sections breathe with 64px–128px vertical gaps, emphasizing focus on individual content zones.

Border Radius Scale

6px: Small interactive elements (buttons, links, inputs hover states)
8px: Buttons, small inputs, compact components
16px: Standard cards, moderate containers
18px: Elevated cards, special feature containers
24px: Large modals, expansive sections
999px: Fully rounded elements (badges, avatars)

6. Depth & Elevation

Level	Treatment	Use
Flat (L0)	No shadow	Backgrounds, static text, nested containers
Raised (L1)	`rgb(241, 245, 249) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 12px 24px 0px`	Standard cards, containers, default elevation
Elevated (L2)	`rgb(241, 245, 249) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 8px 0px, rgba(0, 0, 0, 0.08) 0px 16px 32px 0px`	Premium cards, floating elements, high emphasis
Floating (L3)	`rgba(0, 0, 0, 0.1) 0px 8px 16px 0px, rgba(0, 0, 0, 0.1) 0px 24px 48px 0px`	Modals, dropdowns, overlays
Interactive (L4)	`rgba(0, 0, 0, 0.15) 0px 12px 24px 0px, rgba(0, 0, 0, 0.15) 0px 32px 64px 0px`	Expanded modals, menus, priority overlays

Shadow Philosophy:

Shadows in this system are delicate and purposeful, serving to separate layers without dominating the interface. The multi-layer shadow approach uses a fine border line (rgb(241, 245, 249) for L1) combined with soft blur radii to create visual depth while maintaining the frosted glass aesthetic. Shadows increase in spread and blur as elevation increases, creating clear hierarchical relationships. All shadows employ subtle opacity (0.05–0.15) to preserve the light, airy atmosphere. Interactive elements use brief shadow transitions (0.2s ease-out) during state changes.

7. Do's and Don'ts

Do

Maintain frosted glass card styling with rgba(255, 255, 255, 0.5) backgrounds and the standard shadow system
Use the blue primary (#4D6BFE) exclusively for primary CTAs, active states, and brand emphasis
Apply generous padding (24px–40px) to cards and containers to support readability
Preserve the 14px base size for body text and ensure minimum 21px line height
Stack spacing consistently using the scale: 8px, 12px, 24px, 32px, 40px, 64px, 128px
Layer shadow treatment appropriately—use L1 for standard cards, L2 for elevated sections
Employ the neutral gray hierarchy (#94A3B8 for secondary, #475569 for tertiary, #334155 for labels)
Keep borders subtle (2px solid #E5E7EB) and avoid heavy strokes
Test all text against the #000000 or #4D6BFE backgrounds for WCAG AA compliance

Don't

Avoid replacing the primary blue with other accent colors outside deliberate brand contexts
Don't reduce card padding below 24px—maintain breathing room around content
Never use the full white background (#FFFFFF) without intentional transparency overlay
Avoid heavy shadows or dark overlays that obscure the soft, ethereal aesthetic
Don't mix typography weights arbitrarily—use 400 for body, 500 for labels, 600 for headings
Avoid gray text smaller than 12px to prevent readability issues
Never override border radius values without design team consensus
Don't create multiple primary CTA styles—reserve #4D6BFE buttons for primary actions only
Avoid adding borders thicker than 2px on interactive elements
Don't deviate from the spacing scale—arbitrary pixel values fragment the rhythm

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	< 640px	4-column grid, `16px` container padding, `8px` gutter, typography reduced to `13px` body
Tablet	640px–1024px	6-column grid, `24px` container padding, `16px` gutter, `14px` body size
Desktop	1024px–1440px	12-column grid, `40px` container padding, `24px` gutter, `14px` body size
Wide	1440px+	12-column grid centered, `40px` container padding, `1200px` max-width

Touch Targets

Minimum Button Size: 44px × 44px (touch-friendly on mobile)
Minimum Link Size: 48px × 24px (height for comfortable tapping)
Minimum Input Height: 44px on mobile, 40px on desktop
Spacing Between Interactive Elements: Minimum 12px on mobile, 16px on desktop
Icon Size: 20px × 20px standard, 24px × 24px for primary actions

Collapsing Strategy

Hero Section: Reduce padding from 160px (desktop) → 80px (tablet) → 40px (mobile)
Card Padding: Maintain 24px on mobile, increase to 32px on tablet and desktop
Typography: Body text remains 14px on tablet/desktop; reduce to 13px on mobile if space constrained
Grid Columns: 12 desktop → 6 tablet → 4 mobile; single column for very small screens below 480px
Spacing Gaps: 40px → 24px → 16px as viewport shrinks
Navigation: Horizontal nav bar on desktop/tablet; hamburger menu + drawer on mobile
Container Max-Width: 100% on mobile, 85% on tablet, 1200px fixed on desktop+

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Brand Blue (#4D6BFE)
Secondary CTA: Secondary Button with rgba(255, 255, 255, 0.5) background
Background: Cloud Gray (#F6F9FD), White with transparency (rgba(255, 255, 255, 0.5))
Card Overlay: rgba(255, 255, 255, 0.5) frosted glass
Heading Text: Black (#000000)
Body Text: Black (#000000)
Secondary Text: Interactive Gray (#94A3B8)
Tertiary Text: Slate (#64748B)
Borders: Light Gray (#E5E7EB)
Hover State: Brand Blue (#4D6BFE) with rgba(77, 107, 254, 0.05) background
Focus State: 3px ring of rgba(77, 107, 254, 0.1) around element

Iteration Guide

Always use quote-cjk-patch font family with system-ui fallback; maintain 14px base size for body and links
Apply the standard card shadow (rgb(241, 245, 249) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 12px 24px 0px) to all containers and elevated elements
Reserve #4D6BFE exclusively for primary actions, active states, and brand emphasis; never use for secondary or decorative text
Maintain frosted glass aesthetic by using rgba(255, 255, 255, 0.5) as default card background with proper border and shadow treatment
Stack vertical spacing using multiples of 8px (8, 16, 24, 32, 40, 64, 128, 160px) to preserve rhythm and consistency
Use 600 weight only for headings (H1–H4); all body, labels, and links use 400 or 500
Test all primary text against backgrounds to ensure minimum 4.5:1 WCAG AA contrast; secondary text (#94A3B8) requires minimum 3:1 ratio
Apply border radius per component tier: buttons 8px, cards 16px–18px, small UI 6px, modals 24px
For hover states on interactive elements, transition background color and text color smoothly over 0.2s ease-in-out without changing layout
On mobile breakpoints below 640px, reduce container padding to 16px, collapse multi-column grids to single column, maintain 44px minimum height for touch targets

Want a DESIGN.md like this for your own website?