Style Specimen

A reusable visual reference for future AI-generated pages.

Visual Character

Replace this with a concise summary of the extracted design language, including atmosphere and motifs.

Color Board

Page background
--color-bg-page
Surface
--color-surface-2
Brand primary
--color-brand-primary

Typography

Display / Hero
Heading Large
Heading Medium

Body text sample for standard reading rhythm and paragraph flow.

Secondary / caption text sample.

inline code sample()

Background System

Page Base
Pattern Layer
Hero Atmosphere
Muted Section

Atmosphere Demo

Hero-style atmosphere

Combined base, pattern, glow, overlay, and section surface treatment.

Motif Library

Diagonal Stripe
Gridline
Dot Field
Ambient Glow

Cards

Plain Card

Base informational surface.

Interactive Card

Hoverable with elevation shift.

Badge

Stat Card

128

Forms

Navigation

Table

Column Value Status
Typography Extracted Ready
Atmosphere Structured Ready
Motion Partially inferred Check

Prose

This section demonstrates article-style reading content. Links, paragraph rhythm, muted explanatory text, and inline emphasis should all reflect the extracted visual language.

Code Block

example.ts TypeScript
// Replace with extracted code theme
const motifs = {
  stripe: "diagonal",
  glow: "ambient",
  density: 0.12
};

Callouts

Info
Informational style sample.
Success
Success style sample.
Warning
Warning style sample.
Danger
Danger style sample.

Overlay

Animation System

Replace this section with extracted @keyframes from the site's CSS. Add animation demo boxes and the @keyframes definitions in the CSS section above.

Animation 1
Animation 2
Animation 3
Animation 4