name: ra-civitas-design
version: alpha
description: >
  Æra Civitas is a neoclassical fintech surface for municipal-bond investing,
  dressed as a civic ledger from the Republic. The page sits on a warm parchment
  cream (#EEE4C8) and inks itself in near-black umber (#2A2018), with bronze
  (#A07838), patina green (#3A7060), and copper (#C47838) as its metallic
  voltages. The type story is a triad of Roman serifs and a ledger monospace:
  Cormorant Garamond carries widely-tracked uppercase display ("Trajan"-style),
  EB Garamond sets the italic body essays, and JetBrains Mono runs the tabular
  numerals, eyebrows, and ticker. Signature moves: a clip-path line-wipe hero
  with letter-spacing wind-down, a scroll-linked theme-inversion "Path of
  Capital", sticky scale-down stacked offering panels, a count-up stat wall, an
  open-ledger table, and Roman-numeral column ornaments throughout. Geometry is
  near-flat and sharp — hairline bronze rules, 2px radii at most — evoking
  engraved certificates rather than rounded SaaS cards.
colors:
  # Surface
  cream: '#EEE4C8'        # primary page surface; light sections, parchment
  dark: '#2A2018'         # dark surface (nav, hero, stats, account-left, footer); also body ink
  # Brand / Metallic voltages
  bronze: '#A07838'       # primary accent; eyebrows, hairline rules, labels, ornaments
  patina: '#3A7060'       # secondary accent; pills, view-links, shield icon, library bg
  copper: '#C47838'       # numeric/CTA voltage; stat numbers, button fills, TEY figures
  copper-hover: '#A85F22' # CTA hover fill (panel-cta / form-submit)
  # Text (derived from surfaces via rgba)
  ink: '#2A2018'          # body/heading on cream
  on-dark: '#EEE4C8'      # cream text on dark surfaces
  # Hairlines (all bronze at low alpha)
  hairline: 'rgba(160,120,56,0.35)' # bronze hairline rules between cells/sections

Æra Civitas

ra-civitas-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + :root CSS variables. Fictional/sample product; described factually.

Overview

Æra Civitas presents municipal-bond investing as a civic act, styling the entire surface as an engraved ledger of the Republic. The page rests on a warm parchment cream #EEE4C8 and inks its text in deep umber #2A2018; dark sections (nav, hero, stats, the account trust panel, the footer) flip to umber fields carrying cream text. Three metallic voltages do the accent work: bronze #A07838 for eyebrows, hairlines, and Roman ornaments; patina green #3A7060 for pills, links, and the library backdrop; and copper #C47838 for every number that matters — stat counts, yields, and CTA fills. The type story is a disciplined triad: Cormorant Garamond set in widely-tracked uppercase plays the "Trajan" inscriptional display, EB Garamond italic carries the essayistic body, and JetBrains Mono (tabular-nums) handles eyebrows, the live yield ticker, and all figures. The signature moves are cinematic but restrained — a clip-path line-wipe hero whose <h1> settles from 0.14em to 0.06em letter-spacing, a 300vh scroll-linked theme inversion (cream→umber) on the "Path of Capital", 500vh of sticky panels that scale down 0.04 and round to 12px as the next one rises, a count-up stat wall, and Roman-numeral watermarks (I–IV). Geometry is near-flat: hairline bronze rules instead of shadows, and a maximum radius of 2px, so the whole thing reads like an engraved certificate.

Colors

Surface. Two surfaces alternate. cream #EEE4C8 is the default page background (hero stats aside) used by the offerings header, ledger, account form, and light sections. dark #2A2018 backs the nav, hero, stat wall, the account-left trust panel, and the footer; it doubles as the body ink color on cream.

Brand / metallic voltages. bronze #A07838 is the primary accent — every eyebrow label, hairline rule, ornament SVG, drop-cap, and footer column title. patina #3A7060 is the secondary — table pills, "View →" links, the shield disclaimer icon, and the full background of the Library section (color: cream). copper #C47838 is the figure/action voltage: stat-wall numbers, the path-card-num, TEY values, and the fills of .panel-cta and .form-submit (which darken to copper-hover #A85F22 on hover).

Text. On cream, headings and body use ink #2A2018; muted text is the same umber at reduced alpha (e.g. rgba(42,32,24,0.65) for subtitles, 0.55 for captions). On dark surfaces, text is on-dark #EEE4C8, with cream at 0.80 for nav links and 0.45 for footer fine print.

Hairlines. Borders carry the system, not shadows: bronze at low alpha — hairline rgba(160,120,56,0.35) for section rules, 0.28 for stat-cell dividers, 0.40–0.45 for accordion and tab borders.

Gradients. Used only as photo overlays: the hero overlay is a vertical umber wash (0.55→0.72 alpha); each offering panel has a diagonal 160° overlay mixing patina/bronze/umber to keep cream text legible.

Typography

Three Google-Fonts families, loaded via one css2 request: Cormorant Garamond (400–700 + italics), EB Garamond (400/500 + italic), and JetBrains Mono (400/500/700). Cormorant is used as a stand-in for an inscriptional Trajan-style face — set uppercase with 0.06–0.14em tracking it reads as carved Roman capitals. EB Garamond sets the warm, often italic body prose. JetBrains Mono (with font-variant-numeric: tabular-nums) is the ledger voice for figures, eyebrows, and the marquee.

Token	Size	Weight	Line-height	Tracking	Usage
display-hero	clamp(48px,6.5vw,88px)	700	0.92	0.14em→0.06em	Hero <h1>, uppercase, line-wipe
display	clamp(28px,3.5vw,52px)	700	—	0.06em	Section/path titles, uppercase
heading	clamp(36px,4vw,58px)	700	1.1	0.12em→0.04em	Account heading, uppercase, wind-down
panel-name	clamp(32px,4vw,58px)	700	1.05	0.04em	Offering bond names, uppercase
subhead	18px	600	—	0.04em	Accordion titles
eyebrow	9px	400/500	—	0.28–0.32em	Mono labels, section eyebrows, uppercase
nav-link	10px	400	—	0.25em	Nav links (mono), uppercase
stat-num	clamp(42px,4.5vw,64px)	400	1	-0.02em	Stat wall (mono), copper
body	15–16px	400	1.60–1.70	—	EB Garamond essays / paragraphs
body-italic	14–17px	400 italic	1.65	—	Hero para, sub-copy, disclaimers
ticker	10px	400	—	0.18em	Hero marquee items (mono), uppercase

Layout

Base unit is 4px; the spacing scale runs roughly 6 / 8 / 10–12 / 16 / 20–24 / 32 / 40 / 48 / 64 / 80 / 96px, with section padding typically 64–96px 48px. Content is centered in a max-width: 1200px inner wrapper. The page is a long vertical sequence of full-bleed sections: a 100vh hero (looping background video, asymmetric lower-left content block with a vertical bronze rule), a 4-column stat wall, a 300vh sticky "Path of Capital" (5fr/7fr split, stages left, data cards right), a 500vh sticky stacked-panels offerings reel, an open-ledger <table>, a two-column magazine spread (essay + accordion) on a patina field, a split-screen account (dark trust panel / cream form), and a 4-column footer. Whitespace is generous and editorial; the signature structural moves are the asymmetric hero composition, the sticky scroll-driven sections, and the hairline-divided grids.

Elevation & Depth

The system is deliberately flat and engraved. Depth comes almost entirely from hairline bronze rules and borders, not shadows. The only real box-shadow is on the active path-card: 0 24px 60px -20px rgba(42,32,24,0.25) (a soft umber lift). Glass appears twice via backdrop-filter: blur(): the scrolled nav (blur(8px) over rgba(42,32,24,0.92)) and the hero ticker (blur(6px)). Hero and panel headings carry text-shadows (0 2px 30px / 0 2px 20px rgba(42,32,24,0.4)) for legibility over imagery. Roman-numeral watermarks (opacity 0.08) and column-SVG watermarks (opacity 0.035–0.055) add quiet decorative depth.

Shapes

Sharp and certificate-like. The default radius is 0 (cells, cards, tabs, inputs, the table). Only two soft touches exist: a 2px radius on the .pill, .panel-rating, and path-card clip, and a transient 12px radius applied to offering panels mid-scroll as they scale down. There are no pills or full-round shapes; CTAs and tabs are rectangular. Inputs are borderless except for a single 1px bottom rule that turns copper on focus.

Components

• nav — fixed; transparent gradient → rgba(42,32,24,0.92) + blur on scroll; cream Cormorant brand name (uppercase, 0.10em), mono links at 0.25em.
• nav-cta ("Open Account") — 1px cream border (0.55 alpha), cream text, inverts to cream fill / dark text on hover; 8px 20px, no radius.
• stat-cell — dark field, 1px bronze left-divider (0.28); copper mono number (clamp 42–64px) with a small superscript suffix, bronze uppercase label.
• path-card — colored card (patina / dark / cream rotating), 1px bronze border, copper number, giant faint Roman numeral watermark; soft umber shadow when active.
• panel-cta / form-submit ("Subscribe →" / "Open Civic Account") — copper fill, cream text, Cormorant uppercase 0.14em, 12px 28px / full-width 16px 24px, hover → #A85F22 + 2px lift.
• panel-rating — 1px cream border, mono, 2px radius (e.g. "AA · STABLE").
• ledger-table — borderless rows on cream, bronze uppercase Cormorant th, EB Garamond td, hover row tint rgba(160,120,56,0.05); .pill = patina outline + patina text, 2px radius; .view-link = patina Cormorant → copper.
• bracket-tabs / tax-tabs — segmented 1px bronze-bordered group; active tab = dark fill + cream text; mono labels ("24% / 32% / 37%").
• accordion (<details>) — bronze top/bottom hairlines; mono "+" toggle that rotates 45° when open; nested bracket-cards (one featured with 2px copper border).
• form-input / form-select — transparent, single bottom hairline (rgba(42,32,24,0.30)) that turns copper on focus; EB Garamond 16px.
• trust-badge — bronze stroke icon + Cormorant uppercase label + EB Garamond description, in a 2×2 grid above a bronze rule.

Motion

JS-driven, mostly scroll-linked, no animation library. Hallmarks:

• Hero entrance — staged setTimeout sequence: clip-path line-wipe of title (clip-path: inset(0 100% 0 0) → 0), bronze rule scaleY, then <h1> letter-spacing settles 0.14em→0.06em over 0.7s (1.1s delay).
• Reveal — IntersectionObserver one-shot: opacity 0 / translateY(28px) → in, 0.8s cubic-bezier(.2,.8,.2,1); .reveal-x translates from -40px.
• Path of Capital — rAF scroll loop interpolates --path-bg-* / --path-text-* custom props to invert cream↔umber across scroll 0.4→0.6; quartile-driven active stage + card swap; path-fill scaleY progress bar.
• Sticky offerings — each panel scales 1→0.96 and rounds 0→12px as the next enters; content wipes in via clip-path: inset(100% 0 0 0) → 0.
• Stat count-up — eased cubic count to target over 1400ms, staggered 200ms.
• Ticker — ticker-scroll 48s linear infinite marquee, pauses on hover.
• Ambient — bob 2.6s scroll-cue, footer rule scaleX reveal.

Iconography

All icons are inline hand-drawn SVG — no icon library. Style is thin-stroke line art (stroke-width 1.2–1.6, stroke-linecap: round), colored by role: bronze #A07838 for the column/temple brand mark and trust badges, patina #3A7060 for the disclaimer shield-check. The recurring motif is a stylized Corinthian/Roman column (brand mark, plus large faint column watermarks in the Library). A small bronze "compass" ornament caps the hero rule; typographic ornaments (✦ ✦ ✦, — ✦ —) and Roman numerals serve as decorative dividers. Sizes: 18–26px for UI marks, 24px for badges/disclaimer, 300–440px for watermarks.

Do's and Don'ts

• Do keep display type uppercase Cormorant with wide tracking — it is the Roman-inscription voice.
• Do reserve copper #C47838 for numbers and primary actions; let bronze do the labeling and hairline work.
• Do use hairline bronze rules and borders for structure instead of shadows.
• Do set all figures in JetBrains Mono with tabular numerals.
• Don't introduce rounded corners beyond the 2px pill/rating radius (the transient 12px on scrolling panels is the only exception).
• Don't add drop-shadows or glows; the look is engraved/flat.
• Don't mix a fourth accent or use copper for body text.
• Don't set body copy in the mono or display faces — EB Garamond carries prose.

Known Gaps

• The hero background is a video (.mp4); described as a dark cinematic field — exact frame colors not tokenized.
• Per-section muted text colors are derived rgba(...) of the two ink/cream base colors (alphas listed inline) rather than named tokens.
• The Path-of-Capital inversion colors are interpolated live in JS from the same cream/umber RGB pairs; only the endpoints are tokenized.
• copper-hover #A85F22 and the panel-2/3 image background swatches (#7A6035, #2A3828, #3A3025) are one-off fills, not part of the core palette.