Force Brand Design System Deep Dive

1. Brand Overview

Force here is essentially Salesforce’s platform arm — the part of the ecosystem where the company speaks directly to builders, integrators, and enterprise developers. The design language leans on Salesforce’s corporate identity but strips out some of the marketing gloss to focus on clarity and trust. This isn’t a playful consumer brand; it’s a professional interface for people who live in dashboards and admin panels.

The vibe is utilitarian, but with that signature Salesforce friendliness. You can tell from the typography choice — “Times” for headings — that they’re not chasing the current sans-serif tech aesthetic. That’s unusual. Most cloud platform sites go sans-serif for neutrality and modernity. Force’s serif headings signal gravitas and heritage. It says: “We’ve been here a while; this is a serious tool.” That works for enterprise buyers who want stability over trendiness.

The extracted data shows very little decorative flourish. No shadows. No border-radius tokens defined. This points to a flat, content-first approach. The spacing scale is an 8px base with some odd increments like 21.44px, which tells me they’re mixing base-grid spacing with type-derived rhythm. That’s a sign of a system built from both a design token mindset (8px grid) and typographic vertical rhythm.

There’s no color data in the extraction — no palette defined at the CSS variable level. That’s rare. It suggests the site is either inheriting styles from elsewhere (global Salesforce CSS) or using inline assets. From a design system perspective, it means Force’s unique visual language is minimal and heavily dependent on typography and spacing rather than chromatic branding.

If you’re designing for this brand, you’re designing for legibility, hierarchy, and rhythm more than for visual decoration. The philosophy: content clarity, minimal visual noise, and consistent spacing. It’s a design that trusts the product and the copy to do the talking.

2. Color System

This is going to be short because the extracted data contains no actual colors — no semantic tokens, no palette array, no CSS variables. That’s telling.

2.1 Primary Colors

None defined in the extracted data. That means Force is probably inheriting primary colors from Salesforce’s broader design system (which is heavy on blues and whites) or handling them in another stylesheet not captured here. From a design system perspective, if you’re working within Force’s subset, you’d need to import the palette from the parent brand.

2.2 Complete Palette

2.3 Color Relationships

No extracted values means no way to compute contrast ratios in this dataset. If you’re implementing this, you’d apply Salesforce’s known color standards and check WCAG compliance manually.

2.4 Usage Guide

Given no palette in the data:

• Use parent Salesforce palette for CTAs, links, and backgrounds.
• Maintain high contrast for text (dark text on light backgrounds).
• Avoid introducing unapproved accent colors.

3. Typography

Typography is where Force’s personality shows.

3.1 Font Families

Headings use Times — the classic serif. No fallback stack listed, so it’s likely relying on system serif fallback. There’s no Google Fonts or Adobe Fonts source; this is default browser serif.

No body font is explicitly extracted here, but the data shows a second “heading-1” style with a smaller size and lighter weight, which could be misapplied body text.

3.2 Type Scale

That’s it. Two styles, both labelled as heading-1. This is odd — either an extraction quirk or a system where heading style is repurposed for smaller text. The 16px weight 400 variant is essentially body text in a serif — not common in web apps, but it reinforces the brand’s formal tone.

3.3 Hierarchy

With only two sizes, hierarchy is minimal. 32px bold is clearly page titles or section headers. 16px regular is body or secondary text. Without intermediate sizes (H2, H3, etc.), hierarchy relies on weight and spacing rather than scale jumps. This keeps the content rhythm tight but can feel flat if overused.

4. Spacing & Layout

4.1 Spacing Scale

Base scale type: 8px.

Extracted values:

An 8px base is standard. 16px is exactly double — common for medium gaps and padding. 21.44px is weird — that’s 1.34rem, which likely comes from line-height or type rhythm, not a spacing token. It’s probably applied in vertical margins tied to text blocks.

4.2 Layout

No breakpoints extracted, so we don’t have container widths. Given the simplicity, responsive design likely inherits from a global Salesforce grid. Without breakpoints, spacing remains consistent across devices.

5. Visual Elements

