---
title: "Lithic design system"
variant: extended
source: https://www.lithic.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/lithic-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Lithic · Design System

> Calm clarity for complex financial infrastructure

**Theme:** light · **Industry:** fintech · **Source:** https://www.lithic.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Lithic pairs a restrained white canvas with dramatic black feature panels, bright mint accents, and a precise, developer-oriented sans serif. Rounded modules, subtle contour-line graphics, and card imagery make complex issuing infrastructure feel approachable without losing its enterprise credibility.

## North star

Keep the page predominantly white and highly legible, then use deliberate black panels, precise typography, and restrained orange or mint accents to make complex infrastructure feel approachable.

## Overview

The page builds contrast through large areas of white canvas and a few dramatic black panels, especially the card-issuing hero and service-options section. Orange is reserved for the primary Contact us action; mint and pale cream or lilac appear as quiet section and card surfaces rather than a loud, all-over palette. ABC Monument Grotesk keeps navigation, headings, and explanatory copy visually consistent, with medium-weight display text and compact supporting text. The layout alternates broad, centered statements with modular cards and split content, keeping the infrastructure story scannable. Rounded corners soften the dense financial subject matter, while thin contour patterns, card mockups, partner marks, and interface imagery add depth and proof. Use generous whitespace around sections, but keep information-rich feature groups compact and orderly.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Core Ink | `#000000` | `--color-core-ink` | brand | Primary text and navigation; also anchors the dark hero, footer, and other high-contrast feature panels. |
| Canvas White | `#ffffff` | `--color-canvas-white` | surface | Main page canvas and text on black panels; keeps the long homepage bright and open. |
| Signal Orange | `#ff6600` | `--color-signal-orange` | accent | Primary Contact us button fill and border; use sparingly to make conversion actions stand out. |
| Quiet Gray | `#888888` | `--color-quiet-gray` | neutral | Muted supporting copy, especially in footer and secondary text. |
| Panel Charcoal | `#1a1a1a` | `--color-panel-charcoal` | semantic | Dark card backgrounds and outlines for inverse feature and link-card treatments. |
| Warm Cream | `#f6f3ee` | `--color-warm-cream` | surface | Soft neutral card and section surface, including bank, network, and navigation-related content. |
| Mint Wash | `#ebfef6` | `--color-mint-wash` | surface | Pale mint surface for the developer tools band and light resource callout. |
| Lilac Mist | `#f6f1fe` | `--color-lilac-mist` | surface | Pale lilac product showcase card surface; keep it localized to feature imagery. |
| Media Haze | `#ddd8e4` | `--color-media-haze` | neutral | Subtle border tone measured in media; treat as a supporting graphic edge rather than a core brand color. |
| Violet Signal | `#5c2999` | `--color-violet-signal` | accent | Occasional accent text within content or product visuals, not a dominant page-wide color. |
| Mockup Umber | `#665233` | `--color-mockup-umber` | neutral | Minor text tone appearing in measured content; likely incidental to a visual or mockup, not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#000000` (Core Ink) · `--color-surface-2` → `#f6f3ee` (Warm Cream) · `--color-surface-3` → `#ebfef6` (Mint Wash) · `--color-surface-4` → `#f6f1fe` (Lilac Mist) · `--color-text` → `#000000` (Core Ink) · `--color-text-muted` → `#888888` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Canvas White) · `--color-border` → `#1a1a1a` (Panel Charcoal) · `--color-accent` → `#ff6600` (Signal Orange) · `--color-accent-2` → `#5c2999` (Violet Signal) · `--color-on-accent` → `#ffffff` (Canvas White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f3ee` | 18.97:1 | AAA |
| `#000000` | `#ebfef6` | 20.04:1 | AAA |
| `#888888` | `#ffffff` | 3.54:1 | AA-large |
| `#888888` | `#000000` | 5.92:1 | AA |
| `#888888` | `#f6f3ee` | 3.2:1 | AA-large |
| `#888888` | `#ebfef6` | 3.38:1 | AA-large |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f6f3ee` | 1.11:1 | fail |
| `#ffffff` | `#ebfef6` | 1.05:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Monument Grotesk | `--font-body` | webfont | 400, 500 | Single family across display headings, body copy, navigation, buttons, and links. | Inter |

