---
id: dark-mono-prospectus-058
title: Flint Prospectus
description: A near-black, single-column one-pager where a monospace wordmark and letterspaced mono labels frame plain grotesk prose, divided only by hairlines and marked with one sage-green dot.
tags: [dark, minimal, monospace, financial, editorial, high-contrast, mobile-first]
colors: ["#151817", "#EEF0EF", "#C1C6C4", "#8F9492", "#80BFA0"]
created: 2026-09-29
---

# Flint Prospectus

A near-black, single-column one-pager for small funds, studios, and operators who want to state a thesis, a track record, and terms in plain words. Monospace wordmark and letterspaced labels frame grotesk prose, divided only by hairlines. There are no cards, no imagery beyond small circular portraits, and one accent: a sage-green bullet dot.

## Color Palette

**Page Surface:** `#151817` — the only ground. A green-tinted near-black, never pure `#000000`. Every section, the header, and the footer sit directly on it.

**Primary Colors:**
- **Ink / Primary Text** — `#EEF0EF` — wordmark, hero headline, person names, stat numerals, amount figures. Anything the eye should land on first.
- **Body Text** — `#C1C6C4` — hero paragraph and list items. Long-form reading copy.
- **Muted Text** — `#8F9492` — section labels, bios, secondary paragraphs, stat captions, social icon glyphs.
- **Accent Sage** — `#80BFA0` — list bullet dots, focus ring, link underline on hover. Used as a small mark, never as a fill larger than 8px.

**Neutral Colors:**
- **Raised Tint** — `#1E2120` — hover row tint, input fill. One step up from the ground.
- **Selected Tint** — `#262928` — the active segment inside the theme toggle and pressed button states.
- **Hairline** — `#2A2E2C` — full-width section dividers, 1px.
- **Control Border** — `#3F4241` — toggle, button, and input outlines, 1px.
- **Control Border Hover** — `#5A5D5C` — border on hover.
- **Disabled Text** — `#5F6462` — placeholder text and disabled labels.

**Accent/State Colors:**
- **Success** — `#80BFA0` — reuses the accent; confirmations read as the same quiet green.
- **Warning** — `#D9B870` — muted ochre, text-only.
- **Error** — `#E08A7E` — dusty coral, text and 1px border only.
- **Focus Ring** — `#80BFA0` at 2px with 2px offset from the ground.

**Light Mode (via the toggle):**
- Light ground `#F3F4F3`, ink `#151817`, body `#3A3F3D`, muted `#6B706E`, hairline `#DADDDB`, control border `#C4C8C6`, selected tint `#E4E7E5`, accent `#3E8A67`. Structure, type, and spacing are identical; only tokens swap.

## Typography

**Display & Headings:** Grotesk sans, bold, tight tracking. Google Fonts equivalent: **Space Grotesk** 700. Fallbacks: `"Helvetica Neue", Arial, sans-serif`.

**Body:** Same grotesk at 400. **Space Grotesk** 400.

**Utility (wordmark, section labels, stat captions):** Monospace. Google Fonts equivalent: **Space Mono** 400 and 700. Fallbacks: `ui-monospace, "SF Mono", Menlo, monospace`.

**Type Scale:**
| Level | Family | Size (mobile → desktop) | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Hero headline | Grotesk | `clamp(30px, 7vw, 48px)` | 700 | 1.08 | -0.025em |
| Stat numeral | Grotesk | 24px → 30px | 700 | 1.1 | -0.01em |
| Amount figure | Grotesk | 22px → 26px | 700 | 1.2 | -0.01em |
| Wordmark | Mono | 17px → 18px | 700 | 1.2 | 0.01em |
| Person name | Grotesk | 17px | 700 | 1.3 | -0.005em |
| Hero body | Grotesk | 17px → 19px | 400 | 1.55 | 0.005em |
| Body / list | Grotesk | 16px | 400 | 1.55 | 0.005em |
| Secondary / bio | Grotesk | 15px | 400 | 1.5 | 0.005em |
| Section label | Mono | 12px | 700 | 1.2 | 0.14em, uppercase |
| Stat caption | Mono | 11px | 400 | 1.3 | 0.14em, uppercase |

**Hierarchy Rules:**
- Hierarchy is carried by colour step and weight, not by size jumps. Only the hero headline is large; everything else lives between 15px and 26px.
- Mono is structural. It names things (the wordmark, section labels, stat captions) and never carries a sentence of prose.
- Sentences are always grotesk. Emphasis inside prose is ink colour, never italics and never bold mid-sentence.
- Section labels are uppercase mono, muted, letterspaced, and always sit alone above their content with 24px clearance.
- Nothing is centred except the footer line. Everything is flush-left on one axis.

## Spacing System

**Base Unit:** 4px.

**Scale:** 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80.

**Common Patterns:**
- Page gutter: 20px on mobile, 24px from 600px, content column capped at 680px and centred.
- Header: 56px top clearance, wordmark and toggle on one row, 64px below before the hero.
- Hero: headline, 24px, paragraph, then 48px to the first hairline.
- Section rhythm: hairline, 28px, label, 24px, content, 36px, next hairline.
- Person rows: 56px avatar column (44px circle plus 12px gap on mobile, 56px + 16px on desktop), 24px between rows.
- Stats: 2–3 column grid, 32px column gap, 28px row gap, numeral-to-caption 8px.
- List items: 16px between items, 14px indent from dot to text.

## Component Styles

