# 04 — Visual System: "Field Notes / The Index"

**Status:** Approved for implementation — October 2026
**Concept:** A working archive, not a showcase template. Warm paper, sharp ink, editorial typography, hairline rules, one signal colour. The site should feel like a well-kept engineering notebook that happens to be on the web.

---

## 1. Why this direction

- It directly answers the 2026 anti-slop research: no gradients, glass, particles, pills or default Inter.
- It borrows the *principles* of Anthropic (warm paper/ink, editorial type) and OpenAI (open space, restraint) without copying either brand.
- It gives a 16-year-old developer's work **credibility** — the aesthetic of documentation, not a startup landing page.
- It is cheap to render, fast, accessible, and ages well.

---

## 2. Colour tokens

### Light — "Paper" (default)
| Token | Hex | Use |
|---|---|---|
| `--paper` | `#F2EFE7` | Page background |
| `--paper-raised` | `#F8F5ED` | Plates, inset panels |
| `--paper-sunk` | `#E9E4D8` | Hover rows, subtle fills |
| `--ink` | `#171612` | Primary text |
| `--ink-soft` | `#4A463C` | Secondary text |
| `--ink-faint` | `#7C7669` | Captions, metadata |
| `--rule` | `#D5CFC1` | Hairlines |
| `--rule-strong` | `#B5AD9C` | Emphasis rules |
| `--accent` | `#B53A24` | Links, focus, primary action |
| `--accent-soft` | `#E8CFC6` | Accent wash (rare) |
| `--on-accent` | `#FFF7F3` | Text on accent |
| `--selection` | `#E8CFC6` | Text selection |

### Dark — "Ink"
| Token | Hex | Use |
|---|---|---|
| `--paper` | `#131311` | Page background |
| `--paper-raised` | `#1B1A17` | Plates |
| `--paper-sunk` | `#22201C` | Hover rows |
| `--ink` | `#F0EBDF` | Primary text |
| `--ink-soft` | `#BDB6A7` | Secondary text |
| `--ink-faint` | `#8B8477` | Captions |
| `--rule` | `#2D2A25` | Hairlines |
| `--rule-strong` | `#474338` | Emphasis rules |
| `--accent` | `#E8775E` | Links, focus |
| `--accent-soft` | `#3A211B` | Accent wash |
| `--on-accent` | `#1A0D09` | Text on accent |
| `--selection` | `#4A2A22` | Selection |

**Contrast targets:** body text ≥ 7:1; secondary ≥ 4.5:1; accent links ≥ 4.5:1 on paper; focus ring ≥ 3:1 against both paper and ink. Verify with a contrast checker before shipping.

**No colour is used for decoration alone.** The accent marks: links, focus, the availability dot, one primary action per page, and the current work-index row.

---

## 3. Typography

| Role | Family | Weights | Notes |
|---|---|---|---|
| Display | **Instrument Serif** | 400, 400 italic | Home thesis, page titles, pull quotes. Tight leading, optical size. |
| Body / UI | **Archivo** | 400, 500, 600 | Humanist grotesque; sturdier and less default than Inter. |
| Metadata | **IBM Plex Mono** | 400, 500 | Labels, numbers, dates, status, captions, code. |

Loading: Google Fonts with `display=swap`, `preconnect`. Subset latin only. If fonts fail, fall back to Georgia / system-ui / ui-monospace.

### Scale
| Token | Size | Use |
|---|---|---|
| `--fs-display` | `clamp(3.4rem, 9vw, 8rem)` | Home thesis only |
| `--fs-h1` | `clamp(2.6rem, 6vw, 5.25rem)` | Page titles |
| `--fs-h2` | `clamp(1.9rem, 3.6vw, 3.25rem)` | Section headings |
| `--fs-h3` | `clamp(1.2rem, 1.8vw, 1.5rem)` | Subsections |
| `--fs-lead` | `clamp(1.15rem, 1.6vw, 1.375rem)` | Dek / intro |
| `--fs-body` | `1.0625rem` (17px) | Body |
| `--fs-small` | `0.875rem` | Secondary |
| `--fs-mono` | `0.72rem` | Labels, uppercase, `letter-spacing: 0.09em` |

