Amp

Style Specimen

Visual Character

Editorial-meets-terminal aesthetic with warm cream/olive tones in light mode and deep teal-blacks in dark mode. Sharp zero-radius UI, large 48px touch targets, and gruvbox-inspired terminal palette for code.

Color Board

Background
--color-bg-page
Accent
--color-brand-primary
Yolk
--color-yolk

Typography

Display
Heading Large
Heading Medium

Body text sample for reading rhythm.

Caption / muted text sample.

inline code

Fluid Type Scale

XS: Variable font size clamp
SM: Scales with viewport
Base: Readable at all sizes
LG: Section headers
XL: Page titles
2XL: Hero secondary
3XL: Hero primary

Background System

Page Base
Grid Pattern
Hero Atmosphere
Muted Section

Atmosphere Demo

Hero atmosphere

Grid pattern with yolk orange and teal glow accents.

Motif Library

Gridline
Dot Field
Yolk Orange
Glow Blend

Gruvbox Terminal Palette

Cards

Plain Card

Base surface with subtle transparency.

Interactive Card

Hover to see surface darken.

New

Badge Card

42

Forms

Navigation

Overview Components Patterns Code

Table

Column Value Status
Typography Fluid clamp() Ready
Colors Gruvbox + teal Ready
Motion Minimal Ready

Prose

This section demonstrates article-style reading content. Links appear in accent blue, paragraph rhythm follows the fluid type scale, and muted explanatory text provides hierarchy.

Code Block

example.js JavaScript 
// Amp code style - gruvbox palette
const motif = {
  type: "gruvbox",
  yolk: "#f6833b",
  scale: 16
};

export { motif };

Callouts

Info
Teal for informational.
Success
Green from gruvbox.
Warning
Yellow from gruvbox.
Danger
Red from gruvbox.

Overlay

Modal Surface

Sharp corners, large touch target, teal accent.

Animation System

Keyframe animations extracted from ampcode.com CSS. Includes loading spinners, pulses, fades, shakes, and terminal-inspired effects.

spin
ping
pulse
caret-blink
FADE
fade-in
SLIDE
slideUp
border-shimmer
hover shake