# Opengamma Design System

> High-contrast financial precision anchored by a electric cyan primary and geometric grotesque typography.

**Source:** https://opengamma.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Opengamma utilizes a high-contrast "Dark Mode" foundation for its primary identity, transitioning between deep navy surfaces (#091936) and stark white canvases (#ffffff). The system is punctuated by a high-voltage primary cyan (#51d3f1) used for core calls-to-action and a secondary vermillion accent (#ef4e2e) reserved for highlighting key financial terminology. Typography is strictly geometric, leveraging Banana Grotesk across a wide range of weights (200-600) to establish a technical, institutional hierarchy. Layouts are spacious, often utilizing 130px vertical rhythms and generous 25px corner radii for elevated panels.

## Signature DNA
1. **The Electric Highlight** (The use of #51d3f1 as a primary action color against both #091936 and #ffffff backgrounds, seen on all analyzed pages).
2. **Technical Grotesque Hierarchy** (Banana Grotesk used in weights from 200 for body to 500 for display, creating a "quant" aesthetic, evidenced in `h1.t-62` and `section.space-y-8`).
3. **Vermillion Emphasis** (Strategic use of #ef4e2e to color-code specific words within headlines like "Margin Efficiency" and "Capital Efficiency").

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background, text on dark surfaces | 96 | High | Computed style |
| `{color.ink}` | `#000000` | Primary text, button labels, borders | 59 | High | Computed style |
| `{color.void}` | `#091936` | Hero section backgrounds, footer surface | 6 | Medium | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#51d3f1` | Primary CTA backgrounds, "Watch the demo" buttons | 4 | High | Brand page |
| `{color.emphasis}` | `#ef4e2e` | Keyword highlighting in headlines, decorative text | 14 | High | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| Banana Grotesk | 200, 300, 400, 500, 600 | All UI, Headings, Body | Inter | Proprietary |
| Space Mono | 300 | Subheadings, technical labels | Space Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 62px | 62px | -0.93px | 500 | Hero H1 | `h1.t-62` |
| `{type.display.xl}` | 52px | 52px | -0.78px | 500 | Section H2 | `h2.t-52.mx-auto` |
| `{type.display.lg}` | 42px | 44.1px | -0.63px | 400 | Sub-section H3 | `h3.t-42` |
| `{type.heading.md}` | 26px | 29.9px | normal | 300 | Feature titles | `h4.t-26` |
| `{type.heading.sm}` | 24px | 25.2px | normal | 400 | Card titles | `h6.t-24.font-bold` |
| `{type.body.lg}` | 20px | 30px | normal | 300 | Lead paragraphs | `p.t-20` |
| `{type.body.md}` | 16px | 24px | normal | 300 | Default body | `section.space-y-8` |
| `{type.caption.mono}` | 12px | 17.7px | 3.6px | 300 | Tech subheadings | `div.t-subheading` |

### Principles
1. **Tight Display Tracking.** Headlines at 52px+ use negative letter spacing (-1.5%) to maintain density.
2. **Light Body Weights.** Default prose uses Banana Grotesk at weight 300 rather than 400 for an airy, modern feel.
3. **Monospaced Accents.** Technical labels use Space Mono with extreme tracking (3.6px) for "data-driven" signaling.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 18 |
| `{space.sm}` | 16px | 18 |
| `{space.md}` | 24px | 7 |
| `{space.lg}` | 44px | 3 |
| `{space.section}` | 130px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Inputs, Section containers | `radius: 0px` |
| `{radius.md}` | 15px | Primary Buttons, Small Cards | `radius: 15px` |
| `{radius.lg}` | 20px | Standard Content Cards | `radius: 20px` |
| `{radius.xl}` | 25px | Dark Feature Panels | `radius: 25px` |

## Elevation
Not captured in source. The system relies on flat color blocking and 1px borders (`rgba(0, 0, 0, 0.1)`) rather than shadows.

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** Homepage, About
**Spec:** Background: `#51d3f1` / Text: `#000000` / Radius: `15px` / Padding: `11px 30px` / Font: `18px Banana Grotesk`
**States observed:** Default: Captured | Hover: Not captured

#### Text Input
**Role:** Lead generation / Email capture
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` / Text: `#000000` / Border: `1px #000000` / Radius: `0px` / Padding: `0px 20px`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Standard Card
**Role:** Feature display
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` / Text: `#000000` / Border: `1px rgba(0, 0, 0, 0.1)` / Radius: `20px` / Padding: `36px`
**States observed:** Default: Captured

#### Dark Feature Panel
**Role:** High-emphasis content block
**Pages observed:** Homepage
**Spec:** Background: `#091936` / Text: `#ffffff` / Radius: `25px` / Padding: `44px 46px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Hero Surface
**Role:** Main section container
**Pages observed:** Homepage, About
**Spec:** Background: `#091936` / Text: `#ffffff` / Padding: `130px 0px`
**States observed:** Default: Captured

#### Footer
**Role:** Site navigation and legal
**Pages observed:** All
**Spec:** Background: `#ffffff` / Text: `#000000` / Border-top: `1px #000000` / Font: `15px Banana Grotesk`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Section Vertical Rhythm | 130px |
| Max Content Width | ~1200px |
| Grid Type | Flexbox / Columnar |

## Imagery & decoration
- **Abstract Data Visuals:** Uses floating UI-like cards and dotted orbital lines to represent "Derivatives Markets."
- **Vermillion Highlights:** Inline text spans in `#ef4e2e` for emphasis.
- **Grayscale Logos:** Partner/Client logos (Pimco, ATP) are rendered in grayscale to maintain brand neutrality.

## Do's
- Use `#51d3f1` for the primary "Watch the demo" or "Talk to an expert" buttons.
- Apply `Banana Grotesk` weight 300 for all standard body copy.
- Use `130px` padding for top-level section transitions.
- Highlight exactly one or two words in headlines using `#ef4e2e`.
- Maintain sharp `0px` corners for form inputs.

## Don'ts
- **Wrong:** Using `#007aff` (Swiper default) for UI elements. **Right:** Use `#51d3f1`. **Reason:** #007aff is a library default, not the Opengamma primary.
- **Wrong:** Rounding form inputs. **Right:** Keep inputs at `0px` radius. **Reason:** Inputs follow a "sharp" foundation unlike buttons.
- **Wrong:** Using bold weights (700+) for body text. **Right:** Use weight 300 or 500 for emphasis.
- **Wrong:** Placing primary cyan buttons on vermillion backgrounds.
- **Wrong:** Using shadows on cards. **Right:** Use 1px borders or flat color changes.

## Similar brands
- **Palantir** (High-contrast technical aesthetic)
- **Stripe** (Geometric typography and clean surface transitions)
- **Flexport** (Institutional but modern financial/logistics feel)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #51d3f1;
  --color-accent: #ef4e2e;
  --color-void: #091936;
  --color-ink: #000000;
  --color-canvas: #ffffff;
  
  --font-main: "Banana Grotesk", sans-serif;
  --font-mono: "Space Mono", monospace;
  
  --radius-button: 15px;
  --radius-card: 20px;
  
  --space-section: 130px;
}
```

## Agent prompt examples
- "Create a hero section with a `#091936` background, a `62px` Banana Grotesk headline with one word in `#ef4e2e`, and a primary pill button in `#51d3f1`."
- "Design a feature card with a `20px` border radius, `36px` padding, and a `24px` bold Banana Grotesk title."
- "Generate a technical subheading using Space Mono at `12px` with `3.6px` letter spacing."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific typography scale (e.g., H1 downsizing) was not fully mapped in the provided tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://opengamma.com | 1440px | 2026-06-06 |
| Pricing | https://opengamma.com/pricing | 1440px | 2026-06-06 |
| About | https://opengamma.com/about | 1440px | 2026-06-06 |