# Orbital Warm Editorial

## Overview
A warm, friendly brand style built around fully-round pill shapes. A cream canvas holds white pill and rounded-card modules in a modular block grid, while coral and amber decorative pills overlap like orbits and drift slowly across empty space. Headings are set in an optical serif (Fraunces); body copy in a sans-serif (Inter). The result reads as an editorial fintech brand — playful but composed. If a section feels empty, the fix is orbiting decoration, not a bigger void.

## Colors & Roles
Warm foundation: `background` is cream (#F4ECDD, hue ~83), `foreground` a warm near-black ink (#2B2620), `card` pure white. Accent is a strict two-color duo — `primary` coral (#EB7B4C) for main CTAs and pill fills, `accent` amber (#F3A623) for secondary highlights and hover chips. No other accent colors, no high-saturation primaries. `muted-foreground` is a warm taupe (#7A6E5E); `border` a soft sand (#E3D8C2). `secondary`/`muted` are warm neutrals derived from the cream. Body contrast ink-on-cream is ≈11:1 (AAA).

## Typography Rules
A serif + sans mix carries the hierarchy. Display and all headings use Fraunces (weight 500, optical serif) — H1 `clamp(2.4rem, 4.6vw, 4rem)`, line-height 1.12, letter-spacing −0.01em. Body is Inter 400 at 1.05rem, line-height 1.65, measure 60–70 chars. Kickers/labels are Inter 600, 0.78rem, uppercase, tracking 0.12em, colored coral. Never set headings in sans-serif.

## Layout Principles
Max content width 1180px on a 12-column modular block grid (24px gutter). Pill and card modules take varied column spans and heights; some pills spill slightly outside the grid to overlap like orbits. Vertical rhythm is airy: section gaps `clamp(88px, 10vw, 140px)`. Airy is the intent — but flat empty cream reads as unfinished, so empty areas are filled with coral/amber orbiting decorative pills plus one or two faint large pill outlines as watermarks.

## Depth & Elevation
Mostly flat with soft floating. Shadows are light only (`0 8px 24px` at 8% ink) and applied to floating pills / raised modules, never uniformly to every card. No gradients, glass, or noise.

## Shapes
Pills are the identity: `border-radius: 999px` for buttons, nav container, tags, avatars, and decorative shapes. Other elements (cards, images) use 12–16px rounding. Horizontal pills, vertical pills, and small circular pills overlap. Dropping pills for rounded rectangles alone breaks the style.

## Component Stylings
- **Button**: pill (radius 999px). Primary = coral solid fill + white text, padding 13px 32px, Inter 500. Hover scale(1.04) + one step darker. Secondary = transparent with a 1.5px ink pill outline.
- **Card**: long pill or rounded block (radius 12–16px), white surface, 28–32px padding, rounded line icon + coral kicker + Fraunces title + Inter body. Hover translateY(−4px) + rotate(1.5deg). Soft shadow only when floating.
- **Nav**: 72px cream header; Fraunces wordmark left; center menu inside a white pill container; coral solid pill CTA right. Menu hover highlights an item as a small amber pill.
- **Orbit decoration**: coral/amber pills (filled or faint outline) float over section backgrounds and rotate slowly (`@keyframes orbit`, 40s linear). Placed deliberately on orbit paths — no random floaters.
- **Icons**: 2px round-cap line icons in coral, crafted from warm fintech motifs (orbit, coin, chart). No emoji, no generic placeholder sets.

## Motion
Playful with a soft overshoot — `360ms cubic-bezier(0.34, 1.15, 0.64, 1)`. Content pills enter with scale(0.92→1) + fade; scroll-in adds translateY(16px→0) with ~80ms stagger. Background decoration pills orbit at 40s linear infinite. `prefers-reduced-motion` drops orbit and hover rotation, keeping only opacity/translateY. No fast mechanical snaps.

## Do's and Don'ts
**Do:** use pills as both containers and orbiting decoration; mix Fraunces serif headings with Inter body; keep accents to the coral/amber duo; fill empty cream with orbit decoration; use gentle overshoot motion.
**Don't:** use rounded rectangles instead of pills; set headings in sans-serif; introduce accent colors beyond coral/amber; use gradients, emoji, hard shadows, or glass; apply uniform shadows to every card; leave flat dead voids; use fast snappy motion.

## Responsive Behavior
Breakpoints at 768px and 1120px. The modular grid collapses toward single-column on mobile; display type scales via `clamp()`. Side padding 24px mobile / 56px desktop. The nav menu pill collapses to a rounded hamburger pill button on small screens. Orbit decoration density reduces but never disappears.

## Agent Prompt Guide
> Build this in the 'Orbital Warm Editorial' style: a warm cream canvas with fully-round pill shapes (border-radius 999px) as both content containers and decorative shapes that overlap like orbits in a modular block grid. Fraunces serif headings, Inter body. Accent only with a coral + amber duo. Fill empty cream with orbiting decorative pills and faint large pill outlines — never flat voids. White pill/rounded cards with soft shadow on floating modules only, hover translateY(−4px) + rotate(1.5deg). Playful soft-overshoot motion; background pills orbit slowly (40s). No gradients, emoji, hard shadows, or glass.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-orbital-warm-editorial` (an authored spec, not extracted from a live URL), so all tokens are `manual` confidence. The coral/amber duo and cream/ink/border neutrals trace directly to the pack's specified hex values; `secondary`/`muted` and the entire dark theme are derived (the pack ships light-only) and authored faithfully to the warm palette. Fonts are the open-licensed Fraunces (serif) and Inter (sans) named by the pack.