Information signs — Figma Information Signs · a full-radius label pill in seven color roles · flanking ⓘ icons are placeholders

A neutral label pill for inline status / info messaging — distinct from the louder Alerts. It follows the same rules as the button types: 1.5px round-cap icons (leading & trailing, both optional placeholders), Open Sans 14, and the standard 10 ⁄ 6 padding. Comes in seven color roles.

Full-radius (360) pill · height 31 · Open Sans 14 · padding 10 ⁄ 6 · icon-label spacing 10 (icons removable, size follows the button-type scale). Blue · white BG white fill + #172E55 border ⁄ ink · Validation Green #117F39 + white · Light Yellow #FFFFDC + black · Dark Gray Black #404040 + white · Dark Gray #BFBFBF · Gray #E0E0E0 · Light Gray #ffffff (dark-gray/gray/light-gray use black ink).

Communication type & status signs — Figma Communication Types & Statuses · a contact-method pill whose icon encodes the verification state · 18 comm types × 4 states, plus 4 status-only signs

Tags a stored contact method (email, phone, address, fax) with its sub-type label and its verification state. A full-radius navy pill carries the method icon on the left; the icon changes with state — plain (unverified type), a green check variant (Verified), a red warning (Not Verified), or a filled red warning (Invalid). Same rules as the button types — Open Sans 14, 1.5px icons, 10 ⁄ 6 padding.

Phone

MobileMobileMobileMobileMobileSecondarySecondarySecondarySecondarySecondaryHomeHomeHomeHomeHomeOfficeOfficeOfficeOfficeOfficeBusiness TeamBusiness TeamBusiness TeamBusiness TeamBusiness TeamOther ContactOther ContactOther ContactOther ContactOther Contact

Email

PrimaryPrimaryPrimaryPrimaryPrimarySecondarySecondarySecondarySecondarySecondaryPersonalPersonalPersonalPersonalPersonalOfficeOfficeOfficeOfficeOfficeBusiness TeamBusiness TeamBusiness TeamBusiness TeamBusiness TeamOther ContactOther ContactOther ContactOther ContactOther Contact

Fax

FaxFaxFaxFaxFax

Address

Mailing AddressMailing AddressMailing AddressMailing AddressMailing AddressPrimaryPrimaryPrimaryPrimaryPrimarySecondarySecondarySecondarySecondarySecondaryOfficeOfficeOfficeOfficeOfficeInvestmentInvestmentInvestmentInvestmentInvestment

Verified

Verified · phone

Verified

Verified · all but email and phone

Verified

Email verified

Not Verified

Not verified

Invalid

Invalid

Full-radius pill · height 31 · Open Sans 14 · navy #172E55 border ⁄ label for method signs. State coding: Type-only navy icon · Verified green #117F39 check icon · Not Verified red #ED1C24 warning · Invalid filled red #ED1C24 warning. Status-only: Verified & Email-verified are all-green (border, icon, label); Not Verified all-red outline; Invalid is a solid #FF5151 pill with white icon ⁄ label. Fax has no sub-type. (This documents the system; the full 152-variant matrix lives in Figma.)

Transaction status signs — Figma Transaction Status · a lifecycle badge for a deal · full label + acronym

Marks a transaction's lifecycle stage. A neutral #E0E0E0 full-radius pill carries color-coded text — the fill stays gray in every state; only the label color changes. Each renders two ways from a Show Acronym switch: the full label and a compact acronym for dense rows.

Pill #E0E0E0 · full-radius · height 25 · Open Sans 14 · ~10px inset. Active #00A27C (Act.) · Potential #8E8E8E (Pot.) · Closed – Won #FD7900 (C.W.) · Closed – Lost #ED1C24 (C.L.).

User profile status signs — Figma User Profile Status · marks whether an account is active

Shows an account's state on a profile or user row. Same neutral #E0E0E0 full-radius pill as the transaction status — gray fill, color-coded text only.

Pill #E0E0E0 · full-radius · height 25 · Open Sans 14 · ~10px inset. Active #00A27C · Inactive #8E8E8E.

Agent license status signs — Figma Agent License Status · color-coded lifecycle of a license

Reports an agent's license standing. Unlike the neutral transaction ⁄ profile status pills, these carry a tinted fill matched to the state color — green for good standing, yellow for probation, red for lapsed ⁄ revoked, gray for military hold.

Full-radius pill · height 31 · Open Sans 14 · ~12px inset. Active #BDFBED fill ⁄ #00A27C text · Probation ⁄ Probated Suspension #FFFFDC ⁄ #FD7900 · Inactive · Expired · Suspended · Revoked · Surrendered · Deceased #FFE8E8 ⁄ #FF5151 · Military #E0E0E0 ⁄ #8E8E8E.

Toggle result signs — Figma Toggle Result · the chosen value of a 2- or 3-option toggle, rendered read-only

