TVC’s first design system — a small, living set of tokens to build the docs site (and later, other TVC surfaces) with a consistent look. TVC didn’t have a design system before this, only a logo, so everything here is derived from the logo and TVC’s character: a place for collective harmony and sustainability — green trees, brown earth, blue skies.
Treat this as the source of truth. The Quartz site configuration consumes a subset of these tokens; the rest are here to grow into callouts, diagrams, and future TVC surfaces.
Logo
The mark is a deep-green roundel enclosing a white tamarind-frond motif with three orange seed accents. Two brand colours come straight out of it:
- TVC Green
#18723C— the roundel; our primary. - Tamarind Orange
#F68520— the seed accents; our accent. - White
#FFFFFF— the frond line-art.
Usage: keep clear space around the mark equal to at least the width of one frond leaflet. Don’t recolour it, rotate it, or place it on a busy background. On dark grounds use the mark as-is (the green roundel carries it); a white or knockout variant can be added when we have one.
Assets (in _resources/, the canonical source files):
TVC logo.png— the mark on a transparent background (695×695). Source for the site favicon and social card.TVC og-image.png— the social-share card below (1200×630), used as the site’s defaultog:image.
Colour
Brand
| Token | Hex | Role |
|---|---|---|
| TVC Green | #18723C | Primary — links, active nav, brand fills |
| Green (light) | #5CB37D | Brand on dark grounds, hover-on-dark |
| Tamarind Orange | #F68520 | Accent — hover, highlights, calls to action |
| Orange (light) | #F79A3C | Accent on dark grounds |
Nature (extended)
From TVC’s “green trees, brown earth, blue skies”. Not yet wired into the site theme — reserved for callouts, tags, diagrams, and illustration.
| Token | Hex | Role |
|---|---|---|
| Earth Brown | #6F4A2E | Soil/earth — warm callouts, section accents |
| Sky Blue | #4E8FB5 | Sky — info callouts, secondary links, diagram fills |
Neutrals
Warm, paper-and-ink neutrals rather than pure grey, so the palette reads natural.
| Token | Light mode | Dark mode | Role |
|---|---|---|---|
| Ground | #FBFAF6 | #141613 | Page background |
| Hairline | #E6E2D8 | #2B2E27 | Borders, rules, table lines |
| Muted | #9C978A | #5F6B60 | Muted text, graph links |
| Body | #3A4038 | #CBD2C7 | Body text |
| Ink | #1C3326 | #EAF0E7 | Headings, strong text |
How these map to Quartz
Quartz exposes only nine colour slots per mode (in the fork’s quartz.config.yaml). Current mapping:
| Quartz slot | Light | Dark | From |
|---|---|---|---|
light | #FBFAF6 | #141613 | Ground |
lightgray | #E6E2D8 | #2B2E27 | Hairline |
gray | #9C978A | #5F6B60 | Muted |
darkgray | #3A4038 | #CBD2C7 | Body |
dark | #1C3326 | #EAF0E7 | Ink |
secondary | #18723C | #5CB37D | TVC Green |
tertiary | #F68520 | #F79A3C | Tamarind Orange |
highlight | rgba(24,114,60,0.10) | rgba(92,179,125,0.15) | Green tint (internal-link / code bg) |
textHighlight | #F6852040 | #F79A3C40 | Orange tint (==marker==) |
Change a token here, then mirror it in the fork config — they must stay in sync.
The same palette and fonts are applied inside Obsidian by the CSS snippet .obsidian/snippets/tvc-design-system.css (enabled by default, synced across devices), so editing looks like what you publish. It’s a third place the tokens live — update it alongside this note and the fork config.
Typography
All three faces are on Google Fonts (the fork uses fontOrigin: googleFonts).
| Role | Face | Why |
|---|---|---|
| Headings | Fraunces | An organic, humanist serif with warmth that echoes the botanical logo — friendly, not corporate. |
| Body | Nunito Sans | A soft humanist sans that stays highly readable across long technical docs. |
| Code | IBM Plex Mono | Clear, neutral monospace for commands, configs, and inline code. |
Guidance: headings in Fraunces carry the character, so keep body copy calm in Nunito Sans; don’t introduce more families. Use weight and size for hierarchy, not new typefaces.
To build from here
This is a starting point, not a finished system. Natural next additions, in rough priority:
- Spacing & layout scale (a base rhythm, e.g. 4/8px) once we’re tuning the site.
- Callout styles using Earth Brown and Sky Blue.
- Logo variants — a white/knockout mark and a horizontal lockup with the wordmark.
- Voice & tone — a short note on how TVC writes (warm, plain, collective).
When any of these solidify, add them here first, then implement in the fork.