Book a Consultation

Cocoon CS Styleguide

This page is the shared design and content reference for the marketing site. Use it at /about/styleguide/ to review the current brand system, component rules, and page presentation standards.

Core Direction

Dark, credible, operational, and controlled. Cocoon CS should feel expert-led rather than decorative or startup-flashy.

Implementation Rule

Use cards for bounded panels, pill buttons for CTAs, and keep all other theme-owned surfaces square.

Shared Layout And Elementor Modules

These are the bridge patterns that appear across the site outside route-specific page families: visual cards, link cards, callouts, icon boxes, image boxes, icon lists, dividers, toggles, and meta grids.

elementor-bridge.css specimens

Icon Box

Used in migrated Elementor content and normalized by the bridge stylesheet.

Image box specimen

Image Box

Use when migrated content needs an image-led promo block.

  • Icon lists use a normalized bridge treatment across imported pages.
  • This keeps migrated sections visually aligned with the newer shell.
Toggle / FAQ item

Use this for migrated FAQ blocks and any elementor-native disclosure content still in the site.

Shell, Navigation, And Footer

The shared shell must be represented here with live markup, not screenshots. That includes breadcrumbs, mega menus, footer columns, and the dark footer bottom bar.

site-overrides.css + header.html

Shared CTA Bands And Marketing Modules

These are live shell modules already used across the site: centered CTA bands, framework pills, highlight cards, testimonial accents, and the short bottom-line strip.

site-overrides.css + inline-content.css

Header CTA Module

Use this full-width band when a page needs one strong next step.

Book a Consultation

Light CTA Band

Use the light version when the page needs a calmer handoff before the footer.

Explore the Platform

Footer CTA Band

This is the recurring bottom-of-page conversion block used across major landing pages.

Book a Consultation

Bottom-Line Strip

Short proof-driven closeout strip used where the page needs one last compact summary statement.

sofax-overrides.css + home modules

CMMC ISO 27001 SOC 2

Home Highlight Card

This brighter feature card is reserved for the home page’s emphasized center column.

“Operational enough for serious buyers, but still clear and readable for executive review.”
Shared testimonial treatment

Coverage Audit

This page now loads every active custom route stylesheet and shows a live specimen for each module family. Treat this as the audit index for making sure no Cocoon CS style exists only on its source route.

Shared System

  • site-overrides.css: breadcrumbs, mega menus, CTA bands, shared cards, shared forms, dark list surfaces, content grids, mobile navigation, and footer shell.
  • elementor-bridge.css: icon boxes, image boxes, icon lists, toggles, counters, dividers, and the normalized Elementor content shell.
  • sofax-overrides.css: shell buttons, framework pills, home testimonial accents, highlight cards, and footer presentation.

Core Route Families

  • services.css, solutions.css, platform.css, service-index-3.css, and service-details.css are represented in the route-family specimens below.
  • about-company.css, resources-page.css, industries.css, industry-detail.css, and partnership-program.css are represented in the about, resources, industry, and partner specimens below.

Framework And Compliance Families

  • frameworks.css, framework-detail.css, cmmc.css, compliance-toolkit.css, and compliance-as-a-service.css each have live specimens on this page.
  • These cover framework bands, proof cards, phase cards, stat cards, CMMC grids, toolkit link cards, CAAS logo rows, and engagement cards.

Editorial And Embedded Modules

  • blog-sidebar.css and blog-single.css are represented with a listing card and article-body specimen.
  • inline-content.css is represented with legacy embedded forms, survey shells, schedule tables, CTA bands, and download cards.

Color System

The site should stay anchored to the current Cocoon CS palette, with the dark gradient leading hero sections and restrained accent use elsewhere.

Primary Text

#0B081D

Use for body copy, dark surfaces, and the gradient anchor.

Secondary

#1D174D

Use for shell depth, dark fills, and hero gradient finish.

Accent

#63599D

Use for emphasis, hover states, and supportive borders.

Primary Surface

#F7F9FC

Use for the default page background and calm section breaks.

Border Tone

#E6EEF5

Use for card edges, dividers, and subtle visual structure.

Banner Gradient

160deg

Default hero treatment: dark, high contrast, and brand-led.

CISO Joe

CISO Joe is the recurring Cocoon CS guide character. He should read as an expert security lead made approachable: confident, helpful, operationally in control, and always tied to real compliance work.

