Forter Design System Deep-Dive

1. Brand Overview

Forter’s visual language screams “trust us, we know your business.” This isn’t a brand chasing flashy gradients or quirky art direction — it’s corporate-grade, tech-confident, and engineered for conversion. The palette, typography, and layout choices all point toward a product that needs to feel reliable to enterprise buyers (fraud prevention is the business, after all).

The vibe is clean and precise. Think enterprise SaaS meets fintech — lots of blue (authority, trust), white space (clarity), and a tight typographic system that avoids unnecessary ornamentation. Poppins for headlines adds a touch of modern friendliness, while Inter for body and UI keeps things readable and utilitarian.

Buttons are purposeful, with a high-contrast pill shape for primary CTAs (border-radius 120px — you notice it immediately) and a squared-off secondary variant that’s more functional than decorative. They’re not experimenting with asymmetry or crazy hover effects. The hover states are restrained, the focus styles are clear, and everything feels like it’s been tested for accessibility.

Layout-wise, it’s an 8px grid — predictable, easy to work with, and consistent across breakpoints. The breakpoints themselves are numerous (over two dozen distinct widths), which tells you they’re serious about fine-tuning responsive behavior. This isn’t a “mobile-first and hope for the best” approach.

The design philosophy: clarity, consistency, and authority. Forter’s site is meant to reassure CFOs, fraud analysts, and e-commerce leads that the product is battle-tested. The design reflects that by avoiding anything that could feel unstable or “beta.” Even the shadows — subtle RGBA layers, slightly tinted blues — feel engineered rather than decorative.

This is a system for designers and developers who care about precision. Every pixel feels intentional. Every color has a role. And if you try to go off-palette, you’ll break the brand quickly.

2. Color System

2.1 Primary Colors

Primary brand color: #005de8 (rgb(0, 93, 232)). This is Forter’s “trust blue” — bright enough to stand out, deep enough to feel solid. It’s used for CTAs, focus outlines, and interactive states. Blue in this range is common in fintech and SaaS because it conveys reliability without feeling stodgy. Compared to competitors, Forter’s blue is more saturated than Stripe’s purple-blue and less navy than IBM’s enterprise blue.

Secondary support comes from #85b6ff — a lighter blue for accents, link states, and subtle borders. It’s a friendly companion to the primary.

2.2 Complete Palette

2.3 Color Relationships

The palette is anchored in blue and white, with navy and grays as structural neutrals. Contrast between #005de8 and #ffffff is strong — easily meeting WCAG AA for normal text. The darker navy #283752 on white also passes comfortably. The lighter accents (#85b6ff) are for non-critical elements; they wouldn’t meet contrast requirements alone for body text but work fine for links and icons paired with other cues.

No explicit dark mode is in play, but the palette could invert nicely — deep navy as background, white text, primary blue for highlights.

2.4 Usage Guide

• Works: Primary blue with white text — high contrast, feels branded. Navy text on white — clean and legible.
• Avoid: Light blue on white for primary text — fails contrast.
• Combos: Navy background with light blue elements works for footer sections. Primary blue on pale blue hover — softens interaction without losing identity.

3. Typography

3.1 Font Families

Two families:

• Poppins — modern geometric sans, used for headings and some link styles. No fallbacks listed; likely webfont.
• Inter — utilitarian sans, for body copy, buttons, captions, and UI labels.

No Google Fonts or Adobe Fonts detected in sources, but both are common hosted assets.

3.2 Type Scale

3.3 Hierarchy

Headings in Poppins have big jumps — 56px to 30px to 28px — which creates strong page and section hierarchy. Inter handles smaller text, keeping UI consistent. Uppercase styles (labels, buttons) are used sparingly but consistently. The tight line-heights on buttons make them feel compact despite generous horizontal padding.

4. Spacing & Layout

4.1 Spacing Scale

8px grid with some off-grid values (1px, 3px, 6.4px). Common values: 16px (125 occurrences), 24px (94 occurrences), 12px (31 occurrences).

