The NumiNica Collection

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.

← Back to home

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)

NumiNica

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-7xl

h2

Rare specimens, certified

text-3xl font-black tracking-tighter text-on-surface sm:text-4xl

h3

Rare specimens, certified

mb-8 text-xl font-bold text-primary

h4

Rare specimens, certified

text-lg font-bold text-on-surface

h5

Rare specimens, certified
text-base font-semibold text-on-surface

h6

Rare specimens, certified
text-sm font-semibold text-on-surface

Colors

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