№ lithic-com

Programmable Card Issuing and Money Movement | Lithic

Deep charcoal expanse, crisp geometric sans-serifs, with a subtle, pulsing golden energy.

Marquee Herominimalism dark mode futurist fintech developer toolsdark

Programmable Card Issuing and Money Movement | Lithic - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Programmable Card Issuing and Money Movement | Lithic - full page scroll

Programmable Card Issuing and Money Movement | Lithic - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

SwatchHexOKLCHSuggested roleCopy

Hex#fb6a0c
OKLCHoklch(69.5% 0.196 45)
RoleDominant
find sites →
Hex#cda07d
OKLCHoklch(73.9% 0.072 59)
RoleSurface
find sites →
Hex#672f08
OKLCHoklch(37.5% 0.093 49)
RoleInk
find sites →
Hex#7c7c7c
OKLCHoklch(58.6% 0.000 90)
RoleAccent
find sites →
Hex#c6b19e
OKLCHoklch(77.3% 0.036 64)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	ABC Monument Grotesk	64px	500	1	-1.28px	Aa Bb Cc
h2	ABC Monument Grotesk	32px	500	1.2	-0.64px	Aa Bb Cc
body	ABC Monument Grotesk	16px	400	1.4	0	Aa Bb Cc
button	ABC Monument Grotesk	14px	500	1.2	0	Aa Bb Cc

Spacing scale

8px

16px

24px

80px

Radius scale

0px

8px

24px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #fb6a0c;
  --color-surface: #cda07d;
  --color-ink: #672f08;
  --color-accent: #7c7c7c;
  --color-detail: #c6b19e;
}