4.2 Layout

Breakpoints are numerous: from 300px up to 1440px. Indicates fine-tuned responsive design. Likely using Tailwind CSS with custom breakpoints and Vuetify components. This allows adjusting layouts at very specific widths rather than just standard sm/md/lg.

5. Visual Elements

Border Radius System

From 0px to 9999px.

• 0px (flat) — tables, data-heavy UI
• 1px — subtle rounding on spans
• 2px — buttons, divs, functional controls
• 6px — dominant for divs, cards
• 8px — occasional card variation
• 120px — pill buttons (primary CTA)
• 9999px — full pill shapes, avatars

Shadows

Mostly subtle multi-layer RGBA shadows, some tinted blue for brand depth. Example: rgba(0, 71, 255, 0.07) 0px 60px 80px 0px ... — gives soft depth without heavy drop shadows.

Borders

1px solid primary blue for secondary buttons, white for inverse elements, light grays for form fields.

6. Components

6.1 Buttons

Primary (pill)

• Default: bg #005de8, color #ffffff, padding 0px 24px, radius 120px, no border.
• Hover: bg #ffffff, text #2285f7, opacity 0.6, box-shadow via Tailwind ring vars.
• Focus: outline 1px solid #000000, bg #1eaddb, text #ffffff, opacity 0.7.

Secondary (square)

• Default: bg #ffffff, text #005de8, padding 12px 10px, radius 2px, border 1px solid #005de8.
• Hover: bg #1eaddb, text #ffffff, opacity 0.7.
• Focus: outline 2px solid #000000, bg #1eaddb, text #ffffff.

6.2 Links

Multiple color variants:

• Light blue #70a9ff default, hover deep blue #3860be.
• White default in nav, hover deep blue.
• Mid blue accent #85b6ff with same hover.

No underline; relies on color change for hover.

6.3 Forms

Select fields: bg #ffffff, text #212529, border 1px solid #bbbbbb, radius 0px, padding 4px 8px. Focus border-color via Tailwind var rgb(1 244 168/var(--tw-border-opacity)) — unusual green focus.

6.4 Cards

Radius 6px or 8px, subtle shadows (blue-tinted or RGBA black with low opacity). Padding aligns to spacing scale (16px or 24px).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-navy: #283752;
  --color-primary-blue: #005de8;
  --color-light-blue: #85b6ff;
  --color-dark-gray: #696969;
  --color-mid-gray: #555555;
  --color-pale-blue: #d9e8ff;
  --color-medium-blue: #4287ee;
  --color-rich-blue: #0a53c1;
  --color-blue-0954c6: #0954c6;
  --color-blue-0757cf: #0757cf;
  --color-blue-0855ca: #0855ca;
  --color-soft-blue: #97bdf6;
  --color-blue-0a53c2: #0a53c2;

  /* Typography */
  --font-poppins: 'Poppins', sans-serif;
  --font-inter: 'Inter', sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6_4: 6.4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-96: 96px;
  --space-112: 112px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-120: 120px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-blue-soft: rgba(0, 71, 255, 0.07) 0px 60px 80px 0px,
                       rgba(0, 71, 255, 0.047) 0px 30.1471px 24.1177px 0px,
                       rgba(0, 71, 255, 0.035) 0px 12.5216px 10.0172px 0px,
                       rgba(0, 71, 255, 0.024) 0px 4.5288px 3.62304px 0px;
}

8. AI Coding Assistant Prompt

# Forter Design System Specification

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

## Brand Context
Forter’s design is enterprise-focused, precise, and trustworthy. Colors and typography are chosen to reassure and guide users without distraction. Interactions are subtle but clear, with consistent spacing and a strong blue/white foundation.

