Cloudinary DESIGN.md
Brands
Visual media platform design with official blue foundations, sky-inspired accents, and practical asset workflow clarity.
At a glance
- Group
- Brands
- Main color
- #3448c5Blue design systems
- Fonts
- InterSF Mono
Colors in this file
- #e3e9ef
background
- #0d9aff
background
- #ffffff
background
- #3448c5
Unnamed
- #23436a
Unnamed
- #1b295d
Unnamed
- #48c4d8
Unnamed
- #fe5981
Unnamed
- #d5fda1
Unnamed
- #60cfb7
Unnamed
Visual media platform design with official blue foundations, sky-inspired accents, and practical asset workflow clarity.
1. Visual Theme & Atmosphere
Cloudinary should feel like technical media infrastructure made visually fluent. The system serves developers, marketers, and enterprise asset teams, so it needs API credibility plus polished image and video workflow presentation.
- Mood: visual, reliable, technical, fluid, enterprise-ready
- Density: medium, with workflow cards and media examples
- Character: official blue palette, clean cloud glyph cues, asset preview panels
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--cloudinary-blue | #3448C5 | Reserved brand/logo blue |
--sky-blue | #0D9AFF | Primary action and highlight |
--aegean-blue | #23436A | Dark brand surface |
--cetacean-blue | #1B295D | Deep technical panel |
--cloud-grey | #E3E9EF | Neutral surface |
--turquoise | #48C4D8 | Supporting accent |
--pink | #FE5981 | Creative/media accent |
--green | #D5FDA1 | Positive state / optimization |
--teal | #60CFB7 | Data and workflow accent |
--purple | #A15EE4 | Secondary creative accent |
Cloudinary Blue is for the logo. Use Sky Blue for product actions and keep darker blues for technical credibility.
3. Typography Rules
css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero Display | 58px | 700 | 1.05 |
| Page Title | 40px | 700 | 1.12 |
| Section Title | 30px | 700 | 1.2 |
| Card Title | 22px | 600 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Small | 14px | 400 | 1.45 |
| Code | 13px | 500 | 1.55 |
4. Component Stylings
css.button-primary {
min-height: 44px;
padding: 0 18px;
border: 1px solid #0D9AFF;
border-radius: 999px;
background: #0D9AFF;
color: #FFFFFF;
font: 600 14px/1 Inter, sans-serif;
}
.asset-card {
border: 1px solid #E3E9EF;
border-radius: 18px;
background: #FFFFFF;
padding: 18px;
}
.media-frame {
overflow: hidden;
border-radius: 16px;
background: #E3E9EF;
}
.input {
min-height: 44px;
border: 1px solid #E3E9EF;
border-radius: 12px;
padding: 0 14px;
}
5. Layout Principles
| Token | Value | Usage |
|---|---|---|
--space-2 | 8px | Toolbar spacing |
--space-4 | 16px | Core rhythm |
--space-5 | 24px | Cards |
--space-8 | 48px | Major sections |
Use media previews as first-class objects. Show before/after, transform steps, API snippets, and asset status in modular blocks.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 8px 20px rgba(27, 41, 93, 0.08); }
.shadow-media { box-shadow: 0 18px 42px rgba(27, 41, 93, 0.14); }
Keep most surfaces flat and bordered. Elevate previews, modals, and focused DAM workflows.
7. Do's and Don'ts
Do show real media workflows and transformation examples. Do respect the official blue palette. Do not use Cloudinary Blue as a generic button color. Do not make the design feel like a generic file manager.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Stack previews and controls |
| Tablet | 768px | Two-column media/workflow examples |
| Desktop | 1200px | Full preview grids and API sidebars |
Preserve media aspect ratios and keep controls at least 44px tall.
9. Agent Prompt Guide
Design like Cloudinary: official sky-blue media platform energy, white asset cards, image/video preview frames, compact workflow controls, Inter typography, and a reliable API-first DAM tone.
Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
AssemblyAI
Brands · Inter
Voice AI design with deep indigo identity, developer-first surfaces, mono code aesthetics, and speech-intelligence clarity.
Liveblocks
Brands · Inter
Real-time collaboration infrastructure with a clean developer aesthetic — dark surfaces, electric blue presence indicators, and multiplayer-first UI patterns.
Qraft Technologies
Brands · Inter
Qraft Technologies (크래프트테크놀로지스) is a Seoul-headquartered AI-fintech that builds quantitative investment products — AI-managed ETFs, an AI hedge fund, and market-intelligence execution engines — and its homepage…
Together AI
Brands · Inter
AI inference platform with a sleek dark aesthetic — deep navy-black surfaces, electric blue-purple brand gradient, and API-first developer UI.
Revolut
Brands · Aeonik Pro
Revolut's marketing canvas operates in a high-contrast two-mode system: a near-black storytelling canvas (#000000) that hosts hero bands, product mockups, and the planning section, alternating with white catalogue…
Cal.com
Brands · Inter
Open-source scheduling infrastructure with a developer-friendly, minimal aesthetic — dark surfaces, crisp whites, and calendar-driven UI patterns.