The cloudgroup logo has three forms: the standalone cloud icon, the lockup (icon + wordmark), and the favicon. The lockup is the primary mark and should be used in most contexts.
Icon — light bg
Icon — dark bg
Icon — neutral bg
cloudgroup
Lockup — light background (primary use)
cloudgroup
Lockup — dark background
Wordmark: Always lowercase “cloudgroup” — never “Cloudgroup” or “CloudGroup”
Font: Outfit, weight 700, letter-spacing -0.3px
Gap: 1px between icon and wordmark, bottom-aligned (icon base = text baseline)
Icon alone: Use for favicons, app icons, and small UI contexts only. The lockup is preferred in all other cases.
Minimum size: Lockup should not appear smaller than 120px wide. Icon alone should not appear smaller than 16px.
Clear space: Maintain a minimum clear space equal to the icon height on all sides of the logo.
02
Color Palette
The cloudgroup palette is professional and restrained. Blue is the primary accent; the gradient is used only on the cloud icon. Backgrounds are always light.
Brand Gradient (logo only)
Cloud Gradient
#4A90D9 → #6C5CE7
Primary
Blue
#4A90D9
Dark
#1A1D2B
Grey
#5A6178
Backgrounds & Neutrals
Page Background
#FAFBFC
Card / Surface
#FFFFFF
Subtle Background
#F3F5F8
Border
#E2E6EE
Muted Text
#9098AD
03
Typography
Two typefaces. Outfit for headings, the logo, and display text. Inter for body copy and UI text. Both are available on Google Fonts and work well in Google Docs.
Outfit 700 · Headings & Logo
The quick brown fox jumps over the lazy dog
Outfit 600 · Subheadings & Labels
The quick brown fox jumps over the lazy dog
Inter 400 · Body Text
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.
Element
Font
Weight
Size
Color
Logo wordmark
Outfit
700
Contextual
#1A1D2B or #E8EAF0
Page heading (H1)
Outfit
700
36–56px
#1A1D2B
Section heading (H2)
Outfit
700
26–36px
#1A1D2B
Subsection (H3)
Outfit
600
16–20px
#1A1D2B
Section label
Outfit
600
11px
#4A90D9
Body text
Inter
400
14–17px
#5A6178
Small / caption
Inter
400
12–13px
#9098AD
Google Docs note: Outfit is available in Google Fonts and works natively in Google Docs. Inter is not in Google Docs by default — use Arial as the body font substitute in Google Docs. It renders cleanly and is universally available.
04
Heading Hierarchy
All headings use Outfit with tight letter-spacing. Sizes are responsive via clamp() on larger headings. The hierarchy creates clear visual levels from page title down to subsection labels.
H3 · Subsection Title · Outfit 600, 16–20px, letter-spacing -0.3px
Prep Phase: Define Your Product
H4 · Step / Detail Title · Outfit 600, 16px, letter-spacing -0.2px, Blue accent
Step 1: Start Claude & Upload Prompt
Section Label · Outfit 600, 11px, uppercase, letter-spacing 0.14em, Blue
HOW IT WORKS
Level
Font
Weight
Size
Letter-spacing
Color
H1 (page title)
Outfit
700
clamp(36px, 5vw, 56px)
-1.5px
#1A1D2B
H2 (section title)
Outfit
700
clamp(26px, 3vw, 36px)
-0.8px
#1A1D2B
H3 (subsection)
Outfit
600
16–20px
-0.3px
#1A1D2B
H4 (step/detail)
Outfit
600
16px
-0.2px
#4A90D9
Section label
Outfit
600
11px
0.14em
#4A90D9
Body text
Inter
400
15px
normal
#5A6178
Hero subtitle
Inter
400
17px
normal
#5A6178
Caption / small
Inter
400
12–13px
normal
#9098AD
Line height: Headings use 1.1–1.15. Body text uses 1.6–1.65.
Responsive: H1 and H2 use clamp() for fluid sizing. Below 768px, H1 settles at 36px and H2 at 26px.
05
Buttons & CTAs
Buttons use Outfit for their labels. The primary button is dark navy with white text — not blue. The secondary button is outlined with a subtle border. Both use 10px border-radius.
Links: In-page links use #4A90D9 with underline on hover. Nav links use #5A6178 with color transition to #1A1D2B on hover (no underline).
Sections: Content sections are separated by 1px solid #E2E6EE borders, with 56px vertical padding.
07
Document Template
Standard formatting for client-facing Google Docs. Keep it clean and professional — the brand speaks through restraint, not decoration.
Element
Google Docs Setting
Title
Outfit, 28pt, Bold, color #1A1D2B
Heading 1
Outfit, 22pt, Bold, color #1A1D2B
Heading 2
Outfit, 16pt, Bold, color #1A1D2B
Heading 3
Outfit, 13pt, Bold, color #4A90D9
Body text
Arial, 11pt, color #5A6178, line spacing 1.3
Page margins
1 inch all sides (default)
Header
Cloud icon + “cloudgroup” lockup, left-aligned, small
Footer
“cloudgroup.com” centered, 9pt, color #9098AD
Tip: Create a Google Docs template with these styles saved. Then use File → Make a copy for each new document. This is faster than generating .docx files and converting.
08
Email Signature
Gmail-compatible HTML signature. Minimal, professional, brand-aligned.
Image setup: Upload cloudgroup-icon-64.png to your Google Drive or hosting. Replace [CLOUD_ICON_URL] with the direct image URL. Gmail can also insert images from Drive via the signature editor's image button.