Skip to content

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FolioView — Logo Concepts (Terminal Velocity)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap" rel="stylesheet">
<style>
@adrrr
adrrr / folioview-design-system.html
Last active May 20, 2026 22:47
FolioView — Unified Design System v1 Reference (standalone mirror of /dev/design-system, feat/unified-design-system / PR #314)
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>FolioView — Unified Design System (v1 Reference)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Inter+Tight:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
@adrrr
adrrr / almanac-home.html
Created May 20, 2026 20:21
FolioView design exploration R5 — Almanac (editorial luxe) + Aurora (soft luminous) — beyond Terminal Velocity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FolioView — Almanac — Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400..600&family=JetBrains+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400&display=swap" rel="stylesheet">
<style>
@adrrr
adrrr / tv-home-signed-in.html
Created May 19, 2026 21:35
FolioView v4 polished — Terminal Velocity v2 mockups (home + stock detail)
<!-- THROWAWAY MOCKUP for FolioView v4 polished round — DO NOT IMPLEMENT DIRECTLY. -->
<!-- Direction: Terminal Velocity v2 · Surface: Home (signed-in) · Viewport: 1440×900 desktop -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1440, initial-scale=1" />
<title>FolioView — Terminal Velocity · Home</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
@adrrr
adrrr / almanac-home-signed-in.html
Created May 19, 2026 21:35
FolioView v4 polished — The Almanac mockups (home + stock detail)
<!-- THROWAWAY MOCKUP for FolioView v4 polished round — DO NOT IMPLEMENT DIRECTLY. -->
<!-- Direction: The Almanac · Surface: Home (signed-in) · Viewport: 1440×900 desktop -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1440, initial-scale=1" />
<title>FolioView — The Almanac · Home</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
@adrrr
adrrr / folioview-v3-index.html
Created May 19, 2026 20:45
FolioView v3 — Mockup gallery index (issue #277)
<!-- INDEX for FolioView design v3 mockup gallery — for issue #277. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FolioView v3 — Mockup Index</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@adrrr
adrrr / tv-01-home-signed-in.html
Created May 19, 2026 20:45
FolioView v3 — Terminal Velocity mockup gallery (issue #277)
<!-- THROWAWAY MOCKUP for issue #277 — DO NOT IMPLEMENT DIRECTLY. -->
<!-- Design system: Terminal Velocity v3 · Surface: Home (signed-in). Desktop + mobile. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FolioView v3 — Terminal Velocity · Home (signed-in)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
@adrrr
adrrr / almanac-01-home-signed-in.html
Created May 19, 2026 20:45
FolioView v3 — The Almanac mockup gallery (issue #277)
<!-- THROWAWAY MOCKUP for issue #277 — DO NOT IMPLEMENT DIRECTLY. -->
<!-- Design system: The Almanac v3 · Surface: Home (signed-in). Includes desktop + mobile + dark variant. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FolioView v3 — Almanac · Home (signed-in)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
@adrrr
adrrr / identity-v2-almanac.html
Created May 19, 2026 20:03
FolioView v2 identity synthesis mockups — Almanac / Slow Tactical / Reading Room
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FolioView v2 — The Almanac (recommended)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@adrrr
adrrr / identity-quiet-money.html
Created May 19, 2026 19:39
FolioView visual identity mockups (3 directions)
<!-- THROWAWAY DESIGN MOCKUP — exploration for visual identity issue. NOT for direct implementation. -->
<!-- Direction: "Quiet Money" — editorial/magazine, serif display, cream paper, single oxblood accent. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FolioView — Quiet Money (identity exploration)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">