An unofficial, original Dropbox-inspired product system built around find, organize, share, and protect content, responsive proof surfaces, and 21 research-selected elements.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A content-first system shaped by Dropbox's current personal plan flow: a confident trust-led hero, clear storage choices, file safety proof, and calm blue actions around content ownership.
Content clarity with deep ink, electric blue actions, clean white surfaces, and themeTypography
Sharp Grotesk 23
Observed Dropbox display family for the personal-plan hero and section headings
Sharp Grotesk 23, Sharp Grotesk 23 KR, Sharp Grotesk 23 Thai, Atlas Grotesk Web, Atlas Grotesk, Arial, sans-serifFallback: Atlas Grotesk, -apple-system, Segoe UI, Arial, sans-serif
Atlas Grotesk Web
Observed Dropbox supporting copy, metadata, and navigation family
Atlas Grotesk Web, Atlas Grotesk, -apple-system, system-ui, Segoe UI, Helvetica Neue, Arial, sans-serifFallback: -apple-system, system-ui, Segoe UI, Arial, sans-serif
Palette
Canvas
#f7f9fcCool content page field
Ink
#17243aPrimary headings, file names, and navigation
Atlas gray
#607087Supporting copy and metadata
Surface
#ffffffPlan, file, and sharing surfaces
Divider
#d7e0edFile rows and card boundaries
Dropbox blue
#1667ffOriginal pack action color and link signal
Blue tint
#e7f0ffSelected file, upload, and sync context
Dark canvas
#07101eExplicit dark mode page field
Dark surface
#0d1a2cExplicit dark mode content surfaces
Success
#198754Synced, protected, and restored state
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Metadata | 14px | 500 | 20px | 0 |
| Body | 16px | 400 | 1.55 | 0 |
| Lead | 18px | 400 | 1.5 | 0 |
| Card title | 24px | 500 | 1.15 | -0.02em |
| Section title | 40px | 400 | 1.2 | -0.02em |
| Hero display | 72px | 400 | 1.02 | -0.03em |
Spacing & shape
Iconography
Use file-type and state icons with visible text labels, preserve a consistent optical box, and never make a file status depend on color alone.
System metrics
Radius
Spacing
Motion
Elevation
Content stage
0 22px 70px rgba(23,36,58,.11)Lift a file preview or plan chooser
Share menu
0 16px 38px rgba(23,36,58,.14)Separate permissions and file actions
Surfaces & shape
Page
#f7f9fc / #07101eLight and dark canvas
Content
#ffffff / #0d1a2cFile, plan, and share surfaces
Selected
#eef3fb / #15263dSync, upload, and selected-file context
Guidelines
Imagery
Use original document thumbnails, abstract file previews, folder geometry, and soft blue surfaces. Do not reuse Dropbox logos, customer photography, production screenshots, or proprietary file previews.
Layout
Lead with a centered trust-and-content hero, then use plan cards, file safety proof, sync/share panels, and a content grid. Preserve a single-column reading order below 900px.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
21 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.