VERA
Brand kit
An index of apartments, on the record.
VERA borrows its look from reference books, not dashboards: rules instead of boxes, numbers you can scan, and colour only where it carries a verdict. Everything serves one job — putting the facts a renter is looking for where the eye lands first.
Principles
- Answer first. Every view opens with the answer — how many apartments cleared, the price, the address — and puts the evidence underneath.
- Four facts, always in the same place. Subway, move-in cash, building, landlord. Same order and same position on every listing, so a renter compares by glancing, not reading.
- Colour is a verdict. Green means cleared or good. Amber means check first. Red means VERA checked and it is bad. Everything else is ink.
- Icons are paint; words are the label. Every icon sits beside its word. No icon is ever the only way to understand a control or a fact.
- Rules, not boxes. Hairline rules and square cells build the hierarchy. No shadows, gradients, glass, or glow.
Reference
The system is modelled on the Whole Earth Index, featured on Siteinspire under Reference & Directories: a black ground, a hairline index grid, circled numerals, and a serif that reads like a printed catalog. The Whole Earth Catalog promised its readers access to tools. VERA makes the same promise to renters.
Wordmark and mark
The wordmark is the brand inside the product: VERA in IBM Plex Serif 500, with the descriptor NYC rental index set in mono capitals beneath it. The constructed-V mark remains for the app icon, the share card, and the home-screen tile.
WORDMARK · DARK
APP ICON LOCKUP · LIGHT
Rules
- The wordmark is IBM Plex Serif 500 at 0.04em tracking. Never set it in mono, never italicise it, never widen it.
- The descriptor is always mono capitals at 0.16em tracking, in Mute.
- The verification seam in the mark is always green.
- Minimum size — 20 px cap height for the wordmark; 24 px for the mark alone.
Palette
One ground and one ink. Hierarchy comes from rules drawn in ink at 16% and 34% opacity, and from the inverted state — ink ground, black type — that marks where you are. Every colour below passes WCAG AA against Ground; most pass AAA.
The semantic rule that matters most: green means cleared or good, amber means check first, red means we checked and it is bad. A colour never carries meaning alone — the word is always printed beside it.
Typography
Two voices, both IBM Plex. The serif is what a person reads: headlines, addresses, reasons. The mono is what VERA measures: prices, counts, labels, timestamps, and identifiers, always with tabular figures so columns line up.
5 apartments cleared every check.
$2,895/mo
386 Leonard St
When an address resolves cleanly, VERA checks it against available city records and labels what remains unknown.
Move-in cash
The index grid
Every listing in the drop is a numbered entry. Its four facts sit in a ruled two-by-two grid: an icon and a label, the answer in serif, then the evidence behind it. Entries and map clusters share one mark, the circled numeral .
- Subway
- ≈8 min walkL · Lorimer St
- Move-in cash
- ≈ $5,810first month, deposit, $20 fee · no broker fee
- Building
- Grade A · a keeper98/100 · a clean violation record
- Landlord
- Named on the deedPrivate, small, or corporate
Iconography
VERA uses Phosphor Icons in the Light weight: one family of 1,512 icons drawn on the same grid, released under the MIT licence. It costs nothing and needs no per-icon credit; the licence ships beside the sprite. VERA packs the icons it uses into one cached sprite and references them by name.
todayatlasmarketbrowsehuntsavedmanualreceiptssystemmorepricebedwalktraincashbuildinggradeclockownerstabilizedphotosexternalpincommutecheckwarningskipundounknowninfosharefiltersearchclosearrowcaretrefreshshieldscamdownupnewgoneledgerrecordslawfeefitvouchercalendarrulerpetslaundryprintereyecompasskey
Rules
- Light weight only. Never mix weights or families. The filled bookmark,
saved, is reserved for marking a listing already in your hunt. - Sizes: 18 px beside labels, 20 px in navigation rails, 23 px in the phone tab bar.
- Colour follows the word next to it: ink by default, green or amber only when the line beside it is a verdict.
- Adding one: choose it from the Phosphor set in Light, add it to
icon-manifest.json, and rebuild the sprite.
Voice
VERA is the friend who reads the lease. Plain, specific, unsentimental, and never cheerful about bad news. It says what it knows, says what it does not, and never pads either.
Do
- “Only seen on a single source — verify independently.”
- “For a standard rental, check screening charges against the actual-cost-or-$20 limit.”
- “Nothing clears the bar under this lens.”
- Name the number, then explain it.
Don’t
- “Amazing deal — act fast!”
- “Oops! Something went wrong 😅”
- “No results found.” (Say what was actually searched.)
- Never dress an empty state as a failure. Empty is an answer.
Motion
Motion exists to show causality and system response — a number stepping because a filter changed, a route indicator moving to the active workspace, a panel rising because it opened, or a focused record resolving into the next layer of evidence. It can feel crisp, premium, and quietly futuristic, but never ornamental: no decorative loops, no ambient attention traps, no neon soup. Every transition is interruptible, obeys prefers-reduced-motion, and carries no information that the still interface withholds.
The name
VERA — Verified Evaluation for Rental Analysis. Set in caps, never “Vera”, never possessive in product copy. Referred to as “it”, not “she”: it is an instrument, and pretending otherwise would be the first dishonest thing it does.