Checkpoint Brand Design System Deep Dive

1. Brand Overview

Checkpoint is a cyber security brand with a very direct, high-stakes tone. The design language reflects that: high contrast, assertive color use, and typography that feels engineered rather than decorative. This is not a playful brand. This is a brand communicating “we protect critical systems” — and the visuals match.

The vibe is corporate-tech with a security edge. The primary color (#e40c5b, a deep pink-red) is aggressive but not garish. It’s paired with strong neutrals (#333333, #212529, #ffffff) for clarity and authority. There is zero ambiguity in the UI — CTAs are screamingly clear, link styles are consistent, and hover states are deliberate.

Design philosophy: clarity over artistry. Every component feels like it’s meant to be read and acted upon under pressure. There’s little fluff — no ornamental gradients, no playful animations. Even the hover states are assertive: translate up, drop shadow, color shift. They want you to know something happened.

Audience: IT professionals, CISOs, network security engineers. People who value reliability and precision. The design system is tuned for clarity at all sizes — from mobile dashboards to desktop product pages. And because security software often has dense content, the typography choices lean toward condensed readability (DIN is the workhorse here).

Checkpoint’s site is built on Bootstrap’s grid system, but the brand layer overrides Bootstrap’s vanilla look with sharp, high-contrast, minimal-border components. Rounded corners are rare. The most common border-radius values are 0–4px, with occasional full-circle buttons (50%). This fits the “no nonsense” tone.

This is a brand that says: “We’re in control. We’re watching everything. And you can trust us.” The design system is a visual extension of that confidence.

2. Color System

2.1 Primary Colors

Primary: #e40c5b (rgb(228, 12, 91)) — used for CTAs, primary buttons, and key actions. It’s bold, high-energy, and stands out against dark and light backgrounds. Psychologically, it’s urgency-with-confidence: pink-red tones can feel innovative compared to pure red, but still signal importance.

Secondary: #ffffff — white is used as a secondary semantic color, mostly for text on dark/pink backgrounds and for secondary button fills.

Compared to competitors (Palo Alto Networks uses orange, Cisco uses blue), Checkpoint’s pink-red is a differentiator. It’s less common in the security space, which helps brand recognition.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally strong. Primary #e40c5b on white is WCAG AA+ compliant for normal text. White on primary is also compliant. Dark grays (#333333, #212529) on white provide excellent readability.

Purple (#741984) is used for hover states — it contrasts well with most neutrals and the primary pink. It’s a secondary accent, not a primary action color.

Dark mode isn’t implemented here — the palette is clearly optimized for light backgrounds with occasional dark sections (#30242f).

2.4 Usage Guide

Works well:

• Primary (#e40c5b) with white text — strong CTA.
• Purple (#741984) hover on primary/dark — clear state change.
• Dark gray text on light gray background — good readability, low distraction.

Avoid:

• Primary on purple — low contrast.
• Light gray text (#A7A9AC) on light gray background — fails contrast.
• Multiple accent colors together (pink+purple+blue) — breaks hierarchy.

3. Typography

3.1 Font Families

DIN everywhere — headings, buttons, links, captions. Fallbacks: "Helvetica Neue", Arial. No Google Fonts or Adobe Fonts — this is likely a self-hosted DIN.

The choice of DIN is deliberate: it’s clean, engineered, and condensed. Perfect for a security brand where clarity and fit matter.

3.2 Type Scale

3.3 Hierarchy

Large headings (50px) are rare — most headings sit in the 24–40px range, which keeps dense security content readable without overwhelming. Buttons use heavier weights (700) for clarity. Links are mostly 400–700 weight, depending on prominence.

Line heights are tight for headings (1.20–1.40), looser for body/link text (1.40–1.50). This helps differentiate navigational text from pure content.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Bootstrap grid system — responsive breakpoints at 576px, 768px, 992px, 1200px, etc. Containers adjust per breakpoint. Max content width likely around 1200px for desktop.

5. Visual Elements

Border Radius

Mostly square or subtle rounding.

Shadows

Minimal shadows — only a handful of rgba black shadows. Hover states sometimes add drop shadows for emphasis.

Borders

Thin (1px) solid borders in various colors — primary pink, accent pink, light gray. Used for buttons, cards, dividers.

6. Components

6.1 Buttons

Primary (cp__header_cta)

• Default: bg #e40c5b, white text, padding 8px 16px, no radius.
• Hover: transparent bg, box-shadow rgba(0,0,0,0.3) 5px 5px 15px, translateY(-5px).
• Active: bg #b70d4e, text var(--btn-bgcolor), opacity 0.6.
• Focus: transparent bg, purple text.

Secondary (btn btn-secondary white border)

• Default: transparent bg, white text, 1px white border.
• Hover: same as primary hover.
• Active: bg #b70d4e.
• Focus: purple text.

Secondary (btn btn-secondary pink border)

• Default: white bg, pink text, 1px pink border.
• Same hover/active/focus as above.

Light CTA (cta-block-light)

• Default: bg #f5f5f5, dark gray text, font-weight 300.
• Hover: text color rgb(214, 26, 105).

Small Accent Button

• Default: bg #da1572, white text, 2px radius.
• Hover: bg #1d2124, pink text, opacity 0.7.
• Focus: blue outline, bg #1d2124.

6.2 Links

Consistent: no underline default, purple hover.

6.3 Forms

Text input: transparent bg, no border default, padding 11px 20px 11px 45px. Focus: 1px black border, blue glow.

6.4 Cards

Light gray backgrounds, subtle borders (rgba(48,36,47,0.14)).

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #e40c5b;
  --color-secondary: #ffffff;
  --color-dark-gray: #333333;
  --color-darker-gray: #212529;
  --color-white: #ffffff;
  --color-clay: #f2f2f2;
  --color-mid-gray: #696969;
  --color-medium-gray: #555555;
  --color-light-gray-border: #cccccc;
  --color-accent-pink: #da1572;
  --color-black: #000000;
  --color-charcoal: #30242f;
  --color-gray-medium: #444444;
  --color-purple: #741984;
  --color-border-gray: #dfe0e1;
  --color-text-light: #A7A9AC;
  --color-bg-light-gray: #F5F5F5;
  --color-bg-darker-gray: #EBEBEB;
  --color-swiper-blue: #007aff;
  --color-pagination-gray: #a39f9f;
  --color-primary-darker: #b70d4e;

  /* Typography */
  --font-family-primary: "DIN", "Helvetica Neue", Arial;
  --font-size-h1-lg: 50px;
  --font-size-h1-md: 40px;
  --font-size-h1-sm: 26px;
  --font-size-button-lg: 24px;
  --font-size-button-md: 20px;
  --font-size-button-sm: 14px;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28.1562px;
  --space-32: 32px;
  --space-40: 40px;
  --space-80: 80px;
  --space-128: 128px;

  /* Radius */
  --radius-0: 0;
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-50: 50px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.176) 0px 6px 12px 0px;
  --shadow-hover: rgba(0, 0, 0, 0.3) 5px 5px 15px;
}

8. AI Coding Assistant Prompt

# Checkpoint Design System Specification

You are a Checkpoint design expert. Build UIs matching their visual language exactly.

## Brand Context
Checkpoint's design language is high-contrast, assertive, and engineered. It prioritizes clarity, urgency, and trust. Components are square or subtly rounded, with bold primary color usage and clean DIN typography.

## Color Palette
- Primary: #e40c5b — CTAs, primary buttons
- Secondary: #ffffff — text on dark/pink, button fills
- Dark Gray: #333333 — body text, nav menu
- Darker Gray: #212529 — headings, body
- Clay Light Gray: #f2f2f2 — background sections
- Mid Gray: #696969 — modal headers
- Medium Gray: #555555 — UI icons, secondary text
- Light Gray Border: #cccccc — dividers, sidebars
- Accent Pink: #da1572 — links, notices
- Black: #000000 — icons
- Charcoal: #30242f — dark sections
- Gray Medium: #444444 — misc text
- Purple: #741984 — hover/focus
- Border Gray: #dfe0e1 — component borders
- Text Light: #A7A9AC — secondary text
- Bg Light Gray: #F5F5F5 — backgrounds
- Bg Darker Gray: #EBEBEB — panels
- Swiper Blue: #007aff — carousel theme
- Pagination Gray: #a39f9f — pagination dots
- Primary Darker: #b70d4e — active button bg

## Typography
Font: DIN, "Helvetica Neue", Arial  
Sizes:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1-lg | 50px | 300 | 1.20 | Page titles |
| H1-md | 40px | 400 | 1.25 | Section titles |
| Button-lg | 24px | 700 | 1.00 | Primary actions |
| Body | 16px | 400 | 1.40 | Paragraph text |
| Caption | 14px | 400 | 1.20 | Labels |

## Spacing & Grid
Base: 8px. Scale: 3px, 4px, 5px, 8px, 10px, 12px, 16px, 20px, 24px, 28.1562px, 32px, 40px, 80px, 128px.

## Border Radius
- none: 0 — most components
- sm: 2px — small buttons
- md: 3px — cards
- lg: 4px — larger buttons
- pill: 50% — circular buttons

## Shadows & Depth
Minimal shadows. Hover state adds: rgba(0,0,0,0.3) 5px 5px 15px.

## Components

### Primary Button
Default: bg #e40c5b, color #ffffff, padding 8px 16px, radius 0, border none.  
Hover: bg transparent, shadow hover, translateY(-5px).  
Active: bg #b70d4e, opacity 0.6.  
Focus: bg transparent, color #741984.

### Secondary Button (white border)
Default: transparent bg, color #ffffff, 1px white border.  
Same hover/active/focus as primary.

### Secondary Button (pink border)
Default: white bg, color #e40c5b, 1px pink border.

### Input Field
Default: transparent bg, no border, padding 11px 20px 11px 45px.  
Focus: 1px solid #000000, blue glow (#007aff).

## Layout & Responsive Rules
Bootstrap grid: breakpoints at 576px, 768px, 992px, 1200px.  
Max content width ~1200px.

## Interaction Rules
Transitions: ~150ms ease for hover/focus changes.  
Focus indicators: color shift to purple or blue glow.

## DO List
- Use only palette colors.
- Maintain 8px grid spacing.
- Keep corners square unless specified radius.
- Use DIN for all text.
- Maintain high contrast in all states.

## DON'T List
- No gradients.
- No mixed corner styles.
- Avoid low-contrast color combos.
- No extra shadows beyond spec.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #e40c5b;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 0;
  font-weight: 400;
  font-size: 16px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: transparent;
  box-shadow: rgba(0,0,0,0.3) 5px 5px 15px;
  transform: translateY(-5px);
}
.btn-primary:focus {
  color: #741984;
  background: transparent;
}
```

### Input
```css
.input {
  background: transparent;
  border: none;
  padding: 11px 20px 11px 45px;
}
.input:focus {
  border: 1px solid #000000;
  box-shadow: rgba(0,123,255,0.25) 0px 0px 0px 0.2rem;
}
```

9. Summary

TL;DR
Checkpoint’s design system is sharp, high-contrast, and engineered for clarity. DIN typography, bold primary pink-red, square corners, and deliberate hover states make it unmistakably “security brand” UI.

Brand Keywords

• high-contrast-security
• engineered-clarity
• bootstrap-grid
• din-typography
• urgency-focused