content-img-3.png approved reference pose

CISO Joe standing in a purple cape with open hands while CMMC, SOC 2, ISO 27001, and NIS2 shields orbit around him.
  • He is a stylized security leader, not a joke mascot.
  • His stance should stay open, calm, and helpful rather than aggressive or theatrical.
  • The purple wardrobe, dark glasses, beard, and framework orbit make him immediately identifiable.

How To Draw CISO Joe

  • Use a clean vector-cartoon style with crisp outlines, soft cel shading, and a subtle glow instead of textured or painterly rendering.
  • Keep his silhouette consistent: swept angular brown hair, full beard, black rectangular glasses, broad smile, purple tunic, darker cape, square-buckle belt, fitted dark pants, and purple boots.
  • His proportions should feel approachable but capable: slightly oversized head and hands, compact athletic body, and a balanced stance with feet planted apart.
  • Default pose is front-facing or slight three-quarter view with both hands open as if guiding, presenting, or organizing the work around him.
  • Use floating compliance shields, documents, checklists, or control-flow markers around him when the illustration needs context, but keep the orbit readable and uncluttered.
  • Stay inside the Cocoon CS palette: deep navy and purple for clothing, warm skin tones, dark outlines, and focused support accents rather than random bright colors.

How To Use CISO Joe

  • Use him in hero-side illustrations, framework explainers, onboarding callouts, and educational sections where a guided expert character improves clarity.
  • Pair him with operational copy about controls, evidence, readiness, frameworks, ownership, and ongoing compliance work.
  • Keep him as a supporting brand icon beside the message, not as decoration that pushes the headline or CTA off-balance.
  • Reuse the same face, outfit, and expression language across the site so he feels like one brand character rather than a rotating cast.
  • When frameworks appear with him, limit the set to the few most relevant badges instead of surrounding him with every standard at once.
  • Do not redraw him as photoreal, grim, slapstick, childish, or off-brand with unrelated props, rounded kawaii features, or novelty costumes.

Hero Companion

Use CISO Joe beside a two-column product or platform section when the copy explains how Cocoon CS brings multiple frameworks into one operating model.

Framework Guide

Use him with a small orbit of shields or checklist objects when a page is teaching the reader how Cocoon CS organizes specific standards or evidence workflows.

Educational Support Visual

Use simplified half-body or full-body variants in explainers, downloads, and feature panels where a human guide makes dense compliance material easier to scan.

Do

  • Keep his expression alert, welcoming, and competent.
  • Use him to explain structured cybersecurity and compliance work.
  • Let the surrounding objects reinforce the specific topic of the section.
  • Match lighting and color intensity to the existing dark Cocoon CS brand treatment.

Do Not

  • Do not treat him as a generic superhero or entertainment mascot.
  • Do not restyle him into flat corporate clip art, photo collage, or a different illustration language.
  • Do not overload the scene with too many orbiting badges, props, or effects.
  • Do not place eyebrow or kicker text above a CISO Joe-led section; the heading must still lead.

Typography And Voice

Urbanist remains the primary typeface. Messaging should sound precise, decisive, and useful to regulated buyers.

H1 headline for a category-defining promise

H2 section headline with clear scope

H3 support headline for grouped content

Body copy should stay readable at 16 to 18 pixels with generous line-height. Avoid filler language, hype phrasing, and vague category talk.

Inline links should use accent emphasis and become underlined on hover.

Messaging Rules

  • Heading hierarchy must stay visually obvious: H1 is larger than H2, and H2 is larger than H3.
  • Heading letter-spacing uses the shared tracking tokens: H1 uses 0.04em, H2 uses 0.03em, H3 uses 0.018em, and body copy stays at 0.
  • Use the shared tracking scale consistently: headings use the heading tokens, while uppercase labels and field labels use the dedicated label tracking.
  • Lead with the problem, operating model, or buyer outcome.
  • Prefer concrete verbs such as centralize, govern, map, track, and maintain.
  • Avoid overclaiming with words like revolutionary, magical, or effortless.
  • Use the brand name as Cocoon CS.
  • Kickers, eyebrows, eyelines, and overlines are not allowed anywhere on the site.
  • Write for serious buyers comparing cybersecurity compliance options.

Buttons And CTAs

Buttons are one of the only surfaces allowed to use radius. Keep them pill-shaped, high contrast, and decisive.

