The green light at the door.
Reps live for one moment: the homeowner says yes. Evergreen is the ground. Sprout is the yes, kept for the one main action, the live state and a strong score. Everything else stays quiet so those two carry meaning. This page is the system, live: every swatch, size and component below is the real thing.
Color
Use the semantic names, never the raw palette. Swatches show the current theme; switch it in the Brand section.
The ground
#0f2a1f. Ink, chrome, the live session.
The yes
#c6f36d
The split is roughly how often each appears: a lot of evergreen and neutrals, a little sprout.
Surfaces and lines
bg
The page
- Light
- #ffffff
- Dark
- #08170f dark
surface
Wells, hover, segmented tracks
- Light
- #f4f6f2
- Dark
- #0e2018 dark
surface-2
Meter tracks, avatars, skeletons
- Light
- #eaede6
- Dark
- #142a20 dark
line
Hairlines between sections and rows
- Light
- #e2e6de
- Dark
- #1d3428 dark
line-strong
Control borders, empty checkboxes
- Light
- #c9d0c4
- Dark
- #2a4636 dark
Ink
ink
Text, primary buttons, selected states
- Light
- #0f2a1f
- Dark
- #eef3ec dark
ink-2
Secondary text, body copy under headings
- Light
- #46554c
- Dark
- #b3c1b8 dark
ink-3
Meta, hints, placeholders
- Light
- #66736b
- Dark
- #85968b dark
inverse
Text on ink
- Light
- #ffffff
- Dark
- #0f2a1f dark
Accent
accent
The one main action, the live state, scores of 80 and up
- Light
- #c6f36d
accent-hover
Hover on accent buttons
- Light
- #d7f79c
on-accent
Text and icons on sprout
- Light
- #0f2a1f
accent-text
Green text and checks on the page. Sprout is never text on light.
- Light
- #3f6b12
- Dark
- #c6f36d dark
System
danger
Errors and destructive actions. Never scores.
- Light
- #c8322b
- Dark
- #ff7a6e dark
danger-soft
Error backgrounds
- Light
- #fdecea
- Dark
- #3a1714 dark
warn
Warnings, like minutes running low
- Light
- #a86a0c
- Dark
- #f2b24c dark
warn-soft
Warning backgrounds
- Light
- #fdf3e0
- Dark
- #332410 dark
focus
Keyboard focus rings
- Light
- #4a8f1d
- Dark
- #c6f36d dark
Raw palette
For reference and for tokens only. Components never use these names directly.
Type
Bricolage Grotesque for headings and big numbers, Onest for everything else. Sentence case, never bold, never all caps. Numbers that change are tabular.
Hero
Bricolage Grotesque 600, 44 to 84px, -0.045em
Practice the door before you knock.
Section heading
Bricolage Grotesque 600, 32 to 48px, -0.025em
Scored the way a good manager would ride along.
Page title
Bricolage Grotesque 600, 40px, -0.035em
Good afternoon, Jake
Title
Bricolage Grotesque 600, 28px
Handling objections
Subtitle
Bricolage Grotesque 600, 22px
Pick your homeowner
Big number
Bricolage Grotesque 600, 64px, tabular
84 4:12
Lead
Onest 400, 18px / 28px
Every rep is graded on the same 100 points, weighted toward the parts that close deals.
Body
Onest 400, 16px / 26px
Talk out loud like you are on the porch. Type instead when you cannot.
Label
Onest 500, 14px
Work email
Small
Onest 400, 14px / 22px
No card for the trial. Works in your browser and on your phone.
Meta
Onest 400, 12px
out of 100
Shape and depth
Radii follow hierarchy, not one size for everything. The system is flat: hairlines separate, and only overlays cast a shadow.
Control
Inputs, buttons
Panel
Panels, dialogs
Stage
The live session only
Full
Chips, avatars, toggles
Hairline
1px line separates sections, rows and panels.
Overlay shadow
Dialogs, menus and toasts only. Nothing else floats.
Motion
Motion answers what you did: the thumb slides, the underline grows, the check springs. Ambient motion lives in two places only, the hero door and the live session. Reduced motion is respected everywhere.
Easing
Three curves. Press play to compare them over the same 700ms.
Ease out
Most things: entrances, fills, slides.
Ease in-out
Things that move from one place to another and stay.
Spring
Things that pop: toggles, checks, dialogs, score chips.
Duration
Short. Motion confirms what happened; it never makes you wait.
120ms
Hover, press, colour changes
200ms
Fades, tab underline, backdrop
320ms
Slides, toggles, dialogs rising
Text fields
Field wires the label, hint and error to its control. Forms validate on submit, then live as you fix things.
Inputs
Label above, hint or error below. Errors replace the hint and say how to fix it.
Search by objection or date.
Enter an email like name@company.com.
The company you knock for.
Only the team owner can rename it.
Use the eye to show or hide it.
The work email field is invalid on purpose. Fix it to watch the error clear live.
Select and textarea
Pick your team size.
One or two sentences. Who answers the door?
Choices
Checkbox to opt in, switch for settings that apply now, segmented for one of a few, chips for many.
Checkbox
For opting in. The check springs in.
Switch
For settings that apply right away.
Segmented
One choice from a small set. The thumb slides to the selection.
Skeptical and needs convincing.
Chip
Toggle tags. Used to stack objections and to filter lists.
2 selected
Overlays
Dialog and sheet sit on the native dialog element, so focus, Esc and the inert background come from the browser.
Dialog
Confirms and short forms. Rises in with a spring; Esc or the backdrop closes it.
Sheet
Longer edits that keep the page in view. Slides in from the right.
Menu
Row actions and the account menu. Esc or a click outside closes it.
Toast
Echoes what just happened in a few words. Bottom center, gone in three seconds.
Data display
Scores are ink below 80 and sprout at 80 and up. Red and green are never used for scores.
Badge
Short status. Five tones.
Neutral, accent, ink, warn, danger.
Avatar
Initials on a quiet fill. Always next to the name, so it is hidden from screen readers.
24px
32px
40px
56px
Meter
Fills from zero when it appears or changes. Ink by default, sprout for a strong result, warn when running low.
Score ring and count up
The overall score out of 100. Ink below 80, sprout at 80 and up. Never red or green.
Tabs
Switch between views of the same thing. The underline grows from the center.
Showing 12 sessions.
States and containers
Empty state
Invites the next action instead of saying “No data”.
No reps yet
Your sessions and scores show up here after your first rep.
Skeleton
Holds the shape of what is loading. Toggle it.
Panel
A bordered region, used only when grouping is real. Most content sits on the page.
Premium plan
8 hr of voice practice a month
Accordion
Native details and summary. The height eases open; opening one closes the others in the same group.
Do I need a card for the free 5 minutes?
No. You only add a card when you start a plan’s 7-day trial.
Can I switch plans?
Any time, from Settings, then Billing.
Is my card safe?
Payments run through Stripe. Rep Ready never sees your full card number.
Brand
The mark is an open doorway with a sprout knob: the yes waiting on the other side.
Voice
Plain, second person, short. Write like a good manager talking to a rep on the sidewalk.
Start a rep
Begin Practice Session
Buttons say what happens, in sentence case.
Invite sent
Success! Your invitation was sent successfully.
The toast echoes the button in a few words.
Enter an email like name@company.com.
Invalid input.
Errors say what happened and how to fix it.
No reps yet. Start your first one.
No data available.
Empty states invite the next action.
The homeowner
The AI agent
Say what reps say. A practice session is a rep.