Specimen: Tokens, Type Scale, Containers

Use this page to validate design tokens, typography scale, container gutters, and core card primitives before shipping marketing pages.

Visual QA only. Not part of the public marketing funnel.

Container demo (centered with gutters)

This box should be centered within the page container and respect responsive gutters.

Typography scale

hero

Hero Heading

Showcase hero size + weight pairing in LATAM and Arabic glyphs.

section

Section Heading

Default section titles for marketing layouts.

subheading

Subheading

Supports eyebrow copy or inline callouts.

body

Body text — base/md:lg leading-relaxed

Base paragraph rhythm with comfortable line length.

btn-primary

Primary Button

CTA token with large type.

btn-secondary

Secondary Button

Secondary CTA treatment with same sizing.

Color tokens

Derived from the design tokens file. Each block renders rgb(var(--token)).

Primary Blue

var(--primary-blue)

Primary Blue Light

var(--primary-blue-light)

Primary Blue Dark

var(--primary-blue-dark)

Secondary Gold

var(--secondary-gold)

Secondary Gold Light

var(--secondary-gold-light)

Secondary Gold Dark

var(--secondary-gold-dark)

Neutral Gray

var(--neutral-gray)

Neutral Light

var(--neutral-light)

Neutral Dark

var(--neutral-dark)

Success Green

var(--success-green)

Warning Orange

var(--warning-orange)

Error Red

var(--error-red)

Grid & card primitives

Equal-height card grid to confirm spacing, border radius, and shadow tokens.

Card 1

Equal height behavior check. Cards should align and stretch evenly.

Card 2

Equal height behavior check. Cards should align and stretch evenly.

Card 3

Equal height behavior check. Cards should align and stretch evenly.

Motion & accessibility

Quick links for hover/focus, reduced-motion, and alternate-state audits.

Hover / Focus test Reduced motion checkTip: enable reduced motion in the OS to verify fallbacks.