• Border Radius: No values. This means corners are likely square — fits with the flat, utilitarian vibe.
• Shadows: None extracted. This is flat design. Depth is conveyed through spacing and grouping, not elevation.
• Borders: No combinations extracted. Dividers are probably handled via simple 1px rules in the parent CSS.

6. Components

The data shows no button, link, or input styles extracted — empty arrays. That’s a strong indicator: Force’s site is either static marketing content or using global components from Salesforce’s Lightning Design System.

From a design system standpoint:

• Buttons: Likely square corners, flat fills, and rely on parent palette.
• Links: Likely standard blue underline on hover.
• Forms: Minimal, with consistent padding from the spacing scale.

Since nothing is defined locally, Force’s unique system is basically typography + spacing.

7. Design Tokens

Based on extracted data:

:root {
  /* Typography */
  --font-heading-1-family: "Times", serif;
  --font-heading-1-size: 32px;
  --font-heading-1-weight: 700;
  --font-heading-1-alt-size: 16px;
  --font-heading-1-alt-weight: 400;

  /* Spacing */
  --space-8: 8px;
  --space-16: 16px;
  --space-21-44: 21.44px;

  /* Colors */
  /* (none extracted) */

  /* Border Radius */
  /* (none extracted) */

  /* Shadows */
  /* (none extracted) */
}

8. AI Coding Assistant Prompt

# Force Design System Specification

This design system is inspired by Force’s official platform site. All values are extracted from its production styles. Use this specification to build UIs that match Force’s visual language exactly.

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

## Brand Context
Force’s design philosophy is formal, utilitarian, and content-first. It uses serif typography for authority and minimal decoration. Flat design—no shadows, no rounded corners—is preferred.

## Color Palette
- *(none extracted; use parent Salesforce palette if needed)*

## Typography
- Font Family: "Times", serif

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1    | 32px | 700    | —           | Page titles |
| Body  | 16px | 400    | —           | Paragraphs, labels |

## Spacing & Grid
Base: 8px grid.

| Token  | Value   | Use For |
|--------|---------|---------|
| space-xs | 8px   | Tight gaps, icon spacing |
| space-sm | 16px  | Button padding, small gaps |
| space-md | 21.44px | Text block margins, vertical rhythm |

## Border Radius
No border radius — use square corners throughout.

## Shadows & Depth
Flat design — avoid shadows, use spacing for separation.

## Component Specifications

### Primary Button
```css
.btn-primary {
  font-family: "Times", serif;
  font-size: 16px;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 0;
  border: none;
  background-color: var(--color-primary); /* from parent palette */
  color: white;
  transition: background-color 150ms ease;
}
.btn-primary:hover { background-color: var(--color-primary-hover); }
.btn-primary:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Links
Flat text links using serif font, underline on hover.

### Input Fields
Square corners, padding from 8px/16px tokens, flat borders.

### Cards
No local styles; flat white background, square corners, spacing from grid.

## Layout & Responsive Rules
- Use 8px base spacing.
- No local breakpoints — inherit from parent system.

## Interaction Rules
- 150ms ease transitions.
- Clear focus outlines — 2px solid in primary color.

## DO List
- Use "Times" for all headings and body text.
- Keep all corners square.
- Maintain 8px-based spacing.
- Use spacing tokens exactly as defined.
- Avoid shadows.

## DON'T List
- Don’t introduce rounded corners.
- Don’t use colors outside the parent palette.
- Don’t add gradient backgrounds.
- Don’t use non-serif fonts.

## Code Examples

### Button
```css
.btn {
  font-family: "Times", serif;
  font-size: 16px;
  font-weight: 400;
  padding: 8px 16px;
  border: none;
  border-radius: 0;
}
```

### Card
```css
.card {
  background: white;
  padding: 16px;
  border-radius: 0;
}
```

### Input
```css
.input {
  font-family: "Times", serif;
  font-size: 16px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 0;
}
```

9. Summary

TL;DR — Force’s design system is stripped down to serif typography and an 8px spacing grid. No local color tokens, no shadows, no border radii. It’s flat, formal, and focused on content clarity.

Brand Keywords:

• serif-authority
• flat-minimalist
• enterprise-formal
• spacing-driven