Iconography.
The PURE line-icon set is the brand's icon language: 16px by default on desktop, 14px on mobile (except where stated or applied otherwise on the website), with a 1px line weight, round caps & joins. Default stroke re-tints to navy or gold-ink on light. Status & alert icons keep their semantic color.
General
PURE.placeholderIcon — the one placeholder; mount it whenever no existing icon matches a slot, never a close-enough icon
Country Flags — round-cropped in use (selector button 16px · drop-down rows 22px) · source of the Country-code selector via PURE.countries
united states
united kingdom
france
germany
japan
italy
india
spain
chinaMiscellaneous
cart
client generation
CRM
handshake
AMSAssociation Management Specialist — the CRM equivalent for real-estate association management
good time to sell
history
home
infinity
interrogation point
language
log in required
market place
merch store
newspaper
number
other
overview
private
process
public
tag
plane
bolt
gift
puzzle
target
diamond
circle
squareDevices & Technology
technology
other softwares
website
laptop
tablet
database
robot
automation
power
bug
cloudNotifications & Statuses — status icons keep their semantic color
information
notification
news alert
sparkle
marketing
features
light mode
dark mode
Variant 1: black · Variant 2: blue · Variant 3: green · Variant 4: yellow · Variant 5: orange · Variant 6: red · Variant 7: white
Variant 1: black · Variant 2: blue · Variant 3: green · Variant 4: yellow · Variant 5: orange · Variant 6: red · Variant 7: white
Variant 1: blue · Variant 2: black
Variant 1: white (on navy) · Variant 2: black · Variant 3: primary blue
Variant 1: green · Variant 2: white (on navy)
Variant 1: green · Variant 2: black
shield check
user check
Variant 1: orange (medium) · Variant 2: red (high) · Variant 3: white (on navy)
Variant 1: orange (medium) · Variant 2: red (high) · Variant 3: black · Variant 4: white (on navy)
shield alert
user shield
sos
Variant 1: red · Variant 2: black
Tooltips — 10px field-level markers · shown superscript next to the field title
info
single select
multi select
calculated field
private
brokerage visible
MLS visible
association visible
visible to log-in friendsArrows
up
right
down
left
left / right
up right
up left
down right
down left
up
right
down
left
up
right
down
left
up
right
down
leftUnits
units
ruler · measure
sq ft
m²
acres
hectareActions
Any action icon can become a button: a frame around the icon with 4px padding and 5px radiuses. On desktop the frame has no fill until hover, when it becomes #E0E0E0. On mobile there is no hover — the frame is #E0E0E0 at all times, and the icon stays at 16px (it does not drop to the 14px mobile icon size).
Add · Send · Save · Remove · Reset · Refresh
plus · add · simpleV1 default · alternative add button: blue → green on hover · + icon button
outlined: no frame, icon → green · filled: blue → green
add user
add shared user
link document · paperclip
save
V1 default · V2 default → red 1 fill · + icon button
V1 default · V2 default → blue fill · + icon button
V1 default · V2 default → orange fill · + icon button
V1 default · V2 default → green «showing requested» (hover & click) · + icon button
showing donegold filled
V1 outlined · V2 outlined → yellow fill · V3 gray → yellow fill · V4 yellow = selected · + icon button
claim home
minusbutton → #E0E0E0 frame
V1 default · V2 black → red 1 outlined · V3 white (dark bg) → red 1 fill · + icon button
V1 default · V2 black → red 1 · + icon button
V1 outlined · V2 outlined → red 1 fill · V3 red 1 → red 2 · V4 gold → gold 600 · V5 outlined, white-filled · + icon button
remove · trashbutton → #E0E0E0 frame
iconbutton
red iconred buttonblack & red outlined → filled red on hover
plus / minus
reset filterbutton → #E0E0E0 frame
reset password
refresh · synchronize
sendgreen → gold on hover
send message · SMSbutton hover → icon green
send email
send mail
wire · send money
archiveSearch — the search-bar’s right icon swaps by what is being searched
search · general
search · user
search · propertiesSearch Views — see the Search View buttons component in Interactive Components
gallery
list or table
map
pin locationFilter · Sort · Move Elements
filters · sliders
sort filters
sort high to low
sort low to high
sort up/down
move 2 ways
move 4 ways
pinSelection Actions
dot
upload
dots / moreaction button
select
edit
rename
iconbutton
mobile buttonmobile button slightly bigger
copy link
share
move to
download
import
export
print
clipboardExpend · Condense · Resize
iconbutton
iconbuttonblack · light bg / white · dark bg
iconbutton
iconbuttonblack · light bg / white · dark bg
iconbutton
iconbuttonblack · light bg / white · dark bg
iconbutton
iconbuttonblack · light bg / white · dark bg
expand left column line
expand right column line
resize column
fill
caret · resize up
caret · resize down
caret · resize left
caret · resize right
caret · resize double up
caret · resize double down
caret · resize double left
caret · resize double right
truncate
wrap
mergeMove Toward
back
go to
bookmark
V1 up #BFBFBF → #767676 · V2 down #BFBFBF → #767676 · V3 left #BFBFBF → #767676 · V4 right #BFBFBF → #767676
V1 up #BFBFBF → #767676 · V2 down #BFBFBF → #767676 · V3 left #BFBFBF → #767676 · V4 right #BFBFBF → #767676
V1 up · V2 down · V3 left · V4 right · icon buttons V5–V8: arrow #8E8E8E → white, frame #E0E0E0 → #BFBFBF (up/down pad 4/6 · left/right pad 6/4)
View · Hide
view · eye
hideCompare
compare
compare propertiesSuggest · Request
suggest ideas
suggest info change
request help
act as userMiscellaneous
log in
log out
buy a home
sell a home
make offer
drawThemed Icons — module glyphs (mi-*) are the left-bar nav cut of each theme
Location
address
address verified
Variant 1: filled · Variant 2: outlined
live location share · pin share
directions
map
street view
neighborhood
zip
city
county
state
country
townhall
walking person
bike
bus
carCommunications
communication & contact info
contact us
preferred communication
reply
mic
speaker wave
resources
dictionary
email
email verified
phone
phone verified
email & phone
mobile
text
fax
post mail
read / open email
unread / closed email
MFA phone
contact form
ai generated messages
atds
Variant 1: filled (mono) · Variant 2: filled (color) · Variant 3: outlined (mono) · Variant 4: outlined (color)
Variant 1: filled (mono) · Variant 2: filled (color) · Variant 3: outlined (mono) · Variant 4: outlined (color)
Variant 1: filled (mono) · Variant 2: filled (color) · Variant 3: outlined (mono) · Variant 4: outlined (color)
Variant 1: filled (mono) · Variant 2: filled (color) · Variant 3: outlined (mono) · Variant 4: outlined (color)
Variant 1: fill black · Variant 2: fill color · Variant 3: stroke
Variant 1: filled · Variant 2: outlined · Variant 3: outlined (thin)
in-person meeting
virtual meeting
visioconferenceMedia, Documents, Links & Notes
image
videos
camera
3d tour
story
enhanced
legal docs · module glyph
cdacommission disbursement authorization
document
shared document
signed doc · contract
signature
NDA
reviewof a document
forms & templates
iconbutton
iconbutton
folder
add folder
no folder
reports
graphs
trending up
trending down
average
price evolution
market activities
gaugeProfile & Contacts
profile
account filled
account outlined
main info
personal info
user type
user history
mls id
verified user filled
verified user outlined
premium agent filled
premium agent outlined
award
certification
real estate license
reviewof a person / organization
user
users
q&a
linked contacts
shared location
contact
members
aor
mls
builder
business or vendor
third party
referral
briefcase
clients
friends
buyer
seller
landlord
tenant
brokerage
broker
agent
team
assistant
marketing specialist
mentor
family
support familyCalendar & Tasks
calendar
add or select date or event
event date
clock
select time
timer
frequency
events · megaphone
classes
workshop or conferenceSaved Items & Activities
my saved items
my activities
saved properties
my properties
suggested properties
saved search
saved people
saved school
transactions
transaction stage
transaction price
financials
commission
commission split
agent buyer commission
fee includes
no franchise fees
cma
agreement
seller disclosure
appraisal
showing
create itinerary
tasks
checklistAccounting
accounting
billing / invoice
receipt
subscriptions
wallet
bank
calculator
coins
mortgage
percent doc
piggy bankSettings
iconbutton
workflows & permissionsSecurity & Identity
lock
unlock
badge id
face id
fingerprint
id card
key ring
safe
scan doc
yubikeyListing & Properties
Listings
listings
for sale
for rent
status
incomplete
coming soon
active
active · relisted same agent
active · relisted other agent
continue to show
active contingent
active k.o.
active option contract
pending
off market
hold
withdrawn
cancelled
expired
sold
leased
list id
mls number
listed date
closed date
dom
status change
listing price
original price
previous listing price
closed price
ratio listing price
property value estimation
mortgage rate
open house status
open house type
open house start time
open house end time
building complex
multiple homes
new construction
real estate development
sold · auctionProperty Fields
property types
residential
commercial
land
house
condo
townhome
apartment
multi-family
mobile home
office
retail
industrial
warehouse
hotel
mixed use
business or vendor
timeshare
stock cooperative
deeded parking
boat slip
unimproved land
agriculture
farm land
ranch land
pasture
livestock
equine
timber
hunting
fishery
developed land
residential land
mobile home land
farm living & land
ranch living & land
recreational
highway
airplane et al.
equine
fishery
livestock
parcel id
subdivision
directions · route
current use
proposed use
possession
taxes
ag exemption
special taxing authority
horse permitted
walk score
bike score
home features
floorplan
architectural style
structure
attached structure
common wall
home size sq. ft.
lot size
price per sq.ft
ceiling height
number of stories
which story
year built
facing direction
roof
foundation details
basement
basement features
construction materials
builder name
builder model
development status
building number
unit number
unit type
utilities
electricity
electricity on property
gas to property
water
water on property
sewer
mud
hoa
hoa name
hoa phone
hoa website
hoa fee/rate
hoa fee includes
gated community
adult community
park
isd
school
school type
school level
elementary school
middle school
junior high
high school
university
grade
school principal
total students
distance to school
rooms
beds
bathroom
full bathroom
half baths
kitchen
living room
dining room
breakfast room
game room
gym room
library
laundry room
workshop
balcony
garage spaces
rv parking
interior features
appliances
flooring
window features
fireplaces
spa features
laundry features
accessibility
elevator
internet
hvac
heating & cooling
heating features
cooling features
energy saving features
renewable energy
green energy efficient attributes
green energy generation
green indoor air quality measures
green sustainable construction
green water conserving attributes
site specific green efficiencies
exterior features
pool
patio and porch features
fence
curb
barn
parking spaces
covered parking spaces
frontage view
waterfront
creek access
lakes
ponds
wells
irrigation source
irrigated land
topography
soil type
vegetation
grasses
wooded area
established trees/timber
bottom land
cultivated land/agriculture
pasture
developed land
undeveloped landMatch the set's weight and round-cap style: 16px default on desktop, 14px on mobile, 1px line weight. If you need an icon not in the library, draw it in the same thin, 1px, round-cap style — nearest off-the-shelf match is Lucide / Feather. Unicode-glyph tiles are a compact nav shorthand only, never the brand's icon language. Emoji are never content.
Logos
Pure Logo
A navy hexagon framing a circuit of green seeds on gold columns — growth, structure, and grounding. The logo ships in three lockups — horizontal, vertical, and the hexagon mark alone — each in eight color variations. All are vector SVG in assets/.
pure logo3 layouts (Horizontal, Vertical, Icon Only) × 9 colors (Pure Colored, blue, black, gray, gray/black, gold/green/white, white, gray/white, black/white)
avatar placeholderperson glyph — header card / account (see PURE.hcGlyph)
Horizontal · primary
Vertical · stacked
Mark · icon only
Horizontal is the default everywhere. Vertical fits square or tall spaces (covers, avatars, splash). The mark alone is for favicons, app tiles, and tight chrome where the wordmark can't stay legible.
Color variations
A lockup is a fixed arrangement of the hexagon mark and wordmark — horizontal (mark beside the wordmark), vertical (mark stacked above it), or the mark alone. Each lockup ships in a full-color version, a full Primary Pure Blue (navy) version, and single-color fallbacks (solid black, gray, or white) for when full color can't be reproduced — single-color print, fax, or engraving. White-containing variants exist for dark backgrounds — never place them on light. Black-White variants are the exception: the black needs contrast too, so use them only on semi-dark (mid-gray) backgrounds — never on dark or light. By background: full-color on light & cream · reversed (Gold-White-Green / White) on navy or any dark photo · greyscale or 1-color black only where color isn't available.
Every logo is its own scalable SVG file — 24 in all (3 lockups × 8 colors) — kept in the assets/ folder and named by lockup and color (for example, the colored horizontal logo is pure-logo-h-colored.svg).
Clear space
Keep a margin of clear space around the logo equal to the cap-height of the P in the wordmark on every side. Nothing — type, image edges, other logos — enters this zone.
= P= PMinimum size
Below these sizes the green seeds and "MLS TECHNOLOGIES" line stop being legible. For favicons or very tight spaces, use the hexagon mark alone.
Incorrect usage
The relationship between mark, wordmark, color, and spacing is fixed. Don't:
The lockups and color variations above are the official set (vector, from the brand masters). The clear-space rule (margin = cap-height of the P) and the minimum-size values are PURE's adopted house standard — use them as the rule going forward.
Associations Logos — MLS & REALTOR association marks displayed alongside PURE
ccar
V1 Icon Only · V2 Icon + Text
ntreisBrokerage Logos Placeholders — generic placeholder marks used in mockups to show how a real brokerage logo would appear
blue
gold — 1 house
gold — several houses
orange
real estate — blue & gold
red housesDocument types — file-type badges for attachments & downloads · two heights (H40 · H20) · badge color drawn from the secondary palette
A rounded document glyph with a colored file-type badge. Each type ships at two sizes — H40 for cards & previews, H20 inline in lists & rows. Badge colors come from the secondary palette (e.g. PDF · Red 1, DOC · Blue 4, XLS · Green 2, PPT · Red 2, ZIP · Brown 2).
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20
H40
H20Calendar days count down — expiry indicator for saved searches, listings & documents · header + number color signal urgency
A calendar glyph with a DAYS LEFT header. The big number is a placeholder driven by context (the real remaining-day count). At 8 days or more the number is neutral dark; as soon as it drops below 8 it turns Red 2 — the “expire soon” state. When an item never expires, the header goes Green 2 and the body shows an infinity mark over a context description.
V1 Default (8+ days) · V2 Expire Soon (<8 days, red) · V3 Do Not Expire (green + ∞)
Property widgets – No images – Logos placeholders — shown in a listing card’s image slot on search pages when no photo is available
When a property widget has no usable image, its image slot falls back to one of these navy + gold brand placeholders — sized to center within the card’s image area (typically 4:3). Each communicates why no photo is shown: pending, unavailable, processing, a closed sale/lease, or a system fault.
image coming soon
no images available
in process
sold
leased
system errorMap layers & points of interest — the PURE pin rendered per base-map layer, overlay and place-category pins
Primary Map Layers
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
Secondary Map Layers
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
Points of Interest
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
V1 colored · V2 silver · V3 line
Images
Profile image — Person Glyph — shown when a user has no profile photo · Signed In shows gold tile + faint glyph (35% white) + white initials with a soft shadow · Signed Out shows white tile + plain gold glyph, no initials · every size, Partial or Full radius
Every account avatar falls back to the PURE person glyph when no photo is set. Signed in → solid gold #DCCAAF tile with the glyph faded to 35% white and the account’s initials in solid white with a soft drop shadow (for legibility) layered on top. Signed out (guest) → white tile with a plain, full-opacity gold glyph — no initials (no account to initial). Seven sizes: Icon 16px (radius 5px) · Small 48px (radius 8px, diminished header) · Base 56px (radius 8px) · Large 90px (radius 16px, extended header) · Profile Page 296px (radius 24px) · Pro-Profile Page 296×320 (radius 24px) · Property Page 560×320 (radius 24px). Radius is Partial (values above) or Full (circle / pill). The glyph is vertically centered in the tile.
Variants = Size × Color State × Radius. Sizes: Icon 16px (r5) · Small 48px (r8, diminished header) · Base 56px (r8) · Large 90px (r16, extended header) · Profile Page 296px (r24) · Pro-Profile Page 296×320 (r24) · Property Page 560×320 (r24). Color states: Signed In (gold tile, 35%-opacity white glyph + solid white initials with shadow) · Signed Out / guest (white tile, plain full-opacity gold glyph, no initials). Radius: Partial (per-size, listed) or Full (circle / pill). Editing any variant updates this main component and propagates to all instances
Partial · r5px
name tags / selected items in search fields · too small for initials, plain glyph only
Partial · r8px
diminished header
Partial · r8px
Partial · r16px
extended header
Partial · r24px
profile page main section
Partial · r24px
professional page — brokerages, agents, businesses
Partial · r24px
property page — real estate professional section
Contact & agent photos — image library — the approved roster of people photos for avatars, agent cards & contacts. Photos in italics are bound to a specific logged-in user type and render inside the Header Card for that user. Nested composition: these photos slot into the Person Glyph mother’s frame — same Size (Icon 16 · Small 48 · Base 56 · Large 90 · Profile Page 296 · Pro-Profile Page 296×320 · Property Page 560×320) × Radius (Partial / Full) variants apply when a photo replaces the fallback glyph.
ARE peopleV1 Mike Acquisto · V2 Shana Acquisto (Broker) · V3 Ana Ortiz (Support Family) · V4 Jody Daley
menV1 Man 1 (Team Leader) · V2 Man 2 (Association Assistant) · V3 Man 3 · V4 Man 4 (MLS Admin)
womenV1 Woman 1 · V2 Woman 2 (Professional) · V3 Woman 3 · V4 Woman 4 (Associate-Broker) · V5 Woman 5 (Association Admin) · V6 Woman 6 (Agent) · V7 Woman 7 · V8 Woman 8 (MLS Assistant)
All people imagery comes from this set. Photos sit in the same rounded-square tile as the account avatar (13 / 112 radius), cover-fit, with the soft drop shadow. Until a contact is assigned a face, the tile shows its gold initials placeholder. The ARE team are real named people; Men and Women are the generic stand-ins for sample contacts and leads.
Assign which photo represents each contact type and I'll wire them into the header card, agent listings and contact rows. Tile radius 13 / 112 (≈11.6%) · cover-fit · shadow 0 4px 12px rgba(0,0,0,.14).
Image placeholders — states & ratios
image placeholdersV1–V9: 3 ratios (1:9, 4:3, 9:16) × 3 states (Default, Add Image, Edit)
Use these when a design has no photo available yet but the layout needs the image space reserved — or to signal that an image belongs there. Three states — Default, Add Image (with add-photo affordance) and Edit (with edit affordance) — each in the three standard ratios 1:9, 4:3 and 9:16.
1:94:3
9:16
1:9
4:3
9:16
1:9
4:3
9:16Interactive — try the frame controls
A 4:3 frame walking the lifecycle. In Add Image, click a button to drop an image in → the frame flips to Edit, whose controls are real components: the reposition and trash icon-buttons from the iconography, and an Edit Image button (button library) with the edit icon. Trash clears back to Add Image.
Property Widgets Images
Photo sets used inside the property widgets on the website search & listing pages. Each set is added below as it’s provided.
Residential — Houses
residential - housesV1 House 1 · V2 House 2 · V3 House 3 · V4 House 4 · V5 House 5 · V6 House 6 · V7 House 7 · V8 House 8 · V9 House 9 · V10 House 10 · V11 House 11 · V12 House 12
Residential — Apartments or Condos
residential - apart & condos interiorV1 Interior 1 · V2 Interior 2 · V3 Interior 3 · V4 Interior 4 · V5 Interior 5
residential - apart & condos buildingsV1 Building 1 · V2 Building 2 · V3 Building 3 · V4 Building 4 · V5 Building 5 · V6 Building 6 · V7 Building 7
Residential — Houses · New Construction
residential - new constructionV1 Left Garage 1 · V2 Left Garage 2 · V3 Left Garage 3 · V4 Left Garage 4 · V5 No Garage 1 · V6 No Garage 2 · V7 No Garage 3 · V8 No Garage 4 · V9 Right Garage 1 · V10 Right Garage 2 · V11 Right Garage 3 · V12 Right Garage 4
Land — Unimproved Land
unimproved landV1 Unimproved 1 · V2 Unimproved 2 · V3 Unimproved 3 · V4 Unimproved 4 · V5 Unimproved 5 · V6 Unimproved 6 · V7 Unimproved 7 · V8 Farm Land · V9 Crops · V10 Ranch Land · V11 Timber Land
Land — Developed Land
developed landV1 Parking · V2 Playground · V3 Private Airstrip · V4 Public Park
Commercial — Sub-types
commercialV1 Commercial Building · V2 Retail · V3 Hotel · V4 Motel · V5 Garage · V6 Industrial 1 · V7 Industrial 2 · V8 Office Building 1 · V9 Office Building 2 · V10 Office Building 3 · V11 Office Room 1 · V12 Office Room 2