- **ABC Monument Grotesk:** Use a clean sans-serif with mostly 400 and 500 weights; headings are compact and slightly tight-tracked, with sentence case rather than all caps.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1 | -0.02em | — | ABC Monument Grotesk | Large centered hero statement and prominent campaign-style headings. |
| h1 | 32px | 500 | 1.2 | -0.02em | — | ABC Monument Grotesk | Primary page and section headlines. |
| h2 | 24px | 400 | 1.4 | 0 | — | ABC Monument Grotesk | Secondary section headings and large feature statements. |
| h3 | 20px | 400 | 1.4 | 0 | — | ABC Monument Grotesk | Feature-card and subsection titles. |
| body | 16px | 400 | 1.4 | 0 | — | ABC Monument Grotesk | Introductory copy, feature explanations, and general content. |
| caption | 14px | 400 | 1.4 | 0 | — | ABC Monument Grotesk | Small supporting details, labels, and compact metadata. |
| nav | 14px | 500 | 1.2 | 0 | — | ABC Monument Grotesk | Top navigation labels and compact menu items. |
| link | 16px | 500 | 1.4 | 0 | — | ABC Monument Grotesk | Action links such as documentation and learn-more prompts. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 8, 10, 12, 16, 24, 32, 38, 40, 48, 64, 80 px.
- Section rhythm 40px · element gap 8px · card padding 40px · max content width 1184px.

