Skip to content
DesignMunkDesignMunk Submit a site

Griffin

griffin.com
The bank the world needs next
Finance Fintech Next.js Homepage Cambon Sohne
Share Visit site
griffin.com DESKTOP · 1440
Griffin

AI Breakdown

Design export

---
version: alpha
name: Griffin
description: The bank the world needs next
colors:
  primary: "#f9f5ef"
  secondary: "#f37145"
  neutral: "#0c0c0b"
  border: "#363533"
  brand-orange-pop: "#fbc03c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Cambon
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Sohne
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.21
  headline-sm:
    fontFamily: Sohne
    fontSize: 18.7px
    fontWeight: 300
    lineHeight: 1.18
  headline-xs:
    fontFamily: Sohne
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.22
  body-md:
    fontFamily: Sohne
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.43
rounded:
  sm: 3px
  full: 9999px
spacing:
  xs: 6px
  sm: 14px
  md: 32px
  lg: 40px
  xl: 72px
components:
  button-primary:
    backgroundColor: "#e6e1d9"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 8px 14px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 8px 14px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 9px
---

# Griffin: Editorial Serif Headlines on a Pitch-Black UI

## Overview

Dark, editorial, and developer-first. The interface balances confidence with restraint: near-black surfaces, warm cream text, and quiet micro-accents. Density is moderate; copy blocks are short, with compact line heights and tight letter spacing. The goal is to feel bank-grade while remaining approachable to product and engineering teams evaluating an API.

## Colors

