✦ Living style guide

Cloud Nimbus Design System

The visual language of cloudnimbusllc.com — colors, type, components, and patterns. A living reference for the team and the AI agents that build here.

View DESIGN.md →Back to Home
01

Color Palette

Slate is the neutral spine. Sky is the primary accent. Amber→Orange is the action gradient. Everything else is accent — used sparingly.

Slate (neutrals)

slate-900
#0f172a
slate-800
#1e293b
slate-700
#334155
slate-600
#475569
slate-500
#64748b
slate-400
#94a3b8
slate-200
#e2e8f0
slate-50
#f8fafc

Sky (primary accent)

sky-700
#0369a1
sky-600
#0284c7
sky-500
#0ea5e9
sky-400
#38bdf8
sky-200
#bae6fd
sky-50
#f0f9ff

Blue (secondary)

blue-700
#1d4ed8
blue-600
#2563eb
blue-500
#3b82f6

Amber → Orange (action gradient)

amber-500
#f59e0b
amber-400
#fbbf24
orange-500
#f97316
orange-400
#fb923c

Emerald (success / featured)

emerald-600
#059669
emerald-500
#10b981
emerald-400
#34d399

Violet (premium / alt)

violet-600
#7c3aed
violet-500
#8b5cf6
violet-400
#a78bfa

Signature Gradients

Hero gradient
bg-gradient-to-br from-slate-900 via-slate-800 to-sky-900
Action gradient
bg-gradient-to-r from-amber-500 to-orange-500
02

Typography

System sans-serif. font-black for the big stuff, font-bold for cards and CTAs, leading-relaxed for body. Tracking tight on headings.

Ship Salesforce Software That Works
H1 — Hero (light bg)text-5xl sm:text-6xl lg:text-7xl font-black tracking-tight leading-[1.1] text-slate-900
Build Faster. Ship Cleaner.
H1 — Hero (dark bg)text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight text-white
What Is Delivery Hub?
H2 — Section titletext-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-slate-800
Cross-org sync that just works
H3 — Card titletext-xl font-bold text-slate-800
A free, Salesforce-native project management platform with 100+ features. No per-seat fees.
Body — Largetext-lg sm:text-xl text-slate-600 leading-relaxed
Delivery Hub is what we use to run Cloud Nimbus, and we ship it as a free unlocked package on the AppExchange.
Body — Defaulttext-base text-slate-600 leading-relaxed
Last updated April 6, 2026 · 8 min read
Body — Smalltext-sm text-slate-500
Featured release
Micro / eyebrowtext-xs font-medium uppercase tracking-wider text-slate-500
03

Buttons & CTAs

The amber→orange gradient is the brand action color — use it for the primary CTA on every page. Secondary CTAs are bordered (light or dark variant).

Primary CTA — Action
bg-gradient-to-r from-amber-500 to-orange-500 ... hover:-translate-y-0.5
In-page button — Blue
px-5 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700
Secondary CTA — On dark
border-2 border-white/30 hover:bg-white/10
Secondary CTA — On light
border border-slate-300 hover:bg-slate-50
04

Cards

Always rounded-2xl. Always border-slate-200. Subtle shadow on rest, lift on hover. Featured cards add a sky tint and a top accent bar.

Standard Card

Default content card. Used for features, blog excerpts, and generic content blocks.

Featured

Featured Card

For highlighted content. Adds sky tint, top accent bar, and a "Featured" badge.

Most Popular

Pricing Card

$0/mo

For pricing tiers. Adds emerald ring + xl shadow.

05

Badges & Tags

Pill-shaped, small, used for categorization and metadata. Always rounded-full.

Article tags (sky)
SalesforceArchitectureCross-Org SyncDeep DiveAI Development
Status badges
LiveIn ProgressOverdueDone
Hero eyebrow badges
✦ NewLive nowSpring 2026
06

Layout & Spacing

max-w-7xl is the default container. py-20 is the default section padding. Mobile-first with sm/lg breakpoints.

max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20
1280px max width
Standard content container
max-w-7xl
1280px
Default grids
max-w-6xl
1152px
Tighter content
max-w-4xl
896px
Article body
max-w-3xl
768px
Long-form copy
py-20
80px
Section padding
py-16
64px
Tight section
07

Icon Containers

Rounded squares with a soft gradient background. Always rounded-xl, never circular.

08

Do's and Don'ts

The rules that keep everything coherent. Break these and the site stops feeling like itself.

✓

Do

  • • Use the slate-900→sky-900 gradient for every hero
  • • Pair every primary CTA with the amber→orange gradient
  • • Use font-black + tracking-tight for H1 and H2
  • • Always include dark: variants
  • • Use rounded-2xl for content cards
  • • Wrap sections in max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
  • • Add hover:-translate-y-0.5 to interactive elements
  • • Use leading-relaxed for body copy
✗

Don't

  • • Don't use bg-gradient on text (use solid colors)
  • • Don't use pure white for entire pages — alternate with slate-50
  • • Don't use shadow-2xl or shadow-inner — too heavy
  • • Don't use text-gray-* — use text-slate-* (same scale, brand consistency)
  • • Don't use rounded-md or rounded-3xl — stick to the scale
  • • Don't use font-thin or font-extralight
  • • Don't put more than two CTAs in a hero
  • • Don't introduce new accent colors
09

For AI Agents

Building this site? Read DESIGN.md and follow these instructions. The faster you align to the system, the less rework.

# When asked to build a new page or component for cloudnimbusllc.com:

1. Always start with a hero section using:
   bg-gradient-to-br from-slate-900 via-slate-800 to-sky-900

2. Use max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 as the content container

3. Section padding is py-20 (py-16 for tight, py-24 for generous)

4. Cards are always:
   rounded-2xl border border-slate-200 shadow-sm hover:shadow-lg

5. Primary CTAs are always:
   bg-gradient-to-r from-amber-500 to-orange-500 (never blue or sky)

6. Headings always use:
   font-black tracking-tight text-slate-800

7. Always include dark: variants for light/dark classes

8. Reference DESIGN.md in the repo root for the full spec.
Open DESIGN.md →See it in action

This page is generated from DESIGN.md. If you want to fork this design system for your own site, copy that file.