Switch between the rendered Visual preview and the Raw DESIGN.md.
Unsplash's design embodies clean minimalism with an emphasis on content-first presentation. The system prioritizes visual hierarchy through generous whitespace, subtle neutrals, and intentional accent usage. The aesthetic is modern, accessible, and gallery-focused—creating an environment where high-quality photography takes center stage. Interactions are understated yet responsive, with a preference for flat design and smooth micro-interactions. The overall mood is inviting, trustworthy, and human-centered, reflecting the platform's mission to democratize visual content creation.
Key Characteristics
#111111): Primary text, headings, core UI elements (most frequent color in the system)#000000): Maximum contrast overlays and critical accents#1877F2): Link hover states and special call-to-action accents#C0C0D9): Secondary accent for subtle emphasis#73A6D9): Supporting accent for secondary information#E60023): Error states, deletion warnings, critical alerts#0C260C): Success states and affirmative actions#260C0C): Alternative dark accent for contrast layering#555555): Secondary text, disabled states, subtle labels#767676): Tertiary text and muted callouts#D1D1D1): Borders, dividers, light rule lines#EEEEEE): Subtle backgrounds, disabled button fills#FEFEFE): Warm white for surfaces#FFFFFF): Primary background and card surfaces#FFFFFF): Main content containers and cards#FEFEFE): Alternative surface for subtle distinction#D1D1D1): Standard dividers and subtle rules#0A141E): Strong separators in high-contrast contextsPrimary: ui-sans-serif with fallback stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
Secondary: Same as primary (system UI fonts for consistency)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display (H1) | ui-sans-serif | 32px | 400 | 40px | 0px | Hero headlines and page titles |
| Heading Large (H2) | ui-sans-serif | 24px | 600 | 32px | 0px | Section headers and prominent titles |
| Heading Medium | ui-sans-serif | 18px | 600 | 24px | 0px | Subsection headers and card titles |
| Heading Small | ui-sans-serif | 16px | 600 | 24px | 0px | Component titles and labels |
| Body Large | ui-sans-serif | 15px | 400 | 24px | 0px | Primary body text and links |
| Body Regular | ui-sans-serif | 14px | 400 | 20px | 0px | Standard text in forms and descriptions |
| Body Small | ui-sans-serif | 12px | 400 | 18px | 0px | Captions and secondary information |
| Label | ui-sans-serif | 10px | 500 | 16px | 0px | Tags, badges, and small labels |
| Code | ui-sans-serif | 13px | 400 | 20px | 0px | Monospace display of technical content |
#111111 by default; secondary text uses #555555#111111#FFFFFF12px 24px15px60024px8px0px nonergba(0, 0, 0, 0.08) 0px 1px 1px 0px44px#333333, Box Shadow rgba(0, 0, 0, 0.1) 0px 1px 2px 0px#000000#EEEEEE, Text Color #767676, Box Shadow none#EEEEEE#11111112px 24px15px40024px8px1px solid #D1D1D1none44px#E0E0E0, Border Color #999999#D1D1D1rgba(0, 0, 0, 0)#1111118px 8px15px40024px8px0px nonenone40px40px#EEEEEE, Text Color #111111#E0E0E0rgba(0, 0, 0, 0)#5555558px 8px15px40024px8px0px nonenone40px40pxrgba(0, 0, 0, 0.04), Text Color #111111#FFFFFF8px1px solid #D1D1D120px 24pxrgba(0, 0, 0, 0.06) 0px 4px 8px -4px, rgba(0, 0, 0, 0.08) 0px 16px 24px -8px#111111#FFFFFF8pxnone0pxrgba(0, 0, 0, 0.06) 0px 4px 8px -4px, rgba(0, 0, 0, 0.08) 0px 16px 24px -8pxscale(1.02), Box Shadow rgba(0, 0, 0, 0.1) 0px 4px 12px 0px#FEFEFE8px1px solid #D1D1D124px 24pxnone#111111#EEEEEE#11111112px 16px14px40020px24px0px nonenone44px#767676#E0E0E0, Box Shadow 0px 0px 0px 2px rgba(24, 119, 242, 0.1)2px solid #1877F2#FFFFFF#11111112px 12px15px40024px0px1px solid #D1D1D1none44px#7676761px solid #1877F2, Box Shadow 0px 0px 0px 2px rgba(24, 119, 242, 0.1)1px solid #E60023, Background rgba(230, 0, 35, 0.04)16px16px4px#FFFFFF1px solid #D1D1D1#1111111px solid #111111#FFFFFF64px12px1px solid #D1D1D1#11111124px8px#FFFFFF64px12px 24px1px solid #D1D1D1#111111#1111112px solid #111111#767676transparent16px 24px15px4002px solid transparent#5555552px solid #111111, Text Color #111111#111111, Border Bottom 2px solid rgba(17, 17, 17, 0.2)#EEEEEE#1111114px 12px10px50016px16px0px nonergba(12, 38, 12, 0.1)#0C260C4px 12px10px50016pxrgba(230, 0, 35, 0.1)#E600234px 12px10px50016pxBase Unit: 4px
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 56px, 64px, 80px, 96px, 128px
Usage Contexts:
Max Width: 1400px for desktop layout
Column Strategy: 12-column responsive grid with breakpoint adaptations
Section Patterns:
1200px inner container24px padding on both sides of viewport-width containersContainer Padding:
24px horizontal padding, 48px vertical sections16px horizontal padding, 32px vertical sections16px horizontal padding, 24px vertical sectionsWhitespace is treated as a first-class design element. The system uses generous spacing to create breathing room, reduce cognitive load, and emphasize content hierarchy. Negative space improves scannability and directs user focus. Vertical rhythm is maintained through consistent spacing increments. Images and text blocks are separated by minimum 24px vertical gaps. Adjacent cards maintain 16px gaps in grid layouts. The philosophy prioritizes clarity and user comfort over information density.
| Level | Treatment | Use |
|---|---|---|
| Flat (None) | box-shadow: none | Inputs, backgrounds, flat UI elements, body text |
| Raised (sm) | rgba(0, 0, 0, 0.06) 0px 4px 8px -4px, rgba(0, 0, 0, 0.08) 0px 16px 24px -8px | Cards, modals, floating containers, photo gallery items |
| Medium (md) | rgba(0, 0, 0, 0.08) 0px 1px 1px 0px | Buttons, subtle elevation for interactive states |
| High (lg) | rgba(0, 0, 0, 0.1) 0px 1px 2px 0px | Button hover/focus states, dropdown menus, elevated overlays |
| Extra (xl) | rgba(0, 0, 0, 0.15) 0px 8px 16px 0px | Full-page modals, top-level notifications, critical overlays |
Shadow Philosophy:
Shadows are used sparingly and intentionally to create depth hierarchy without visual clutter. The system favors soft, distributed shadows over sharp or dramatic ones, maintaining the clean aesthetic. Multiple shadow layers (combining different blur and spread values) create subtle depth that feels natural. Shadows are darkest on interactive elements to signal interactivity. The shadow palette follows a luminosity-based approach where shadow intensity increases with elevation level. This creates a cohesive, modern appearance while preserving content focus.
#111111 for primary text to ensure strong contrast and readability24px padding inside card containers for consistent breathing room44px)#1877F2 exclusively for link focus and primary interactive accents600 font weight to all heading levels for clear visual hierarchy#E60023 background tint for clear distinctionsm shadow for appropriate elevationborder-radius: 8px as the default for buttons and cards16px gaps between grid items in gallery layouts#111111 is the system anchor16px between distinct content areas1.5x font size for body text readabilityui-sans-serif with serif fonts; maintain system font consistency40px in dimensionborder-radius > 0) on full-width form inputs| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single column, full-width containers, 16px padding, bottom navigation, stacked modals, 1-column gallery |
| Tablet | 640px–1023px | 2-column grid, 20px padding, sidebar navigation collapses to icon-only at 640px, gallery becomes 2 columns |
| Desktop | 1024px–1439px | 3-column grid, 24px padding, full sidebar navigation, 3-column gallery layout |
| Large Desktop | 1440px+ | Max-width container 1400px applied, centered layout, optional 4-column gallery on ultra-wide displays |
44px × 44px for all interactive elements (buttons, links, icon buttons)56px × 56px preferred for frequently tapped elements40px × 40px minimum for less critical interactions8px margin between adjacent touch targets44px square or 44px × height rectangle44px height with vertical padding, horizontal padding not strictly required if text is spaced adequatelyHeader Navigation:
1024px+): Horizontal tabs with full text labels640px–1023px): Horizontal tabs with abbreviated labels or icons< 640px): Collapsible hamburger menu or sticky bottom tab barSidebar Navigation:
1024px+): Full 64px sidebar with labels visible on hover640px–1023px): Collapsed to 64px icon-only sidebar< 640px): Hidden by default, accessible via hamburger or bottom navigationGallery Grid:
1024px+): 3-column responsive grid with 16px gaps640px–1023px): 2-column grid with 16px gaps< 640px): 1-column single image per row with full-width itemsModals & Overlays:
1024px+): Centered modal, max 600px width640px–1023px): Modal width 90vw, max 600px< 640px): Full-screen or bottom-sheet modal with 16px paddingPadding & Margins:
24px section padding, 48px vertical margins20px section padding, 32px vertical margins16px section padding, 24px vertical marginsFont Sizes:
15px across all breakpoints (minimum readable)2px–4px on mobile (e.g., H2 from 24px to 20px)12px minimum for legibility#111111)#FFFFFF)#111111)#111111)#555555)#767676)#D1D1D1)#1877F2)#E60023)#0C260C)#EEEEEE)#111111)rgba(0, 0, 0, 0.06) 0px 4px 8px -4px, rgba(0, 0, 0, 0.08) 0px 16px 24px -8pxColor Foundation: Anchor all text and UI in #111111 (Deep Black). Reserve accent colors (#1877F2, #E60023, #0C260C) for semantic meaning only.
Typography Scale: Implement body text at 15px / 400 weight, all headings at 600 weight. Use the provided hierarchy table; do not deviate from specified pixel values.
Button Styling: Primary buttons use #111111 background with #FFFFFF text, 12px 24px padding, 8px radius, and the md shadow. Secondary buttons use #EEEEEE background with #111111 text and a 1px border in #D1D1D1.
Spacing Consistency: Base all gaps and padding on the 4px unit scale. Most sections use 24px padding; form elements use 12px; gaps between grid items use 16px.
Card Elevation: Apply the sm shadow (rgba(0, 0, 0, 0.06) 0px 4px 8px -4px, rgba(0, 0, 0, 0.08) 0px 16px 24px -8px) to all floating cards, images, and modals. Keep flat surfaces (inputs, backgrounds) shadow-free.
Interactive States: Hover states darken backgrounds by 10–20% or shift text color to #111111. Focus states add a 2px solid border in #1877F2 with a thin outline glow rgba(24, 119, 242, 0.1).
Border Radius Defaults: Use 8px for buttons, cards, and standard components. Use 24px for large hero sections, 0px for form inputs and full-width elements, and 50% for circular avatars.
Responsive Adaptation: Apply max-width 1400px container on desktop. Reduce column count (3 → 2 → 1) and padding (24px → 20px → 16px) across breakpoints. Minimum touch target remains 44px × 44px.
Accessibility & Contrast: Maintain WCAG AA contrast between text and background. Primary text #111111 on #FFFFFF achieves 21:1 contrast. Secondary text #555555 achieves 7.5:1 on white. Always include visible focus indicators on interactive elements.
Hierarchy & Emphasis: Reserve bold (600 weight) for headings and call-to-action text. Use color shift (to #555555) or size reduction (to 12px) for secondary information. Never rely on color alone—pair semantic colors with icons or position cues.