Displays the settled result of a toggle as a read-only 5px chip: Yes (green tint), No (red tint), Partial Yes (yellow tint), N/A (gray). The Status Change variant swaps the gray hairline for a 2px state-colored border to flag that the value changed — used in update ⁄ edit summaries.

Chip radius 5 · height 31 · Open Sans 14 · navy #172E55 label (N/A #8E8E8E). Fills — Yes #BDFBED · No #FFE8E8 · Partial Yes #FFFFDC · N/A #E0E0E0. Default border #BFBFBF; Status-change border 2px — Yes #00B775 · No #FF5151 · Partial Yes #FFC20E.

Upload progress bar — Figma Loading · a thin determinate progress bar shown while a document uploads

A slim determinate bar for file uploads and other measurable progress. A 6px full-radius #D0D0D0 track fills left-to-right in blue #0655CC, with an italic percentage in muted gray to the right.

Track #D0D0D0 · fill #0655CC · 6px tall · full-radius · width flexes to the container. Percentage in Open Sans 14 italic #8E8E8E, right-aligned with ~14px gap.

Link bar — Figma Link Bar · the row shown after a link is uploaded (vs a file)

When an upload is a link rather than a file, it lands as this bar: a light #F5F5F5 5px row holding the URL as an underlined navy link and a trash control to remove it. The URL truncates with an ellipsis when it overflows.

https://www.arandomwebsite.com/

Row #F5F5F5 · 5px radius · height 30 · ~10px inset. URL link Open Sans 14 #172E55 underlined; trash icon 1.5px navy, right-aligned. Width flexes to the upload area.

Agent & Brokerage tags — Figma Agent ⁄ Brokerage Tag · composite identity chip · profile image + contact-type sign + gold action pill · Horizontal ⁄ Vertical · Desktop ⁄ Mobile

Identifies a person or firm in listings and rosters. It composes the profile image tile, the contact-type sign — Agent #00B775, Broker #BB5A00, or Brokerage #BF3B4B — and a gold #DCCAAF pill carrying quick actions (favorite, verified) + the name. Horizontal & Vertical, at Desktop and Mobile scale.

{Agent Name}

Agent tag

{Agent Name}

Broker tag

{Brokerage Name}

Brokerage tag

{Agent Name}

Agent tag

{Agent Name}

Broker tag

{Brokerage Name}

Brokerage tag

{Agent Name}

Agent tag

{Agent Name}

Broker tag

{Brokerage Name}

Brokerage tag

{Agent Name}

Agent tag

{Agent Name}

Broker tag

{Brokerage Name}

Brokerage tag

Profile tile 8px radius · 0.5px #BFBFBF border (Desktop 25 ⁄ 31px, Mobile 22 ⁄ 28px). Contact-type sign per relationship color (any person ⁄ firm type). Gold #DCCAAF action pill · full-radius · favorite & verified icons before the name. Desktop Open Sans 14 · pill 25px; Mobile Open Sans 12 · pill 22px. {Agent Name} ⁄ {Brokerage Name} are name placeholders.

Alerts — information signs — Figma 2/Alerts · Attention · Warning · Info · Success × soft / solid / outlined · icons are placeholders pending the icon-library export

{Title}

{Description}

{Title}

{Description}

{Title}

{Description}

{Title}

{Description}

{Title}

{Description}

{Title}

{Description}

{Title}

{Description}

{Title}

{Description}

{Title}

{Description}

{Title}

{Description}

{Title}

{Description}

{Title}

{Description}

Anatomy: status icon (1.5px round-cap) · bold {Title} · {Description} · gray label button · circled close, aligned with the button. - Title, description, and button text are all modifiable placeholders — and the description or the button can be dropped entirely when a mockup doesn't need them.  Soft = light tint + 3px left bar (in-page notices) · solid = highest urgency (toasts, blocking) · outlined = quiet confirmations. Colors come from the Feedback roles — Attention Orange 1, Warning Red 2/3, Info Blue 2/3/5, Success Green 4 + Lt Green 1. Radius 5 · padding 10 · all gaps 10 — the only tight spacing is between {Title} and {Description}.

Flags — Figma 2/Flags · compact inline markers in five colors

{Title}{Title}{Title}{Title}{Title}{Title}{Title}{Title}{Title}{Title}{Title}{Title}{Title}{Title}{Title}

Small flag + {Title} (modifiable text), radius 5. Soft tint (colored flag, dark pole) · solid (white flag) · outlined (colored flag). Use for timeslot flags, list markers, and compact state tags where a full alert is too heavy.

Contact type signs — the colored relationship tag shown on contacts, agent cards & the profile bean

