# Orbital Warm Editorial
따뜻한 크림 캔버스 위에 완전 라운드 알약 도형이 궤도처럼 겹치고, 세리프 헤딩·산세리프 본문에 코랄/앰버 듀오가 강조하는 playful 브랜드 스타일.
- taxonomy: warm-paper · orbital-warm, pill-shapes, warm-editorial, coral-amber, fintech-brand, playful-motion · complexity=medium
- page types: landing, marketing, editorial
- best for: 따뜻한 브랜드·핀테크 랜딩 페이지, 제품 소개·마케팅 사이트, 친근한 SaaS 홈
- avoid for: 데이터 밀도가 높은 대시보드, 엄격한 기업용 문서 사이트, 채도 높은 원색이 필요한 소비자 앱
- provenance: authored (design-diversity 팩 'web-orbital-warm-editorial' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# 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.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Orbital Warm Editorial — theme.css (generated, do not edit) */
:root {
--radius: 14px;
--radius-selector: 999px;
--radius-field: 999px;
--font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
--font-display: 'Fraunces', Georgia, serif;
--spacing: 8px;
--shadow: 0px 8px 24px 0px color-mix(in oklab, oklch(0.272 0.013 72.3) 8%, transparent);
--ks-display-weight: 500;
--ks-display-tracking: -0.01em;
--background: oklch(0.945 0.022 83.3);
--foreground: oklch(0.272 0.013 72.3);
--card: oklch(1 0 0);
--card-foreground: oklch(0.272 0.013 72.3);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.272 0.013 72.3);
--primary: oklch(0.701 0.151 42.6);
--primary-foreground: oklch(0.99 0.005 83);
--secondary: oklch(0.905 0.028 83);
--secondary-foreground: oklch(0.272 0.013 72.3);
--muted: oklch(0.925 0.020 83);
--muted-foreground: oklch(0.545 0.028 75);
--accent: oklch(0.781 0.158 73.8);
--accent-foreground: oklch(0.272 0.013 72.3);
--destructive: oklch(0.55 0.20 27);
--destructive-foreground: oklch(0.99 0.005 83);
--border: oklch(0.885 0.032 84.6);
--input: oklch(0.885 0.032 84.6);
--ring: oklch(0.701 0.151 42.6);
--chart-1: oklch(0.701 0.151 42.6);
--chart-2: oklch(0.781 0.158 73.8);
--chart-3: oklch(0.272 0.013 72.3);
--chart-4: oklch(0.545 0.028 75);
--chart-5: oklch(0.885 0.032 84.6);
}
.dark {
--background: oklch(0.225 0.012 72);
--foreground: oklch(0.945 0.022 83.3);
--card: oklch(0.275 0.014 72);
--card-foreground: oklch(0.945 0.022 83.3);
--popover: oklch(0.275 0.014 72);
--popover-foreground: oklch(0.945 0.022 83.3);
--primary: oklch(0.725 0.150 42.6);
--primary-foreground: oklch(0.20 0.010 72);
--secondary: oklch(0.315 0.015 72);
--secondary-foreground: oklch(0.945 0.022 83.3);
--muted: oklch(0.295 0.013 72);
--muted-foreground: oklch(0.705 0.026 75);
--accent: oklch(0.79 0.155 73.8);
--accent-foreground: oklch(0.20 0.010 72);
--destructive: oklch(0.62 0.19 27);
--destructive-foreground: oklch(0.20 0.010 72);
--border: oklch(0.345 0.016 75);
--input: oklch(0.345 0.016 75);
--ring: oklch(0.725 0.150 42.6);
--chart-1: oklch(0.725 0.150 42.6);
--chart-2: oklch(0.79 0.155 73.8);
--chart-3: oklch(0.945 0.022 83.3);
--chart-4: oklch(0.705 0.026 75);
--chart-5: oklch(0.345 0.016 75);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
Orbit — Warm Brand
Money that moves in gentle orbits.
A warm, editorial take on the friendly fintech brand — pills as canvas, serif as voice.
Pills carry content and decorate the empty cream at once.
amber tag
Warm by default
Coral and amber — no other accents.
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/orbital-warm-editorial.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `