One brand.
Every surface.
Infinite trust.
The complete guideline framework for the Cloud Fixation platform — strategy, assets, tokens, voice, and implementation rules unified into a single living reference for design, engineering, and marketing teams.
Strategy & Purpose
Everything in this framework traces back to one mission. If a design or copy decision can't be justified by a pillar below, it doesn't ship.
Core mission
Cloud Fixation delivers high-fidelity, intelligent cloud-native utility applications. We architect modern toolnets that prioritize continuous AI automation, responsive clarity, and absolute security structures.
Manifesto tagline
“Infinite possibilities, infinite trust”
The tagline is a fixed asset. Never translate, restyle, truncate, or append to it.
Identity pillars
Obsessive precision
Layout coordinates stay razor-sharp, flat, and perfectly balanced. Spacing is tokenized — never eyeballed.
Algorithmic trust
Interfaces look deliberate and protective, especially in security and credential-vault components. Nothing flashes, nothing surprises.
Intelligent clarity
AI automation is shown, not shouted. The product explains what it did and why, in plain language, every time.
The first two pillars carry over from Workbook v1. Intelligent clarity is added in v2.0 to govern how AI-driven features are presented across UI copy and marketing.
Logo & Mark
The signature mark is a single continuous infinity loop flowing up into a structured cloud dome, with a central connectivity point representing the AI logic core.
Wordmark rules
Alongside the vector icon, the company name is always set as two distinct words — “Cloud Fixation”. The wordmark is presented in true hex black (#0B0F19) over light canvases.
Wordmark face: Space Grotesk 700, letter-spacing +1%. Never set the wordmark in gradient fills, outlines, or shadows.
Clear space & minimum size
Clear zone — 50% rule
An absolute clear zone equal to 50% of the total graphic height applies on all sides. No background elements, text fields, or UI controls may intrude into this boundary.
Minimum reproduction size
Digital: 24 px mark height. Print: 8 mm mark height. Below these thresholds, use the connectivity-dot favicon variant only.
Misuse — never do this
Color System
Deep engineering trustworthiness balanced with vibrant, futuristic energy. Every value below is a named token — click any hex to copy it.
Primary accents
Canvas surfaces
Functional extensions NEW IN V2
Usage proportion
Surfaces dominate; accents punctuate. Hold roughly this ratio on any screen or layout:
Electric Blue is a highlight, not a workhorse. It marks the active element — one focus ring, one active tab, one live indicator per view. For text on light canvases use Deep Cyan instead (see Chapter 08).
Typography
Three faces, three jobs. Space Grotesk gives headlines the same engineered geometry as the loop mark; Inter carries long-form reading; JetBrains Mono handles tokens, data, and code.
Headlines, section titles, wordmark
Letter-spacing −1% above 28 px
Paragraphs, UI labels, forms
16 px base · 1.65 line height
Code, tokens, metadata, eyebrows
Uppercase + 10–18% tracking for labels
Type scale
| Display XL — 56/1.06 | Space Grotesk 700 · hero headlines only |
| Display L — 32/1.2 | Space Grotesk 700 · chapter and page titles |
| Heading — 18–22/1.3 | Space Grotesk 600 · card and panel titles |
| Body — 16/1.65 | Inter 400 · default reading size, never below 14 px |
| Label — 13/1.4 | Inter 600 · form labels, buttons |
| Micro — 11–12/1.5 | JetBrains Mono 500 · eyebrows, badges, metadata |
Web embeds load from Google Fonts; desktop and print teams install licensed OTFs from the asset vault. Fallback stack: 'Helvetica Neue', Arial, sans-serif — the v1 workbook face remains the system fallback.
Iconography
Icons inherit the mark's DNA: continuous strokes, rounded caps, no fills. One visual language from the logo down to a 16-pixel glyph.
Construction rules
24×24 px grid · 2 px stroke · round caps and joins · 2 px internal padding · outline style only. Fills are reserved for the single connectivity dot when an "active/AI" state is needed.
Color rules
Default #0B0F19 on light, #FFFFFF on dark. Active state: Electric Blue stroke. Never gradient strokes, never two-tone icons.
Source new glyphs from the shared icon library before drawing custom ones. Custom icons require a geometry review against the 24 px grid prior to merge.
Voice & Tone
Cloud Fixation sounds like a precise engineer who respects your time: confident, specific, calm. The voice never changes; the tone flexes by context.
Voice principles
Precise, not jargon-heavy
Name what the user controls, not how the system is built. "Your vault locked automatically" — not "credential persistence layer engaged."
Confident, not boastful
State capability plainly and let specifics carry the weight. Numbers over adjectives; "encrypts in under 40 ms" beats "blazingly fast."
Protective, not alarmist
Security copy reassures by being exact. Say what happened, what's protected, and the next step — never dramatize risk.
Writing rules in practice
Tone by channel
| Channel | Tone dial | Example |
|---|---|---|
| Product UI | Neutral, instructive, terse | "Save changes" · "2 alerts need review" |
| Security & vault flows | Calm, exact, protective | "Session expired after 15 minutes of inactivity. Sign in to continue." |
| Marketing web | Confident, visionary, concrete | "One toolnet. Every workflow. Zero manual handoffs." |
| Social | Sharp, technical-curious | "We cut cold-start latency 38%. Here's the architecture." |
| Docs & support | Patient, step-by-step | "Run the command below, then verify the token in Settings → API." |
| Incident comms | Transparent, factual, timestamped | "14:02 UTC — elevated API errors identified. Mitigation in progress." |
Vocabulary locks: it's a vault (not locker), a toolnet (not suite), AI automation (not "magic" or "smart features"). The tagline appears verbatim or not at all.
UI Components
Deliberate padding and soft 8-pixel corners make complex data tools feel approachable and scannable. Toggle the canvas to verify every component holds up on both surfaces.
Credential sync
14 items synced across 3 devices. Last automation ran 2 minutes ago.
Component rules
Primary action
Indigo→purple gradient, white bold label, 8 px radius. One per view. Hover lifts 1 px with a purple glow shadow.
Inputs
1 px slate border at rest; focus expands to an Electric Blue border with a 4 px soft halo (rgba(0,210,255,.15)).
Containers
Cards and modals use 16 px radius; interactive controls use 8 px. Dark-app surfaces use #111827 panels on #0B0F19 canvas.
Production design tokens
/** CLOUD FIXATION BRAND TOKENS · v2.0 · save as brand-tokens.css */
:root {
/* Color palette */
--cf-brand-blue: #00d2ff; --cf-brand-purple: #8e2de2;
--cf-brand-indigo: #4a00e0; --cf-brand-black: #0b0f19;
--cf-brand-white: #ffffff; --cf-slate: #f8fafc;
--cf-deep-cyan: #0077a3; /* accessible text variant — v2 */
--cf-success: #0e9f6e; --cf-warning: #c27803; --cf-danger: #dc2626;
/* Typography — v2 */
--cf-font-display: 'Space Grotesk', sans-serif;
--cf-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--cf-font-mono: 'JetBrains Mono', monospace;
/* Geometry */
--cf-border-standard: 1px solid #e2e8f0;
--cf-border-dark-app: 1px solid #1f2937;
--cf-radius-component: 8px; --cf-radius-container: 16px;
/* Motion */
--cf-ease: cubic-bezier(0.4, 0, 0.2, 1);
--cf-dur-fast: 150ms; --cf-dur-base: 250ms; --cf-dur-slow: 450ms;
--cf-gradient-action: linear-gradient(135deg, var(--cf-brand-indigo) 0%, var(--cf-brand-purple) 100%);
}
Accessibility
Algorithmic trust includes everyone. All shipped surfaces meet WCAG 2.2 AA. The matrix below shows the measured contrast of every brand pairing — including the ones that fail.
| Pairing | Ratio | WCAG result | Permitted use |
|---|---|---|---|
| Electric Blue on White | 1.8 : 1 | Fail | Decorative only — never text or essential icons on light canvases |
| Deep Cyan on White | 5.0 : 1 | AA | Links and accent text on light canvases — the accessible blue |
| Electric Blue on Matte Black | 10.6 : 1 | AAA | Text, icons, active states on dark surfaces — unrestricted |
| Neon Purple on White | 5.8 : 1 | AA | Normal text and UI on light canvases |
| Neon Purple on Matte Black | 3.3 : 1 | AA Large | Large text (≥ 24 px / 19 px bold) and UI outlines only |
| Royal Indigo on White | 8.9 : 1 | AAA | Text and UI on light canvases — unrestricted |
| White on Action Gradient | 5.8–8.9 : 1 | AA | Button labels — bold weight required; ratio measured at lightest gradient stop |
| Matte Black on White | 19.2 : 1 | AAA | Default body text pairing |
Non-negotiables
Focus is always visible
Every interactive element shows a 2 px Electric Blue focus ring (light canvas: pair with the 4 px halo). Never outline: none without a replacement.
Motion can be declined
All animation respects prefers-reduced-motion. Nothing essential is communicated by motion alone.
Color is never the only signal
Pass/fail, alerts, and states pair color with an icon or label. Minimum target size 24×24 px; body text never below 14 px.
Motion
Motion confirms; it never decorates. One easing curve, three durations, and a strict rule: if it doesn't help the user understand what just happened, cut it.
Fast · 150 ms
Base · 250 ms
Slow · 450 ms
Rules
One curve
Everything eases with cubic-bezier(0.4, 0, 0.2, 1). No bounce, no elastic, no spring physics — playfulness contradicts algorithmic trust.
One signature moment
The animated loop-draw of the mark (as in this document's hero) is reserved for page loads and product launches. Maximum once per session.
Applications
How the system lands on real surfaces — social, email, and print. Specs first, then a reference treatment for each.
Here's the architecture.
cloudfixation.io
| Canvas | Cyber Matte Black, 1080×1080 / 1200×675 |
| Headline | Space Grotesk 700, white, max 2 lines |
| Accent | Mono eyebrow in Electric Blue (AAA on black) |
| Mark | Bottom-left, reversed variant, 50% clear zone held |
Cloud Fixation
Your vault report for May: 312 automations ran, 0 incidents.
View full report| Layout | 600 px single column, white canvas |
| Typography | Inter via web-safe fallback; Space Grotesk in header image only |
| CTA | One gradient button per email, bold white label |
| Links | Deep Cyan #0077A3 — never Electric Blue on white |
Print & stationery
| Document grid | A4 · 20 mm top/bottom · 15 mm sides (per Workbook v1 page spec) |
| Color conversion | Electric Blue → Pantone 306 C · Neon Purple → 2592 C · Indigo → 2736 C; CMYK proofs approved by brand team before run |
| Mark usage | Full-color on white stock only; single-color reversed white on matte black stock |
| Minimum sizes | Mark 8 mm height · body text 9 pt Inter · footer meta 7.5 pt JetBrains Mono |
Governance
A guideline only works if it's enforced and maintained. This chapter defines who owns what, how changes ship, and what compliance means.
Ownership
The brand team owns chapters 01–06 and 10; design systems engineering owns 07–09. Token changes require sign-off from both.
Versioning
Semantic versions: patch = copy fixes, minor = new tokens/components, major = visual identity changes. Tokens ship as brand-tokens.css tagged releases; products pin a version.
Review cadence
Quarterly audit of live surfaces against this framework. Accessibility matrix re-measured whenever any color token changes.
Compliance agreement
All layout blocks, software repositories, and user-interface modules developed for the Cloud Fixation platform must adhere to the token references defined in this workbook. Exceptions require a written waiver from the brand team with an expiry date — there are no permanent exceptions.
Asset requests & escalation
Need an asset?
Logo files, font licenses, Pantone sheets, and social templates live in the brand asset vault. Request access through the design systems channel — never recreate assets from screenshots.
Found a violation?
Flag it with a screenshot and the chapter it breaches. The owning team triages within one sprint; live customer-facing breaches of chapter 08 are fixed as priority defects.