Cyber One Solutions logo.
Get Support

Brand Guidelines

Brand Identity & Design System

Cyber One Solutions Brand & Design System.

This page is the single source of truth for all visual, structural, and content standards used across every Cyber One Solutions digital property. Every component, layout pattern, spacing value, and content rule documented here is extracted directly from the production codebase.

All future pages must conform to the components and rules defined below. No new styles, spacing values, or layout patterns should be introduced without first updating this document.

Cyber One Solutions logo.
Primary Lockup
Wordmark + Icon
ON NAVY
ON WHITE
Color System

Brand Colors.

The Cyber One Solutions palette is built around a deep navy primary with a sky-blue secondary, supported by two vibrant accent colors drawn from the logo mark. These four colors appear in the logo's signature accent squares and form the complete brand palette.

Primary Brand Color

Navy Blue

Primary buttons, headings, navigation, key UI elements. The dominant brand color that anchors all communication.

Secondary Brand Color

Light Blue

Accents, highlights, links, icon fills, section markers, and hover states. Evokes reliability and clarity.

Accent Color

Yellow

Call-to-action highlights, badges, priority indicators, and decorative logo accents. Use sparingly for emphasis.

Accent Color

Pink / Red

Alert states, error messaging, decorative logo accents, and secondary emphasis. Use sparingly alongside navy.

Deep Background

Navy Dark

Hover states for navy elements, dark section backgrounds, footer backgrounds, and depth layering.

Darkest Tone

Navy Deeper

Active states, pressed button states, deepest background layers in dark sections and modals.

UI System Colors

Supporting neutrals and surfaces used across all digital interfaces. These are not brand colors but are integral to the design system.

Page Background
Page base
Card Background
Card surfaces
Section Background
Alternating sections
Border
Standard borders
Border Soft
Subtle dividers
Heading Text
H1-H3 text
Body Text
Paragraph text
Muted Text
Labels, captions
Typography System

Type System.

Cyber One Solutions uses Inter exclusively across all digital surfaces. Inter is a highly legible, modern grotesque typeface optimized for screens. Maximum three font weights per composition.

Level
Size
Weight
Tracking
Line-H
Used For
H1
clamp(1.9rem, 2.8vw, 2.5rem)
900
-0.03em
1.1
Page hero headlines
H2
clamp(1.6rem, 2.5vw, 2.1rem)
900
-0.03em
1.15
Section headings
H3
0.95rem - 1.1rem
800
-0.01em
1.25
Card titles, subsections
Body Large
1rem
400
normal
1.72
Lead paragraphs, introductions
Body
0.875rem - 0.9rem
400
normal
1.68
Standard body text
Label / Eyebrow
0.68rem
700
0.14em - 0.16em
1.4
Section labels, uppercase tags
Button
0.80rem
800
0.08em
1
CTA buttons, action links
Caption / Meta
0.72rem - 0.75rem
500 - 700
0.05em
1.55
Timestamps, footer text, badges
Line Height Reference
H1 / H2 Headings1.1 - 1.15
H3 / Card Titles1.25 - 1.3
Body Text1.68 - 1.75
Labels / Captions1.4 - 1.55
Font Weights Used
400RegularBody text, descriptions
700BoldLabels, eyebrows, captions
800ExtraBoldCard titles, subsection heads
900BlackH1, H2 hero headings

Typography Lock Rules

These rules are mandatory and non-negotiable. Any deviation from the locked typography values constitutes a design system violation.

