DeepIntent Brand Design System Deep Dive

1. Brand Overview

DeepIntent’s design language is clean, deliberate, and unapologetically digital-health focused. From the moment you land on their site, you feel a mix of clinical precision and tech-forward energy. This is not a brand chasing lifestyle aesthetics — it’s a brand that wants to look trustworthy, competent, and ahead of the curve in healthcare advertising technology.

The vibe: deep blues and cobalts for authority, peppermint greens for vitality and freshness, and citrus yellows/greens for optimism. The typography is modern and geometric (Manrope), giving the interface a sense of structure. There’s no decorative fluff — every pixel has a job.

The design philosophy leans into clarity and hierarchy. They use a consistent 8px-based spacing system (with occasional 4px increments for micro-adjustments), generous border radii for buttons and cards, and strong color separation to distinguish interactive elements from content. Buttons are pills (100px+ radii) or full circles (999px) for emphasis. Large headings balance weight and openness with tight letter-spacing for impact.

You can tell they’ve built this to scale — every color is tokenized, typography is systematic, spacing is predictable. This is the kind of system that works in a SaaS dashboard, a marketing site, and a sales deck without visual drift.

The brand feels like it’s for:

• Healthcare marketers who need complex tools that just work
• Data-driven teams who want to feel confident in the tech
• Enterprise buyers who expect polish and compliance-ready presentation

What I like: they commit to their palette. No random blues. No rogue grays. Even hover states use tokenized “peppermint-light” and not arbitrary tints. This discipline is rare.

What surprised me: the amount of inset white shadows on cards. Most modern SaaS brands go for flat or drop shadows. Here, they use subtle inset effects for a frosted, glassy feel — almost like white light reflecting off medical-grade surfaces. It’s a small thing, but it reinforces their “clean and clinical” personality.

2. Color System

2.1 Primary Colors

The primary brand blue is #0b53ff (rgb(11, 83, 255)). It’s bright enough to stand out on dark surfaces, but deep enough to feel professional. It’s used for primary CTAs, icon accents, and active states. The choice sits between tech blue and corporate cobalt — less safe than #0044cc, more vibrant than #0070f3. Against healthcare competitors, it feels more energetic than Cerner’s navy and more grounded than Zocdoc’s turquoise.

Psychologically: blue = trust, stability, expertise. The high saturation says “modern”, the hue says “serious business”.

2.2 Complete Palette

2.3 Color Relationships