- primary (#f9f5ef): Warm cream for all foreground text and icons on dark surfaces.
- secondary (#f37145): Brand orange accent for small highlights, charts, or promotional badges—use sparingly.
- neutral (#0c0c0b): Near-black base for page background, app panels, and the hero.
- border (#363533): Graphite hairlines for dividers, table cells, and subtle containers.
- brand-orange-pop (#fbc03c): High-visibility pop used in decorative motifs and small emphasis states.
- surface (#0c0c0b): Default surface color; matches neutral for cohesive dark mode.
- on-surface (#f9f5ef): Default ink on surfaces; aligns with primary for maximal contrast.

## Typography

- Cambon (custom/self-hosted). Role: headline-lg for hero claims at 40px, weight 300, -0.02em letter spacing. Not freely hosted; substitutes: Cormorant Garamond, Playfair Display, or Merriweather (all Google Fonts) for an editorial serif with similar contrast.
- Sohne (custom/self-hosted). Roles: headline-md 24px, headline-sm 18.7px, headline-xs 18px, and body-md 14px, all at weight 300 with tight line heights. Substitutes: Roboto, Noto Sans, or Ubuntu (Google) for a neutral, modern sans.
- Sohne Mono (custom/self-hosted). Appears in code and JSON snippets. Substitutes: IBM Plex Mono, JetBrains Mono, or Source Code Pro (Google/other free) for technical content.
- Typographic rhythm: compact leading in headings (1–1.22) and readable body (1.43). Keep sentence lengths short to suit the dense, developer tone.

## Layout

Spacing scale is tight-to-generous: 6, 14, 32, 40, 72px. Use 6–14px for intra-component padding, 32–40px for blocks within a section, and 72px for section breaks and hero breathing room. Grids rely on hairline borders rather than large gutters; cards and logo rails use equal-height cells with consistent 32–40px padding. Content reads best in a medium column width with frequent subheads and lists.

## Elevation & Depth

Depth is mostly tonal and by stroke. Shadows are largely absent; the only measured effect is a multi-ring focus outline (sm) for interactive elements and an inset line (inner) for contained panels. Prefer #363533 borders and subtle contrast steps over drop shadows. Generous whitespace around blocks creates hierarchy on the dark surface.

## Shapes

Two radii define the language. Cards and structured panels use a small 3px corner for a technical feel. CTAs and chips are fully pill-shaped (9999px) to telegraph interactivity and to soften the otherwise angular grid.

## Components

Buttons and cards are the primary building blocks:
- Button — Primary: 40px tall pill, padding 8px 14px, background #e6e1d9, text #0c0c0b. Use for main CTAs like Try for free.
- Button — Secondary: 40px tall pill, padding 8px 14px, text #f9f5ef on transparent/dark. Reserve for lower-emphasis CTAs; consider a 1px #363533 stroke when placed on busy areas.
- Button — Link: Text-only, 0 radius; aligns with inline navigation and tertiary actions.
- Card: Dark card on #0c0c0b with 3px radius and 9px internal padding; text in #f9f5ef. Use borders #363533 for separation.

### Navigation bar
- Background #0c0c0b, links in #f9f5ef at body-md 14px. Right-aligned "Contact sales" uses the primary pill. Horizontal spacing sm–md; underline on hover, ring focus (sm).

### Hero header
- Headline in Cambon 40px/1, -0.02em; supporting copy body-md 14px. Two CTAs: Primary then Secondary. Bottom edge can meet a decorative band with small #fbc03c speckles.

### Trust logo rail
- Grid of client logos in equal cells. Cells use 1px #363533 borders and 3px radius; padding md 32px. Caption "Trusted by 50+ companies" set in headline-xs 18px.

### Industry solution cards
- Each card uses the card token, with a headline in headline-sm 18.7px, a 3-item list, and a "Learn more" link styled as button-link. Grid spacing md–lg.

### Capability ladder (01–04)
- Four labeled steps stacked or in a row. Numbers sit in mono; labels in headline-xs 18px. Use borders #363533 to connect steps.

### UI/API split panels
- Side-by-side dark cards: left UI mock (labels in body-md), right code block in mono with inset inner shadow. Apply focus ring (sm) when interactable.

### Developer quick-start
- Section pairs a short resources list with a monospace cURL example. Primary pill for "Try for free"; a neutral link for docs.

## Do's and Don'ts

- Do keep foreground text in #f9f5ef on #0c0c0b for contrast; avoid mid-gray body text.
- Do use pill buttons at 40px height; do not mix squared corners with pills in the same CTA group.
- Do prefer #363533 borders and spacing for hierarchy; don't add soft drop shadows except the provided focus ring.
- Do reserve #f37145 and #fbc03c for small highlights or data; don't flood large backgrounds with accent colors.
- Don't increase heading weights; maintain light weights and tight tracking to preserve the editorial tone.

## Agent Prompt Guide

Quick palette reference:
- Text: #f9f5ef
- Background: #0c0c0b
- Border: #363533
- Accent: #f37145 (subtle); Pop: #fbc03c (sparingly)

1) Build a hero section
- Background #0c0c0b. H1 set to 40px/1, weight 300, letter-spacing -0.02em in Cormorant Garamond (fallback Playfair Display, serif). Body copy 14px/1.43 in Roboto (fallback Noto Sans). Primary CTA: pill 40px tall, padding 8px 14px, background #e6e1d9, text #0c0c0b. Secondary CTA: pill 40px, transparent bg, text #f9f5ef, 1px border #363533 on hover/focus with a multi-ring focus outline.

2) Create a trust logo grid
- Twelve equal cells on #0c0c0b with 3px radius and 1px borders #363533. Inside each, center logos and set captions in 18px Roboto. Section label in 18px Roboto, color #f9f5ef. Gaps md 32px around the grid.

3) Industry solution card component
- Container uses #0c0c0b, 3px radius, 9px internal padding, 1px border #363533. Title in 18.7px Roboto (weight 300). Body list in 14px Roboto with bullets highlighted using #f37145. "Learn more" as a text link in #f9f5ef.

4) UI/API split
- Two columns. Left: UI summary with labels 14px Roboto. Right: code block using JetBrains Mono (fallback IBM Plex Mono) at 13–14px, color #f9f5ef on #0c0c0b, with an inset 1px border and outer focus ring when interactive. Section spacing xl 72px above and lg 40px below.

## Similar Brands

- Stripe: Developer-led dark surfaces with precise type; Stripe is cooler and brighter, with more motion and gradients than Griffin's restrained, editorial tone.
- Wise Platform: Dark, data-driven layouts with strong trust rails; Wise leans green and geometric where Griffin stays cream and serif-led.
- Modern Treasury: Serious fintech with quiet grids and code samples; MT is lighter with more whitespace and less theatrical headings.
- Unit: BaaS patterns and solution cards; Unit favors pure sans-serif typography and lighter themes versus Griffin's serif/sans pairing.
- Solaris: Enterprise banking infrastructure with dense documentation links; Solaris is more corporate and less developer-centric in its visual language.

More like this

Browse Finance →
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 2 days ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 4 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 6 days ago
quinngtl.com
Quinn Global Tax Law Finance
Quinn Global Tax Law
Protect what’s yours with integrated global tax and legal strategy
Homepage · 7 days ago