Our brand, used right.
Logos, colors, type, the materials the product is built from, and the rules that hold them together. If you're writing about DealMachine or putting our name next to yours, everything you need is on this page.
Approved logo treatments
The icon mark is the orbit: six facets closing around the D. The wordmark pairs it with our name. Use blue on light backgrounds, white on dark surfaces, black for monochrome needs, and the print-blue files for CMYK workflows.
Cyan for the mark, teal for everything else
The two cyans belong to the logo. Don't use them for buttons, links, or backgrounds. Product surfaces, actions, and marketing use brand teal on light paper or dark slate. Click any swatch to copy its hex value.
Logo colors
Product palette
Teal scale
50 through 950. The full ramp behind our light and dark themes: anchor on #0D9488 in light contexts and #14B8A6 in dark ones.
Status and accent inks
One ink set, not a box of markers. Every status and accent color is generated in OKLCH at the same lightness band and chroma, with hues spaced around the teal so no status ever reads as brand. Success is a real green, info is a survey blue, warning is ochre, danger is vermilion. Light surfaces use these values; dark slate uses the step above each so the ink stays luminous. In code they are the semantic tokens (bg-success, text-warning), never a hand-picked hex.
Success: 100, 300, 500, 700, 900
Info: 100, 300, 500, 700, 900
Warning: 100, 300, 500, 700, 900
Danger: 100, 300, 500, 700, 900
Purple: 100, 300, 500, 700, 900
Orange: 100, 300, 500, 700, 900
Loupe
Read the paper. Hold the glass.
DealMachine is a map of the field: every parcel, every owner, every road you will drive. The interface is that map printed on a sheet, with a few clear instruments resting on it. Everything you read is paper. Everything you hold is glass. The map underneath is the ground, and the ground decides which material a thing gets, not the platform it is on. The phone is the field; the desktop is the desk. Same sheet, same glass, a different amount of each.
Four layers, bottom to top
- 1Ground
What the instruments float over. The live map, the drawn map, a phone’s scrolling record, a scrolling transcript.
Mapbox in Explore, the drawn map on the landers, the record page under its nav on the phone.
- 2Sheet (paper)
What you read and edit. Opaque, hairlined, grained, no shadow.
Sidebar, header band, tables, record sections, filter panel, menus, dialogs, the drawer, forms, and the ink pill that finishes a sheet.
- 3Glass
What you hold over ground. The card color at a fraction, blurred through, edge and top highlight. Controls and glanceable surfaces only.
Omnibox, Explore Map pill, Sign Up pill, Choose a plan pill, map capsules, caption pill, preview card, parcel picker, action bar, suggestion tray.
- 4Ink
Bare marks on ground with no plate.
The logo mark, public nav words, Log in, the theme toggle, the scale bar, breadcrumbs over a calm ground, the scroll cue.
The one rule
- 1
What is under it?
Sheet: it is paper. Ground: go on.
- 2
What does it do?
It acts on the ground in place (searches it, zooms it, draws on it, locates you, or carries the one next step out of it): glass. It opens the workspace (a panel, a menu, a settings sheet, navigation): paper, in the frame, not over the map.
- 3
Do you read or edit inside it for longer than a glance?
Then it is paper even if it floats: the filter panel, the side panel, a dialog, a sheet body.
Not Loupe
- Glass panels you read inside: a glass table, a glass dialog, a glass sidebar.
- Glass inside glass.
- Tinted, colored, or gradient glass.
- Glow, bloom, and light leaks.
- Blur as decoration on paper.
- Frosted dashboards.
- A glass plate under the logo or under words that can stand on their own.
- Warm or cream paper.
- Drop-shadow sheets, folds, torn edges, chalk-dust textures.
- Serif or typewriter faces, all-caps micro type.
- A phone-style slide-up sheet on the desktop.
The full rules live in DESIGN.md in the product repo: the Loupe section, the materials, the control layer, and the status color tables. New surfaces start there.
Space Grotesk speaks, Inter works
Two typefaces, both free on Google Fonts. Space Grotesk is for display moments: headlines, big numbers, anything that should stand out. Inter carries everything else: body copy, buttons, labels, and data.
Every property. Every owner.
AaBbCcDdEe 0123456789
DealMachine helps real estate professionals find property opportunities, understand who owns them, and turn that intelligence into outreach. Inter keeps long passages, dense tables, and small labels readable at any size.
AaBbCcDdEe 0123456789
A few rules keep it recognizable
Use the supplied files
Always start from the downloads on this page. Never redraw, retype, or trace the mark.
Pick the right version
Color logo on white or very light backgrounds. White logo on dark colors, photos, and video.
Give it room
Keep clear space around the logo of at least a quarter of its width on every side.
Keep it legible
Don’t render the icon below 24px or the wordmark below 120px wide.
One word, two capitals
It's DealMachine, written as one word with a capital D and a capital M, everywhere, every time.
Working on a story, partnership, or integration?
If you need an asset or format that isn't here, or you're not sure whether a use is on-brand, just ask. We're happy to help.