**Rules**
- Body line-height 1.6; display line-height 0.92–0.98.
- Measure: 62–72ch for prose; 46ch for captions.
- No text below 14px except legal/meta at 12px.
- No justified text. No all-caps body copy.
- Use real typographic characters: `—`, `–`, `’`, `“ ”`, `×`.
- Headings use `text-wrap: balance`; paragraphs `text-wrap: pretty`.

---

## 4. Spacing, grid, layout

- Base unit **4px**. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160.
- Container max width **1440px**; side padding `clamp(20px, 4.5vw, 72px)`.
- 12-column grid, 24px gutter, 1px hairline rules as visible structure.
- Section vertical rhythm: 96–160px desktop, 64–96px mobile.
- Asymmetry is allowed and encouraged: 5/7 splits, offset captions, a title occupying columns 1–7 with meta in 9–12.
- Cards are banned. Use rows, rules, plates and figures.

### Responsive breakpoints
`480px`, `720px`, `1024px`, `1280px`. Compose mobile first. No horizontal scroll at 320px.

---

## 5. Shape, borders, elevation

- Radius: **0** for surfaces, **2px** max for buttons/inputs. Never 16px pills.
- Borders: `1px solid var(--rule)`; emphasis `1px solid var(--rule-strong)`.
- Shadows: **none** in light mode. Dark mode may use a 1px inset highlight, never a glow.
- Dividers carry hierarchy instead of cards.
- Backgrounds alternate only between `paper`, `paper-raised` and `paper-sunk`.

---

## 6. Imagery

- Project logos sit on a `--paper-raised` plate with a 1px rule, padding 40–64px, `object-fit: contain`.
- Logos are shown in **grayscale by default** in index/hover previews; full colour on the project page. This keeps the archive visually coherent.
- Portrait: grayscale, 4:5 crop, 1px rule, caption in mono (`Maheshwar Hari Tripathi, Kaushambi, 2026`).
- Screenshots: real captures only. No fake browser frames unless the project is a browser extension/web app. Caption every figure with context.
- No stock photos, no AI-generated hero art, no abstract 3D blobs.
- All images: explicit `width`/`height`, `loading="lazy"` below the fold, `decoding="async"`, descriptive `alt`.
- Compress: target < 150KB per logo, < 300KB per screenshot; use PNG/WebP appropriately.

---

## 7. Motion

| Token | Value |
|---|---|
| `--ease-out` | `cubic-bezier(0.22, 1, 0.36, 1)` |
| `--dur-fast` | `140ms` |
| `--dur` | `240ms` |
| `--dur-slow` | `420ms` |

- Hover: colour/underline/translate ≤ 2px, 140ms.
- Reveal on scroll: opacity 0→1, translateY 12px→0, 420ms, once, threshold 0.15. First viewport only.
- Page transitions: none. The browser handles navigation.
- No parallax, no cursor follower, no particle canvas, no preloader, no scroll-jacking, no marquee.
- `@media (prefers-reduced-motion: reduce)`: all durations to 0.01ms, transforms removed, smooth scroll off.

---

## 8. Components

### Masthead
- Top hairline; 12-col grid.
- Left: `MHT` in a 36px square (1px border, mono) + full name.
- Centre/right: nav links in mono uppercase with index numbers (`01 Work`, `02 About`, `03 Contact`).
- Far right: theme toggle (sun/moon, 40×40, 1px border) and availability dot.
- Mobile: name + menu button; full-screen paper menu with large serif links, numbered.

### Hero (home)
- Meta row: `Portfolio / 2026` · `Kaushambi, India` · `IST 21:04` · `Available for work`.
- Display thesis, left-aligned, max 10 words per line.
- Dek, 2 sentences, max 60ch.
- Two text links: `Selected work ↓`, `About me →`.
- No portrait here; the portrait belongs to About (or a small offset plate on desktop).
- Bottom hairline with scroll cue in mono.

