Skip to content
Pre-Sales OS

Pre-Sales OS

Design system

The logo, colours, type and every interface component, in every state, with example data. This is the reference the product is built from.

Brand

Anatomy

ds/logo · LogoMark on a 4-unit grid (public/mark.svg, src/components/ds/logo.tsx)

Canvas
64 × 64 units
1 · Chevron
M13 41 L32 21 L51 41, stroke 8, round caps and joins
2 · Dot
Centre (32, 21), radius 6
3 · Base line
(19, 50) to (45, 50), stroke 4, round caps
Colour
brand #7B61FF
  1. 1 · Chevron
  2. 2 · Dot
  3. 3 · Base line

Meaning

The dot is the decision. It sits at the top, before anything else: before the call, before the quote, before the proposal.

The line beneath is what you build once you've decided, and only then.

Lockups

  • Mark only

    26px (22px small)

    App top bar below 640px. Marketing header below 360px. On a violet tile for the favicon and app icon.

  • Pre-Sales OS

    Mark and wordmark, md

    26px mark, 17px text, 8px gap

    App top bar from 640px, mobile menu, marketing header and footer, sign-in pages, invite, unsubscribe, 404 and error pages.

  • Pre-Sales OS

    Mark and wordmark, sm

    22px mark, 15px text, 8px gap

    The smallest lockup, for tight spaces. No screen uses it today.

Client-facing documents carry no Pre-Sales OS mark. Proposals are branded with the freelancer's own logo and end with the line “Prepared with Pre-Sales OS”.

Colour

  • Pre-Sales OS

    On paper

    Every screen today: violet mark and OS, ink Pre-Sales. The same on white.

  • On a violet tile

    Favicon and app icon only: a white mark on brand violet.

  • Pre-Sales OS

    On ink

    For the dark download only; no screen uses it. on-ink text, brand-on-ink mark and OS.

The mark is always brand violet #7B61FF, never brand-strong: that darker violet is for button fills. Keep the logo off verdict colours, photos and gradients.

Clear space and minimum size

Dashed: clear space, one dot wide
Mark alone: 16px
With wordmark: 22px mark
  • Clear space: keep at least the dot's diameter (12 of the mark's 64 units, about a fifth of its height) empty on every side, for the mark and for the lockup.
  • Mark alone: 16px at the smallest, the size of the smallest favicon.
  • With the wordmark: a 22px mark and 15px text at the smallest (the sm lockup). Below that, use the mark alone.

Don't

  • Don't stretch or squash it

  • Don't recolour the mark

  • Don't rotate it

  • Don't add shadows or effects

  • Don't set OS in ink

  • Don't change the wordmark font

Downloads

Foundations

tokens · globals.css

  • paper

    #F6F5F1

    Page background

  • surface

    #FFFFFF

    Cards, inputs, menus

  • ink

    #1A1A1F

    Primary text, ink buttons

  • ink-soft

    #3A3940

    Secondary reading text

  • ink-muted

    #55545C

    Labels, meta

  • rule

    #DDD9CF

    Hairline dividers

  • rule-strong

    #8F897C

    Form-control borders

  • brand

    #7B61FF

    Logo, focus ring

  • brand-strong

    #6B4FF0

    Primary button fill

  • link

    #5B43E0

    Links

  • verdict-take

    #5FD08C

    Take

    Verdicts only

  • verdict-careful

    #F2B84B

    Proceed carefully

    Verdicts only

  • verdict-risk

    #F2685C

    High risk

    Verdicts only

  • danger

    #B3261E

    Remove, Revoke, Delete

    Destructive text only

type scale · Newsreader, IBM Plex Sans, IBM Plex Mono

text-verdict
Proceed carefully
text-title-1
Ledgerly, Webflow site and brand refresh
text-title-2
Open risks to resolve
text-title-3
Discovery questions
text-body
The client wants a rebuilt marketing site in eight weeks and has named a single decision maker.
text-eyebrow
Verdict
font-data
55 · 90 · $25,000

The colour rule: saturated colour appears in three places only. Verdicts get a full colour field with ink text. The brand violet is for the logo, primary actions, links, focus rings and selected choice controls. Destructive text actions use the danger red. Everything else is ink, grey or paper.

Controls

ds/button · Button, every variant and size

primary
ink
outline
text
danger-text

ds/button · Button states: loading, disabled, asChild as a link