## Color Palette
- Primary Blue: #005de8 — CTAs, primary buttons, key actions
- White: #ffffff — backgrounds, text on dark
- Deep Navy: #283752 — headings on light, footer backgrounds
- Light Blue: #85b6ff — link accents, borders
- Dark Gray: #696969 — category headers
- Mid Gray: #555555 — UI icons and secondary text
- Pale Blue: #d9e8ff — hover backgrounds
- Medium Blue: #4287ee — hover accents
- Rich Blue: #0a53c1 — hover/focus
- Blue #0954c6 — hover/focus
- Blue #0757cf — hover/focus
- Blue #0855ca — hover/focus
- Soft Blue: #97bdf6 — hover/focus
- Blue #0a53c2 — hover/focus

## Typography
- Headings: "Poppins"
- Body/UI: "Inter"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 56px | 700 | 1.25 | Page titles |
| H2 | 30px | 600 | 1.25 | Section headings |
| H3 | 28px | 700 | 1.25 | Subsections |
| H4 | 24px | 400 | — | Body intro |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px
Scale: 1px, 3px, 4px, 6.4px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 56px, 64px, 96px, 112px

## Border Radius
- none: 0px — tables
- sm: 2px — inputs, square buttons
- md: 6px — cards
- lg: 8px — larger cards
- full-pill: 120px — primary buttons
- full: 9999px — avatars

## Shadows & Depth
- Soft blue multi-layer: rgba(0, 71, 255, 0.07) 0px 60px 80px 0px, etc.

## Components

### Primary Button
```css
.btn-primary {
  background-color: #005de8;
  color: #ffffff;
  padding: 0px 24px;
  border-radius: 120px;
  font-weight: 600;
  font-size: 12px;
  border: none;
}
.btn-primary:hover {
  background-color: #ffffff;
  color: #2285f7;
  opacity: 0.6;
}
.btn-primary:focus {
  outline: 1px solid #000000;
  background-color: #1eaddb;
  color: #ffffff;
  opacity: 0.7;
}
```

### Secondary Button
```css
.btn-secondary {
  background-color: #ffffff;
  color: #005de8;
  padding: 12px 10px;
  border-radius: 2px;
  border: 1px solid #005de8;
}
.btn-secondary:hover {
  background-color: #1eaddb;
  color: #ffffff;
  opacity: 0.7;
}
.btn-secondary:focus {
  outline: 2px solid #000000;
  background-color: #1eaddb;
  color: #ffffff;
}
```

### Input Field
```css
.select {
  background-color: #ffffff;
  color: #212529;
  border: 1px solid #bbbbbb;
  border-radius: 0px;
  padding: 4px 8px;
}
.select:focus {
  border-color: rgb(1 244 168/var(--tw-border-opacity));
}
```

### Card
```css
.card {
  background-color: #ffffff;
  border-radius: 6px;
  padding: 24px;
  box-shadow: var(--shadow-blue-soft);
}
```

## Layout & Responsive Rules
Breakpoints: 300px, 400px, 425px, 426px, 476px, 530px, 550px, 575px, 576px, 600px, 767px, 768px, 769px, 890px, 896px, 897px, 991px, 992px, 1023px, 1024px, 1199px, 1200px, 1280px, 1304px, 1366px, 1440px.

## Interaction Rules
- Transition timing: ~150ms ease
- Focus indicators: solid outlines
- Hover states: opacity changes or bg color shifts

## DO
- Use only defined palette
- Maintain 8px grid multiples
- Keep buttons consistent with radius spec
- Respect text weights and sizes
- Use Poppins for headings, Inter for body

## DON'T
- Invent new blues
- Mix sharp and pill corners in one element
- Add heavy shadows
- Use light blue as body text

## Code Examples
See button, select, and card snippets above.

9. Summary

TL;DR — Forter’s design system is a disciplined blue/white enterprise SaaS style. Poppins for headings, Inter for body, 8px grid, pill-shaped CTAs, and subtle blue-tinted shadows. Don’t improvise colors or spacing.

Brand Keywords — enterprise-trust, tech-precise, blue-authority, grid-disciplined