SQUR Brand Guidelines

Colors

Every color in the SQUR system is defined as a CSS custom property in styles.css :root. Use tokens exclusively. Never hardcode hex or rgba values.

Core Brand

--color-primary

#2bcdee

Primary interactive. CTAs, links, active states, highlights.

--color-primary-hover

#22b8d5

Hover state for primary elements.

--color-rose

#EC5567

Threat/danger accent. Security alerts, critical findings, active/click states.

--color-teal

#4ED6D6

Secondary accent. Verified states, subtle highlights.

--color-accent

#2bcdee

Alias for --color-primary. Use --color-primary instead.

--color-accent-dim

rgba(43,205,238,0.6)

Dimmed primary for subdued accents and overlays.

--color-primary-light

rgba(43,205,238,0.1)

Lightest primary tint. Backgrounds of badges and hover fills.

Backgrounds

--color-bg-deep

#0a1215

Page-level deepest background. Body, hero zones.

--color-bg-darker

#0c171a

Slightly lighter than deep. Section transitions.

--color-bg

#101f22

Default page background. Base layer for content.

--color-bg-secondary

#162a2e

Alternating sections, social proof bands.

--color-bg-card

#162a2e

Card surfaces. Same value as secondary (see --color-bg-card-solid).

--color-bg-card-solid

#162a2e

Opaque card background (non-glass). Currently same as --color-bg-card.

--color-bg-elevated

#1e3a40

Elevated surfaces. Popups, tooltips, active panels.

--color-bg-btn

rgba(43,205,238,0.1)

Default button background tint.

--color-bg-btn-hover

rgba(43,205,238,0.18)

Button hover background tint.

Foreground / Text

--color-fg

#ffffff

Primary text. Headings, hero copy, strong emphasis.

--color-fg-secondary

#D1D5DB

Body text. Default reading color.

--color-fg-muted

#9CA3AF

De-emphasized text. Captions, labels, descriptions.

--color-muted

#64748b

Lowest-emphasis text. Footer links, metadata, timestamps.

Borders

--border-subtle

rgba(255,255,255,0.08)

Default card and section borders. Nearly invisible.

--border-accent

rgba(43,205,238,0.2)

Accented borders. Active cards, badges.

--border-accent-bright

rgba(43,205,238,0.35)

Hover state borders. More visible accent edge.

--border-accent-strong

rgba(43,205,238,0.4)

Strongest accent border. Primary buttons, emphasized cards.

Status

--color-success

#00ff9d

Success / verified state.

--color-warning

#f59e0b

Warning / attention needed.

--color-error

#ef4444

Error / system failure. Distinct from --color-rose (threat accent).

Glows & Shadows

--glow-primary

rgba(43,205,238,0.15)

Subtle glow. Card hover box-shadows.

--glow-primary-strong

rgba(43,205,238,0.25)

Prominent glow. Step icons, featured elements.

--shadow-dark

rgba(0,0,0,0.4)

Deep shadow. Carousels, modals, elevated panels.

--orb-cyan

rgba(43,205,238,0.25)

Floating orb color (cyan variant).

--orb-teal

rgba(78,214,214,0.15)

Floating orb color (teal variant).

--orb-rose

rgba(236,85,103,0.10)

Floating orb color (rose variant).

Typography

Three font families. Headings in Montserrat (700-900), body in Inter (400-700), code in JetBrains Mono.

Font Families

--font-heading Montserrat 700-900

Autonomous Pentesting. Zero Compromise.

--font-heading Montserrat 800

Section Headings Use This Weight

--font-heading Montserrat 700

Subsection or Card Titles

--font-body Inter 400

SQUR's autonomous pentesting engine runs continuous scans against your attack surface, discovering vulnerabilities before adversaries do. Every finding is verified with proof-of-exploit evidence.

--font-body Inter 600

Navigation links, button labels, and UI elements use semibold weight.

--font-body Inter 700

Strong emphasis, stats labels, badge text.

--font-mono JetBrains Mono 400

$ squr scan --target example.com --depth full
[CRITICAL] CVE-2024-12345 verified on port 443

Type Scale

--text-3xl clamp(30px, 4vw, 48px)

Hero Titles

--text-2xl clamp(22px, 2.5vw, 28px)

Section Headings

--text-xl clamp(18px, 2vw, 20px)

Card Titles & Subsections

--text-lg clamp(16px, 1.7vw, 18px)

Lead paragraph text and section intros.

--text-base clamp(14px, 1.5vw, 16px)

Default body copy. The workhorse size for paragraphs and descriptions.

--text-sm clamp(13px, 1.3vw, 14px)

Navigation, captions, smaller UI elements.

--text-xs clamp(11px, 1.1vw, 12px)

Labels, Badges, Metadata

Line Heights

--lh-heading 1.10

Tight line height for headings
keeps display text compact.

--lh-body 1.65

Generous line height for body text ensures excellent readability on dark backgrounds where eye strain is a concern. Every paragraph should breathe.

Spacing

A fluid spacing scale using fixed and clamp() values. Use these tokens for all margins, paddings, and gaps.