Link styled as a button

ds/input · Input: empty, filled, prefix and suffix, invalid, disabled

ds/textarea · Textarea, variant reading with showCount

308 characters

Paste the client's message as it arrived.

ds/select · Select, default and size sm

ds/select-button · SelectButton as a menu trigger: the stage control on the analyses rows and the analysis page (32px from md, 44px below; never coloured by stage)

ds/choice · Checkbox and RadioGroup

Capacity

ds/choice · Segmented, billing period

ds/form-field · FormField with a hint, with an error, required

As it should appear on proposals.

ds/chip · Chip, removable

Webflow sitesBrand identityUX audits

Verdicts and data

ds/verdict · VerdictField, size hero

Verdict

Take

Clear scope, a named decision maker and a budget that matches the work. Send a proposal.

Verdict

Proceed carefully

Good fit, but open risks — resolve them on a call before proposing.
risk 55 · fit 90

Verdict

High risk

Vague scope, no budget and several decision makers. Decline or reshape the deal.

ds/verdict · VerdictField, size compact with meta

Verdict

Take

risk 55 · fit 90

Verdict

Proceed carefully

risk 55 · fit 90

Verdict

High risk

risk 55 · fit 90

ds/verdict · VerdictField without a decision: not scored, PROCESSING, FAILED

Verdict

Not scored

Paste a brief to get a verdict.

Verdict

Analysing…

Verdict

Failed

The analysis did not finish. Try again.

ds/verdict · VerdictBadge, all decisions and none

TakeProceed carefullyHigh riskProceed carefullyNot scoredAnalysing…

ds/status-text · StatusText, pipeline stages, proposal stages, pending

  • Analysed
  • Contacted
  • Call scheduled
  • Proposal sent
  • Won
  • Lost
  • On hold
  • Draft
  • Sent
  • Signed
  • Lost
  • Invite pending

ds/score-bar · ScoreBar, scored and not scored

RiskMedium55
Scope clarity72
Fit—

ds/risk-fit-chart · RiskFitChart, plain (one highlighted) and with colourByVerdict. Quill Publishing has no fit score.

Risk against fit, ink dots · 1 without a fit score
Risk against fit, ink dots
AnalysisRiskFitVerdict
Ledgerly5590Proceed carefully
Morgan Studio1884Take
Northwind Foods8235High risk
Fernhill Clinic2477Take
Atlas Logistics4862Proceed carefully
Bluebird Learning7441High risk
Harbour & Co1293Take
Kestrel Energy5270Proceed carefully
Oakridge Dental2088Take
Quill Publishing41Not scoredProceed carefully
Redwood Capital6855High risk
Sable Studio1580Take
Risk against fit, coloured by verdict · 1 without a fit score
Risk against fit, coloured by verdict
AnalysisRiskFitVerdict
Ledgerly5590Proceed carefully
Morgan Studio1884Take
Northwind Foods8235High risk
Fernhill Clinic2477Take
Atlas Logistics4862Proceed carefully
Bluebird Learning7441High risk
Harbour & Co1293Take
Kestrel Energy5270Proceed carefully
Oakridge Dental2088Take
Quill Publishing41Not scoredProceed carefully
Redwood Capital6855High risk
Sable Studio1580Take

ds/stat-list · StatList, rows (billing) and columns

Plan
Pro · monthly
Price
$29.00 / month
Next payment
8 November 2026
Payment method
UPI Autopay
Risk
55
Out of 100, higher is riskier
Fit
90
Out of 100, higher fits you better
Realistic timeline
7–9 weeks
Our estimate for this scope
Scope clarity
40
Needs clarificationOut of 100
Confidence
60%
How sure the read is
Realistic timeline
8–12 weeks
Our estimate
Profitability
Low
Against your rate

ds/usage-meter · UsageMeter, within the limit, limit reached, unlimited

3 of 5 outcomes this month

5 of 5 outcomes this month — limit reached

Analyses 42 · unlimited

Layout and overlays

ds/card · Card, default and emphasis, as a plan comparison

Pro

$29 / month

Unlimited analyses, AI proposals and win/loss insights.

Agency

$79 / month

Everything in Pro, plus a shared workspace for your team.

ds/page-header · PageHeader with eyebrow, back link, description and actions (renders its own h1)

All analyses

Analysis

