Style
Guide
Reference for Manrope scales and UI patterns. Color tokens live in kit-tokens.css (aligned with docs/code.txt); utilities and components are in globals.css. Toggle the header theme control to preview light and dark values.
Typography
Utility classes; font family is Manrope throughout.
display-lg
Rare specimens deserve clarity.
display-sm
Featured issue, 1849
headline-md
Certification & provenance
title-sm
Lot notes and grading
body-lg
Editorial body copy uses a comfortable line height for long descriptions of mintage, die variety, and auction history. No italics—weight and color carry emphasis.
Wordmark (Cinzel)
label-md
Grade · MS-65
label-sm
Population report
Heading component
Default styles from defaultHeadingClasses in Heading.tsx. headingType sets the element; headingTypeAs can apply another level’s classes for display.
h1
Rare specimens, certified
mb-6 text-4xl font-extrabold leading-[1.1] tracking-tighter text-on-surface sm:text-4xl lg:text-7xlh2
Rare specimens, certified
text-3xl font-black tracking-tighter text-on-surface sm:text-4xlh3
Rare specimens, certified
mb-8 text-xl font-bold text-primaryh4
Rare specimens, certified
text-lg font-bold text-on-surfaceh5
Rare specimens, certified
text-base font-semibold text-on-surfaceh6
Rare specimens, certified
text-sm font-semibold text-on-surfaceColors
Swatches read CSS variables so they track the active theme. Tailwind maps these as bg-primary, text-on-surface-variant, etc.
Brand & tertiary
primary
--palette-primary
primary-fill
--palette-primary-fill
primary-container
--palette-primary-container
on-primary
--palette-on-primary
on-primary-container
--palette-on-primary-container
secondary
--palette-secondary
on-secondary
--palette-on-secondary
secondary-container
--palette-secondary-container
on-secondary-container
--palette-on-secondary-container
tertiary
--palette-tertiary
on-tertiary
--palette-on-tertiary
tertiary-container
--palette-tertiary-container
on-tertiary-container
--palette-on-tertiary-container
tertiary-fixed
--palette-tertiary-fixed
on-tertiary-fixed
--palette-on-tertiary-fixed
tertiary-fixed-dim
--palette-tertiary-fixed-dim
on-tertiary-fixed-variant
--palette-on-tertiary-fixed-variant
on-tertiary-ink
--palette-on-tertiary-ink
Fixed roles (MD3)
primary-fixed
--palette-primary-fixed
on-primary-fixed
--palette-on-primary-fixed
on-primary-fixed-variant
--palette-on-primary-fixed-variant
primary-fixed-dim
--palette-primary-fixed-dim
secondary-fixed
--palette-secondary-fixed
on-secondary-fixed
--palette-on-secondary-fixed
secondary-fixed-variant
--palette-secondary-fixed-variant
secondary-fixed-dim
--palette-secondary-fixed-dim
Surfaces & text
background
--palette-background
neutral
--palette-neutral
secondary-button
--palette-secondary-button
surface
--palette-surface
surface-bright
--palette-surface-bright
surface-dim
--palette-surface-dim
surface-variant
--palette-surface-variant
surface-container
--palette-surface-container
surface-container-low
--palette-surface-container-low
surface-container-high
--palette-surface-container-high
surface-container-highest
--palette-surface-container-highest
surface-container-lowest
--palette-surface-container-lowest
on-surface
--palette-on-surface
on-surface-variant
--palette-on-surface-variant
on-background
--palette-on-background
Outline
outline
--palette-outline
outline-variant
--palette-outline-variant
Error
error
--palette-error
on-error
--palette-on-error
error-container
--palette-error-container
on-error-container
--palette-on-error-container
Inverse & app
inverse-surface
--palette-inverse-surface
inverse-on-surface
--palette-inverse-on-surface
inverse-primary
--palette-inverse-primary
surface-tint
--palette-surface-tint
inverted-bg (app)
--palette-inverted-bg
inverted-fg (app)
--palette-inverted-fg
Gradients
gradient-primary
--gradient-primary (Place Bid, .btn-primary)
gradient-pedestal
--gradient-pedestal
Buttons
8px corner radius via --radius-control. .btn-primary uses --gradient-primary; .btn-secondary uses the tonal secondary-button fill.
.btn-primary · .btn-secondary · .btn-inverted · .btn-outlined · .btn-tertiary
Form fields
Tonal background, 8px radius, bottom-edge focus accent.
.field
UX case study
How NumiNica’s experience was shaped for collectors, researchers, and institutions—without turning heritage into generic e-commerce noise.
Context
NumiNica curates Nicaraguan numismatic heritage: coins and banknotes that deserve the same care as physical archives. The product isn’t just “browse and buy”—it’s provenance, certification language, and high-fidelity imagery working together so the story of each specimen stays credible across generations.
Problem
Standard marketplace patterns optimize for density and speed. For rare pieces, that creates the wrong feeling: cluttered grids, noisy borders, and typography that reads like retail instead of research. Users need calm scanning, legible metadata, and a visual tone that signals trust—not urgency or gimmicks.
Users & goals
Primary audiences include serious collectors comparing die varieties, researchers tracing issuance history, and institutions presenting collections with institutional-grade clarity. Success looks like: quick orientation in the catalog, confident reading of grades and notes, and photography that feels like a museum pedestal, not a thumbnail strip.
Approach
We anchored the interface to a single creative north star—“The NumiNica Collection”—treating every specimen as museum-grade. Layout favors editorial rhythm: intentional asymmetry, generous whitespace, and layered surfaces so hierarchy comes from tone and depth, not from boxing content in 1px rules. Manrope carries the full typographic system so labels, body copy, and headings feel like one precise instrument—aligned with how certification and grading are communicated in the real world.
Key UX decisions
Surface hierarchy replaces arbitrary dividers: background shifts and subtle lifts distinguish sections and cards. Primary actions use a signature blue gradient for metallic depth; floating navigation leans on glass-style surfaces so context bleeds through instead of chopping the page. Form fields use tonal fills and a bottom-edge focus accent to keep inputs architectural and calm. Throughout, emphasis is carried by weight and color—not italics—so the voice stays objective and authoritative.
Outcome
The result is a system where the UI steps back and the artifacts step forward—consistent with NumiNica’s mission to preserve authentic, accessible heritage. This style guide documents the tokens and patterns so light and dark themes, components, and typography stay aligned as the collection grows.
Tools & imagery
The design was created with Stitch by Google, an AI-assisted UX design tool. All images used on the site are custom generative AI.