Programmable Card Issuing and Money Movement | Lithic
Marquee Hero
Loading
Agentcard
Electric cobalt brutalism, pixelated block type shouting over high contrast voids
Click any value to copy. Roles are suggestions, not gospel.
- #1423bboklch(38.9% 0.227 267)Dominant
- #a8aed9oklch(76.1% 0.062 279)Surface
- #0c148coklch(31.0% 0.186 267)Ink
- #a46753oklch(57.5% 0.085 39)Accent
- #d7b1a8oklch(79.2% 0.046 34)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | GeistPixelSquare | 166px | 700 | 0.92 | -1.656px | Aa Bb Cc |
| h2 | GeistPixelSquare | 49px | 400 | 1.04 | 0 | Aa Bb Cc |
| h3 | GeistPixelSquare | 28px | 400 | 1.6 | 0 | Aa Bb Cc |
| body | GeistSans | 16px | 400 | 1.6 | 0 | Aa Bb Cc |
| button | Arial | 22px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #1423bb;
--color-surface: #a8aed9;
--color-ink: #0c148c;
--color-accent: #a46753;
--color-detail: #d7b1a8;
}
/* CSS variables exposed by source */
:root {
--font-geist-mono: "GeistMono",ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
--font-geist-pixel-square: "GeistPixelSquare",Geist Mono,ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
--font-geist-sans: "GeistSans","GeistSans Fallback";
--paper: #171818;
--lm-ang: 0deg;
--wt-45: rgba(23,24,24,0.62);
--fs-h2: clamp(24px,2.6vw,36px);
--fs-sm: 14px;
--display: "GeistPixelSquare",Geist Mono,ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace,Georgia,"Times New Roman",serif;
--body: "GeistSans","GeistSans Fallback",system-ui,-apple-system,sans-serif;
--fs-label: 12px;
--ease-in-out-strong: cubic-bezier(0.77,0,0.175,1);
--n900: #f4f3ee;
--ease-out-strong: cubic-bezier(0.23,1,0.32,1);
--hair-blue: rgba(255,255,255,0.28);
--gut: 48px;
--pad: max(40px,calc((100vw - 1800px) / 2 + 48px));
--fs-lead: clamp(16px,1.15vw,19px);
--fs-h3: clamp(20px,2.2vw,28px);
--wt-65: rgba(23,24,24,0.72);
--blue-hi: #2e3ae8;
--buzz-dot: rgba(23,24,24,0.09);
--maxw: 1800px;
--blue: #1520b8;
--fs-body: 16px;
--fs-micro: 10px;
--hair: rgba(23,24,24,0.16);
--b300: #ccdbff;
--mono: "GeistMono",ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace,ui-monospace,SFMono-Regular,Menlo,monospace;
--fs-h1: clamp(28px,3.4vw,52px);
--ease: cubic-bezier(0.22,1,0.36,1);
}Drop-in prompt
Build a landing page in the visual style of Agentcard.
Reference design system (extracted from the live site):
- Palette: #1423bb, #a8aed9, #0c148c, #a46753, #d7b1a8
- Typefaces: GeistPixelSquare, GeistSans, Arial
- 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/agentcard-sh