Font family: Inter is the ONLY typeface permitted across all Cyber One Solutions digital surfaces. No fallback display fonts, no decorative fonts, no serif alternatives.
Body text standard: All paragraph text must use one of two locked sizes -- 1rem (BodyText default, for lead/hero paragraphs) or 0.9rem (BodyText small, for supporting paragraphs). No other body text sizes are permitted.
Body text line height: 1.72 for BodyText default (1rem) and 1.68 for BodyText small (0.9rem). These values are non-negotiable.
Body text color: All paragraph text must use #374151 (var(--color-text-secondary)). Muted supporting captions use #6B7280 (var(--color-text-muted)). Heading color (#111827) must never be used for body paragraphs.
Page-level paragraph consistency: All paragraphs within a single page must use the SAME BodyText variant. The hero section may use BodyText default (1rem), and all subsequent sections may transition to BodyText small (0.9rem), but the transition happens once and is consistent for the remainder of the page. No mixing within sections.
Maximum three font weights per composition: 400 (body), 700 (labels/eyebrows), and 800 or 900 (headings). Never use more than three weight values on a single page.
Component System

Locked Component Definitions.

Every component below is defined in src/components/DesignSystem.tsx and must be imported from that file. These are the only card, layout, and interactive components permitted on any page.

Eyebrow

<Eyebrow />
Structure

24px wide x 2px tall line (var(--color-light-blue)) + 0.68rem uppercase label

Tokens

gap: 10px, marginBottom: 12px, letterSpacing: 0.16em, fontWeight: 700

Usage Rules

Opens every section. Always the first element inside a section header. Never used standalone without a heading beneath it.

Section Header

<SectionHeader />
Structure

Flex row: Eyebrow + H2 on left (maxWidth: 380px), description paragraph on right (maxWidth: 460px)

Tokens

gap: 48px, marginBottom: 48px (with desc) or 40px (without), flexWrap: wrap

Usage Rules

Opens every content section. Heading is always left-aligned. Description, when present, right-aligns at the top baseline of the heading.

Standard Card

<StandardCard />
Structure

Icon (46x46, radius 12, navy bg, white icon) + title HORIZONTAL in a row. Body content below. Optional footer with border-top.

Tokens

bg: var(--color-card-bg), border: 1px solid var(--color-border), radius: 14px, padding: 26px 24px

Usage Rules

Primary card for service listings, differentiators, and feature grids. Icon and title must always be horizontal -- never stacked.

Compact Card

<CompactCard />
Structure

Flex row: Icon (40x40, radius 10, navy bg, white icon) left. Title + body text right.

Tokens

bg: var(--color-section-bg), border: 1px solid var(--color-border), radius: 12px, padding: 22px 24px, gap: 18px

Usage Rules

Used for short-form content lists like vCIO features, differentiator bullets, and checklist items in split layouts. Always stacked vertically with 14px gap.

Process Card

<ProcessCard />
Structure

Outlined icon (48x48, radius 14, page-bg, border) with numbered badge. Title, description, bullet items with icons. Footer shows phase count.

Tokens

bg: var(--color-card-bg), border: 1px solid var(--color-border), radius: 16px, padding: 28px 26px. Hover: borderColor navy, shadow, translateY(-3px)

Usage Rules

Methodology and process phases. Each card is one phase/step. Bullet items use a consistent item icon. Footer reads "Phase N of M".

Nav Link Card

<NavLinkCard />
Structure

Title (0.95rem, 800) + description (0.825rem, muted) + footer link with border-top.

Tokens

bg: var(--color-card-bg), border: 1px solid var(--color-border), radius: 14px, padding: 22px 24px. Hover: borderColor navy, shadow

Usage Rules

Navigation grids at the bottom of pages. Points to related sub-pages. No icons. Footer link reads "Learn More" by default.

Stat Card

<StatCard />
Structure

Centered: large value (2rem, 900, navy) + uppercase label (0.68rem, 700, muted).

Tokens

bg: var(--color-section-bg), border: 1px solid var(--color-border-soft), radius: 14px, padding: 18px 28px

Usage Rules

Always used in a 2x2 grid (grid-template-columns: 1fr 1fr, gap: 14px) inside hero sections. Never used standalone or in a single row.

Card Size Control

Compact Card Usage Rules.

Card type selection must be proportional to content volume. Using a Standard Card for content that fits in a Compact Card creates oversized, stretched components and wastes vertical space. These rules define when each card type is required.