Form Buttons

Cards, Surfaces, And Layout Rhythm

Cards may use 6px radius. Everything else should stay square. Sections should breathe, with strong container alignment and clear scanning order.

Use cards for bounded information

Cards should carry white backgrounds, light borders, restrained shadow, and enough padding to feel composed.

Use large vertical spacing

Most sections should land between 80 and 120 pixels of top and bottom padding on desktop, then compress cleanly on tablet and mobile.

Keep content on a disciplined measure

Use centered containers and avoid arbitrary offsets that break the overall shell alignment.

Form Guidance

Forms should look controlled and practical: white inputs, square corners, strong labels, and one clear submit action.

Dark Interactive List Surfaces

On dark surfaces, listbox and dropdown content must use high-contrast text, visible focus, and square interior surfaces. Dark text on a dark panel is not acceptable.

Rule

  • List content shown on dark surfaces must use light text with at least clear AA-level contrast.
  • Hovered, focused, and selected items need distinct states that remain visible against the dark shell.
  • The list surface itself should stay square. If it sits inside a card, the card may keep the allowed 6px radius.
  • Titles, labels, and helper text inside the component should inherit the same readable contrast rules.

Applied Example

Correct treatment for a workflow list on a dark background.

  • Implement Hybrid Shell
  • Review Pull Request
  • Close Test Gaps

Platform, Solutions, And Service Families

These grouped specimens cover the route-specific modules used on services, solutions, platform, resource, and service-detail pages. They use the live page classes directly.

services.css + solutions.css

Services landing cards

Shared overview cards and benefits tiles.

Fractional CISO

Executive cybersecurity leadership without the full-time overhead.

View service

Penetration Testing

Validation work tied back to the compliance operating model.

View service

Privacy Officer

Governance support for privacy-heavy buyer and regulatory obligations.

View service

Solutions modules

Mini signal cards, panel cards, and dark metric rows.

Workflow Cross-functional evidence mapping
Buyer view Executive and supplier visibility
Program operating block

Use panel cards when a route needs one bounded summary of how multiple workstreams fit together.

Mapped 7 frameworks
Tracked Supplier obligations
Visible Evidence ownership
24critical workflows centralized
15buyer requests mapped
4governance roles coordinated
42+evidence streams tracked

platform.css + service-index-3.css

Platform dashboards

Platform routes use signal rows, framework cards, and dashboard cards with progress states.

Mapped Framework obligations

Shared evidence and control context.

Owned Team responsibilities

Workflow accountability by role.

Reported Executive metrics

One operational dashboard view.

Operational score

Program dashboard card

Use the dashboard card when the page needs a denser product-led specimen.

Service v3 hero modules

Modern service pages use centered hero cards, proof cards, and compact signal blocks.

Scope Recurring compliance leadership
Cadence Monthly working sessions
Output Visible roadmap decisions
Dashboard preview
Lead workflow Engagement launch block

Hero cards pair a media frame with a compact operating summary.

service-details.css + resources-page.css

Service detail panels

Detail routes use highlight grids and panel cards for deeper explanation.

Cadence Recurring leadership coverage
Governance Decision-ready reporting
Control Ownership and remediation visibility

Governance focus areas

Use panel cards when the route needs grouped operating pillars.

Track Risk and remediation
Align Buyer commitments
Report Executive posture

Resources cards

Resources pages mix collection cards, category cards, and dark feature cards.

Guide

Compliance operating model

Long-form resource collections for buyers and governance teams.

Read collection

Workshops

Smaller category cards link to grouped resource hubs.

Explore workshops

Dark feature card

Use this for highlighted editorial or gated-resource promotion.

about-company.css + industries.css

About company modules

About pages use dark stats rows, leader cards, and cleaner story cards.

Years24

Combined compliance delivery experience.

Roles4

Platform, governance, privacy, and delivery coverage.

Teams3

Operating from Calgary, Toronto, and Ottawa.

Focus1

Cybersecurity compliance execution.

Leadership card

Use for founder or leadership bios with short operating context.

Industry cards and marquee

Industry pages rely on dark marquee bands plus linked program cards.

Defence Healthcare Manufacturing Critical infrastructure

Defence and aerospace

Industry overview cards link to more detailed route families.

Explore industry

Program card

Use the larger program card for a deeper industry-specific operating block.