• Strong contrast between #0b53ff and #ffffff (WCAG AAA compliant at large sizes).
• Peppermint shades maintain a lightness that works on dark blue backgrounds without losing saturation.
• The dark blues (#0c2741, #040f1a, #030b13) are almost black — good for depth without the harshness of pure black.
• Citrus accents are used sparingly to avoid clashing with peppermint.

2.4 Usage Guide

• Use Primary Blue for interactive elements only. Never as a background fill.
• Peppermint variants are for hover/focus. Keep them consistent — don’t introduce “random” greens.
• Dark blue backgrounds should always have white or peppermint text.
• Citrus is for highlights, not for CTAs — it’s too light to serve as a strong action color.
• Avoid placing peppermint on citrus — low contrast.

3. Typography

3.1 Font Families

• Primary: Manrope (no fallbacks listed, but likely sans-serif)
• Source: not loaded via Google or Adobe in the extracted data — likely self-hosted.

Manrope is geometric, humanist, and clean. The choice keeps the interface approachable but still technical. Works well in healthcare tech because it’s legible at small sizes and crisp at large display sizes.

3.2 Type Scale

3.3 Hierarchy

The system is tight. H1 at 56px feels commanding, with a -0.72px letter-spacing to pull the letters closer for density. The jump from 56 → 48 → 24 is dramatic — they’re not afraid of big typography. The 16px size is the workhorse for buttons, links, and small headings, keeping UI consistent. Uppercase small caps (16px/14px) are used for meta labels, often with increased letter-spacing.

Readability: Manrope’s open counters and uniform stroke widths make it legible even at 14px, which is why they can get away with uppercase captions without killing legibility.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, with some 4px and 2px micro-steps.

4.2 Layout

Breakpoints:

• Mobile: <479px
• Tablet: <767px
• Small desktop: <991px

Likely a 12-column responsive grid. The presence of 576px as a spacing value suggests fixed-width sections or media containers.

5. Visual Elements

Border Radius:

• 8px, 12px, 14px, 16px, 20px, 24px, pill (100px), full-circle (999px/1000px)
• Usage: 14px for divs, 16px for cards/images, 100px for pill buttons.

Shadows:

• Heavy use of inset white shadows: e.g., rgba(255, 255, 255, 0.6) 0px -2px 4px inset for frosted effect.
• Occasional drop shadows for floating buttons: rgba(0,0,0,0.25) 0px 4px 12px.

Borders:

• Mostly 1px solid, rgba white at various opacities.
• Buttons: rgba white 0.15 for secondary, peppermint for accented.

6. Components

6.1 Buttons

Variants:

Secondary Small Alternate Navbar
Default: transparent bg, white text, 8px 20px padding, 100px radius, 1px solid rgba(255,255,255,0.15)
Hover: peppermint-light bg
Focus: 0.125rem solid #4d65ff outline

Navbar Primary Small
Default: peppermint (#79facb) bg & border, dark blue text, 8px 20px padding, 100px radius
Hover: peppermint-light bg
Focus: same blue outline

Button Glow (shadowed)
Default: primary blue bg, white text, 2px padding, 999px radius, drop shadow
Hover: peppermint-light bg

Alternate Icon Button
Default: white bg, near-black text, 14px 24px padding, 100px radius, white border
Hover: peppermint-light bg

Final CTA Section
Default: dark blue bg, white text, 0px padding, square corners

Final CTA Card
Default: #091f34 bg, white text, 24px radius

6.2 Links

• White links on dark, no underline.
• Dark blue links on light, weight 500.
• Near-black links, weight 500.

No hover underline; hover state unspecified.

6.3 Forms

No input styles extracted — likely custom or minimal.

6.4 Cards

Card borders: 1px solid rgba white 0.6, inset white shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #0b53ff;
  --color-white: #ffffff;
  --color-blackish: #010203;
  --color-peppermint-light: #a1fbda;
  --color-peppermint: #79facb;
  --color-deep-blue-dark: #0c2741;
  --color-citrus-light: #e5fcb2;
  /* ... include all palette hex from above ... */

  /* Typography */
  --font-family-primary: "Manrope", sans-serif;
  --font-size-h1: 56px;
  --font-weight-h1: 500;
  /* ... all other sizes ... */

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  /* ... all spacing values ... */

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-pill: 100px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-inset-light: rgba(255, 255, 255, 0.6) 0px -2px 4px inset;
  --shadow-drop: rgba(0, 0, 0, 0.25) 0px 4px 12px;
}

8. AI Coding Assistant Prompt

# DeepIntent Design System Specification

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

## Brand Context
DeepIntent’s visual language is clinical, tech-forward, and disciplined. It uses deep blues for authority, peppermint greens for vitality, and citrus tones for highlights. Typography is modern and geometric (Manrope), with a strict 8px spacing grid and generous pill-shaped buttons.

## Color Palette
- Primary Blue: #0b53ff — CTAs, primary buttons, key accents
- White: #ffffff — Text on dark, backgrounds
- Near-Black: #010203 — Text on light
- Peppermint: #79facb — Secondary buttons, accents
- Peppermint Light: #a1fbda — Hover states
- Deep Blue Dark: #0c2741 — Dark backgrounds
- Citrus Light: #e5fcb2 — Highlights
- [List all extracted colors with usage]

## Typography
- Primary Font: "Manrope", sans-serif
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 56px | 500 | 1.2 | Hero headings |
| H1 alt | 48px | 500 | 1.2 | Section headings |
| 24px | 500/600 | 1.4/1.2 | Subheadings |
| Body | 16px | 400/500 | 1.5 | Body text, buttons |
| Caption | 14px | 400/600 uppercase | 1.3/1.5 | Labels, metadata |

## Spacing & Grid
Base: 8px grid. Scale: 2, 4, 6, 8, 12, 14, 16, 24, 32, 40, 64, 80, 112, 160, 576px.

## Border Radius
- 8px — small images, cards
- 14px — divs
- 16px — cards, images
- 24px — large cards
- 100px — pill buttons
- 999px — full round buttons

## Shadows & Depth
- Inset Light: rgba(255,255,255,0.6) 0px -2px 4px inset — cards
- Drop: rgba(0,0,0,0.25) 0px 4px 12px — floating buttons

## Components

### Primary Button
Default: bg #79facb, text #0c2741, padding 8px 20px, radius 100px, border 1px solid #79facb  
Hover: bg #a1fbda  
Focus: outline 0.125rem solid #4d65ff

### Secondary Button
Default: transparent, text white, border 1px solid rgba(255,255,255,0.15), padding 8px 20px, radius 100px  
Hover: bg #a1fbda  
Focus: outline 0.125rem solid #4d65ff

### Link
White text on dark, no underline. Weight 400 or 500. Hover state minimal.

### Card
Bg transparent or dark, 1px solid rgba(255,255,255,0.6), radius 14px, inset light shadow.

## Layout & Responsive Rules
Breakpoints:  
- Mobile: <479px  
- Tablet: <767px  
- Desktop: <991px

## Interaction Rules
- Transitions: 150ms ease for hover/focus  
- Focus outlines: 0.125rem solid #4d65ff  
- Hover bg changes use only token colors

## DO
- Use only palette colors
- Maintain 8px grid
- Use Manrope for all text
- Keep button radii consistent
- Use peppermint for hover states

## DON'T
- Add drop shadows to cards
- Use non-token colors
- Mix sharp and rounded corners
- Underline links unless specified

## Code Examples

```css
.btn-primary {
  background: #79facb;
  color: #0c2741;
  padding: 8px 20px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 16px;
  border: 1px solid #79facb;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #a1fbda; }
.btn-primary:focus { outline: 0.125rem solid #4d65ff; }

.btn-secondary {
  background: transparent;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.15);
  transition: background 150ms ease;
}
.btn-secondary:hover { background: #a1fbda; }

.card {
  background: transparent;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: rgba(255,255,255,0.6) 0px -2px 4px inset;
  padding: 24px;
}
```

9. Summary

TL;DR — DeepIntent’s design system is a disciplined, clinical-tech language: cobalt blues, peppermint greens, and citrus highlights; Manrope for all typography; 8px grid; pill buttons; inset white shadows. Everything is tokenized, nothing is arbitrary.

Brand Keywords:

• clinical-precision
• tech-forward
• disciplined-minimalism
• healthcare-trust
• vibrant-accent