The markOutline
BrandStyle guide
How Clear looks, sounds and is built.
The reference for anything with the Clear name on it: a site, an app, a flyer or a post. Every value here is the one the website is built from, and the product notes are the ones the apps are built from.
The pagePaper, ink, one cobalt
Paper
Ink
Cobalt
Settled
The facesThree, one job each
Clear.Instrument Sans for reading.Plex Mono · labels
01Logo
A C that opens, and a link that passes through it.
One drawing in two weights. The wordmark is Bricolage Grotesque set tight, with no separately drawn lettering.
OutlineFrom 96px · 15mm
SolidBelow that, down to 16px
Clear
Clear
Outline or solidBy sizeOutline from 96px on screen or 15mm in print. Below that the thin line falls under a pixel, so use the solid mark.
Clear space⅕ of the markA margin the width of the ring on every side. Nothing else sits inside it.
Smallest size16px · 6mmThe solid mark, never smaller. At that size, drop the wordmark.
WordmarkBricolage 800−3.5% tracking, at 95% of the mark’s height, with a gap of 0.55× the type size.
NeverFour ways to break it
- Recolour it outside ink or paper
- Stretch, rotate or add effects
- Put it on a busy photo without a ground
- Redraw or retype the wordmark
02Colour
A mineral page, green-black ink, and one cobalt.
The page is a cool grey-green, not white and not cream. Every swatch is graded against both grounds it sits on.
Ground and ink
Paper#DFE3DEC2 M0 Y2 K11The page. Most of every layout.Paper · n/aInk · n/a
Paper raised#E9ECE7C1 M0 Y2 K7Raised surfaces, menus, the selected tab.Paper · n/aInk · n/a
Ink#16211DC33 M0 Y12 K87Text and drawn lines. Also the dark band.Paper 12.7, passes 4.5:1Ink 1.0, below 4.5:1
Cobalt#24409EC77 M59 Y0 K38The one figure that is moving. Once per view.Paper 7.0, passes 4.5:1Ink 1.8, below 4.5:1
Status and land
Settled#0E6B4EC87 M0 Y27 K58Live, owned, paid. Invite-only.Paper 5.0, passes 4.5:1Ink 2.5, below 4.5:1
Underway#8A5512C0 M38 Y87 K46In build, in progress.Paper 4.8, passes 4.5:1Ink 2.7, below 4.5:1
Absent#9B2C22C0 M72 Y78 K39Not yet, and what we will not do.Paper 5.8, passes 4.5:1Ink 2.2, below 4.5:1
Land#6B7F5CC16 M0 Y28 K50Land and parcels, as a fill.Paper 3.4, passes 3:1Ink 3.8, passes 3:1
On ink, and quiet
Signal light#6FCB9FC45 M0 Y22 K20The live dot and the trace, on ink.Paper 1.5, below 3:1Ink 8.4, passes 3:1
Cobalt on ink#7C8CC5C37 M29 Y0 K23Cobalt, rebound inside a dark band.Paper 2.5, below 4.5:1Ink 5.1, passes 4.5:1
Faded cobalt#A9B6E6C27 M21 Y0 K10The quiet trace. Pointing, not live.Paper 1.5, below 3:1Ink 8.3, passes 3:1
Ink 28 · 13ink at 28% · 13%Borders and hairlines. Never text.Paper · n/aInk · n/a
Once per view
Balance$5,718.42
This cycle$412.60
Credit left$3,400.00
Cobalt goes on the one figure that is moving. Everything else stays ink.
Not this
Balance$5,718.42
This cycle$412.60
Credit left$3,400.00
Three cobalts and nothing is current. It reads as a link style, not a signal.
Green light runs along a line when something is live: a payment going through.Faded cobalt is the quiet version, for pointing at something without calling it live.New
In the productNew
Colour means statusOnlyIn a list, colour says where a thing is. Kind, area and group are plain text; their colours live in charts and the legend beside them.
SettledDonePaid, approved, sent, live.
UnderwayWaitingOn a second person, in progress, on the way.
AbsentStoppedDeclined, failed, overdue, blocked.
CobaltCurrentThe current tab, the selected row, the figure that is moving. In a tool it can appear once per cell rather than once per view. New
03Type
Three faces, each with one job.
Display for what we are saying, text for everything a reader works through, and mono only for labels.
Bricolage GrotesqueDisplay
Your money kept in your neighborhood.
Headlines, statements, the wordmark. 800 for headlines, 600 for sub-heads. Tracking −3.5% to −4.5%, line height 0.92–1.05.
Instrument SansText and figures
A cooperative where the rent you already pay builds equity toward a home of your own.
Body, figures, buttons, forms. Body 17px on 1.6. Figures 600 with tabular numerals.
IBM Plex MonoLabels only
01 · How it worksFigures illustrative
Section labels, tags, chips and axis notes. 10.5–11.5px, uppercase, +8–10% tracking. Never a figure, never a sentence.
HeroBricolage 800 · 84–132px · −4.5% · two set linesTwo set lines
Section headingBricolage 800 · 36–72px · −3.8%Who decides what.
Cell headlineBricolage 800 · 28–46px · −3.5%One vote each.
Sub-headingBricolage 600 · 20–26px · −2.2%You receive shares.
LedeInstrument 400 · 18–22px · 1.45The line that answers the heading.
BodyInstrument 400 · 15–17px · 1.55Everything a reader works through, three lines at most in a cell.
FigureInstrument 600 · tabular · −2%$1,062.20
LabelPlex Mono 400 · 11.5px · caps +10%04 · You pick the split
In the productDenser, for tools used all day · New
Page briefBricolage 800 · 28–34px · −3.5%Three materials are low.
Panel titleBricolage 800 · 22px · −3%Order 1042
VitalInstrument 600 · 26px · tabular$4,182.50
Row, primaryInstrument 600 · 13.5pxNatural canvas tote
Row, secondaryInstrument 400 · 12px · ink 50Made to order · 6 in stock
Column headerPlex Mono 400 · 10px · caps +10%Status
IdentifierPlex Mono 400 · 11.5px · as written NewORD-1042 · 0x4f2a…91c3
10px is the floor, and only for column headers. Order numbers, addresses and hashes are set in mono so they can be read character by character. New
04Space and shape
Six steps of space, and corners that mean something.
Every gap comes from one scale. A corner tells you what a thing is: drawn, touched, or a device.
The scaleNo seventh step
--spacing-18px
--spacing-216px
--spacing-324px
--spacing-440px
--spacing-564px
--spacing-696px
CornersThree, and only three
Square
Anything drawn or documented: cells, tables, fields, drawings.
Pill
Anything you interact with: buttons, toggles, range handles, chips. Updated
Device, 14px
The one exception: the thin outline around an app screen.
Rules that meet
A bento is one grid of shared seams. Every rule runs wall to wall and nothing floats.
Not boxes that float
Rounded, padded, shadowed cards. Each one is its own object, and the page turns into a dashboard.
The rule was “draw rules, not boxes.” It still is: a bordered bento is rules that meet, so it passes. A floating card does not. Restated
The dense scaleProduct only · New
--d14px
--d28px
--d312px
--d416px
--d524px
A separate scale for tools, inside cells and lists. Pages and sections keep the six steps.
Fixed heightsSo rows line up across cells · New
- Cell header and footer56px
- Column header row38px
- Section band in a list32px
- Input34px
- Small button30px
Rows keep their natural height. Only these are fixed.
05Layout
Every section is built the same four ways.
A head that answers itself, a bento of cells, columns that line up, and paper broken by ink.
The section head7 / 5, stacks below 900px
A full-width label rule with the number in cobalt, the headline, and one aside line. Hero headlines sit on two set lines from tablet up.
The cellHeader · main · footer
Name left, a quiet tag right. The footer is optional and always full width.
Columns that line up
One vote each.
Headlines of different lengths.
Residents govern their own place.
The figures still start on one line.
One third.
Because the rows are shared.
Cells in a row share their row tracks (grid-template-rows: subgrid), so a two-line headline pushes every figure in the row down together.
Paper, broken by inkThe rhythm
Ink bands redefine the tokens rather than adding colours, so every component works on both. Two paper sections in a row drop the second one’s top padding.
WidthsDesigned three times
- Desktop1280 max, 1440 tested
- Tablet900
- Phone390, nothing scrolls sideways at 360
- Apps NewBreaks at 1180, 1024, 760
Visitors split evenly across the three, so each is designed on its own terms, not squeezed. Apps are designed desktop first.
The product pageEvery page, same order · New
A mono context line with the live dot, one sentence written from the data with links inside it, four vitals that open the tab they describe, then tabs kept in the address.
A product listRows, bands, leftover · New
Column headers over their columns, a tinted band per day, status last on the row, and the hatch where the list runs out.
Rules for product listsNew
- Rows keep their natural height. Space under a short list takes the hatch; a sliver under 12px takes nothing.
- The last row has no line before the footer, and nothing draws a line under a header that already has one.
- Column headers sit exactly over their columns. Numbers and status align right, and so do their headers.
- Section bands group rows, such as days in a log or months in documents. Never one band for a single item.
- Cells in one band are the same height, and their 56px headers and footers line up.
- Details open in a side panel: the label and close at the top, actions at the bottom, the main one on the right.
06Components
The pieces every page is built from.
These are working components, not pictures of them. Try them.
ButtonsPill
One primary per view, with the live dot. The ghost is the second choice.
Status chipsPill
Invite-onlyIn buildNot yetWaiting
Two forms. The pill, on the site and for a page’s own status. In product lists, a square and a word, always at the end of the row. Say exactly where a thing is: “Invite-only” over “beta”. Updated
Segmented toggleNew
Two to four views of the same thing. The page changes; the layout does not.
DropdownNew
Trade
A listbox, never the system menu. Arrows move, Enter chooses, Escape closes.
RangeNew
Typical ticket
For a number a reader feels rather than types. Two handles when the honest answer is a spread.
The railNew
01
02
03
04
Progress along a bento’s top edge, scrubbed by scroll. Knobs sit centred in their columns.
Facts listHero, beside the lede
- Tax when you contributeNone, §721
- What you receiveShares, 1:1
- Tenants and repairsNot yours
Ledger rowsLabel · value · one line
Issued byValue
DistributionsPro rata
Tax distributionsMandatory
Calendar leafNew
Wed21OctBoard vote6:00 pm · Town hall
Payout batch9:00 pm · Money
Weekday, day, month, at the left of a dated row. Items on the same day share one leaf, joined by a tie line.
Side panelNew
Details open on the right without leaving the page. The header stays put, the body scrolls, and the main action sits bottom right.
ToastNew
Buy proposed. It waits on Dana Ruiz in Money. Logged in Records.
Confirms what happened, says what happens next, and says where it was logged.
Masked detailsNew
Emaila•••@g•••.com
Phone(•••) •••-••12
Reason: shipping questionReveal
Hidden for everyone by default. Each reveal asks why, and logs who, whose, which fields and the reason.
Two-person ruleNew
ProposedMarcus Bell
WaitingOn Dana Ruiz
ApprovedNot yet
Money, on-chain, access and settings changes need a second person. Nobody approves their own.
Access levelsNew
NoneTotalsSeeProposeApprove
Set per group for each page, never per person. Totals shows co-op numbers with no names, emails or accounts.
Trust, built inProduct rules · New
- Read-only views hide actions entirely. Opening and reading still work.
- Hiding a button is not security. The server checks the level on every request.
- Locked settings cannot be edited. They link to where they are decided: a vote, the bylaws, a policy or the law.
- The log only grows. A correction is a new entry that points back to the old one.
07Motion
Motion shows what changed. It never hides what is there.
Four moves, used everywhere. With reduced motion, each one shows its end state instead.
The riseHero headlines, once
Words rise into place.
Each word lifts out of a padded mask, and the mask comes off when it lands, so no descender or edge is ever clipped.
The scrubTied to scroll
Scroll position · 100%
Fills, rails and month strips follow the scroll, so the reader controls the pace and can go back.
The traceLight along a line
Live: green
Quiet: faded cobalt
A short lit segment runs once around an outline, then rests. It follows the thing it outlines when the layout wraps.
The countFigures that change
$30,000
A figure counts to its new value with tabular numerals, so the width never jumps.
RulesGSAP and ScrollTrigger
- Nothing animates that a reader needs before it finishes. Content is complete with scripts off.
- One ease for everything: a fast start that settles (cubic-bezier(0.16, 1, 0.3, 1)).
- Loops pause when they scroll out of view, and run only on things that are actually live.
- With reduced motion, show every end state: the final figure, the drawn line, the result of the vote.
08Drawings
A line means one thing, everywhere it appears.
Plans, plats, org charts and the product’s charts share one drafting language, so a reader learns it once.
SolidOwns
An ownership line. Every coordinate derived, never typed.
DottedContract
A relationship that is not ownership. Always labelled.
Dashed boxOwnerless
Means ownerless and nothing else. One per drawing at most.
Dash-dotLot and parcel
A legal boundary: the parcel, a lot line, the title.
HatchHeld in common
Land the members hold together, in drawings. Never “ours” against “yours”. Updated
CobaltYours, or current
The one home, seat or figure the reader should find first.
Cobalt hatchHousing side
Land and property when a drawing splits money from housing.
The labelEvery sample figure
Figures illustrative
Any made-up number says so right beside it, not in a footnote.
Product hatchNot real yet
In the product: pending, estimated, or nothing to show yet. A different thing from the land hatch. New
Open arrowMoves to
A payment, a payout, a handoff. The head is two drawn lines, never a filled triangle. New
Line to a barStops here
Something that ends: a lease term, a contract, a retired version. New
The legendCategory colour
Charts may colour by category, always with a legend. List rows never do. New
09The dot
One dot, two jobs.
It says something is open now, or it tags a status. Only the first job moves.
PulsingOpen now
JoinInvite-only
On Join, on each page’s main button, and on something open now. The ping runs.
StillA status
In buildNot yet
In build, signing, not yet. The core and the glow, and no ping. Updated
AnatomyMeasured from the site
Core7px · 6px in a pillA solid circle in the dot colour.
Glow6px blur · 55%A soft blur of the same colour around it. In a pill it softens to 4px at 45%.
Ping340% · 2sA copy that grows and fades, then waits.
Gap10px · 7px in a pillThe space between the dot and its word.
ColourIt follows the button, not the band
On a light button#0E6B4E
--color-signal-deep · 5.0:1 on lightOn a dark button#6FCB9F
--color-signal-light · 8.4:1 on darkIn a status pillIts statusThe dot takes the pill’s own status colour.
For developersPlain CSS with hex values
CSS
.live-dot {
position: relative;
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #0E6B4E;
box-shadow: 0 0 6px 1px rgb(14 107 78 / .55);
}
.live-dot::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: inherit;
animation: live-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes live-ping {
0% { transform: scale(1); opacity: .6; }
75%, 100% { transform: scale(3.4); opacity: 0; }
}
/* On a dark ground, use #6FCB9F. */
@media (prefers-reduced-motion: reduce) {
.live-dot::after { animation: none; opacity: 0; }
}Works outside this codebase. Generated from the site’s own values, so it cannot drift.
For designersFigma, After Effects or video
Core layer7px circleDot colour, 100% opacity.
Glow6px blurDrop shadow, no offset, 1px spread, dot colour at 55%.
Ping at 0s100% · 60%A duplicate of the core, above it.
Ping at 1.5s340% · 0%Ease out. Then hold, invisible, until 2s.
LoopEvery 2sSeamless. Nothing on the core moves.
Rules
- Pulse only what is actually open.
- Never on every button, never as a bullet.
- Always beside a word that says the same thing. The dot is never the only signal.
- With reduced motion, keep the dot and stop the ping.
- In the product, the dot means live only: a sync running, a payment going through. New
- A status in a product list is a square, so a dot never reads as a bullet. New
10Voice
Say it the way a person would.
Plain words, short paragraphs, and never a promise we cannot keep.
Plain wordsSay: You should not have to take our word for the numbers.Not: Nobody should be the only party able to check its own arithmetic.
No promises of returnSay: The rent you already pay builds equity toward a home of your own.Not: Clear makes you rich.
Say what an acronym meansSay: The ELPA is the Equity-Lease Participation Agreement.Not: Sign your ELPA at 15,000 credits.
Honest statusNewSay: Invite-only.Not: Live. Now in beta.
The landNewSay: The land is held in common by members.Not: The land stays ours. The house becomes yours.
Less to readNewSay: One headline, one line, then show it.Not: A paragraph explaining a figure the reader can see.
Name the personNewSay: Waiting on Dana Ruiz in Money.Not: Pending approval.
Say what happens nextNewSay: Buy proposed. Dana Ruiz approves or declines it. Logged in Records.Not: Success!
Dates people readNewSay: Wed 21 Oct, 6:00 pmNot: 10/21/2026 18:00
Money in tablesNewSay: $500.00Not: $500, 500 USD
ParagraphsThree linesAt most, in a cell, at every width from 1100px up. Longer does not get read.
NamesClear · ClearPathClear is the co-op. ClearPath is the housing programme. “Shares”, not units, on the partner pages.
NeverBank, yield, insuredDo not call Clear a bank, publish a rate or return, or say deposits are insured.
PlaceInland EmpireInland Empire, California.
Demo data NewSay so on the pageUntil the numbers are real, “Demo data” sits in every product page’s context line, the same way “Figures illustrative” sits beside a sample figure.
11Social and print
The same system, off the screen.
One statement in Bricolage, one line in Instrument, and paper and ink do the rest.
Canvas sizesDrawn to scale
Social
- A margin of 8% of the short edge on every side.
- On stories, keep text out of the top and bottom 14%.
- Body no smaller than 28px on a 1080px canvas.
- One statement per graphic.
Print3mm bleed · 5mm safe · 9pt min
- Flood the paper colour, or choose an uncoated stock close to it.
- Outline mark from 15mm, solid below.
- Use the CMYK values as a start and proof before a full run.
12Downloads
Files, ready to use.
Vector for anything that scales, PNG wherever an upload is all you get.
LockupWordmark outlined
