Cloud Tower

Cloud Tower is an enterprise design system built for complex data-rich applications. Anchored in trustworthy blues and clean whites, it communicates reliability, scalability, and clarity. The system is optimized for dashboards, data tables, and multi-step workflows where information density must coexist with visual clarity.

Primary#00A1E0
Secondary#032D60
Neutral#F4F6F9
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Display FontNunito Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body FontNunito Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Code FontSource Code Pro · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Table DataNunito Sans · 11px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Table BodyNunito Sans · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Small BodyNunito Sans · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyNunito Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Section Title (h5)Nunito Sans · 16px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Card Header (h4)Nunito Sans · 20px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Section Title (h3)Nunito Sans · 24px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Page Title (h2)Nunito Sans · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Hero Title (h1)Nunito Sans · 40px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Cloud Tower is an enterprise design system built for complex data-rich applications. Anchored in trustworthy blues and clean whites, it communicates reliability, scalability, and clarity. The system is optimized for dashboards, data tables, and multi-step workflows where information density must coexist with visual clarity.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

status-successstatus-warningstatus-errorneutral

DataTable

default

row

Elevation & Depth

Level 1
Level 2
Level 3
Navigation Header

Do's & Don'ts

Do

use the 12-column grid system for dashboard layouts to maintain alignment across complex views
use data tables with proper column alignment (numbers right-aligned, text left-aligned)
provide compact (36px) variants of buttons and inputs for data-dense views
use status chips consistently — green for success, orange for warning, red for error
maintain 16px minimum touch targets even in compact layouts for accessibility

Don't

use more than 3 levels of elevation on a single screen — keep the hierarchy clear
use the dark navy (#032D60) for large body text areas; reserve it for headings and navigation
rely solely on color to communicate status; pair with icons and labels
use custom colors outside the palette for charts; use defined blue (#00A1E0), navy (#032D60), green (#04844B), orange (#FF9A3C), and gray (#706E6B) for data visualization
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 6.8 KB
Downloads 97
Copies 26
clean dashboard enterprise professional

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/cloud-tower and implement it in my code

Don't have the MCP? Install it here