--space-xs

4px

--space-sm

8px

--space-md

16px

--space-lg

24px

--space-xl

48px

--space-2xl

clamp(32px, 4vw, 48px)

--space-3xl

clamp(36px, 4.5vw, 60px)

--space-4xl

clamp(48px, 6vw, 80px)

Content Widths

--content-narrow

720px

--content-default

1024px

--content-wide

1280px

Border Radius

Four radius tokens. Note: --radius-lg and --radius-xl are currently both 12px (flagged in audit).

--radius-sm

6px

--radius-md

8px

--radius-lg

12px

--radius-xl

12px

Zone System

Every page follows a three-zone visual rhythm. Hero, dark content, and gradient CTA, separated by dividers.

.zone-hero

background: --zone-dark-bg + --zone-hero-gradient overlay + floating orbs

.zone-dark

background: --zone-dark-bg (#0a1518). Clean, no overlays. Maximum readability.

.zone-gradient

background: --zone-gradient-overlay. Used for CTA sections and footer lead-ins.

.zone-divider - 1px gradient seam between zones

Component Library

Live-rendered examples of key reusable component classes from the SQUR design system.

Buttons

Request Demo .hp-btn-primary-gradient-lg

Learn More .hp-btn-secondary-lg

View Report .hp-btn-outline-primary

Start Scan .hp-btn-primary-gradient-sm

Get Started .hp-btn-primary-gradient

Rose / Login Buttons

Login .hp-btn-login / .site-btn-login

Attack Surface Report .btn-outline-rose

Cards

Glass Card

Frosted glass background with subtle border. The standard card treatment across the site.

.glass-card

Card Glow

Mouse-reactive radial glow following cursor position. Requires JS for --mouse-x/y vars.

.card-glow

Badges & Pills

Live Scanning .hero-badge (cyan)

Critical Alert .hero-badge--rose

HIGH SEVERITY .icp-pain-badge / .hp-severity-badge

Form Inputs

.icp-capture-input / .newsletter-input

Effects

Ambient glows, floating orbs, and shadow treatments that give SQUR its distinctive depth.

--glow-primary
spread: 24px

--glow-primary-strong
25% opacity

--shadow-dark
elevation shadow

Orb Ambience
--orb-cyan + --orb-rose

Effect Tokens

--glow-spread: 24px

--glow-opacity: 0.08

--shadow-opacity: 0.50

--blur-header: 12px

--blur-card: 14px

--orb-opacity: 0.12

--orb-blur: 200px

--orb-duration: 12s

--transition-speed: 300ms

Logo Usage

The SQUR wordmark is the primary brand identifier. It is always rendered in all-caps as "SQUR".

Primary wordmark - white on dark - squr-logo-wordmark.svg

Primary wordmark - black on light - use filter: invert(1) or the black fill variant

Do

Always render "SQUR" in all uppercase letters.
Use Montserrat 900 for the wordmark typeface.
Maintain clear space of at least 1x the "S" height around the wordmark.
Use white (#ffffff) wordmark on dark backgrounds.
Use the cyan primary (#2bcdee) wordmark sparingly for accent contexts only.

Do Not

Never render as "Squr", "squr", or "SQuR".
Never place on backgrounds lighter than #162a2e without testing contrast.
Never add effects (drop shadow, glow, gradient) to the wordmark itself.
Never stretch, compress, or rotate the wordmark.
Never use the rose (#EC5567) color for the wordmark.

CSS Setup

All design tokens live in styles.css as CSS custom properties on :root. Component-level layout and page-specific utilities are in styles-site.css. Both files must be loaded together for correct rendering.

Source Files

File	Purpose	Staging URL
styles.css	Design tokens - all `:root` custom properties (colors, typography, spacing, radii, effects)	styles.css ↗
styles-site.css	Site-wide components - nav, hero, cards, ICP video, buttons, forms, utilities	styles-site.css ↗

Load Order

<!-- 1. Design tokens first -->
<link rel="stylesheet" href="/styles.css" />

<!-- 2. Site components (depends on tokens above) -->
<link rel="stylesheet" href="/styles-site.css" />

Token Usage Rule

Always reference tokens - never hardcode values. Token resolution happens at paint time so the whole system stays consistent.

/* ✗ Never */
color: #2bcdee;
background: #0a1215;

/* ✓ Always */
color: var(--color-primary);
background: var(--color-bg-deep);

Machine-Readable Tokens

A structured JSON object containing all design tokens, accessible via <script id="squr-brand-tokens" type="application/json">. Parse programmatically with JSON.parse(document.getElementById('squr-brand-tokens').textContent).

Colors

Core Brand

Backgrounds

Foreground / Text

Borders

Status

Glows & Shadows

Typography

Font Families

Type Scale

Line Heights

Spacing

Content Widths

Border Radius

Zone System

Component Library

Buttons

Rose / Login Buttons

Cards

Badges & Pills

Form Inputs

Effects

Effect Tokens

Logo Usage

Do

Do Not

CSS Setup

Source Files

Load Order

Token Usage Rule

Related Tools

Machine-Readable Tokens