DESIGN.md · Analysis

Stewart & Co Real Estate

stewartcorealty.com · 25 Sept 2026 · 47 colors · Cormorant Garamond, Afacad Flux

Stewart & Co Real Estate

Luxury real estate brand specializing in high-end properties in Barbados. Combines architectural sophistication with warm, approachable elegance through a refined palette of deep navy, warm cream, and teal accents.

Colors

surface#ffffff

surface-dim#f4efeb

surface-bright#ffffff

surface-container-lowest#faf8f6

surface-container-low#f4efeb

surface-container#ede8e4

surface-container-high#e6e0db

surface-container-highest#dfd9d3

on-surface#000000

on-surface-variant#666666

inverse-surface#2e4157

inverse-on-surface#f4efeb

outline#999999

outline-variant#d0d0d0

surface-tint#bed9d8

primary#0099ff

on-primary#ffffff

primary-container#bed9d8

on-primary-container#2e4157

inverse-primary#0099ff

secondary#2e4157

on-secondary#ffffff

secondary-container#e9ecef

on-secondary-container#2e4157

tertiary#bed9d8

on-tertiary#2e4157

tertiary-container#f0f9fa

on-tertiary-container#2e4157

error#d32f2f

on-error#ffffff

error-container#ffcdd2

on-error-container#b71c1c

primary-fixed#0099ff

primary-fixed-dim#0077cc

on-primary-fixed#ffffff

on-primary-fixed-variant#005fa3

secondary-fixed#2e4157

secondary-fixed-dim#1f2d3a

on-secondary-fixed#ffffff

on-secondary-fixed-variant#ffffff

tertiary-fixed#bed9d8

tertiary-fixed-dim#8fb5b3

on-tertiary-fixed#2e4157

on-tertiary-fixed-variant#2e4157

background#ffffff

on-background#000000

surface-variant#ede8e4

Typography

display: fontFamily: Cormorant Garamond · fontSize: 56px · fontWeight: 300 · lineHeight: 64px · letterSpacing: -0.02em
headline-lg: fontFamily: Cormorant Garamond · fontSize: 40px · fontWeight: 300 · lineHeight: 48px · letterSpacing: -0.01em
headline-md: fontFamily: Cormorant Garamond · fontSize: 32px · fontWeight: 400 · lineHeight: 40px · letterSpacing: 0em
title-lg: fontFamily: Afacad Flux · fontSize: 20px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0.01em
body-lg: fontFamily: Afacad Flux · fontSize: 18px · fontWeight: 300 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: Afacad Flux · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0.01em
label-md: fontFamily: Archivo · fontSize: 14px · fontWeight: 400 · lineHeight: 20px · letterSpacing: 0.02em
label-sm: fontFamily: Archivo · fontSize: 12px · fontWeight: 400 · lineHeight: 16px · letterSpacing: 0.03em

Design guidance

Overview