Ledgerly · Webflow site and brand refresh

Analysed 8 October 2026. A good fit, but resolve the open risks before proposing.

ds/empty-state · EmptyState

No analyses yet

Paste a client message and get a verdict before you write a proposal.

ds/first-use-empty-state · FirstUseEmptyState (two columns from lg, preview hidden below md)

Your first brief lands here, with a verdict on top.

Paste what a client sent you. In about a minute you'll know whether to take it, go carefully or walk away, and what to ask on the call.

  1. 1Paste an email, a brief or call notes
  2. 2Get the verdict, the risks and the questions
  3. 3Track the deal here until it's won or lost
Try our example brief
What this page looks like with deals in it. Example data, made up by us.

ds/progress-steps · ProgressSteps, horizontal (current: Scope) and vertical (current: Pricing)

  1. Completed: Brief
  2. 02Scope
  3. 03Pricing
  4. 04Review
  1. Completed: Brief
  2. Completed: Scope
  3. 03Pricing
  4. 04Review

ds/action-bar · ActionBar. Inline on desktop; on phones it sticks to the bottom of the screen and the buttons share the width.

ds/app-shell/trial-ended-notice · the strip shown once under the top bar after a Pro trial ends, saying the account is view only (static example; the live one remembers dismissal per trial in localStorage).

Your Pro trial ended on 21 October 2026. Your account is view only: everything you've made is still here, and new analyses need Pro. What changed

ds/app-shell/status-chip, setup-summary · Plan status in the shell. The chip in its three looks (trial, last 3 days with the Choose a plan link, view only with the Upgrade action), and the setup summary as it sits in the account menu (static examples).

Pro trial · 15 days leftPro trial · 2 days leftChoose a planView only
Finish setup2 of 5Add your business profile

ds/settings-layout · SettingsLayout inside a frame (renders its own h1). Inside the gallery no item is active, because the path does not match any of them.

Settings

Profile

Used to sign in and for forwarded briefs.

ds/responsive-dialog · ResponsiveDialog: dialog on desktop, bottom sheet on phones

ds/menu · Menu with link items, a separator and a danger item

ds/menu · Labelled groups (MenuGroup, MenuLabel, MenuSeparator): the analysis page's Actions menu

ds/video-player · VideoPlayer inline (max 720px wide), with chapters below

Example data, made up by us.

Chapters

ds/video-dialog · VideoDialog: the player in ResponsiveDialog, chapters beside the video from lg, a bottom sheet below md

ds/data-list · DataList (table on desktop, cards on phones).

ds/data-list · DataList empty state

No analyses yet

Your analyses will appear here.

List patterns

ds/view-tabs · ViewTabs and ViewSwitch

Tabs with counts. Each tab is a link, so Back restores the state. The active tab has an ink underline.

With a trailing slot (md and up only), for the match count and Clear.

Inside a 360px box the row scrolls within itself; the page does not.

Tabs without counts.

ViewSwitch: List and Board (Board is hidden below md because the board is desktop only).

ViewSwitch: Desk and List, with the second option active.

ds/command-bar · CommandBar

Press / anywhere outside a field to focus the search.

No chips · bar height: 44px

One chip · bar height: 44px

Four chips (remove one: the height does not change) · bar height: 44px

With a filter slot (placeholder button, task 07 supplies the real one) · bar height: 44px

Phone arrangement in a 360px frame. The layout follows the viewport, so narrow the window below 768px to see the search box and filter slot only.

Chips and sort hide below md · bar height: 44px

ds/filter-panel · FilterPanel

0 active

ds/verdict-strip · VerdictStrip and meters

  • Marlowe & Finch Studio
    Website rebuild · via email
    Proceed carefully
    Risk58
    Fit74
  • Halden Outdoor
    Shopify migration · by Priya
    Take
    Risk22
    Fit88
  • Quillon Health
    Patient app MVP
    High risk
    Risk81
    Fit35
  • Saltmarsh Records
    Label site
    Not scored
    —
Marlowe & Finch Studio
Risk 58 · Fit 74
Halden Outdoor
Risk 22 · Fit 88

The strip takes its colour from the verdict only, and is neutral without one. Bars are never coloured by value.

ds/row-actions · RowActions

Hover or tab onto a row on desktop; on a phone the overflow button is always visible.

  • Marlowe & Finch Studio

    Website rebuild · via email

    Open

  • Halden Outdoor

    Shopify migration · by Priya

  • Quillon Health

    Patient app MVP

