Skip to content

compiled-spec.md

Latest commit

 

History

History
40 lines (28 loc) · 1.57 KB

compiled-spec.md

File metadata and controls

40 lines (28 loc) · 1.57 KB

Compiled spec — implementation

Tokens

Token Value Use
bg #0B1426 Page background
text #F5F0E8 Body / headings (ivory)
accent #C9A84C Dividers, recommended, CTAs
card #2A3A52 Panels, table header
muted #8B9BB5 Secondary labels

Typography

  • EN headings: Playfair Display (font-heading-en).
  • ZH headings: Noto Serif TC (font-heading-zh).
  • Numbers / data: DM Mono (font-mono-data).
  • ZH body: Noto Sans TC (Source Han lineage; Google delivery as Noto Sans TC) (font-body-zh).
  • EN body: system / font-sans with ivory on navy.

Layout

  • max-w-6xl / max-w-7xl content column with px-4 md:px-8, section scroll-mt-24 for sticky nav offset.
  • Sticky top bar: logo/title left, section links center (hidden sm), controls right (language + scenario compact on mobile).

Motion

  • framer-motion: staggerChildren on main sections; tab AnimatePresence; chart wrapper initial/animate once.
  • Recharts bars: animate via isAnimationActive + keyed remount on term change.

Data sources

  • /data/loans.ts — all lender rows + scenario applicability + recommended id.
  • /data/channels.ts — six channels + feasibility + accordion copy.
  • /data/translations.ts — UI strings EN/繁中.
  • /data/userProfile.ts — hardcoded profile object.

Accessibility

  • Accordion, tabs, checkboxes from Radix; visible focus rings (ring-gold/50).