Framework, Compliance, Industry Detail, And Partner Families

These grouped specimens cover framework pages, industry-detail pages, CMMC pages, toolkit pages, CAAS pages, and the partnership program.

industry-detail.css + partnership-program.css

Industry detail modules

Detail pages use pill rows, highlight grids, and denser operating panels.

Supplier risk Buyer pressure Evidence cadence
Pressure Complex buyer requirements
Response Shared operating model
Outcome Visible accountability

Operating panel

Panel cards provide a larger summary block for one route’s governance approach.

Partner tracks and sidebars

Partner pages use numbered steps, track cards, and a supporting sidebar.

1

Qualify

Define the partner motion and delivery fit.

2

Launch

Package platform and governance support together.

Advisory

Partner track card

Use for packaged delivery pathways.

frameworks.css + framework-detail.css

CMMC CP-CSC ISO 27001 SOC 2

Framework overview card

Linked cards for broader framework collections.

Explore framework
Mapped controls

Proof card

Use proof cards to summarize one framework operating block.

Framework detail modules

Detail pages add phase cards and stat cards for roadmap sequencing.

Controls 110+
Evidence Centralized
Status Review-ready
Phase 01

Map the scope

Clarify framework obligations and evidence ownership.

Phase 02

Operate the controls

Move recurring tasks into a governed working cadence.

cmmc.css + compliance-toolkit.css

CMMC modules

CMMC pages use proof grids, linked cards, and tighter framework-specific copy blocks.

Readiness

Assessment pathway

Linked framework cards used throughout CMMC pages.

Review pathway
Evidence set

Proof card

Use proof cards to summarize the operating posture.

Policies Mapped and versioned
Artifacts Reusable across levels
Owners Assigned by workflow

Toolkit link cards

Toolkit pages lean on link cards and reusable proof blocks.

Policy libraries

Linked resource-style cards with practical operational copy.

Operational kit

Reusable artifacts

Toolkit proof cards support stronger “what you get” storytelling.

compliance-as-a-service.css

CAAS modules

CAAS pages use trust-logo rows, program cards, signal cards, and featured engagement cards.

Control mapping
Evidence workflows
Executive reporting
Managed operating model Program card
Cadence Monthly governance
Scope Controls and evidence
Output Executive-ready reporting

Use the program card when the page needs a denser promise block than a standard feature card can provide.

Featured engagement card

Use for packaged recurring delivery offers.

  • Governance cadence
  • Evidence visibility
  • Executive reporting
Review engagement

Blog, Rich Text, And Embedded Modules

This section closes the remaining coverage gaps: blog cards, article-body typography, legacy embedded forms, download shells, and schedule tables.

blog-sidebar.css + blog-single.css

Deep dive 8 min read

Article pages switch into a denser editorial shell with stronger list, quote, and rich-text rules.

Article body heading

Body copy uses a higher line-height and stronger list rhythm than the marketing landing pages.

“Use the article-body shell when content needs to read like editorial rather than product marketing.”
  • Accent-colored list markers
  • Underlined inline links
  • Large quote blocks on dark gradients

inline-content.css

Embedded lead form

Success and error notices are part of the embedded form family too.

Download or gated asset shell

This higher-contrast card is used for single-asset landing moments that need one focused conversion action.

Download the Asset

Use this for guides, scorecards, and readiness downloads.

When Session Type
  • WhenApril 2026 SessionCMMC Readiness Workshop TypeVirtual
  • WhenMay 2026 SessionSupplier Governance Bootcamp TypeLive cohort

Non-Negotiables

These are the quickest checks to keep shared pages aligned with the current Cocoon CS shell and brand direction.

Do

  • Use the dark Cocoon CS gradient for heroes and banners by default.
  • Keep footer, shell, and card treatments restrained and credible.
  • Reserve 6px radius for cards and 999px for buttons only.
  • Center layouts around a disciplined content container.
  • Prefer direct, operational copy over brand theater.

Avoid

  • Do not introduce rounded inputs, rounded panels, or rounded media frames.
  • Do not swap the brand hero for unrelated gradients or pastel themes.
  • Do not use kickers, eyebrows, eyelines, or overlines anywhere on the site.
  • Do not overuse purple accents or novelty visual effects.
  • Do not let this page drift from the live shared shell, typography, or component rules it documents.