v0.3Living style guide, rendered from code

Kovo design system

Every token and component used in the app, rendered from the real code. If it is not on this page, it does not exist yet: add it to src/components/ui first.

Foundations

Neutrals
background
surface
surface-subtle
surface-muted
border
border-strong
text
text-muted
text-subtle
Kovo Green
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-950
Brand roles
primary
primary-hover
primary-strong
primary-soft
primary-soft-foreground
highlight
ring
Status
success
success-soft
warning
warning-soft
danger
danger-soft
info
info-soft
violet
violet-soft
Pastels
pastel-mint
pastel-mint-ink
pastel-butter
pastel-butter-ink
pastel-peach
pastel-peach-ink
pastel-lavender
pastel-lavender-ink
pastel-powder
pastel-powder-ink
pastel-blush
pastel-blush-ink
pastel-neutral
pastel-neutral-ink
Type scale (General Sans)
6xlGood morning, Mazin
4xlProposal for Rossi Wedding
3xl$4,250.00
2xlPage title
xlDialog title
mdCard title
lgClient page body, 16/24
baseApp UI default, 14/20
smLabels and secondary text, 13/18
xsCaptions and meta, 12/16
2xsAnnotations and kbd only, 11/14
Radius
xs
sm
md
xl
2xl
3xl
full
Elevation
cardCards, secondary buttons
raisedHovered card, bulk bar
floatingMenus, popovers, toasts
overlayDialogs, sheets

Buttons

Variants
Sizes
States
Icon buttons (always labelled)
Filter pills

Form controls

Shown on every document you send.

That doesn't look like an email address. Check for a typo.

Your sending address: mazin@send.withkovo.com

⌘K
Standalone label
Segmented control

Badges & status

Document status (use StatusBadge, never pick a tone by hand)
DraftScheduledChanges requestedEndedCompletedWithdrawnVoidExpiredSentViewedAcceptedPaidPartly paidNear limitDeclinedOverdueBouncedComing soonAwaiting your replyTo payCancelledPayment reportedPayment reportedNot received yetNewMarked manually
Tones and sizes
12SmallMediumLargePro · free during beta
Announcement
NewProposals now show when they were opened
Avatars & studio logo
Amanda RossiAmanda RossiSam LeeJordan ParkNLNLNL

Data display

Paid this month$2,400
Awaiting reply3
Active clients2
Win rate67%

Brand refresh proposal

Rossi & Partner · sent 2 days ago

Viewed
Total$4,250.00
Valid untilNov 14
Inner panels are gray fills, not more borders.

Activity

Honest wording: we say what we know

  1. Accepted by Amanda RossiToday, 10:42
  2. Viewed (link opened)Yesterday, 18:03
  3. Email likely openedYesterday, 17:55
  4. SentYesterday, 17:40

Free plan

Usage meters

Clients1 of 2 lifetime
Sends this week4 of 5
Invoiced (12 months)1000 of 1000 USD

First win

Progress uses Kovo Green

🎉✉️🌱
Status
Brand refresh proposalAmanda Rossi Amanda RossiAccepted$4,250.00
Invoice #0002Sam Lee Sam LeeOverdue$800.00
1–25 of 80
Page 1 of 4

No clients yet

Add the person you're talking to. They'll only count toward your plan once you send them something.

Pro · free during beta

Send from your own domain

Pastel feature cards are for warmth, never for status.

Skeleton & separator

Charts

Chart card + bar chart (stacked, click a bar to select it)

Income

  • Paid$6,200
  • On its way$1,610
  • Overdue$320
Area chart with a comparison

Paid this year

  • 2026
  • 2025
Donut · funnel (cards in one row share the tallest height)

Who owes you

  • Lena Ortiz$1,200
  • Amir Khan$410
  • Amanda Rossi$320

Proposals

  1. Sent8
  2. Viewed88% of Sent7
  3. Accepted43% of Viewed32.4 days from sent, on average
Breakdown bar (one total split by status)

Invoices

Paid· 76%
$6,200
Upcoming· 20%
$1,610
Not due yet
Overdue· 4%
$320
Past the due date
Bar list (ranked rows)

Top clients

  • Lena Ortiz$3,10052% of income
  • Amir Khan$1,80030% of income
  • Amanda Rossi$1,100Pays 6 days late on average
Stat cards
Invoiced$8,4507 invoices
Paid$6,2004 invoices
Outstanding$1,9303 invoices
Overdue$3201 invoice · Amanda Rossi
Tooltip (static)
Week of Oct 13
Paid$1,500
Click to see these invoices

Feedback

You're in the beta. Pro is free while we build.

Verify your email to start sending.

This version is locked

You sent it to Amanda. Make changes by sending a new version.

Payment recorded

Toasts
Stage icon (projects, §19): stage identity only, never status
Spinner & kbd
⌘K

Overlays

Triggers

Onboarding & identity

Wordmark
Code input (default, incorrect, verifying)
Address with suffix and status
@send.withkovo.com