Every contact carries a type sign — a full-radius lozenge in a fixed color per relationship. It renders two ways from one Show Acronym switch: the full word (default, used wherever there's room) and a compact acronym (used in dense rows & the profile bean). Colors are canonical — reuse these exact hexes; never recolor a type. The unset/template state is the gray {Contact Type} placeholder.

Placeholder · unset #999999

Contact Roles · may appear on the header profile card

group & Profile types · organizations, never shown on the profile card

Information & news displays — Figma Type=General / Pop-up Window / Error · desktop & mobile · the full-surface message shown when important information or news is given to the user

A branded message surface in the gold field #DCCAAF with the signature green #117F39 wave anchored to the bottom edge. Three variants cover the range: General fills the whole window with a centered title; Pop-up is a shadowed white dialog with a gold header (info icon + title + red close) over a short body; Error is the 404 surface — a navy disc holding the code beside an “Oops!” block and recovery actions. Every interactive control is a library component: the Back and Go to Home Page buttons are the gray-gradient button (set 1), Contact Support is the text link.

1 · General — full-window information display · centered title over the wave

2 · Pop-up window — shadowed dialog · gold header with info icon + title + red close · short body

Field #DCCAAF · wave #117F39 · 8px radius. Titles in Open Sans — General title 600 (20px desktop / 12px mobile), “Oops!” 84px / 48px, “404” bold 100px / 60px in a #172E55 disc. Pop-up adds the standard drop shadow + red #ED1C24 close. On mobile the error layout stacks the disc above the “Oops!” block.

String field — Figma String / String (Large) · single-line or 350×100 multi-line (toggle “Large String Field” below) · Horizontal ⁄ Vertical · optional toggle, title & helper text · mandatory ⁄ error ⁄ inactive ⁄ non-editable

The standard single-line input. Its label row can carry an optional show ⁄ hide toggle (the library’s gold Show ⁄ Hide toggle — used when the field can be hidden from a given feature), an optional Title followed by a colon (the red asterisk sits between title and colon when mandatory), and an optional italic Helper Text line below. Horizontal puts the title beside the field, Vertical above it. The border encodes interaction — gray at rest, navy on hover or once text is entered, green while focused — while the text encodes validity (navy normally, red on error — an unfocused error field also takes a red #FF5151 border). A mandatory field that is still empty fills light red. Field 250×31 · radius 5 · Open Sans 14 · placeholder “Enter...” #8E8E8E. Borders — Default #BFBFBF · Hover ⁄ Text entered #172E55 · Focused #117F39. Mandatory + empty fill #FFE8E8 + red asterisk after the title. Error input text #ED1C24 · border #FF5151 when not focused (focus still turns it green). Inactive title, placeholder & toggle drop to #E0E0E0. Non-editable fill #ffffff + navy border ⁄ text; when empty it shows no box at all (an em-dash). Show ⁄ hide toggle = the library’s Show ⁄ Hide toggle (37×19, gold track + eye glyph; see Toggles). Helper text italic #8E8E8E. Two optional items — available on every field type and shown on every state specimen below: a placeholder end icon inside the right end of the bar, and a copy-field-text button to the right of the bar — 16px icon whose gray #E0E0E0 frame appears on hover with 4px top ⁄ bottom padding. {Title}, {Input Text} and {Helper Text} are placeholder text; toggle, title, helper, end icon and copy button are all optional.

Search bar field — Figma Search Bar · type-to-search field · single ⁄ multi selection · picks become Selected-Item chips · Horizontal ⁄ Vertical · mandatory ⁄ error ⁄ inactive ⁄ non-editable

A search field following the string field rules — optional {Title}: (red asterisk before the colon when mandatory), optional show ⁄ hide toggle, optional italic {Helper Text}, same border logic (gray navy on hover or once selected green focused red #FF5151 unfocused error; mandatory + empty fills #FFE8E8). The search icon sits at the right end of the bar and swaps by search type — general ⁄ user ⁄ properties (see Iconography Search); an optional icon placeholder can sit at the left end. The bar comes in two selection types, flagged by the tooltip marker after the title: single select ◎ — the chosen option renders as one Selected-Item chip inside the bar (a new pick replaces it) — and multi select — chips stack under the bar in series, filling the frame’s width before wrapping to the next line. Chips are the library’s Selected-Item standard (navy full-radius pill · tooltip icon · gold ⊗ to remove). Non-editable keeps the chips without the ⊗ on a #ffffff bar — or, with nothing selected, no bar at all: gray No {Title} Entered.

Bar 350 wide (vertical) ⁄ fluid (horizontal) · min-height 31 · radius 5 · magnifier 16px #8E8E8E right-aligned · optional 16px left icon placeholder · placeholder “Search...” #8E8E8E. Selection markers (after the title): ◎ single select · layered-check multi select — same glyphs as the field select legend. Borders — Default #BFBFBF · Hover ⁄ selected #172E55 · Focused #117F39 · Error unfocused #FF5151. Chips = Selected-Item standard: full-radius pill, 1px #172E55 border, tooltip icon, Open Sans 14, gold #DCCAAF 16px ⊗ (editable only); single = one chip in-bar, multi = chips in series under the bar, wrapping only when out of width. Inactive drops everything to #E0E0E0. Non-editable bar #ffffff + navy border, chips without ⊗; empty gray No {Title} Entered. End icon + copy button apply as on every field type.