01 — SnowOps Brand & Design System (LOCKED: "Signal")¶
Status: LOCKED — direction "Signal" selected 2026-07-16 (Sagar); logo mark "Signet" selected 2026-07-17. This is the visual language every SnowOps client asset inherits. The direction and tokens below are decided — a designer/design AI should treat them as fixed, not suggestions. The logo vector master is produced (
brand/logo/), pending IP clearance before public launch (§2).This is asset PA00 and the P0 blocker for everything else. A live, interactive preview of the four candidate directions (Signal is the default) is published at the artifact linked from the session that produced this plan; Signal is the one described here.
Why "Signal": SnowOps sells to founders/CTOs who are under pressure — an audit is looming or a deal is blocked. The brand's job is to lower their cognitive load and arousal so they can absorb dense material, then direct their attention to the single next action. Signal is engineered around documented attention/perception principles (see §0.1) for maximum focus, retention, and conversion across every asset. It is the calm, high-performing default.
0. Design brief for the brand system itself¶
Deliverable (PA00): a complete brand kit — 1. Logo — primary lockup (mark + wordmark), horizontal and stacked variants, a standalone mark/favicon, and mono (1-color) versions for light and dark backgrounds. 2. Color tokens — the locked hex values in §3, plus accessible text/background pairings (WCAG AA). 3. Type scale — the locked pairing in §4 with a defined heading/body/mono scale. 4. Icon, diagram & data-viz style — the rule set in §5. 5. Two master templates — one slide template (16:9) and one document/report template (A4 + US Letter). Between them they cover ~80% of the assets in this plan. 6. A one-page "mini brand sheet" the founders can hand to any future tool.
Design intent (the feeling): engineered, precise, trustworthy, calm. The visual world of a senior developer-infrastructure company (the polish of Vercel / Linear / Stripe docs / HashiCorp) — not a generic IT consultancy, and not "cheap outsourcing." Restraint and craft signal seniority.
0.1 The principles Signal is built on (so you know why the tokens are what they are)¶
Every choice below maps to an established perception/UX principle — keep them intact when you produce assets:
| Principle | How Signal applies it |
|---|---|
| Cognitive Load Theory | A deliberately calm base (few colors, generous whitespace, one idea per view) so a stressed reader can sustain attention through a long audit report. |
| Isolation effect (Von Restorff) | One warm "Action" color, used nowhere except the single call-to-action per view, so the eye finds the CTA by contrast — not by being shouted at. This is the primary conversion lever. |
| Reduced visual fatigue | Warm off-white ground instead of stark white (less glare/halation); near-black warm ink instead of pure #000; warm off-white text on dark instead of pure #FFF. Lets people read longer. |
| Color–trust association | A calm, deep trust-blue carries all structure (headers, links, rules) — blue reliably reads as competence/stability, apt for a security/compliance firm. |
| Approachable geometry (curved-contour preference) | Soft rounded corners, not sharp facets — curved contours read as less threatening and more approachable to an anxious buyer. |
| Legibility → comprehension → retention | A high-legibility humanist typeface, comfortable measure (~60–75 chars), generous line-height. |
| Mere-exposure effect | One consistent system across every asset (cold email → audit → proposal → QBR) builds familiarity → trust → conversion. This is why locking one system matters more than which system. |
| Instant status parsing | A fixed semantic trio (pass/warn/fail) kept visually separate from the Action color, so audit data reads at a glance. |
Honest scope: design lowers friction and directs attention — it does not manufacture demand. The conversion ceiling is set by the offer and the copy (both already strong). Signal compounds them; it doesn't replace them.
1. The name & the metaphor¶
SnowOps = Snow + Ops (operations). "Snow" evokes clean, precise, clear, structured — a fitting metaphor for "compliant by construction." That idea is expressed through clarity, precision, and certification rather than literal winter imagery: the calm ground, the crisp hierarchy, and the Signet mark (§2) all say "precise, verified, engineered." Avoid literal winter kitsch (no snowmen, no holiday framing).
2. Logo — "Signet" (LOCKED; vector master produced, pending IP clearance)¶
Mark: the Signet — a stone seal cleft clean through by a checkmark of negative space. The stone is the Trust-blue (with a slightly lighter right shard for dimension); the small shard the cut creates is the Action color (persimmon). The name shares the Latin root signum with the "Signal" system — a signet is the seal pressed into wax to certify a document. The mark is the thesis: everyone else prints a checkmark on a badge; ours runs through the material — compliant by construction, not bolted on.
Why it's the strongest option (the psychology): - Generation effect (the "FedEx-arrow" move): the check isn't drawn, it's discovered in the void. Self-generated insight is encoded deeper than what's shown, and the small "aha" is credited to the brand as positive feeling. - Processing fluency → trust: describable in one breath ("a stone with a check cut through it"). - Isolation effect, structural: the single warm element is a consequence of the cut, not decoration; the eye enters at the persimmon shard and travels the rising diagonal (reads as progress). - Seal schema + hand-tuned asymmetry: centuries of document-certification trust, drawn with a deliberately imperfect (non-primitive) silhouette so it reads as made, not templated.
Wordmark: "SnowOps" in the display face (§4), weight 700 — "Snow" in Ink, "Ops" in Trust-blue (ties the wordmark to the mark).
- Vector master: produced and on disk at
brand/logo/— mark (color / on-dark / mono-black / mono-white), favicon (wider check carve for small sizes), horizontal + stacked lockups, with a README covering construction, the wordmark-outlining step, and PNG export. Verified on light/dark and down to small sizes. - Construction: an SVG
<mask>subtracts the check (a stroked path) from the stone, so the check is a true knockout (transparent — it takes the color behind it). Three flat fills paint stone / right shard / persimmon shard. - Color rule: the Action color appears only on the cut shard — never recolor the whole stone with it (isolation-effect discipline, §3). In mono the whole mark is one ink and the check still reads as a cut.
- Clear space & min size: clear space ≥ ½ the mark height; minimum mark 16px (use the favicon carve at ≤24px); wordmark ≥ 90px wide.
- Avoid: filling the check with color (it must stay a knockout), gradients, shadows, rotation, or stretching.
- ⚠️ Pending IP clearance: run a reverse-image search (Google Images + TinEye) on an exported PNG and a trademark search (USPTO / EUIPO / IP India, SaaS/IT classes) on the device mark before public launch. Negative-space checks are a known device; this composition is distinctive, but clearance is a real gate.
3. Color system (LOCKED)¶
A restrained palette: a warm calm ground, one Trust-blue for all structure, one reserved Action color for CTAs only, and the load-bearing semantic trio for audit/compliance status. Full light and dark palettes below — produce every screen/deck asset in both; print/report assets default to light.
3.1 Light palette (default — reports, proposals, documents)¶
| Role | Token | Hex | Use |
|---|---|---|---|
| Page ground | --bg |
#FBFAF6 |
Warm off-white — report/document background (lower glare than pure white) |
| Surface / panel | --panel |
#FFFFFF |
Cards, callouts, table fills |
| Ink (primary text) | --ink |
#1B1C1A |
Warm near-black — body text, headings |
| Muted text | --muted |
#6C6E67 |
Secondary text, captions, metadata |
| Border / rule | --border |
#E7E4DC |
Hairlines, dividers, table rules |
| Trust blue (brand/structure) | --accent |
#2B4C7E |
Links, headers, key labels, diagram emphasis, the "Confidential —" line |
| Action (CTA only) | --action |
#EE6C4D |
Accents/underlines on the single call-to-action |
| Action — button fill | --action-strong |
#D9552F |
Filled CTA buttons with white text (darker so #FFFFFF meets WCAG AA) |
| Success / pass | --pass |
#1F7A5A |
"Compliant / pass" status |
| Warning | --warn |
#B07D2B |
"Needs attention" findings |
| Critical / fail | --crit |
#9B2D24 |
"Critical gap" findings |
3.2 Dark palette (on-screen dashboards, projected decks, dark-mode reports)¶
| Role | Token | Hex | Use |
|---|---|---|---|
| Page ground | --bg |
#141310 |
Warm near-black (not pure black) |
| Surface / panel | --panel |
#1D1C18 |
Cards |
| Surface raised | --panel-2 |
#24231E |
Popovers, raised tiles |
| Ink (primary text) | --ink |
#ECEAE2 |
Warm off-white (not pure white — less halation) |
| Muted text | --muted |
#9A988C |
Secondary text |
| Border / rule | --border |
#302E28 |
Hairlines |
| Trust blue | --accent |
#7BA6DE |
Lifted for legibility on dark |
| Action (CTA only) | --action |
#F07C5C |
CTA accents |
| Action — button fill | --action on dark |
#F07C5C with ink #141310 |
On dark, use dark ink on the persimmon fill for AA contrast |
| Success / pass | --pass |
#57C08F |
|
| Warning | --warn |
#E4AC52 |
|
| Critical / fail | --crit |
#EC7468 |
3.3 Color rules (non-negotiable)¶
- The Action color is reserved. It appears only on the one primary call-to-action per view (the "Start with a free Discovery Audit" button, and the mark's center dot). Never use it for decoration, body emphasis, or a second competing button. This reservation is what makes it convert — spend it once per view.
- Distinguish Action from Critical by role, not just hue. They are both warm; keep them apart by shape/context — Action is always a solid filled CTA button/accent; Critical is always a small status chip/marker, never a button. A reader never sees them play the same role.
- The semantic trio (pass/warn/fail) is load-bearing and fixed. It appears in every audit report, coverage matrix, dashboard, and QBR. Never use green/amber/red as decoration elsewhere, so the client learns to read status instantly.
- Never rely on color alone for status — always pair with an icon or text label (accessibility + grayscale print).
- WCAG AA everywhere. Ink/muted on ground pass AA. For filled CTAs: light mode uses
--action-strong+ white text; dark mode uses--action+ dark ink. Verify any new pairing at AA before shipping.
4. Typography (LOCKED)¶
A high-legibility humanist sans for display and body (one family, two roles), plus a monospace for the code, file paths, and IDs that appear throughout SnowOps assets. All free and widely available.
| Role | Font | Weights | Notes |
|---|---|---|---|
| Display / headings | IBM Plex Sans | 600 / 700 | Humanist, confident, highly legible — reads as engineered, not loud |
| Body | IBM Plex Sans | 400 (500 for labels) | Same family = coherence; excellent at small sizes in dense reports |
| Monospace | IBM Plex Mono | 500 / 700 | File paths (modules/azure/…), resource IDs, terraform, finding codes — a credibility signal to technical buyers |
- Acceptable alternate if IBM Plex is unavailable in a tool: Inter (display + body) with JetBrains Mono. Do not mix families across assets — pick one pairing and keep it everywhere.
- The monospace is not optional decoration — rendering real paths/IDs in mono is a trust cue for the engineer buyer. Use it wherever code, paths, or IDs appear.
Type scale (px):
| Level | Size / line-height | Weight |
|---|---|---|
| Display | 40 / 1.15 | 700 |
| H1 | 28 / 1.25 | 700 |
| H2 | 20 / 1.3 | 600 |
| H3 | 16 / 1.4 | 600 |
| Body | 16 / 1.6 | 400 |
| Body small | 14 / 1.55 | 400 |
| Label / eyebrow | 12 / 1.4, letter-spacing: .06em, uppercase |
600 |
| Caption | 12 / 1.4 | 400 |
| Mono | 13 / 1.5 | 500 |
Keep running text to a ~60–75 character measure. Give headings text-wrap: balance.
5. Iconography, diagrams & illustration¶
- Icons: thin-to-medium line icons, geometric, consistent stroke weight (Lucide/Feather style). No filled 3D or skeuomorphic icons.
- Geometry: soft rounded corners —
--radius-card: 12px,--radius-surface: 10px,--radius-control: 8px. This approachable geometry is part of Signal's low-arousal intent; don't substitute sharp/faceted corners. - Diagrams are a first-class asset. Architecture diagrams appear in audits, proposals, reference architectures, and handovers. Style: neutral warm surfaces, Trust-blue for emphasis, semantic colors only for status, Azure service icons where accurate, mono labels. The Action color does not appear in diagrams (it's reserved for CTAs). The V2 tool emits d2lang → SVG; the diagram theme must harmonize with that output.
- Data viz: audit reports, matrices, dashboards, QBRs are data-heavy. One chart style: semantic trio for status; Trust-blue + a neutral gray ramp for non-status series; generous whitespace; clear labels;
tabular-numsfor aligned figures. (See the repo'sdatavizskill conventions if using Claude tooling.) - Motif: the Signet's negative-space check + rising diagonal (from the mark) is the recurring visual signature — the "cut through the material" line can echo as a subtle section divider or a very-low-contrast background accent, and the rising-diagonal angle can key card/callout accents. A faint grid is an acceptable secondary texture. Don't overdo either.
- Photography: minimal. This is an engineering brand — abstract/technical/geometric imagery beats stock photos of people. Avoid generic "handshake/teamwork" stock.
6. Layout & system rules¶
- Grid: consistent column grid (12-col web/deck; A4/Letter document margins ≥ 20mm). Generous whitespace — seniority reads as restraint, and whitespace is what keeps cognitive load low.
- Consistent components across every asset (so a client sees one coherent brand from cold email to QBR):
- Finding/status chip: pass ● / warn ● / fail ● with label — identical everywhere, using the semantic trio,
--radius-controlcorners. - CTA button: the single primary action per view — filled with
--action-strong(light) /--action+ dark ink (dark),--radius-control. One per view, never two. - Callout box: for the category line, key claims, "what this means for you" — panel fill, Trust-blue left emphasis or heading.
- Roadmap tag: a visible, consistent (roadmap) label (required by the compliance-claim rule) — a small outlined chip, muted, never colored like a status.
- Asset footer: SnowOps mark + confidentiality note + page number on every multi-page document.
- Cover pattern: shared cover for reports/proposals/decks — mark top-left, wordmark top-right, "Confidential — prepared for ⟨Client⟩" in Trust-blue, title in display, metadata in mono.
- Confidentiality: audit reports, posture reports, and proposals contain a client's real security posture. Every such asset carries a "Confidential — prepared for ⟨Client⟩" treatment. Make confidentiality visible, not decorative.
7. Voice in the visual (microcopy)¶
Pull headline/microcopy from the approved messaging — don't invent claims: - Hero / one-liner: "Audit-ready cloud platforms, engineered — not bolted on." - The category line (a signature callout): "Vanta tells you what's broken. SnowOps engineers the platform that's compliant by construction." - CTA everywhere in the funnel (the one Action-colored element): "Start with a free Discovery Audit." - Never: "guaranteed compliant," "compliance-as-a-service," "we pass your audit." (See primer §4.)
8. What to hand back (PA00 acceptance checklist)¶
- Logo lockups + mark + favicon, in color / white / dark, as SVG — the Signet vector master, on disk at
brand/logo/. (Remaining: outline the wordmark + export PNGs per that folder's README; run IP clearance before public launch.) - Color tokens (§3) implemented for light and dark, with the AA CTA pairings.
- Type scale (§4) with IBM Plex Sans + IBM Plex Mono.
- Icon / diagram / data-viz style rules with 2–3 examples (incl. a themed d2lang diagram).
- Slide master (16:9): title, section, content, code, data-chart, quote, packages, closing — with the single-CTA rule. Delivered as an editable
.pptxfor Google Slides + Canva atbrand/templates/. - Document master: cover, section head, body, table, callout, CTA, footer. Delivered as an editable
.docxfor Google Docs + Canva atbrand/templates/— plussnowops-doc-reference.docx, the Pandoc theme that brands auto-generated reports (PA08). (Letter only; add an A4 section variant if a client needs it.) - One-page mini brand sheet for reuse.
- Everything works in both light and dark, all text WCAG AA, and the Action color appears only on the CTA.
9. Design tokens — copy-paste (CSS custom properties)¶
Hand this block to any tool as the source of truth.
:root {
/* light (default: reports, documents) */
--bg:#FBFAF6; --panel:#FFFFFF; --ink:#1B1C1A; --muted:#6C6E67; --border:#E7E4DC;
--accent:#2B4C7E; /* Trust blue — all structure */
--action:#EE6C4D; /* reserved — CTA accents only */
--action-strong:#D9552F; /* CTA button fill (white text, AA) */
--pass:#1F7A5A; --warn:#B07D2B; --crit:#9B2D24; /* semantic trio */
--radius-card:12px; --radius-surface:10px; --radius-control:8px;
--font-display:'IBM Plex Sans', system-ui, sans-serif;
--font-body:'IBM Plex Sans', system-ui, sans-serif;
--font-mono:'IBM Plex Mono', ui-monospace, monospace;
}
:root[data-theme="dark"], .theme-dark {
--bg:#141310; --panel:#1D1C18; --panel-2:#24231E; --ink:#ECEAE2; --muted:#9A988C; --border:#302E28;
--accent:#7BA6DE;
--action:#F07C5C; /* on dark, CTA fill uses dark ink (#141310) */
--pass:#57C08F; --warn:#E4AC52; --crit:#EC7468;
}
Rules encoded above, restated: Action color → CTA only (once per view); Trust-blue → everything structural; semantic trio → status only; soft rounded corners; IBM Plex Sans + Mono; light default / dark for screens; WCAG AA on every pairing.