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.
Dark, credible, operational, and controlled. Cocoon CS should feel expert-led rather than decorative or startup-flashy.
Use cards for bounded panels, pill buttons for CTAs, and keep all other theme-owned surfaces square.
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.
site-overrides.css + shared content primitives
Use when a shared card needs a media block above the copy.
Linked cards are used for resources, internal navigation, and framework pathways.
Callouts are used for bounded emphasis with the same card surface treatment.
elementor-bridge.css specimens
Used in migrated Elementor content and normalized by the bridge stylesheet.
Use when migrated content needs an image-led promo block.
Use this for migrated FAQ blocks and any elementor-native disclosure content still in the site.
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
footer.html + shared footer shell
Cocoon CS combines a cybersecurity compliance platform with expert governance services for regulated organizations.
These are live shell modules already used across the site: centered CTA bands, the continuously moving framework-logo marquee, highlight cards, testimonial accents, and the short bottom-line strip.
site-overrides.css + inline-content.css
Use the light version when the page needs a calmer handoff before the footer.
Explore the PlatformShort proof-driven closeout strip used where the page needs one last compact summary statement.
sofax-overrides.css + home modules
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.
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, the framework-logo marquee, home testimonial accents, highlight cards, and footer presentation.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.frameworks.css, framework-detail.css, cmmc.css, compliance-toolkit.css, and compliance-as-a-service.css each have live specimens on this page.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.The site should stay anchored to the current Cocoon CS palette, with the dark gradient leading hero sections and restrained accent use elsewhere.
#0B081D
Use for body copy, dark surfaces, and the gradient anchor.
#1D174D
Use for shell depth, dark fills, and hero gradient finish.
#63599D
Use for emphasis, hover states, and supportive borders.
#F7F9FC
Use for the default page background and calm section breaks.
#E6EEF5
Use for card edges, dividers, and subtle visual structure.
160deg
Default hero treatment: dark, high contrast, and brand-led.
Manrope is the official and only primary website typeface across headings, body copy, navigation, forms, statistics, labels, and calls to action. Its modern geometric construction gives Cocoon CS a clear SaaS product character while remaining highly readable for detailed compliance content.
Body copy uses a 16-pixel base with a 1.68 line-height and subtle optical spacing. Lead copy may rise to 18 pixels without changing the reading rhythm. Avoid filler language, hype phrasing, and vague category talk.
Inline links should use accent emphasis and become underlined on hover.
-0.012em, H2 uses -0.008em, and H3 uses -0.004em.0.003em letter-spacing, while navigation, buttons, captions, and compact interface text use 0.005em.Buttons are one of the only surfaces allowed to use radius. Keep them pill-shaped, high contrast, and decisive.
Cards may use 6px radius. Everything else should stay square. Sections should breathe, with strong container alignment and clear scanning order.
Cards should carry white backgrounds, light borders, restrained shadow, and enough padding to feel composed.
Most sections should land between 80 and 120 pixels of top and bottom padding on desktop, then compress cleanly on tablet and mobile.
Use centered containers and avoid arbitrary offsets that break the overall shell alignment.
Forms should look controlled and practical: white inputs, square corners, strong labels, and one clear submit action.
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.
6px radius.Correct treatment for a workflow list on a dark background.
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
Shared overview cards and benefits tiles.
Executive cybersecurity leadership without the full-time overhead.
View serviceValidation work tied back to the compliance operating model.
View serviceGovernance support for privacy-heavy buyer and regulatory obligations.
View serviceMini signal cards, panel cards, and dark metric rows.
Use panel cards when a route needs one bounded summary of how multiple workstreams fit together.
Illustrative component example—not customer results.
platform.css + service-index-3.css
Platform routes use signal rows, framework cards, and dashboard cards with progress states.
Shared evidence and control context.
Workflow accountability by role.
One operational dashboard view.
Use the dashboard card when the page needs a denser product-led specimen.
Modern service pages use centered hero cards, proof cards, and compact signal blocks.
Hero cards pair a media frame with a compact operating summary.
service-details.css + resources-page.css
Detail routes use highlight grids and panel cards for deeper explanation.
Use panel cards when the route needs grouped operating pillars.
Resources pages mix collection cards, category cards, and dark feature cards.
Long-form resource collections for buyers and governance teams.
Read collectionSmaller category cards link to grouped resource hubs.
Explore workshopsUse this for highlighted editorial or gated-resource promotion.
about-company.css + industries.css
About pages use dark stats rows, leader cards, and cleaner story cards.
Illustrative component example—not company proof.
Combined compliance delivery experience.
Platform, governance, privacy, and delivery coverage.
Product demos and consultations.
Cybersecurity compliance execution.
Use for founder or leadership bios with short operating context.
Industry pages rely on dark marquee bands plus linked program cards.
Industry overview cards link to more detailed route families.
Explore industryUse the larger program card for a deeper industry-specific operating block.
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
Detail pages use pill rows, highlight grids, and denser operating panels.
Panel cards provide a larger summary block for one route’s governance approach.
Partner pages use numbered steps, track cards, and a supporting sidebar.
Define the partner motion and delivery fit.
Package platform and governance support together.
Use for packaged delivery pathways.
frameworks.css + framework-detail.css
Linked cards for broader framework collections.
Explore frameworkUse proof cards to summarize one framework operating block.
Detail pages add phase cards and stat cards for roadmap sequencing.
Illustrative component example—not framework or customer results.
Clarify framework obligations and evidence ownership.
Move recurring tasks into a governed working cadence.
cmmc.css + compliance-toolkit.css
CMMC pages use proof grids, linked cards, and tighter framework-specific copy blocks.
Linked framework cards used throughout CMMC pages.
Review pathwayUse proof cards to summarize the operating posture.
Toolkit pages lean on link cards and reusable proof blocks.
Linked resource-style cards with practical operational copy.
Toolkit proof cards support stronger “what you get” storytelling.
compliance-as-a-service.css
CAAS pages use trust-logo rows, program cards, signal cards, and featured engagement cards.
Control mapping
Evidence workflows
Executive reportingUse the program card when the page needs a denser promise block than a standard feature card can provide.
Use for packaged recurring delivery offers.
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
Use the listing card for the editorial index and promotional blog modules.
Article pages switch into a denser editorial shell with stronger list, quote, and rich-text rules.
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.”
inline-content.css
This higher-contrast card is used for single-asset landing moments that need one focused conversion action.
Use this for guides, scorecards, and readiness downloads.
These are the quickest checks to keep shared pages aligned with the current Cocoon CS shell and brand direction.
6px radius for cards and 999px for buttons only.