/* CSS variables exposed by source */
:root {
  --type-h3--margin-bottom: 1.5rem;
  --type-h2--font: "ABC Monument Grotesk",Arial,sans-serif;
  --radius--small-mobile: .75rem;
  --radius--large: 1.5rem;
  --type-paragraph-s--font-size-mobile-p: .75rem;
  --type-h3--font-size-mobile-p: 1.25rem;
  --type-paragraph-s--font-size-mobile-l: .75rem;
  --type-h4--font-size-mobile-l: 1rem;
  --type-h1--font-size-mobile-l: 2.5rem;
  --type-h4--line-height: 1.2em;
  --type-h2--line-height: 1.2em;
  --type-h1--font-size-desktop: 4rem;
  --type-paragraph-s--font-size-desktop: .875rem;
  --type-h4--letter-spacing: 0px;
  --type-h1--line-height: 1em;
  --type-h2--margin-bottom: 1.5rem;
  --type-h3--font-size-tablet: 1.25rem;
  --type-paragraph-l--line-height: 1.4em;
  --type-paragraph-l--font: "ABC Monument Grotesk",Arial,sans-serif;
  --type-h4--margin-bottom: .75rem;
  --radius--xsmall: .5rem;
  --type-h1--letter-spacing: -.02em;
  --type-h2--font-size-desktop: 2rem;
  --type-h3--font: "ABC Monument Grotesk",Arial,sans-serif;
  --type-h3--font-size-mobile-l: 1.25rem;
  --type-h3--line-height: 1.2em;
  --size-utility--96px: 6rem;
  --type-h4--font-size-mobile-p: 1rem;
  --radius--small: 1rem;
  --type-h3--font-size-desktop: 1.5rem;
  --type-paragraph--font-size-mobile-p: .875rem;
  --type-h2--font-size-tablet: 2rem;
  --type-base--body-font: "ABC Monument Grotesk",Arial,sans-serif;
  --type-h1--font-size-tablet: 3.5rem;
  --type-paragraph--font: "ABC Monument Grotesk",Arial,sans-serif;
  --type-paragraph-s--font-size-tablet: .875rem;
  --type-h1--margin-bottom: 1.5rem;
  --type-paragraph-l--font-size-mobile-l: 1.125rem;
  --size-utility--112px: 7rem;
  --type-h1--font: "ABC Monument Grotesk",Arial,sans-serif;
  --type-h4--font-size-tablet: 1.125rem;
  --size-utility--128px: 8rem;
  --type-paragraph-l--font-size-tablet: 1.25rem;
  --size-utility--160px: 10rem;
  --type-h4--font-size-desktop: 1.25rem;
  --type-paragraph-l--font-size-desktop: 1.5rem;
  --radius--xsmall-mobile: .5rem;
  --type-h4--font: "ABC Monument Grotesk",Arial,sans-serif;
  --type-paragraph--font-size-desktop: 1rem;
  --type-base--body-line-height: 1.5em;
  --type-h2--font-size-mobile-p: 1.5rem;
  --type-paragraph--font-size-tablet: 1rem;
  --type-h3--letter-spacing: -.02em;
  --type-paragraph-l--font-size-mobile-p: 1rem;
  --type-h2--font-size-mobile-l: 1.5rem;
  --type-h1--font-size-mobile-p: 2.5rem;
  --type-paragraph--font-size-mobile-l: .875rem;
  --type-paragraph-s--font: "ABC Monument Grotesk",Arial,sans-serif;
  --radius--large-mobile: 1rem;
  --type-h2--letter-spacing: -.02em;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Programmable Card Issuing and Money Movement | Lithic.
Reference design system (extracted from the live site):
- Palette: #fb6a0c, #cda07d, #672f08, #7c7c7c, #c6b19e
- Typefaces: ABC Monument Grotesk
- Macrostructure: Marquee Hero
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/lithic-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

ABC Monument Grotesk

64px

500

-1.28px

Aa Bb Cc

ABC Monument Grotesk

32px

500

1.2

-0.64px

Aa Bb Cc

body

ABC Monument Grotesk

16px

400

1.4

Aa Bb Cc

button

ABC Monument Grotesk

14px

500

1.2

Aa Bb Cc

:root { --color-dominant: #fb6a0c; --color-surface: #cda07d; --color-ink: #672f08; --color-accent: #7c7c7c; --color-detail: #c6b19e; } /* CSS variables exposed by source */ :root { --type-h3--margin-bottom: 1.5rem; --type-h2--font: "ABC Monument Grotesk",Arial,sans-serif; --radius--small-mobile: .75rem; --radius--large: 1.5rem; --type-paragraph-s--font-size-mobile-p: .75rem; --type-h3--font-size-mobile-p: 1.25rem; --type-paragraph-s--font-size-mobile-l: .75rem; --type-h4--font-size-mobile-l: 1rem; --type-h1--font-size-mobile-l: 2.5rem; --type-h4--line-height: 1.2em; --type-h2--line-height: 1.2em; --type-h1--font-size-desktop: 4rem; --type-paragraph-s--font-size-desktop: .875rem; --type-h4--letter-spacing: 0px; --type-h1--line-height: 1em; --type-h2--margin-bottom: 1.5rem; --type-h3--font-size-tablet: 1.25rem; --type-paragraph-l--line-height: 1.4em; --type-paragraph-l--font: "ABC Monument Grotesk",Arial,sans-serif; --type-h4--margin-bottom: .75rem; --radius--xsmall: .5rem; --type-h1--letter-spacing: -.02em; --type-h2--font-size-desktop: 2rem; --type-h3--font: "ABC Monument Grotesk",Arial,sans-serif; --type-h3--font-size-mobile-l: 1.25rem; --type-h3--line-height: 1.2em; --size-utility--96px: 6rem; --type-h4--font-size-mobile-p: 1rem; --radius--small: 1rem; --type-h3--font-size-desktop: 1.5rem; --type-paragraph--font-size-mobile-p: .875rem; --type-h2--font-size-tablet: 2rem; --type-base--body-font: "ABC Monument Grotesk",Arial,sans-serif; --type-h1--font-size-tablet: 3.5rem; --type-paragraph--font: "ABC Monument Grotesk",Arial,sans-serif; --type-paragraph-s--font-size-tablet: .875rem; --type-h1--margin-bottom: 1.5rem; --type-paragraph-l--font-size-mobile-l: 1.125rem; --size-utility--112px: 7rem; --type-h1--font: "ABC Monument Grotesk",Arial,sans-serif; --type-h4--font-size-tablet: 1.125rem; --size-utility--128px: 8rem; --type-paragraph-l--font-size-tablet: 1.25rem; --size-utility--160px: 10rem; --type-h4--font-size-desktop: 1.25rem; --type-paragraph-l--font-size-desktop: 1.5rem; --radius--xsmall-mobile: .5rem; --type-h4--font: "ABC Monument Grotesk",Arial,sans-serif; --type-paragraph--font-size-desktop: 1rem; --type-base--body-line-height: 1.5em; --type-h2--font-size-mobile-p: 1.5rem; --type-paragraph--font-size-tablet: 1rem; --type-h3--letter-spacing: -.02em; --type-paragraph-l--font-size-mobile-p: 1rem; --type-h2--font-size-mobile-l: 1.5rem; --type-h1--font-size-mobile-p: 2.5rem; --type-paragraph--font-size-mobile-l: .875rem; --type-paragraph-s--font: "ABC Monument Grotesk",Arial,sans-serif; --radius--large-mobile: 1rem; --type-h2--letter-spacing: -.02em; }

Build a landing page in the visual style of Programmable Card Issuing and Money Movement | Lithic. Reference design system (extracted from the live site): - Palette: #fb6a0c, #cda07d, #672f08, #7c7c7c, #c6b19e - Typefaces: ABC Monument Grotesk - Macrostructure: Marquee Hero Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/lithic-com