360px frame

  • Marlowe & Finch Studio

    Website rebuild · via email

    Open

  • Halden Outdoor

    Shopify migration · by Priya

  • Quillon Health

    Patient app MVP

ds/stat-strip · StatStrip

By default the strip is desktop only (md and up): on a phone it is hidden and the screen supplies its own form, such as tabs or an inline numbers line. Labels and notes wrap in narrow cells; values never do.

phone="grid": the same cells in two hairline-ruled columns below md. A wide cell spans both, as does a cell left alone on its row. Narrow the window to see it.

  • Signed · this month$18,400$18K3 proposals. 1–21 Sep: $12,000
  • Win rate · 90 days62%5 won, 3 lost
  • Open pipeline · now$41K4 proposals out
  • Briefs analysed · 30 days14Same as the 30 days before
  • Take rate · 30 days43%6 of 14 briefs

ds/group-header · GroupHeader and QueueCard

Proposal sent

3 · $41,200 open

With the client

4 · $49,700 · oldest 6 days

Won

Call tomorrow at 10:00

Marlowe & Finch

Brand refresh · $9,800

Prepare
Open

High risk · waiting for your answer

A very long client name that has to truncate before it reaches the edge of the card

Mobile app · $42,000

Decline
Open

The collapse is viewport-based: below md each card becomes the compact phone row (client and reason on the left, primary action on the right, no secondary action). The Marlowe & Finch card has an overflow menu, shown at every width (revealed on hover or focus from md).

360px container (the phone form appears when the viewport is below md)

Sent 6 days ago · no reply yet

Northfield Dental Group with a long name

Website rebuild · $18,500

Follow up

ds/proposal-page · ProposalPage

Patient app MVP: verdict tab, 1 placeholder
Seasonal menu site: verdict tab, 0 placeholder
Course platform: no verdict, no tab, 0 placeholder
Placeholder in the title: dashed box
Sent, stale: ink label
Sent, fresh: muted label, singular
Signed: stamp with date
Lost: muted, stamped
Small size (phone row), stale
Small size, placeholder block

ds/brief-timeline · BriefTimeline

  • Two briefs, one won
  • Three briefs, one nearly overlapping
  • Five briefs in the last week
  • A neutral dot (no verdict)
  • No briefs
  • Phone width (110)

ds/confirm-dialog · ConfirmDialog

ds/snooze-dialog · SnoozeDialog

The busy example is busy for three seconds (Cancel, Escape and Snooze do nothing), then keeps its server error until it is closed. Call date preselects Tomorrow and has a shorter line on the phone sheet; Change call date preselects the current date and adds Remove the date at the footer's left.

Dashboard patterns

ds/data-text · DataText, numbers in the data face

Last 7 days: 5 briefs analysed, 4 proposals sent.

ds/deal-row · DealRow, Today row with step and overflow

ds/deal-row · DealRow, an outline step; a long title that truncates (no date column)

ds/deal-row · DealRow, Watch rows (no step or overflow): strip, High risk badge, FAILED

ds/deal-row · DealRow in a 360px frame. The phone layout follows the viewport, so this frame shows the md+ layout unless the window itself is narrow

ds/month-rate-chart · MonthRateChart, six months, Oct so far, Jul with no outcomes, reference 56%

Win rate by month, last 6 months, by close date
MonthWonLostWin rate
May2167%
Jun1325%
Jul00—
Aug2250%
Sep4267%
Oct so far3260%

ds/month-rate-chart · MonthRateChart, no outcomes in any month, no reference

Win rate by month, last 6 months, by close date
MonthWonLostWin rate
May00—
Jun00—
Jul00—
Aug00—
Sep00—
Oct so far00—

ds/rate-bar-list · RateBarList, by verdict and by fit (a band with too few outcomes: no meter, a dash and noRateLabel for screen readers; and a note)

By verdict

  • Take79%11 won, 3 lost
  • Proceed carefully53%10 won, 9 lost
  • High risk38%3 won, 5 lost

By fit

  • Strong 70+76%13 won, 4 lost
  • Partial 40–6953%9 won, 8 lost
  • Poor under 40No rate: too few outcomes1 won, 3 lost · too few to say

3 closed deals had no fit score.