Available

@send.withkovo.com

This email is taken.

Studio logo with brand color (text color picked automatically)
NLNLNLNLNLNLNLNL NLNL
Brand color swatches + custom picker
Color picker (inside the popover)
Logo upload: drop area, file row, crop dialog
aftab-logo.png240 KB
Choice chips
Required field with a reserved message line (nothing moves when a message appears)

Done mark
Auth layout + card (sign in)

Check your email

Enter the 6-digit code sent to mazin@gmail.com

Onboarding layout: pinned footer + preview stage
Step 2 of 3

Logo and color

Make Kovo yours.

App shell

Buttons: soft (global New)
Banner (edge, full width at the top of the content panel)

Your email to Amir didn't arrive.

Page header: hero (Home) and list
Wednesday, October 21

Good morning, Mazin

Clients

1

1 client. Nobody owes you anything right now.

App shell (inset canvas)
Wednesday, October 21

Good morning, Mazin

Document editor

Editor frame: top bar, panel, canvas (focus mode, no app sidebar)
A new website for Rossi Interiors
Proposal
The document sheet
Outline rows: default, active, needs work, dragging, incoming drop
Introduction
Scope
Pricing
Timeline
Packages
Add shelf item and saved service (drag or click)
Header chips
Section on the sheet (hover shows frame, grip, toolbar) + inline text
Block badge (hover chip) and insert line between sections
Rich text: select text for bold, italic, underline, link, lists. Type - or 1. for lists
Save control: autosave on (state only) and off (Save draft)
Letterhead (document header, same in edit and preview)
Not Yet Labs
Proposal #001222 Oct 2026

A new website

For Amanda Rossi · Valid until 21 Nov
Status marks (outline and Remaining list) and hover info
Hover me
Saved block card (library)
Text
About me
I'm a designer who helps small businesses look their best online.
Used 4 times · last 2 Oct
Quiet add action (Add a line, Add a row, Saved service)
Section map (canvas edge): collapsed lines, expanded list on hover
Margin label (example proposal) and full-screen dialog
Section content starts here
Package option (client view, pickable): stacked, recommended in ink; Recommend shows on hover in the tag spot
StarterA clear one-page site
$1,400
One long pageMenu and opening hours
Recommended
Full websiteEverything you asked for
$3,200
Five pagesPre-order form2 rounds of changes
Package option (client portal): the whole card is a radio; the border follows the pick, the tag stays on the recommended one
Payment step (How you'll pay): numbered steps written as sentences, the last one is the rest
$1,28040%advance
$96030%halfway through the work
$960the restafter hand-off
Payment method card (How to pay on invoices): copy buttons in the client view
Bank transfer
Account name
Not Yet Labs
Account number or IBAN
GB29 NWBK 6016 1331 9268 19
PayPal
PayPal.me link
paypal.me/notyetlabs
Invoice schedule (accepted proposal): one row per invoice, its send rule or that it went

Invoices for this proposal

$1,600 of $3,200 invoiced · 1 of 3 sent
AdvanceInvoice #0005 · $1,600 · Due 31 Oct
Sent 24 Oct
2
Halfway through the workDraft · $800
3
After hand-offDraft · $800
Document page: paper left, control rail right (status panel + sections)
The document
Lists: metric tiles that filter (hover: stronger border; selected: ink border + tick, ✕ on hover), filter dropdowns (off / on), date chip, new-activity dot
1 NovNew activity
Client pages: BrandButton (the freelancer's brand colour, readable text picked automatically)
Breadcrumbs (list › document)
Linked card (opens in a new tab), reminder steps, client requests
Linked proposalProposal 0008 · Menu and signagePayment 1 of 2
  1. 28 Oct · 2 days beforeSent
  2. 30 Oct · Due dateNext
  3. 2 Nov · 3 days after
  1. Can we drop online ordering for now?

    24 Oct
  2. Please add a gallery page for our cakes.

    24 Oct
Summary list (check and send)
To
Amanda Rossi · amanda@rossi.co
Amount
$800
Due
7 days after sending · 31 Oct
Drop slot
Drop to add Packages here
Checklist pill and items
Project picked
Client view: phone frame, brand header, decision bar
NLNot Yet Labs
Proposal for Amanda Rossi

A new website

Waiting for your answer
Total$4,800

Home

Section header with links

Where would you like to start?

How Kovo worksHide
Suggested card (next action, its pastel) + compact cards
Suggested

Write a proposal for Amanda Rossi

Price the work, add your terms and get a yes online.

Starter tiles (all actions done)
Activity list: empty and filled
Nothing here yetViews, replies and payments will show up here.
  • You created a proposal for Amanda RossiJust now
  • You added Amanda Rossi as a client2 min ago
Step list (How Kovo works drawer)
  1. 1
    Add a clientWho you work with.
  2. 2
    Send a proposalYou're hereScope, price and terms in one link.
  3. 3
    Your client says yesThey accept on any device.