Use a centered content frame with a measured maximum width of 1184px and a compact overall density. The page alternates a large centered hero, horizontally arranged trust marks, two-column credibility cards, single-column product storytelling, and multi-column service cards. Keep section transitions clear with generous white canvas between major bands; use the measured 40px section gap as a rhythm reference. Align text to the left inside cards and feature sections, while keeping hero and selected resource callouts centered.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `22px` · link `24px` · xs `22px` · sm `24px` · pill `9999px`
- Shadow `lg` (card, link): `rgba(0, 0, 0, 0.5) 0px 16px 32px 0px`
- Shadow `lg-2` (media): `rgba(0, 0, 0, 0.1) 0px 16px 32px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The page is mostly flat: separation comes from white space, surface color, and rounded cards rather than heavy outlines. Use the measured 24px card radius and dark inverse card treatment where appropriate. Shadows are visible on select dark cards and media, while light cards stay quiet and surface-led.

## Imagery

Use dark, premium card mockups and abstract contour-line patterns for the hero and service area, with the lines staying subtle against black. Product panels can include clean interface screenshots, simplified dashboard details, and small brand or network marks. Keep imagery framed inside large rounded modules; pale mint and lilac backgrounds belong to specific product or developer showcases, not the entire page.

## Components

### Primary action

Use a bright orange pill-shaped Contact us button with white medium-weight text; it is the clearest accent and should remain visually isolated.

### Dashboard action

A dark pill in the navigation with warm cream text; keep it quieter than the orange primary action.

### Trust cards

Arrange credibility points in soft cream or white cards, pairing concise headings with certification, network, or investor marks.

### Dark service cards

Use charcoal inverse cards with white text, rounded corners, and clear service labels; keep supporting copy restrained.

### Product showcase

Place feature copy alongside interface or network visuals within a softly tinted, rounded product panel.

### Contour CTA band

Set a short conversion message and orange pill action over a pale patterned background, with the decorative lines kept low contrast.

### Measured component styles

- **Primary button** (“Contact us”): background #ff6600 · text #ffffff · border 1px solid #ff6600 · radius 160px · padding 10px 24px · 500 14px ABC Monument Grotesk
- **Secondary button** (“Dashboard”): background #261e12 · text #f6f3ee · border 1px solid #261e12 · radius 100px · padding 10px 16px · 500 14px ABC Monument Grotesk
- **Link** (“Processor Client Own your bank relations”): background #1a1a1a · text #ffffff · border 1px solid #1a1a1a · radius 24px · padding 40px 38.4px · 400 16px ABC Monument Grotesk · shadow rgba(0, 0, 0, 0.5) 0px 16px 32px 0px
- **Card** (“Direct to banks and networks”): background #f6f3ee · text #000000 · radius 24px · padding 40px · 400 16px ABC Monument Grotesk
- **Navigation item** (“Platform Solutions Developers Resources ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ABC Monument Grotesk

## Do

- Preserve a predominantly white page canvas.
- Reserve orange for high-priority conversion actions.
- Use black panels to create deliberate contrast, not as a default background.
- Keep pale mint, cream, and lilac on localized cards or bands.
- Use consistent rounded card and pill-button treatments.
- Pair concise headings with clearly subordinate explanatory copy.

## Don't

- Do not spread orange across large backgrounds.
- Do not add gradients that are not present in the measured style.
- Do not make contour patterns compete with text.
- Do not use several unrelated font families.
- Do not outline every card with a strong border.
- Do not turn the light page into a uniformly dark layout.

## Agent prompt

Build a new fintech infrastructure page in Lithic’s visual style. Use a clean white canvas (#ffffff), Core Ink (#000000) for primary text and navigation, and Signal Orange (#ff6600) only for the main conversion action. Organize content in a centered frame with generous whitespace, alternating clear editorial headings and compact, scannable feature modules. Introduce dark feature panels with Panel Charcoal (#1a1a1a) or black surfaces, and use Warm Cream (#f6f3ee), Mint Wash (#ebfef6), or Lilac Mist (#f6f1fe) only for localized card and product bands. Set all text in a restrained geometric grotesk such as Inter, favoring regular body copy and medium-weight headings. Use rounded cards, pill actions, subtle contour-line artwork, and polished card or dashboard imagery. Keep interactions obvious, details credible, and decoration subordinate to content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | White header with brand mark, centered navigation links, and right-aligned account actions. | Primary navigation, Dashboard shortcut | White canvas, Compact text links, Dark pill button |
| 2 | hero | Large rounded black media panel with centered headline, supporting copy, and two inline actions. | Value proposition, Dual call to action | Dark hero, White typography, Orange primary pill |
| 3 | stats | Centered proof heading followed by a two-column group of rounded credibility cards. | Trust signals, Compliance proof | Light cards, Partner logos, Compact metrics |
| 4 | product-showcase | A slim mint resource band precedes a centered headline and wide product feature panel. | Documentation links, Feature explanation | Mint callout, Lilac product panel, Interface graphic |
| 5 | feature-grid | Wide black section with introductory copy, centered subsection heading, and a grid of service cards. | Service overview, Learn-more links | Dark section band, Inverse cards, Card imagery |
| 6 | testimonials | Left-aligned introduction beside a horizontally arranged set of testimonial cards. | Customer proof, Carousel-style browsing | Light cards, Customer marks, Portrait details |
| 7 | feature-split | Wide mint-tinted band with explanatory text on the left and overlapping product interface imagery on the right. | Developer education, Documentation links | Mint surface, Split layout, Dashboard screenshots |
| 8 | cta | Wide pale patterned band with a single headline and orange action aligned on one row. | Conversion prompt | Contour-line decoration, Orange pill button |
| 9 | footer | Multi-column link directory above a compact bottom row with brand and legal information. | Deep navigation, Legal links | Small muted text, Column groups, Brand lockup |

## Source CSS custom properties (selected)

```css
--type-base--body-font: "ABC Monument Grotesk",Arial,sans-serif;
--type-h1--font: "ABC Monument Grotesk",Arial,sans-serif;
--type-h1--font-size-desktop: 4rem;
--type-h1--letter-spacing: -.02em;
--type-h1--font-size-tablet: 3.5rem;
--type-h1--font-size-mobile-l: 2.5rem;
--type-h1--font-size-mobile-p: 2.5rem;
--type-h2--font: "ABC Monument Grotesk",Arial,sans-serif;
--type-h2--font-size-desktop: 2rem;
--type-h2--letter-spacing: -.02em;
--type-h2--font-size-tablet: 2rem;
--type-h2--font-size-mobile-l: 1.5rem;
--type-h2--font-size-mobile-p: 1.5rem;
--type-h3--font: "ABC Monument Grotesk",Arial,sans-serif;
--type-h3--font-size-desktop: 1.5rem;
--type-h3--letter-spacing: -.02em;
--type-h3--font-size-tablet: 1.25rem;
--type-h3--font-size-mobile-l: 1.25rem;
--type-h3--font-size-mobile-p: 1.25rem;
--type-h4--font: "ABC Monument Grotesk",Arial,sans-serif;
--type-h4--font-size-desktop: 1.25rem;
--type-h4--font-size-tablet: 1.125rem;
--type-h4--font-size-mobile-l: 1rem;
--type-h4--font-size-mobile-p: 1rem;
--type-paragraph--font-size-desktop: 1rem;
--type-paragraph--font-size-tablet: 1rem;
--type-paragraph--font-size-mobile-l: .875rem;
--type-paragraph--font-size-mobile-p: .875rem;
--radius--xsmall: .5rem;
--type-paragraph-l--font: "ABC Monument Grotesk",Arial,sans-serif;
--type-paragraph-l--font-size-desktop: 1.5rem;
--type-paragraph-l--font-size-mobile-l: 1.125rem;
--type-paragraph-l--font-size-mobile-p: 1rem;
--type-paragraph--font: "ABC Monument Grotesk",Arial,sans-serif;
--type-paragraph-s--font-size-desktop: .875rem;
--type-paragraph-s--font-size-tablet: .875rem;
--radius--large: 1.5rem;
--radius--small: 1rem;
--radius--large-mobile: 1rem;
--type-paragraph-s--font-size-mobile-l: .75rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lithic-com