Design for Arivu

This page lists what the Arivu web UI implements in src/styles/global.css, layouts under src/layouts/, and related components.

Typography

Font stack: Verdana, Geneva, sans-serif for UI and article text (--sans and --serif in CSS both use this stack).
Root: html uses font-size: 12px; body uses font-size: 1.083333rem (about 13px) and line-height: 1.5.
Headings: Doc titles use the serif token (same Verdana stack) with larger size and bold weight per page templates.
Code: --mono is system monospace; code blocks use --code-bg (#f3f1ea) and --code-border (#e3dfd3).
Pronunciation: Inline control for “Ah-Ree-Voo” uses italic, muted color, dotted underline (--faint). Click opens a popover with copy from site-copy.ts. Positioning for the popover is set in public/scripts/pronunciation-popover.js (beside the trigger, same line when there is space).

Implemented tokens on :root:

Token	Value	Use
`--fg`	`#000000`	Body text
`--muted`	`#464646`	Secondary text
`--faint`	`#a0a0a0`	Borders, hints
`--bg` / `--panel`	`#ffffff`	Page and panels
`--link`	`#000099`	Default links
`--link-hover`	`#0000cc`	Link hover
`--rule`	`#e7e5df`	Dividers
`--accent`	`#8a1f1f`	Accent (e.g. login screen emphasis)
`--code-bg` / `--code-border`	see above	Code blocks

::selection uses background #fff1a8 with foreground --fg.

Shell: Flex column; max width about 60rem for the outer layout; article content max --max-content (38rem).
Sidebar: Sticky at top; brand row, section select, category links, logout. On narrow viewports the listing hero block in the main column is hidden where CSS duplicates that context (listing-hero hidden under 899px).
Spacing: Padding and gaps use rem plus env(safe-area-inset-*) on the layout container.

BaseLayout: Sidebar plus main content; optional breadcrumbs, back link, copy-markdown control; client auth guard script when enabled.
AuthShell: Full-height auth wrapper for login and similar pages (no doc sidebar).
Login page: Card with glass-style panel, fixed full-viewport background gradients, primary Google button, legal footer text.
Sidebar logout: Buttons with data-arivu-logout call the shared logout helper.

Hover and focus transitions on interactive elements use short durations (CSS transition on buttons and links).
--tap is 44px minimum touch target where applied.
:focus-visible on links uses outline: 2px solid var(--link) and offset 2px.