Use Compact Cards when card content is short -- 1 to 2 lines of text, no long paragraph required.
Use Compact Cards for list-style content, utility items, checklist entries, and feature bullets inside TwoColumnSplit layouts.
Do NOT use Standard Cards when the content is brief enough for a Compact Card. Standard Cards with mostly empty space are a design violation.
Do NOT vertically stretch cards to fill grid space. Card height must be proportional to content volume.
If a Standard Card contains fewer than 3 lines of body text, it should be converted to a Compact Card or the content should be expanded to justify the Standard Card size.
Compact Cards always stack vertically with 14px gap. They are never placed in multi-column grids.
Live Previews

Component Previews.

Live renders of every component using the actual DesignSystem imports. These are the real components, not mockups.

Eyebrow + Section Header
Example Section

This Is a Section Heading.

This description text sits to the right of the heading, top-aligned. It is used for supplementary context that does not belong in the heading itself.

Standard Card (Icon + Title Horizontal)
Security

Security-First Architecture

Zero-trust principles applied to every managed environment. Endpoint protection, SOC monitoring, and compliance readiness are included by default.

Dedicated Engineering Team

Named engineers assigned to your account with controlled client-to-engineer ratios ensuring quality support outcomes.

Compact Card (Row Format)

Endpoint Protection

SentinelOne EDR deployed and monitored across all managed endpoints.

15-Minute Response SLA

Contractually guaranteed response time on all critical issues.
Process Card
1

Assess

Thorough assessment of your current technology environment before any recommendations are made.

Infrastructure inventory
Security gap analysis
Cost optimization review
Phase 1 of 3
Nav Link Card
Stat Card (2x2 Grid)
7+
Years of Experience
500+
Clients Served
5
Office Locations
24/7
NOC & SOC Operations
Buttons & Links
Inline link with arrow
Body Text

This is the default body text style at 1rem. It is used for lead paragraphs and introductory content.

This is the small body text variant at 0.9rem. It is used for supporting paragraphs and secondary content blocks.

Layout System

Section Layouts & Grid Definitions.

Every page is composed from these layout primitives. No full-width slab sections are used outside the homepage. All content sections alternate between white and muted backgrounds.

Hero Section (HeroSection)

Structure

