Brand StandardsConcept 1 · Draft for review

Chapters

Color

Two colors from the mark, held with restraint against gallery walls. Navy carries authority; bronze is a signature, not a finish.

3.1

Away from black and gold

Luxury real estate has a default: black, metallic gold and a serif. REWAP’s own mark points somewhere quieter.

The logo is navy and bronze, not black and gold. The system keeps that distinction and widens it. Registry Navy, drawn from the W, does the work black usually does: text, statement fields, primary actions. Bronze is reserved for the mark, for 1 px rules and for a few moments of emphasis; it never fills a button and never becomes metallic outside the logo itself.

Grounds are gallery neutrals, measured to sit just off white with almost no chroma, so photography and property data carry the color. The names come from the materials of New England civic buildings: granite, slate, limestone, plaster.

Every value is defined in OKLCH so lightness steps are perceptually even and contrast is predictable. Hex values are the fallback for older browsers and for vendors.

3.2

Primary: navy and bronze

Click any value to copy it.

--c-night
Night
Deepest navy; text on light, dark fields
--c-navy
Registry Navy
Registry Navy — primary; from the mark's W
--c-navy-700
Navy 700
Navy hover / pressed
--c-navy-500
Harbor
Info, secondary UI on light
--c-bronze-700
Bronze Deep
Bronze Deep — the only bronze allowed as text on light
--c-bronze
Bronze
Bronze — the mark's flat color; rules and large marks only
--c-bronze-300
Bronze Light
Bronze Light — accents and text on navy
--c-bronze-100
Bronze Tint
Bronze tint
--c-navy-200
Fog
Tint, selected rows
--c-navy-100
Mist
Faint tint
3.3

Neutrals and text

Surfaces stay quiet so content leads. Text is navy-tinted ink, never pure black.

--c-gallery
Gallery
Gallery — page ground
--c-plaster
Plaster
Plaster — alternate surface
--c-limestone
Limestone
Limestone — strong rule, input border on plaster
--c-hairline
Hairline
Hairline — default 1px rule
--c-ink
Ink
Ink — body text
--c-slate
Slate
Slate — secondary text
--c-granite
Granite
Granite — disabled, decorative meta (not body text)
3.4

Proportion

How much of each color a typical page shows. Bronze stays under five percent; if a layout needs more, it needs a photograph instead.

Ink 5% and Bronze 3% complete the bar. Statement pages such as a founder letter may invert this, running navy as the dominant field.

3.5

Interactive and status

Interaction is navy with a bronze signal; status colors are used only for status.

  • LinksRegistry Navy text with a 1 px Bronze underline; the underline turns navy on hover.
  • Primary actionRegistry Navy fill, Gallery text. Hover Navy 700; pressed Night.
  • Focus2 px Bronze Deep outline, 3 px offset (Bronze Light on navy). Never removed.
  • Input bordersGranite (3.76 : 1 against Gallery) to meet non-text contrast.
  • SelectedMist fill with Harbor border for chips and rows.
--c-success
Success
Status: success
--c-warning
Warning
Status: warning (text/icon)
--c-warning-fill
Warning Fill
Status: warning surface
--c-error
Error
Status: error
3.6

Contrast pairs

Ratios computed from the sRGB values (WCAG 2.2). Body text requires 4.5 : 1; large text and UI components 3 : 1.

SamplePairRatioCleared for
Ink on Gallery15.16 : 1AA body
Ink on Plaster14.17 : 1AA body
Slate on Gallery6.49 : 1AA body
Slate on Plaster6.06 : 1AA body
Registry Navy on Gallery14.24 : 1AA body
Bronze Deep on Gallery6.42 : 1AA body
Bronze Deep on Plaster6.00 : 1AA body
Bronze on Gallery3.42 : 1AA large / UI
Granite on Gallery3.76 : 1AA large / UI
Gallery on Registry Navy14.24 : 1AA body
Bronze Light on Registry Navy7.60 : 1AA body
Fog on Registry Navy9.74 : 1AA body
Bronze on Registry Navy4.16 : 1AA large / UI
Gallery on Night17.10 : 1AA body
Bronze Light on Night9.13 : 1AA body
Success on Gallery6.01 : 1AA body
Warning on Gallery5.85 : 1AA body
Error on Gallery5.98 : 1AA body
Night on Warning Fill12.42 : 1AA body
Night on Bronze Tint14.78 : 1AA body
Hairline on Gallery1.38 : 1decorative only
Limestone on Gallery1.23 : 1decorative only
Slate on Limestone5.28 : 1AA body

Bronze on Gallery (3.42 : 1) is cleared for rules, large display numerals and the mark only. Small bronze text uses Bronze Deep.

3.7

Tokens

Primitives name the color; semantic tokens name the job. Components only ever reference semantic tokens.

Semantic tokenResolves toUsed for
--surface-page--c-galleryPage ground
--surface-alt--c-plasterAlternating sections, plates
--surface-statement--c-navyStatement rooms, CTA bands
--text--c-inkBody copy
--text-secondary--c-slateCaptions, metadata
--accent--c-bronzeRules, numerals, underline
--accent-text--c-bronze-700Bronze text on light
--control-border--c-graniteInputs, outlined controls
--focus--c-bronze-700Focus outline

Files: tokens.css · tokens.json (W3C design tokens) · theme.json (WordPress block theme draft).