### Wordmark Header
Mono 700 wordmark in ink on the left, theme toggle on the right, vertically centred on one row. No logo mark, no nav links, no border under the header. The hero headline does the separating.

### Theme Toggle (Segmented Control)
- Outer: 1px `#3F4241` border, 12px radius, 3px inner padding, transparent fill.
- Segments: two 40×32px cells holding 16px line icons (sun, moon). Inactive icon `#8F9492`; active cell filled `#262928` at 8px radius with an ink icon.
- Hover: outer border steps to `#5A5D5C`; inactive icon to `#C1C6C4`. 150ms ease.
- Focus-visible: 2px sage ring, 2px offset. Tap target of the whole control is at least 44px tall.

### Section Label
Mono 12px, 700, uppercase, 0.14em tracking, `#8F9492`. No rule under it, no number, no icon. Acts as the section's only heading.

### Hairline Divider
Full content width, 1px `#2A2E2C`, no margin trickery. Used between every section and nowhere else. Never double up a hairline with a background change.

### Person Row
- 44px circular photo (56px on desktop) on the left, top-aligned with the name.
- Name in grotesk 700 ink, followed by a 14px social glyph in muted grey, 10px gap. Glyph brightens to ink on hover.
- Bio beneath in 15px muted grotesk, 6px under the name. Parenthetical detail stays in the same colour; do not dim it further.

### Stat Grid
- Numeral in grotesk 700 ink, with a trailing `+` in the same weight.
- Caption beneath in mono 11px uppercase muted, 0.14em tracking.
- 3 columns on desktop, 3 on mobile if they fit at 96px min, otherwise 2. Leftover stats wrap to a new row flush left; never centre an orphan.

### Bullet List
- Custom 6px round dot in `#80BFA0`, aligned to the first line's x-height centre.
- Item text 16px body grey `#C1C6C4`, 1.55 line-height. Items are full sentences ending in a period.
- No nested lists, no bold lead-ins.

### Buttons
- **Primary:** ink fill `#EEF0EF`, text `#151817`, grotesk 600 15px, 10px radius, 12px 18px padding, min-height 44px. Hover: `#FFFFFF` fill. Active: `#D6DAD8`.
- **Secondary:** transparent, 1px `#3F4241` border, ink text, same geometry. Hover: `#1E2120` fill and `#5A5D5C` border.
- **Text link:** body colour with a 1px underline in `#3F4241` offset 3px; hover turns the underline sage.
- Transitions 150ms ease on colour and border only. No lift, no shadow.

### Input Fields
- Fill `#1E2120`, 1px `#3F4241` border, 10px radius, 12px 14px padding, 16px grotesk ink text, placeholder `#5F6462`.
- Label above in mono 11px uppercase muted, 8px gap.
- Focus: border `#80BFA0`, no glow. Error: border `#E08A7E` with a 13px coral helper line below.

### Footer
Single hairline, then one centred muted line at 14px. No links grid.

## Layout Principles

- One column, always. The content column caps at 680px and centres; desktop only widens gutters and bumps a few sizes.
- Every element shares one left edge. Avatars create the only secondary indent, inside person rows.
- Sections are stacked text blocks, not cards. Separation comes from hairlines plus vertical space, never from panels or fills.
- Density is moderate: generous vertical rhythm, tight horizontal measure (about 60–70 characters in the hero paragraph).
- Order reads like a term sheet: who, how much, proof, what we do, how we work.

## Visual Effects

- **Radii:** 12px outer controls, 10px buttons and inputs, 8px inner selected segment, 50% avatars. Nothing else is rounded because nothing else has a box.
- **Shadows:** none. Elevation is a one-step tint (`#1E2120`), used only for hover and inputs.
- **Borders:** 1px everywhere. Hairlines `#2A2E2C`, controls `#3F4241`.
- **Imagery:** circular photographic portraits only, full colour, no filters or rings.
- **Motion:** 150ms ease on colour, border, and background. No transforms, no scroll effects.

## Design Tone

Quiet, plain-spoken confidence: a dark text page that sounds like two operators talking, not a firm selling. The monospace framing adds a builder's precision, while grotesk prose and a single sage dot keep it warm and human rather than terminal-cold.

## Usage Notes for AI Implementation

1. Keep the ground at `#151817`. Pure black reads as a terminal theme and loses the faint green warmth that the sage accent depends on.
2. Mono is for names and labels only. Setting body prose or bullets in Space Mono turns this into a developer-tool page and destroys the reading comfort.
3. Never introduce cards, panels, or background bands to separate sections. A hairline and 28–36px of space is the whole separation system; boxes make it look like a SaaS template.
4. The sage accent appears as small marks: bullet dots, focus rings, a link underline on hover. Do not fill buttons with it or tint headings green.
5. Only the hero headline is large. Promoting section content to big type (e.g. oversized stats with hero-sized numerals) breaks the calm, memo-like cadence.
6. Use three text colours in strict order: ink for things to notice, `#C1C6C4` for things to read, `#8F9492` for things to reference. A fourth grey muddies hierarchy.
7. Stay single-column at every width. A two-column desktop layout for "who we are" or stats is the most common misreading and makes it look like a pitch deck.
8. The theme toggle is a real part of the system. If you add light mode, swap tokens only; spacing, type, and hairline structure must stay identical.
9. No shadows, gradients, glows, or icons beyond the sun/moon toggle and small social glyphs. Decorative iconography next to list items or stats reads as marketing filler.
10. Write copy in first-person plural, short declarative sentences, with concrete numbers. The design only works when the words are plain; hype copy on this chrome feels like a costume.