Singular Design System Deep Dive

1. Brand Overview

Singular’s site feels like a performance marketing control center. It’s tech-first, data-heavy, but with enough rounding and softness to keep it approachable. This isn’t the cold, hard fintech gray—there’s a solid cadence between deep navy text, crisp white surfaces, and loud blue accents. They’re talking to marketing managers, mobile growth teams, and performance analysts—the kind of people who look at dashboards all day and need UI that disappears so they can focus on the numbers.

The design language shouts two things: clarity and trust. The Gilroy font family (with a hard fallback into Helvetica Neue) is a clean geometric sans that still has personality. Large heading sizes—up to 120px—tell you they’re not shy about making statements, and they know the value of breathing space in layouts. The spacing scale is based on an 8px grid, but they’re not religious about it—rolling in 10px, 27px, and even 206.5px when the layout demands it.

Colors lean heavily on a deep #2c3543 primary for text, balanced with a saturated #3088f4 for interactive actions. This particular blue is brighter than the navy used for text—it’s engineered to command clicks. Subtle grays (#8b8f9e, #adb6c5) help organize without shouting.

They’ve also kept brand UI consistent with the button system. Multiple variants exist (solid blue, solid dark, outline white, full-pill transparent). The most surprising choice? That hover transform: rotate(180deg). It’s unusual in product UI—more like an experimental marketing site behavior.

Border radii are modest—mostly 5px and 10px, rarely more, except for the occasional pill with 9999px radius. Shadows are minimal—used sparingly for subtle separation or focus rings, not for decorative depth.

Overall: This is a professional SaaS UI system where primary actions are bright and fast, typography is bold, and every pixel is designed to support clarity in data-heavy interfaces.

2. Color System

2.1 Primary Colors

The main brand color is #2c3543 (rgb(44, 53, 67)). This deep navy-gray is the semantic “primary” in the data—used for text, borders, and other foundational UI elements. It projects stability, seriousness, and trust (common in enterprise SaaS and B2B tools). The “action” color is #3088f4 (rgb(48, 136, 244)), a bright blue that visually pulls attention, especially against white backgrounds.

This works because the action blue is far from the primary navy—it’s both hue and lightness contrasting. Compared to competitors like AppsFlyer (who use lighter blues), Singular’s is more saturated and therefore stronger against white.

2.2 Complete Palette