Stewart & Co Real Estate is a luxury property brokerage specializing in high-end residential and commercial real estate in Barbados. The brand serves affluent international buyers and investors seeking curated, architecturally distinctive properties in a tropical paradise. The design system embodies "Refined Minimalism with Warmth"—a sophisticated aesthetic that balances the austere elegance of deep navy (#2e4157) and cream (#f4efeb) with vibrant teal and cyan accents (#0099ff, #bed9d8). The visual language evokes the calm, sun-drenched interiors of luxury Caribbean villas: clean lines, generous whitespace, and carefully placed accent colors that draw the eye to key information without overwhelming the viewer. The emotional response is one of understated confidence and timeless sophistication.

The brand voice is knowledgeable yet approachable, speaking to clients as trusted advisors rather than salespeople. Vocabulary emphasizes craftsmanship, location, and lifestyle—words like "curated," "architectural integrity," "beachfront," and "investment potential" appear frequently. The tone avoids hyperbole; instead, it lets photography and precise details do the selling. Example sentence: "This 4-bedroom villa commands unobstructed ocean views and sits on 1.2 acres of manicured grounds—ideal for the discerning buyer seeking privacy and proximity to Bridgetown's cultural district."

---
version: alpha
name: Stewart & Co Real Estate
description: >-
  Luxury real estate brand specializing in high-end properties in Barbados. Combines architectural sophistication with
  warm, approachable elegance through a refined palette of deep navy, warm cream, and teal accents.
logo:
  src: https://framerusercontent.com/images/6neWGKa7358Y48usjh7qMC6NUIM.png
  srcDark: https://framerusercontent.com/images/gKnzgxybyZpcv7KnGw8R64RPf60.png
colors:
  surface: '#ffffff'
  surface-dim: '#f4efeb'
  surface-bright: '#ffffff'
  surface-container-lowest: '#faf8f6'
  surface-container-low: '#f4efeb'
  surface-container: '#ede8e4'
  surface-container-high: '#e6e0db'
  surface-container-highest: '#dfd9d3'
  on-surface: '#000000'
  on-surface-variant: '#666666'
  inverse-surface: '#2e4157'
  inverse-on-surface: '#f4efeb'
  outline: '#999999'
  outline-variant: '#d0d0d0'
  surface-tint: '#bed9d8'
  primary: '#0099ff'
  on-primary: '#ffffff'
  primary-container: '#bed9d8'
  on-primary-container: '#2e4157'
  inverse-primary: '#0099ff'
  secondary: '#2e4157'
  on-secondary: '#ffffff'
  secondary-container: '#e9ecef'
  on-secondary-container: '#2e4157'
  tertiary: '#bed9d8'
  on-tertiary: '#2e4157'
  tertiary-container: '#f0f9fa'
  on-tertiary-container: '#2e4157'
  error: '#d32f2f'
  on-error: '#ffffff'
  error-container: '#ffcdd2'
  on-error-container: '#b71c1c'
  primary-fixed: '#0099ff'
  primary-fixed-dim: '#0077cc'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#005fa3'
  secondary-fixed: '#2e4157'
  secondary-fixed-dim: '#1f2d3a'
  on-secondary-fixed: '#ffffff'
  on-secondary-fixed-variant: '#ffffff'
  tertiary-fixed: '#bed9d8'
  tertiary-fixed-dim: '#8fb5b3'
  on-tertiary-fixed: '#2e4157'
  on-tertiary-fixed-variant: '#2e4157'
  background: '#ffffff'
  on-background: '#000000'
  surface-variant: '#ede8e4'
typography:
  display:
    fontFamily: Cormorant Garamond
    fontSize: 56px
    fontWeight: '300'
    lineHeight: 64px
    letterSpacing: '-0.02em'
  headline-lg:
    fontFamily: Cormorant Garamond
    fontSize: 40px
    fontWeight: '300'
    lineHeight: 48px
    letterSpacing: '-0.01em'
  headline-md:
    fontFamily: Cormorant Garamond
    fontSize: 32px
    fontWeight: '400'
    lineHeight: 40px
    letterSpacing: 0em
  title-lg:
    fontFamily: Afacad Flux
    fontSize: 20px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0.01em
  body-lg:
    fontFamily: Afacad Flux
    fontSize: 18px
    fontWeight: '300'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Afacad Flux
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0.01em
  label-md:
    fontFamily: Archivo
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Archivo
    fontSize: 12px
    fontWeight: '400'
    lineHeight: 16px
    letterSpacing: 0.03em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 3px rgba(0, 0, 0, 0.08)
  md: 0 4px 12px rgba(0, 0, 0, 0.12)
  lg: 0 12px 32px rgba(0, 0, 0, 0.16)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 32px
    height: 48px
    border: none
    boxShadow: 0 4px 12px rgba(0, 153, 255, 0.2)
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    boxShadow: 0 6px 16px rgba(0, 119, 204, 0.3)
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)
  button-primary-active:
    backgroundColor: '{colors.primary-fixed-dim}'
    transform: scale(0.98)
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.secondary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 32px
    height: 48px
    border: 1px solid {colors.outline}
    boxShadow: none
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-low}'
    borderColor: '{colors.secondary}'
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    boxShadow: '{elevation.sm}'
    border: 1px solid {colors.outline-variant}
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    boxShadow: '{elevation.md}'
    transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1)
  input-field:
    backgroundColor: '{colors.surface-container-lowest}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 16px
    border: 1px solid {colors.outline-variant}
    height: 44px
  input-field-focused:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(0, 153, 255, 0.1)
    transition: border-color 200ms, box-shadow 200ms
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    textColor: '{colors.on-surface}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.primary}'
    transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1)
  badge:
    backgroundColor: '{colors.tertiary-container}'
    textColor: '{colors.on-tertiary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  navigation-link:
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    textDecoration: none
    position: relative
    paddingBottom: 4px
  navigation-link-active:
    textColor: '{colors.primary}'
    borderBottom: 2px solid {colors.primary}
    transition: color 200ms, border-color 200ms
---

## Overview

Edit, then copy or download.