4px gradient bar (navy to steel to #a8daf5) at top. Two-column auto-fit grid (minmax(300px, 1fr)), gap: 72px. Left: Eyebrow + H1 + body + buttons. Right: body + stat grid.

Tokens

bg: var(--color-card-bg), paddingTop: 72px, paddingBottom: 64px

Content Section (ContentSection)

Structure

Full-width section with site-container. Two variants: "white" (var(--color-card-bg)) and "muted" (var(--color-section-bg)). Always has border-top.

Tokens

paddingTop: 64px, paddingBottom: 72px, borderTop: 1px solid var(--color-border-soft)

Two-Column Split (TwoColumnSplit)

Structure

CSS grid: 1fr 1fr, gap 80px, alignItems start. Left column contains heading block. Right column contains stacked cards or content.

Tokens

Responsive: collapses to 1fr at 768px with gap: 48px

Three-Column Grid

Structure

CSS grid: repeat(auto-fill, minmax(280px, 1fr)), gap: 20px for cards, 16px for nav cards.

Tokens

Used for Standard Cards, Process Cards, and Nav Link Cards

Spacing Scale

All spacing values used in the design system. These values are fixed. Do not introduce intermediate values.

4px
Micro spacing (icon internal gaps, badge offsets)
8px
Base unit (tag pills, highlight gaps)
10-12px
Compact gaps (eyebrow line-to-text, card label margin)
14-16px
Standard card gap, card grid gaps, footer padding-top
18-20px
Icon-to-text gap in Compact Cards, Process Card icon margin-bottom
22-28px
Card internal padding range
32-40px
Sub-section spacing, section header margin-bottom
48px
Section header gap (heading-to-description), responsive column gap
64-72px
Section vertical padding (paddingTop / paddingBottom)
80px
Two-column split gap
Mandatory Rule

Icon + Title: Always Horizontal.

This is the single most important layout rule in the design system. Every card component that displays an icon alongside a title must place the icon to the left of the title on the same horizontal line. Icons are never stacked above the title.

Correct

Icon Left, Title Right

Incorrect -- Never Do This

Icon Above Title

All Icon Rules
Icons are ALWAYS positioned to the LEFT of the title text, never above it.
Icon and title are vertically centered on the same horizontal line.
Standard Card icon: 46x46px, borderRadius 12px, navy background, white icon.
Compact Card icon: 40x40px, borderRadius 10px, navy background, white icon.
Process Card icon: 48x48px, borderRadius 14px, page-bg with border, navy icon color.
Icon sizes inside containers: 20-22px (lucide-react size prop).
No icon-above-title layout is permitted anywhere in the design system.
Alignment

Alignment & Positioning Rules.

All split layouts and section headers follow strict top-baseline alignment. The right column content must align with the top of the left heading, never center-aligned vertically.

In SectionHeader, the right-side description paragraph top-aligns with the left-side heading using alignItems: flex-start. The description must never vertically center or bottom-align relative to the heading.
In TwoColumnSplit, both columns use alignItems: start so the right column aligns with the top of the left heading. No vertical centering in split layouts.
Card grids use auto-fill with minmax to maintain equal column widths. Cards stretch to fill their grid cell.
Stat cards are always centered (textAlign: center) within their grid cell.
Footer links inside cards are always pushed to the bottom using flexGrow: 1 on the content area above them.
No vertical misalignment is permitted between adjacent columns. Heading + supporting paragraph layouts must visually start on the same top baseline.
In hero sections, the right column content must top-align with the left column eyebrow/heading block. The right column must never float lower than the left heading.
Content Standards

Punctuation & Content Consistency.

Consistent punctuation and content formatting are as important as visual consistency. Every page must follow these rules without exception.

All body paragraphs and descriptions must be complete sentences ending with a period.
Bullet list items within cards follow one pattern per list: either all complete sentences with periods, or all sentence fragments without periods. Never mix within the same list or across lists on the same page.
Headings (H1, H2, H3) end with a period when they form a complete statement. Short labels (eyebrows, card labels) do not end with a period.
Button text and card footer links are uppercase fragments without periods.
Use straight apostrophes, not curly. Use double hyphens (--) instead of em dashes. Em dashes are never permitted.
No fragmented, incomplete, or sloppy sentences in body text. Every paragraph must contain grammatically complete sentences.
Lists must be consistent within the entire page -- not just within a single list. If one list on the page uses periods, all lists on that page must use periods.
Do not abbreviate "Cyber One Solutions" to "Cyber One" or "CyberOne" in any context. Always use "Cyber One Solutions" in full.
Logo Usage

Logo Rules.

The Cyber One Solutions logo is the most visible expression of our brand. Its consistent, correct application is critical to maintaining the trust and recognition we have built with our clients and partners.

Clear space
Maintain a minimum clear zone equal to the height of the "C" glyph on all sides of the logo.
Minimum size
Do not reproduce the logo smaller than 80px wide in digital contexts or 25mm in print.
Full color on light
Use the full-color logo on white or light backgrounds (#F5F6F8 or lighter).
White on dark
Use the all-white version of the logo on dark navy, dark photo backgrounds, or colored fills.
No recoloring
Do not alter the logo colors. The yellow, blue, red accent squares are fixed brand elements.
No distortion
Always maintain the original aspect ratio. Never stretch, skew, or rotate the logo.
No shadows or effects
Do not apply drop shadows, glows, gradients, or outlines to the logo.
No busy backgrounds
Avoid placing the logo over complex photography or patterns without an appropriate overlay or lockup container.
On White
On Page Background
On Navy
On Navy Dark
On Navy Deeper
Brand Voice

Dos and Don'ts.

Consistent application of these rules ensures that every brand touchpoint reinforces the same qualities: professionalism, clarity, trust, and technical authority.

Do
Use navy as the dominant color in all primary communications.
Use light blue for interactive elements, links, and accent highlights.
Use Inter as the sole typeface across all digital touchpoints.
Maintain generous white space around all brand elements.
Use the yellow accent sparingly, only to direct attention to the single most important element on a given surface.
Ensure all text meets WCAG AA contrast minimums against its background.
Don't
Do not use purple, violet, or teal as substitutes for the brand's blue palette.
Do not use the accent yellow or pink as background fills for large areas.
Do not mix more than two type weights in a single design composition.
Do not apply gradients to the logo or primary brand color surfaces.
Do not use decorative or display fonts alongside the Cyber One Solutions brand.
Do not present the logo on backgrounds with insufficient contrast.
Brand Name Enforcement

Name Rules Apply Everywhere.

The name "Cyber One Solutions" must appear in full across every surface -- page content, metadata, alt text, CTA labels, modals, and structured data. No abbreviated forms are ever permitted.

Page content: All body paragraphs, headings, and card text must use "Cyber One Solutions" in full. Never abbreviate to "Cyber One", "CyberOne", "Cyberone", "cyberonesol", "C1", or "COS".
Card titles and card body text: The full name "Cyber One Solutions" must appear whenever referencing the company inside Standard Cards, Compact Cards, Process Cards, and Nav Link Cards.
Modals: All modal headers, modal body text, modal sections, and modal callouts must use "Cyber One Solutions" in full.
Meta titles: Every page <title> tag must use "Cyber One Solutions" (e.g., "Managed IT | Cyber One Solutions").
Meta descriptions: Every page meta description must include "Cyber One Solutions" at least once, never abbreviated.
Open Graph and Twitter/X metadata: og:title, og:description, twitter:title, and twitter:description must all use "Cyber One Solutions" in full.
Structured data / schema: Any JSON-LD or schema markup must reference "Cyber One Solutions" in full.
Alt text: All image alt attributes referencing the company must use "Cyber One Solutions" (e.g., "Cyber One Solutions Logo", not "CO Logo" or "Cyber One Logo").
Internal links and anchor text: Link text referencing the company must say "Cyber One Solutions", not a shortened form.
CTA labels: Any call-to-action button or link that includes the brand name must use "Cyber One Solutions" (e.g., "Contact Cyber One Solutions", never "Contact Cyber One").
Image captions and figure text: Any caption or figure description referencing the company must use "Cyber One Solutions" in full.
Structured content blocks: Testimonial attributions, review cards, case study headers, and partner descriptions must use "Cyber One Solutions" in full.
Legal and contractual contexts: Use "Cyber One Solutions" in footer legal text, terms pages, privacy policies, trademark notices, and all binding language.
Prohibited abbreviations: "Cyber One", "CyberOne", "Cyberone", "cyberonesol", "C1", "COS", and any other derivative, abbreviation, shorthand, or variation are never permitted in any context.
Modal System

Modal Definitions & Rules.

The site uses a unified modal system built on four composable primitives exported from SiteModal.tsx: SiteModal (wrapper), SiteModalHeader, SiteModalBody, SiteModalSection, and SiteModalCallout. Specialized modals exist for jobs (JobModal), portals (PortalModal), and legal documents (LegalModals).

Cards That Open Modals
Service offering cards on ServicesPage, PlansPricingPage, ConsultingPage, and all individual service pages (Managed IT, Security, Cloud, VoIP, ISP, Physical Security, Structured Cabling, Non-Managed).
Industry cards on IndustriesPage and all individual industry pages (Auto, Finance, Healthcare, Legal, Manufacturing, Government, SMB).
Job listing cards on JobsPage open the specialized JobModal.
Portal selector cards on PortalPage open the specialized PortalModal.
Trust and feature cards on SupportPage, AboutPage, AboutPartnersPage, AboutReviewsPage, and AboutOurtechnologyPage.
Compliance framework cards on ConsultingCompliancePage.
Blog post cards on BlogPage and news items on NewsPage.
Cards That Do NOT Open Modals
Stat Cards are display-only and never interactive.
Nav Link Cards navigate to a new page via href -- they never open a modal.
Compact Cards used inside TwoColumnSplit layouts are display-only.
Logo and partner image grids are non-interactive.
Modal Content Depth Requirements
Every modal must contain meaningful content that goes beyond what the triggering card already shows. The modal is not a repeat of the card -- it is the deep dive.
Required modal sections: an overview paragraph, at least one SiteModalSection with a labeled content block, and at least one SiteModalCallout highlighting a key detail or metric.
Modals should include 3-5 content sections minimum. Short modals with only a paragraph and a button are not permitted.
Use SiteModalCallout for standout stats, guarantees, or differentiators (e.g., "15-Minute SLA", "99.99% Uptime").
Modal content must include where appropriate: multiple well-structured paragraphs, deeper explanation of the concept or service, practical business context, what is included, why it matters, expected outcomes, and examples or use cases.
Modal content must feel detailed, helpful, authoritative, and aligned with Cyber One Solutions positioning. No fluff, filler, repetitive marketing language, or vague AI-sounding copy.
Modal Accessibility & Mobile Behavior
Pressing Escape closes the modal. Clicking the backdrop overlay closes the modal. Both behaviors are mandatory.
Body scroll is locked (overflow: hidden) when any modal is open and restored on close.
The modal panel traps focus visually via the overlay but does not currently implement a full focus trap. A close button (X) is always visible in the header.
On mobile viewports, modals use maxHeight: 88-90vh with internal scroll (overflowY: auto) to remain fully usable without cutting off content.
Modal entry uses two CSS keyframe animations: modalOverlayIn (opacity fade) and modalPanelIn (scale + opacity). Both complete in 200-220ms.
Conversion Standards

CTA & Conversion Rules.

Every page must guide the user toward a clear conversion action. CTAs must appear above the fold, after major content sections, and at the page footer. Language must be specific, consistent, and action-oriented across the entire site.

Every page must include at least one primary CTA (PrimaryButton). No page should end without a clear conversion path.
The primary CTA must appear above the fold -- inside the hero section or immediately following it.
A secondary CTA (SecondaryButton) should accompany the primary CTA in hero sections to offer an alternative action (e.g., "Learn More" alongside "Schedule a Consultation").
After every major content section (2-3 sections deep), repeat a CTA using the CallToAction component or an inline PrimaryButton. Users should never scroll more than two full sections without encountering a conversion opportunity.
CTA language must be specific and action-oriented. Use "Schedule a Consultation", "Request a Quote", "Contact Cyber One Solutions" -- never generic labels like "Click Here", "Submit", "Learn More" (as a primary CTA), or "Get Started".
CTA language must be consistent across the site. The same action should use the same label everywhere (e.g., always "Schedule a Consultation", not sometimes "Book a Call" and sometimes "Get in Touch").
The primary CTA destination for most pages is /contact/. Service-specific pages may link to service-specific contact flows if they exist.
Footer CTAs are handled by the CallToAction component, which appears at the bottom of every page before the footer. This is non-negotiable.
Button text is always uppercase, uses 0.80rem font size, 800 weight, and 0.08em letter-spacing. Never deviate from this styling.
CTA placement must follow this pattern: (1) above the fold in the hero, (2) after the second or third content section, (3) in the bottom CallToAction component before the footer.
Primary and secondary CTAs must be visually distinguishable. PrimaryButton uses the steel background with white text. SecondaryButton uses a transparent background with a border. Never use two primary buttons side by side.
Content Quality

Content Consistency Rules.

Visual consistency without content consistency is incomplete. Every paragraph, list, and heading must follow these rules to ensure the site reads as one unified voice across every page.

All body paragraphs on a given page must use one approved paragraph style: either BodyText (1rem) for lead/intro text or BodyText size="small" (0.9rem) for supporting text. Do not mix BodyText default and BodyText small within the same section.
Within a single page, paragraph font sizes must not fluctuate randomly. The hero section may use the larger size, and subsequent sections may use the smaller size, but the transition must happen once and be consistent for the rest of the page.
Lists (bullet items inside cards or sections) must be consistent per page: either all complete sentences with periods, or all sentence fragments without periods. Never mix formats within the same list or across lists on the same page.
No fluffy or generic marketing copy. Every sentence must communicate a specific fact, capability, metric, or differentiator. Refer to the Forbidden Language list for explicitly prohibited terms.
No incomplete sentences in body text. Every paragraph must contain grammatically complete sentences. The only exception is intentionally stylized fragments in card bullet lists (which must be consistent as stated above).
Headings that end with a period must form a complete statement. If a heading is a label or fragment (e.g., "Our Approach"), it does not get a period. If it is a statement (e.g., "Security Is Not Optional."), it does.
Every page must have a clear content hierarchy: Hero (H1 + intro) followed by alternating ContentSections, each opened by a SectionHeader (Eyebrow + H2). No section may begin without an Eyebrow + H2 combination.
Body text color is always #374151 (var(--color-text-secondary)). Muted supporting text is #6B7280 (var(--color-text-muted)). Never use heading color (#111827) for body paragraphs.
Each section should follow this structure wherever applicable: Eyebrow/label, headline (H2), short supporting paragraph, structured components (cards, grids, or CTA blocks). Random standalone text blocks without clear section framing are not permitted.
Remove redundant or unnecessary text. Keep writing concise, high-impact, and easy to scan. The content should feel direct, credible, and enterprise-ready.
Voice Guardrails

Forbidden Language.

The following terms and phrases are explicitly banned from all Cyber One Solutions content. These words signal generic, low-quality marketing copy and undermine credibility with technical decision-makers.

Banned Terms
cutting-edge
innovative solution
robust platform
game-changing
synergy
synergistic
world-class
best-in-class
next-generation
disruptive
paradigm shift
turnkey solution
holistic approach
leverage (as a verb meaning "use")
thought leader
bleeding edge
revolutionary
seamless integration
Replacement Guidance
These terms are prohibited in all page content, headings, card text, modal body copy, CTA labels, and metadata.
Every claim must be backed by a specific fact, credential, metric, or deliverable. Vague superlatives without supporting evidence are not permitted.
If a sentence could appear on any managed IT provider's website without modification, it is too generic. Rewrite with Cyber One Solutions-specific details.
The voice must be professional, confident, and direct. Not fluffy, trendy, or over-marketed.
Replace vague claims with specifics: instead of "cutting-edge security", write "SentinelOne EDR with 24/7 SOC monitoring". Instead of "world-class support", write "15-minute average response time with named engineers".
Density Standards

Content Density & Spacing Enforcement.

Every section must feel intentionally designed with tight, structured content density. Sparse layouts, oversized padding, and large empty gaps are design violations that reduce perceived quality and conversion effectiveness.

Maintain tight, structured content density across all sections. No section should feel stretched, sparse, or under-designed.
No large empty gaps between content blocks. The maximum vertical space between the last element in one section and the first element of the next is the section padding (64-72px). No additional empty dividers.
Cards in a grid must be proportionally sized to their content. Do not pad short cards with extra whitespace to match taller neighbors -- use Compact Cards instead.
Strong visual grouping: related content must be grouped together using cards, grids, or bordered containers. Loose standalone paragraphs without section framing are not permitted.
Consistent spacing rhythm: every section follows the same paddingTop (64px) and paddingBottom (72px) pattern. Do not introduce oversized or undersized section spacing.
Content sections must alternate between "white" and "muted" variants. Two consecutive sections of the same background variant create visual monotony and are not permitted.
Scanability: break long text blocks into shorter paragraphs (3-4 sentences max), use bullet lists inside cards where appropriate, and employ clear heading hierarchy for every section.