This palette is tightly controlled. There are functional CSS variables (like --wp-admin-theme-color = #3858e9) but those aren’t brand-facing—they’re platform variables.

2.3 Color Relationships

The primary navy (#2c3543) has excellent contrast against white—WCAG AAA for normal text. Action blue (#3088f4) on white also passes AA easily (contrast ~4.5:1). Secondary grays (#8b8f9e, #8e9bb0) need careful usage—they fail WCAG AA for smaller text sizes on white, so they’re clearly intended for non-critical info like meta text or disabled UI.

On dark backgrounds (navy panels), white text pops with AAA contrast. Bright blue on navy is more subtle—good for links, but check accessibility for smaller labels.

No dark mode is detected—the palette is light-first.

2.4 Usage Guide

• Do pair #3088f4 with white for primary buttons.
• Do use #2c3543 for body text on white surfaces—it’s softer than pure black but still readable.
• Avoid using muted grays (#8b8f9e) for anything essential—save for tabs, hints.
• Accent elements on light gray surfaces (#f4f2f2) with action blue to guarantee visibility.
• Don’t mix #c7dffc hover highlight with #4a5a71—keep hover palettes consistent per theme.

3. Typography

3.1 Font Families

Singular uses:

• Primary: Gilroy
• Fallbacks: Helvetica Neue, Helvetica, Arial
• Source: No Google/Adobe Fonts detected—custom/self-hosted.

Gilroy’s geometry gives headings a tech feel without being sterile. Fallbacks ensure compatibility if custom fonts fail.

3.2 Type Scale

Here’s all extracted sizes:

Every style uses 0.25px letter-spacing except a few missing. This minimal tracking keeps text stable at large and small sizes.

3.3 Hierarchy

The scale moves from massive 120px hero headings down to tight 10px uppercase captions. Line heights are tuned: big headings (120px) at 1.00 keep them compact vertically, body/link sizes (16–20px) have looser lines (up to 2.50) for legibility.

They nailed headline dominance—you can’t miss a 72px or 120px page title. Smaller weights (500) soften some headings, maybe for subheads.

4. Spacing & Layout

4.1 Spacing Scale

The base: 8px-derived scale, with freedom to add oddball values.

Common values (and counts):

• 2px — Tight borders/paddings
• 5px — Icon gaps
• 6px — Tight paddings
• 10px — Button paddings, compact spacing
• 12px, 13px, 14px — Small offsets
• 15px — Link/button inline spacing
• 19px, 20px — Standard gaps
• 24px — Small component margins
• 25px — Mid component margins
• 27px, 30px — Section paddings
• 40px — Big spacing, button horizontal pads
• 50px, 60px — Hero spacing
• 80px, 100px — Large section gaps
• 206.5px — Hero-title vertical breathing

This mix says: They respect the grid—but break it for visual rhythm.

4.2 Layout

Breakpoints range from tiny 98px to huge 2260px—many device-specific points (500, 768, 992, 1200, 1366…). This suggests custom media queries per section, probably for tailored content blocks.

5. Visual Elements

Border Radius

Values:

• 0px — Sharp edges for certain dividers/buttons
• 2px — Links
• 4px — Buttons/lists
• 5px — Most buttons
• 10px — Cards, images, anchors
• 9999px — Pills/round buttons

Consistent rounding—most interactive elements at 5px, cards/images at 10px, occasional extreme pills.

Shadows

Shadows are restrained:

• Light gray shadows (rgb(238, 238, 238) 0px 0px 2px) for subtle depth
• Inset rings (rgb(104, 113, 123) or white) for focus
• Soft dark drop shadows at low opacities
• One heavy (rgba(0, 0, 0, 0.4) 12px 12px 50px) — probably modal or marketing hero

No heavy material shadows—it’s a low-depth system.

Borders & Dividers

Main border: 1px solid #2c3543, often bottom-only for lists. Light #f3f3f3 dividers exist for vertical separation. Input borders pick up action blue.

6. Components

6.1 Buttons

Multiple variants:

1. Primary Blue Solid

   • Default: bg #3088f4, white text, padding 14px x 40px, radius 5px.
   • Hover: bg #f7f7f7, text var(--wp--preset--color--purple), rotate(180deg).
   • Active/Focus: bg #2c3543, text #1d21ea.

2. White Outline

   • Default: transparent bg, white text, 1px white border, radius 5px.
   • Hover: same hover as above (f7f7f7 + purple text).
   • Active/Focus: same dark bg + blue text.

3. Pill Transparent

   • Default: transparent bg, transparent text (likely icon-only), radius 9999px, padding ~14px x 26px.
   • Hover/Active/Focus same pattern.

4. Dark Solid

   • Default: bg #2c3543, white text, padding 14px x 80px, radius 5px.
   • Hover/Active/Focus: same hover pattern.

5. Language Switcher

   • Default: white bg, navy text, no radius, padding 0.
   • Hover: action blue text, light gray bg, subtle shadow.

6.2 Links

Five styles:

• Navy (#2c3543), weight 500 → hover blue text.
• White (#ffffff), weight 700 → hover blue text.
• Gray (#8b8f9e), weight 500 → hover blue text.
• Action blue (#3088f4), weight 700 → hover darker blue.
• Very light gray (#f3f6f9), weight 500 → hover darker blue.

No underlines—color change only.

6.3 Forms

No text inputs in captured data—probably styled inline with Vuetify defaults, enhanced with blue focus states.

6.4 Cards

Based on border radius values—cards are likely at 10px radius, occasional light shadows or borders. Spacing likely at 20–40px inside.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #2c3543;
  --color-action: #3088f4;
  --color-white: #ffffff;
  --color-surface-light: #f4f2f2;
  --color-border-gray: #adb6c5;
  --color-text-muted: #8b8f9e;
  --color-text-cool-gray: #8e9bb0;
  --color-hover-lightblue: #c7dffc;
  --color-hover-slate: #4a5a71;

  /* Typography */
  --font-primary: "Gilroy", "Helvetica Neue", Helvetica, Arial;
  --letter-spacing-default: 0.25px;

  /* Spacing */
  --space-xxs: 2px;
  --space-xs: 5px;
  --space-sm: 6px;
  --space-md: 10px;
  --space-lg: 20px;
  --space-xl: 40px;
  --space-section: 80px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-light: 0px 0px 2px rgb(238, 238, 238);
  --shadow-focus-dark: 0px 0px 0px 2px inset rgb(104, 113, 123);
}

8. AI Coding Assistant Prompt

# Singular Design System Specification

## System Prompt
You are a Singular design expert. Build UIs matching their visual language exactly.

## Brand Context
Singular’s design balances enterprise SaaS clarity with bold accents. Typography is large and geometric. Blue accents drive interaction. Primary text is deep navy-gray, surfaces are white or light gray, and depth is minimal.

## Color Palette
- Primary Text: #2c3543 — text, borders, headings
- Action Blue: #3088f4 — CTAs, primary buttons, links
- White: #ffffff — backgrounds, text on dark buttons
- Light Surface: #f4f2f2 — section backgrounds
- Border Gray: #adb6c5 — dividers, structural lines
- Muted Text Gray: #8b8f9e — tabs, secondary info
- Cool Gray Text: #8e9bb0 — alt body text
- Hover Light Blue: #c7dffc — light hover states
- Hover Slate: #4a5a71 — dark hover states

## Typography
Font Family: "Gilroy", "Helvetica Neue", Helvetica, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 Hero | 120px | 700 | 1.00 | Main hero title |
| H1 Large | 72px | 700 | 1.10 | Section hero |
| H1 Mid | 48px | 700 | 1.20 | Page header |
| Subhead | 48px | 500 | 1.60 | Subtitle |
| H2 | 36px | 700 | 1.20 | Section heading |
| H3 | 24px | 600 | 1.30 | Card heading |
| Body L | 20px | 500/700 | 1.20/1.40 | Main text |
| Body M | 18px | 500/700 | 1.60 | Body text |
| Body S | 16px | 500/700 | 1.13/1.60 | UI labels |
| Caption | 14px | 500/700 | 1.29/1.60 | Meta info |
| Tiny Upcase | 10px | 700 | 1.40 | Badges |

## Spacing & Grid
Base: 8px-derived scale. Values: 2px, 5px, 6px, 10px, 12px, 13px, 14px, 15px, 19px, 20px, 24px, 25px, 27px, 30px, 40px, 50px, 60px, 80px, 100px, 206.5px.

## Border Radius
- none: 0px — sharp divs
- xs: 2px — small links
- sm: 4px — inputs
- md: 5px — buttons
- lg: 10px — cards
- full: 9999px — pill buttons

## Shadows & Depth
Minimal shadows. Use:
- --shadow-light: 0px 0px 2px rgb(238, 238, 238) for subtle depth
- --shadow-focus-dark: 0px 0px 0px 2px inset rgb(104, 113, 123) for focus

## Component Specifications

### Primary Button
Default: bg #3088f4, color #ffffff, padding 14px 40px, radius 5px, no border.
Hover: bg #f7f7f7, color purple var(--wp--preset--color--purple), rotate(180deg).
Active: bg #2c3543, color #1d21ea.
Focus: bg #2c3543, color #1d21ea.

### Secondary Button (Outline White)
Default: transparent bg, white text, 1px solid white, radius 5px.
Hover: same hover as primary.
Active/Focus: same as primary.

### Pill Button
Default: transparent bg/text, radius 9999px, icon-focused padding.
Hover/Active/Focus: same as primary.

### Dark Solid Button
Default: bg #2c3543, color #ffffff, padding 14px 80px, radius 5px.
Hover/Active/Focus: same as primary.

### Navigation Links
Navy link: #2c3543 → hover #1d21ea, no underline.
White link: #ffffff → hover #1d21ea.
Muted link: #8b8f9e → hover #1d21ea.
Action link: #3088f4 → hover #1d21ea.

### Input Fields
Border: 1px solid #3088f4 on focus.
Radius: 4–5px.
Background: white.

### Cards
Background: #ffffff or #f4f2f2.
Radius: 10px.
Padding: 20–40px.
Shadow: optional light shadow.

## Layout & Responsive Rules
Breakpoints: 500px, 768px, 992px, 1200px, 1366px, up to 2260px.
Page padding: 20px mobile, 40px desktop.
Section gaps: multiples of spacing scale.

## Interaction Rules
Transitions: 150ms ease for bg/color changes.
Focus indicators: inset shadow or border color change.
Hover animations: rotate icon buttons 180deg.

## DO List
- Use ONLY colors from the palette.
- Maintain spacing multiples from scale.
- Keep button radius at 5px.
- Use Gilroy for all headings and body.
- Apply hover transform only where specified.
- Use navy text (#2c3543) for default body copy.
- Reserve bright blue (#3088f4) for actions.

## DON'T List
- Don’t add drop shadows beyond listed values.
- Don’t mix sharp and rounded radii in same block.
- Don’t invent new blues.
- Don’t underline links unless accessibility demands.
- Don’t use muted grays for essential text.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #3088f4;
  color: #ffffff;
  padding: 14px 40px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 18px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #f7f7f7;
  color: var(--wp--preset--color--purple);
  transform: rotate(180deg);
}
.btn-primary:focus {
  background: #2c3543;
  color: #1d21ea;
}
.btn-primary:disabled {
  opacity: 0.5;
}

Outline Button

.btn-outline {
  background: transparent;
  color: #ffffff;
  padding: 12px 40px;
  border-radius: 5px;
  border: 1px solid #ffffff;
  font-weight: 700;
  font-size: 18px;
}

Card

.card {
  background: #ffffff;
  border-radius: 10px;
  padding: 40px;
  box-shadow: var(--shadow-light);
}

---

## 9. Summary

**TL;DR** — Singular’s design system is bold but minimal: Gilroy typography, deep navy text, bright action blue, generous spacing, small consistent radii, and restrained shadows. Buttons dominate the interaction palette, with hover animations that add unexpected motion.

**Brand Keywords**
- tech-focused-clarity
- bold-minimal
- enterprise-saas-accessible
- data-dashboard-friendly
- blue-action-driver