--- version: alpha name: Index Georgia description: Editorial archive minimalism — Inter at light and medium weights on a pure-white page, near-black #202020 ink, hairline dividers, and sparse functional accents (signal red, archival green, link blue) reserved for inline marks. A reading-first, gallery-quiet document interface. colors: # Canvas + ink background: "#ffffff" surface: "#ffffff" ink: "#202020" ink-deep: "#070707" ink-secondary: "#888888" # Hairline + dividers (flattened over white) border: "#ededed" # was rgba(7,7,7,.05) over white divider-soft: "#cccccc" # was rgba(136,136,136,.2) over white # Functional inline accents (used sparingly in text) signal-red: "#d11515" archival-green: "#026308" link-blue: "#0099ff" # On-color on-ink: "#ffffff" typography: display: fontFamily: "Inter, Inter Placeholder, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0px heading: fontFamily: "Inter, Inter Placeholder, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0px sub-heading: fontFamily: "Inter, Inter Placeholder, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0px body: fontFamily: "Inter, Inter Placeholder, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0px body-medium: fontFamily: "Inter, Inter Placeholder, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px caption: fontFamily: "Inter, Inter Placeholder, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 40px 2xl: 64px 3xl: 96px rounded: none: 0px xs: 2px sm: 4px md: 8px pill: 9999px components: # Page header / nav nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.caption}" padding: 16px 24px borderColor: "{colors.border}" # Inline / text link link: textColor: "{colors.link-blue}" typography: "{typography.body}" # Section index entry index-entry: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body-medium}" padding: 8px 0px borderColor: "{colors.border}" # Quiet outline button / tag button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 8px 16px borderColor: "{colors.divider-soft}" # Editorial card / entry block card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px borderColor: "{colors.border}" # Hairline divider rule divider: backgroundColor: "{colors.border}" height: 1px # Pull-quote / blockquote blockquote: textColor: "{colors.ink-deep}" typography: "{typography.sub-heading}" padding: 16px 0px --- # Index Georgia Design System ## Overview Index Georgia is a digital archive, and its design system behaves like one — silent, exact, and entirely deferential to the text it holds. The page is pure white (`{colors.background}`) with near-black ink (`{colors.ink}`, a deliberately soft `#202020` rather than pure black), so the reading surface feels like fine printed paper rather than a screen. There is no chrome competing for attention: structure is drawn with hairline rules and whitespace, never with fills or shadows. Typography carries the whole identity. The system runs on Inter at just two voices — a light weight (300) for long-form body reading and a medium weight (500) for headings, labels, and the section index. This light/medium pairing is the signature move: it gives headings quiet authority without ever shouting, and it keeps body copy airy and unhurried at a 1.5 line-height. Letter-spacing stays neutral (0) throughout — this is the opposite of an engineered, compressed type system; it wants to read like an essay, not a product page. Color is functional, not decorative. The palette is essentially monochrome — ink on white with grayed dividers — and the only saturated colors (`{colors.signal-red}`, `{colors.archival-green}`, `{colors.link-blue}`) appear as inline marks: a flagged note, a status, a hyperlink. They are punctuation, never surface. Borders are barely-there hairlines (`{colors.border}`, a 5%-opacity black flattened over white), used to separate index entries and sections so the page reads as a continuous indexed document. **Key Characteristics:** - Inter in exactly two weights — 300 (reading) and 500 (headings/labels) — as the core identity - Near-black `{colors.ink}` (`#202020`) on pure white, paper-like contrast - Neutral letter-spacing everywhere — an essay, not a compressed product hero - Hairline dividers (`{colors.border}`) and whitespace as the only structural devices - Saturated accents (`{colors.signal-red}`, `{colors.archival-green}`, `{colors.link-blue}`) reserved for inline punctuation - No shadows, no fills, no rounded chrome — flat, square, archival - A bottom section-index that frames the whole page as a navigable document ## Colors ### Primary - **Ink** (`{colors.ink}`): Primary text, headings — soft `#202020`, never pure black. - **Ink Deep** (`{colors.ink-deep}`): Strongest emphasis, pull-quotes (`#070707`). - **White** (`{colors.background}`): Page and surface — the reading paper. ### Secondary - **Ink Secondary** (`{colors.ink-secondary}`): Muted metadata, captions, supporting notes. ### Dividers - **Border** (`{colors.border}`): Hairline rules between index entries and sections. - **Divider Soft** (`{colors.divider-soft}`): Slightly stronger separators, ghost-button outlines. ### Functional Accents - **Signal Red** (`{colors.signal-red}`): Inline flags, corrections, alerts. - **Archival Green** (`{colors.archival-green}`): Status / confirmation marks in text. - **Link Blue** (`{colors.link-blue}`): Hyperlinks and external references. ## Typography ### Font Family - **Primary**: `Inter`, with fallbacks: `Inter Placeholder, sans-serif` - Inter is used for everything — there is no secondary or display face. ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.body}`, `{typography.heading}`, etc.). | Token | Use | |---|---| | `display` | Page / archive title | | `heading` | Section titles | | `sub-heading` | Sub-sections, pull-quotes | | `body` | Long-form reading text (Inter 300) | | `body-medium` | Index entries, emphasized labels (Inter 500) | | `caption` | Metadata, nav, footnotes (12px) | ### Principles - **Two weights, strict roles**: 300 for reading, 500 for structure. No 400, no 600+ — the restraint is the identity. - **Neutral tracking**: Letter-spacing stays at 0 across the scale. Legibility over impact. - **Generous reading rhythm**: Body at 1.5 line-height; headings tighten to 1.2. - **Inter only**: A single typeface keeps the archive coherent and quiet. ## Layout ### Spacing System The complete scale lives in the `spacing:` token block above. Base unit is 8px, with an editorial column of generous vertical rhythm between sections (`{spacing.2xl}`–`{spacing.3xl}`). ### Grid & Container - Single narrow reading column for body text — measure tuned for long-form legibility. - A persistent section index (linked anchors) frames the page as a navigable document. - Hairline `{colors.border}` rules separate index entries and major sections. ### Whitespace Philosophy - **Archival quiet**: Whitespace and hairlines do all the structural work — no cards-with-shadows, no fills. - **Flat and square**: Default `{rounded.none}`; corners are sharp like a printed index. - **Reading-first**: The layout exists to disappear behind the text. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Index Georgia. Brand names and trademarks belong to their respective owners.