# cobe.vercel.app

Source: https://cobe.vercel.app/
Captured: 2026-09-13
Tags: other, landing, light, both, minimal, swiss, technical, cold, confident, nostalgic
Colors: #fefefe, #d7d7d8, #022fff, #c4cffd, #708dff, #0f0f0f, #b1b2b2, #2f2f2f
Type (h1): GeistPixelLine · 72px/72px · 400 · tracking 10.8px — "COBE"
Type (h2): DepartureMono · 10.4px/16.64px · 400 · tracking 1.248px — "USAGE"
Type (h3): DepartureMono · 12px/19.2px · 400 · tracking 0.24px — "Options"
Type (body): GeistPixel · 13.6px/21.76px · 400 · tracking 0.24px — "Works with any framework: React, Vue, Svelte, or vanilla JS."
Type (small): DepartureMono · 9.6px/15.36px · 400 · tracking 0.48px — "1 / 13"
Type (button): DepartureMono · 11.2px/normal · 400 · tracking 0.224px — "Auto Rotate"
Button (primary): "Auto Rotate" — fill #0034ff, text #ffffff, radius 0px, border 1px, padding 6.4px 12px, height 29px, type 11.2px/400
Button (secondary): "Copy Prompt" — text #ffffff, radius 0px, border 0px, padding 5.6px 12px, height 24px, type 9.6px/400
Radii: 4px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/cobe-vercel-app/hero.webp?v=d5441c41
- Page crop (mid-1): https://media.lvly.design/library/cobe-vercel-app/mid-1.webp?v=2832f015
- Page crop (mid-2): https://media.lvly.design/library/cobe-vercel-app/mid-2.webp?v=af21c2c4
- Hero (mobile): https://media.lvly.design/library/cobe-vercel-app/mobile-hero.webp?v=475da68b
- Full page (desktop): https://media.lvly.design/library/cobe-vercel-app/full.jpg?v=13335bfb
- Full page (mobile): https://media.lvly.design/library/cobe-vercel-app/mobile-full.jpg?v=650568cf
- Clip preview (mp4): https://media.lvly.design/library/cobe-vercel-app/video-xm3z7s.preview.mp4?v=a9f497ea

The homepage of COBE, Shu Ding's 5KB WebGL globe library, is a single white page built almost entirely out of one color and two pixel monospace faces. A soft-shadowed sphere floats in a white void, its landmasses stippled in tiny black dots, with black arcs and pin markers labelled in tiny mono chips (hnd1, sfo1, "493k req/s"); a 13-slide carousel of presets sits under it with dot pagination and a thin blue progress rule. Everything textual is set in GeistPixel (body, 13.6px) and DepartureMono (labels, 10.4px, wide-tracked caps), which gives the whole page a terminal-readout, early-Macintosh flavour without ever going dark or neon. The one accent, an uncompromising electric blue (#022fff), does all the work: links, the tab strip of the install-prompt bar, and a dense two-column API reference drawn as a 1px blue-bordered table with a solid blue block filling the empty last cell. No cards, no rounded corners beyond 4px, no gradients — just white, black dots, and blue hairlines.

## Steal-worthy details

- The globe is drawn as a dot-matrix (thousands of tiny black points for land) over a white sphere with only a faint drop shadow and inner vignette for volume — a WebGL object that looks like a print halftone.
- Markers and arc labels are tiny inverted mono chips: black pill/rect with white DepartureMono text for data ("367k req/s"), white with black text for location codes — a two-level label hierarchy using only inversion.
- The carousel counter "2 / 13" is flanked by two square 1px-bordered arrow buttons, with a row of gray dots (active one blue) above a hairline that fills blue as a progress bar.
- The install prompt is a black-on-white code line topped by a solid blue tab strip ("Copy Prompt · npm · pnpm · yarn · bun"), with a bare "COPY" word as the action — no button chrome anywhere.
- The API options table: two columns, 1px blue borders, each cell stacked as `name` (blue mono) + `type` (small gray mono) + REQUIRED (tiny blue caps, right-aligned) over a one-line gray description; the odd trailing cell is simply filled solid blue.
- Section labels ("API", "Options") are tiny wide-tracked uppercase DepartureMono in blue — a heading system with no size hierarchy, only weight of color and tracking.
- Framework names in running prose ("React, Vue, Svelte") are plain blue links with no underline; the whole page relies on the blue for affordance.

## Style recipe

Set the page on pure white (#ffffff) with near-black text (#0f0f0f) and one electric-blue accent (#022fff); allow only a pale blue tint (#c4cffd) for hover/selection and a light gray (#d7d7d8) for hairlines and inactive states. Use two pixel monospace faces: a body pixel mono (GeistPixel or similar, ~13.5px/1.6, letter-spacing 0.25px) for all prose and code, and a narrower pixel mono (DepartureMono or similar) at ~10.4px, weight 400, uppercase, letter-spacing ~1.2px for labels, section headings, table meta and chips. Do not introduce a display size — headings are the same small label style in blue; hierarchy comes from tracking, color and inversion, not scale. Borders are 1px solid in the accent blue for content structures (tables, code panels) and 1px gray for controls; radius is 0 or 4px max; no drop shadows on UI, no gradients, no filled buttons — actions are bare uppercase mono words or 1px-bordered squares with an arrow glyph. Tables are edge-to-edge grids with equal-width columns, cells padded ~12px, each cell a small stack (mono name in blue, type in gray mono, flag in tiny blue caps at the right, then one-line description in body mono); fill any orphan cell with solid accent blue rather than leaving it empty. Data chips are tiny mono rectangles, black-on-white for identifiers and white-on-black for values. Any illustration or 3D object should read as print: black dot-matrix or halftone on white with only a soft shadow for volume, decorated with thin black arcs and small triangular markers. Links are accent blue, no underline; pagination is small gray dots with the active one blue above a hairline progress rule. Keep the layout a single centered column (~640px) with generous vertical whitespace and no cards.