Foundations
The tokens every TTV screen is drawn with. They live in one stylesheet, and the values on this page are read from it as the page renders, so they cannot drift from what the site actually uses.
Colour
Two brand colours, a ground, a sheet for each space, and inks proven readable on all of them. Use the Tailwind names (bg-primary, text-ink-muted); never a raw hex.
Brand
Peach and dark teal are TTV. Peach is spent carefully: the one primary action on a screen, a builder's dot, a count that needs you.
Peach
--color-primary · #F28D68
Primary actions, builder dots, counts. Dark teal text on it, never white.
Dark teal on it: 5.08:1
Dark teal
--color-dark · #013D39
The public site's ground, and the ink on peach.
Green
--color-teal · #2C6964
Borders and soft fills on the public site. Not a surface for text: the quieter inks fall short of 4.5:1 on it.
Ground and sheets
Behind everything is the ground. Each space is a sheet laid on it, in a tone of its own: close in lightness so every ink reads on all of them, apart in hue so you can tell where you are.
Ground
--color-ground · #01211F
Behind the sheets, where inactive tabs stand.
Cohort sheet
--color-sheet-cohort · #05433E
Greener.
Community sheet
--color-sheet-community · #0A4842
The lightest, and the widest-open space.
Mentoring sheet
--color-sheet-mentoring · #08454A
Bluer.
Discover sheet
--color-sheet-discover · #073B39
Deeper.
Admin sheet
--color-sheet-admin · #032F2C
The darkest: staff work here.
Profile sheet
--color-sheet-profile · #12463F
Warmer: your own page.
Inks
Text is warm white at three strengths, plus two coloured inks for meaning. Each clears 4.5:1 on every sheet and on a card laid on it.
- Aa, Ink on the Community sheet
Ink
--color-ink-primary · #FFF8F2
Headings, body text, anything you must read.
8.89:1 at worst on any sheet or card
- Aa, Secondary ink on the Community sheet
Secondary ink
--color-ink-secondary · rgba(255, 248, 242, 0.72)
Supporting text, inactive navigation.
5.46:1 at worst on any sheet or card
- Aa, Muted ink on the Community sheet
Muted ink
--color-ink-muted · rgba(255, 248, 242, 0.64)
Hints, timestamps, quiet labels. Never on a tint.
4.68:1 at worst on any sheet or card
- Aa, Peach ink on the Community sheet
Peach ink
--color-peach-ink · #FFB496
Peach as text, and the focus ring. Peach itself is too dark to read on a sheet.
5.44:1 at worst on any sheet or card
- Aa, Ring on the Community sheet
Ring
--color-ring · #9FD3CA
Mentors: their ring and their role. Never a status colour.
5.63:1 at worst on any sheet or card
Status inks
For notices and field errors. Colour is never the only signal: an icon and the words say it too.
- Aa, Danger on the Community sheet
Danger
--color-danger-ink · #FFB3A6
Something failed or needs fixing; destructive actions.
5.45:1 at worst on any sheet or card
- Aa, Success on the Community sheet
Success
--color-success-ink · #B7E4C7
Something worked.
6.65:1 at worst on any sheet or card
- Aa, Warning on the Community sheet
Warning
--color-warning-ink · #FFD98E
A caution before something that cannot be undone.
6.93:1 at worst on any sheet or card
Lines
Edges are hairlines, so surfaces read as one material. A control's edge is the exception: it has to be found.
Hairline
--color-hairline · rgba(255, 248, 242, 0.1)
Card edges, dividers, quiet buttons.
Rule
--color-rule · rgba(242, 141, 104, 0.20)
Editorial dividers on the public site.
Type
Two faces with two jobs. Mattone Black is the display face, for the one page title on a screen and Tembo's mark. Maven Pro does everything else, headings included. Both are self-hosted under the SIL Open Font License.
Mattone
Display. Page titles only, 36px and up, with the display tracking token.
Maven Pro
Body and headings. Regular for reading, semibold for labels, bold for headings.
Page title
Mattone · 36–60px · one per page
Find a mentor
Section
Maven Pro bold · 24–30px
Your requests
Heading in a card
Maven Pro bold · 16–18px
Thirty minutes on SQL joins
Body
Maven Pro · 16px · line height 1.6
I have the ledger matching working, but I am not sure my tests cover reversed payments.
Small
Maven Pro · 14px
Asked 2 hours ago in Cohort 04
Hint and caption
Maven Pro · 13px · muted ink
Mentors reply here.
Display tracking comes from three tokens rather than per-heading values, so the face can change without retuning every title: tracking-display (-0.02em), tracking-heading (-0.015em) and tracking-subhead (-0.01em). Sentence case everywhere; no capitals for emphasis, and no small labels above headings.
Shape and space
Corners soften as surfaces get smaller, so a page reads as sheets holding cards holding controls. Space follows a 4px grid: tight inside a group, open between groups, generous between sections.
Sheet
1.75rem (1.25rem on phones)
Rounded at the head; a space's sheet runs off the foot of the screen.
Card
1.125rem
Cards, empty states, specimen panels.
Control
0.75rem
Buttons, fields, notices.
Small control
0.5rem
Small buttons and icon buttons.
Chip and pill
Fully round
Labels, filters, counts.
Inside a group
4–8px
A label and its field, an icon and its word.
Between groups
16–24px
Fields in a form, cards in a list.
Between sections
48px and up
Sections of a page, each with a hairline above.
Touch targets are 44px. The kit's controls grow to it on any coarse pointer, and stay compact under a mouse.
Surfaces
Three depths, each a step lighter than the one below: the ground, a sheet, and a card lifted in the sheet's own light. A field is the exception, a dark well set into whatever holds it. Inside a sheet there are no drop shadows: lightness alone says what sits on what. Only what floats over the page casts one, from the theme: --shadow-overlay for the account menu, search, attention and the feedback form, --shadow-drawer for the open drawer, and a drawer's scrim is the ground at 60%.
Ground
Sheet, in the Mentoring tone
Card
Motion
Motion shows where something came from and where it went. It is brief, it never blocks reading, and reduced motion turns it into a cut.
- Hover and focus
- Colour only, 150ms ease. Nothing moves or grows.
- Opening a drawer
- Slides in from its own edge, 220ms.
- Changing space
- The new sheet rises 4.5rem into place over the old one, 250ms. Only when the sheet changes.
- Working
- A button's loading mark turns; under reduced motion it is a still, open ring.
- Reduced motion
- Every transition above becomes a cut. Nothing is lost by it.
Icons
Phosphor, at its regular weight: the platform imports it from react-icons/pi. Icons sit beside words and are hidden from screen readers; an icon alone is an IconButton, which takes a label.