### Selected work row
`01 — VYAAS AI` (serif, 2rem) · `Voice assistant` · `2025–26` · `Shipped` · arrow.
- 1px top rule; 24–32px vertical padding; hover: background `paper-sunk`, accent arrow, preview plate fades in at right (desktop only).
- Entire row is one link; focus ring covers the row.

### Work index table
- Header row in mono: `No. / Project / Discipline / Platform / Year / Status`.
- Rows are links, 64px tall desktop, stacked 2-line on mobile.
- Filters: text buttons with underline when active, not pills.
- Count line: `26 projects · 8 disciplines · 2022–2026`.

### Buttons & links
- Primary: filled `--ink` with `--paper` text, square, mono uppercase, 12px, padding 14×22.
- Secondary: 1px `--ink` border, transparent, same typography.
- Text link: underline 1px, `text-underline-offset: 3px`; hover accent.
- Destructive/download links: accent underline + file meta in mono.
- Minimum target 44×44px.

### Project page header
- Breadcrumb mono: `Work / 07`.
- Title in Instrument Serif, `--fs-h1`.
- Dek in `--fs-lead`, max 60ch.
- Meta table: `Year`, `Role`, `Platform`, `Stack`, `Status`, `Links` — 2 columns, 1px rules, mono labels.
- Hero plate with logo/screenshot + caption.

### Spec / meta table
- Rows: label (mono, 12px, uppercase) / value (body).
- 1px top rule per row; no zebra backgrounds.

### Status label
- Text + 6px square, not a pill: `■ Shipped` (accent), `□ In progress` (ink), `◇ Prototype`, `× Archived` (faint).
- Always include the year.

### Footer
- Ink block in light mode (paper text), paper block in dark mode with top rule.
- Columns: name + one-liner; navigation; contact; colophon.
- Bottom line: `© 2026 Maheshwar Hari Tripathi` · `Built by hand. No template.` · local time.
- Links to source/colophon.

---

## 9. Iconography

- One family only: **Remix Icon** (already in use), line style, 1.5px stroke, 16–20px.
- Icons only when they add meaning (external link, download, arrow, sun/moon, menu).
- No emoji as UI icons. No icon inside every heading. No decorative icon grids.
- Arrows may be typographic (`→`, `↗`, `↓`) in mono for a more editorial feel.

---

## 10. Accessibility spec

- Semantic landmarks: `header`, `nav`, `main`, `footer`; one `h1` per page; logical heading order.
- Skip link to `#main`, visible on focus.
- `:focus-visible` = 2px solid `--accent`, offset 3px; never `outline: none` without replacement.
- Keyboard: menu, filters and theme toggle fully operable; Escape closes the mobile menu.
- `aria-current="page"` on active nav; `aria-expanded` on menu button.
- Colour is never the only status signal (text + symbol).
- Form controls (if any) have visible labels, not placeholder-only.
- Motion respects `prefers-reduced-motion`; theme respects `prefers-color-scheme` on first visit.
- Images: meaningful `alt`; decorative images `alt=""`.
- Zoom to 200% without loss of content; no fixed-height text containers.

---

## 11. Performance budget

| Asset | Budget |
|---|---|
| HTML per page | < 60KB |
| CSS (shared) | < 45KB uncompressed |
| JS (shared) | < 12KB uncompressed |
| Fonts | ≤ 3 families, ≤ 6 files, subset latin |
| Logo image | < 150KB |
| Screenshot | < 300KB |
| LCP (mobile 4G) | < 2.0s |
| CLS | < 0.05 |

No frameworks. No icon font if it can be avoided (Remix Icon CSS is ~100KB; consider inline SVG for the ~10 icons used). No jQuery, no animation library, no analytics by default.

---

## Seedha matlab

Design language: **warm paper + warm ink + ek vermilion accent**, Instrument Serif + Archivo + IBM Plex Mono, square corners, 1px rules, no cards/glass/shadows. Layout magazine jaisa — numbers, rules, asymmetry. Logos grayscale, portrait B&W, motion sirf kaam ke liye.