# Great Jones · Design system migration spec

> Source: https://greatjones.co  ·  Curated by OpenDesign  ·  en

> A strong example of blending lifestyle photography with an institutional financial aesthetic.

## 1. Identity DNA

Great Jones operates like a boutique investment banking firm for residential real estate, translating institutional trust into a digital interface for property management. The design language reflects this positioning: structured, confident, and built for clients who value clarity over ornamentation.

**One-liner:** High-end property management platform for real estate investors.
**Keywords:** property management · investment · residential · professional · institutional
**Analogy:** A boutique investment banking firm for residential real estate.

## 2. Color

The palette is anchored by a deep forest green and neutral grays, a combination that borrows its authority from the world of finance while maintaining warmth through off-white surfaces. This is a system where color serves as a quiet signal of stability rather than a decorative element.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F8F9F8` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#002A45` | quiet area |
| `--ink` | `#686868` | body text |
| `--ink-soft` | `#0A253A` | secondary text |
| `--muted` | `#33755E` | placeholder |
| `--muted-soft` | `#DFF6AF` | weak hint |
| `--accent` | `#33755E` | single accent |
| `--line` | `rgba(104, 104, 104, 1.0)` | divider |

**Color principle:** Trustworthy financial green and neutral grays with photographic grounding.

The guiding principle is restraint: every chromatic choice must reinforce the platform's credibility and prevent visual noise from undermining its professional context.

## 3. Typography

Typographic voice is split between a transitional serif for high-impact headlines and a clean geometric sans-serif for interface and body copy, creating a hierarchy that feels both editorial and functional. This pairing avoids the informality of rounded or playful letterforms, opting instead for the structured elegance of Taviraj and the neutral clarity of Poppins.

- **Display:** transitional-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 44px | 1.18 | 300 | -0.5px | Hero Headline |
| body | 16px | 1.5 | 300 | 0px | Main Text |
| caption | 12px | 1.5 | 400 | 1.4px | Uppercase Labels |

**Type rules:**
- Serif for high-impact headlines, sans-serif for UI and body copy.
- Uppercase tracking (1.4px) used for navigational and button text.

## 4. Spacing

Generous vertical whitespace establishes the system's rhythm, allowing each component to breathe and conveying a sense of premium quality through deliberate emptiness.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 120 px
- **Rhythm:** Generous vertical whitespace creates a sense of calm and premium quality.

## 5. Surfaces

Depth is achieved through a single, measured shadow style and a fine border language, creating a subtle layering of surfaces without resorting to heavy skeuomorphism. The system favors clarity of hierarchy—cards and containers are defined but never dominate the layout.

- **Radius:** sm 4px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(22, 22, 22, 0.2) 0px 16px 40px 0px
- **Borders:** 1px solid rgba(104, 104, 104, 1.0)

## 6. Layout

The foundational layout begins with a full-width photographic hero, its content centered to command immediate attention, then transitions into a clean two-column grid for structured content delivery. This skeleton prioritizes clarity and scannability, ensuring the interface serves the property management workflow without visual clutter.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width photographic hero with centered content, transitioning to a two-column grid.

## 7. Motion & Interaction

Motion philosophy is minimal and functional, using fast transition durations to create a snappy, reliable interface that feels immediate and responsive. The system employs smooth, subtle transitions on interactive states—background-color shifts and opacity changes—to maintain a premium feel without unnecessary flourish.

- **Durations:** micro 100ms · small 150ms · medium 200ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - background-color 0.15s ease-in-out
  - opacity 0.1s

- **Hover:** Background-color or color inversion with 0.15s transition.
- **Click:** Immediate feedback with minimal delay.
- **Transition:** 0.15s ease-in-out for interactive states.
- **Keyboard:** Standard focus ring visibility.

## 8. Voice & Don'ts

The editorial voice is professional, reliable, and sophisticated, favoring concise serif headlines that emphasize results and direct, uppercase sans-serif instructions for calls to action. This tone is consistent and institutional, avoiding casual language, excessive punctuation, or vague jargon that might dilute the platform's authoritative stance.

- **Tone:** Professional, reliable, and sophisticated.
- **Headline style:** Concise serif headlines that emphasize results and ease.
- **CTA style:** Direct, uppercase sans-serif instructions like 'GET STARTED'.
- **Avoid:** Excessive exclamation points / Unnecessary emojis / Vague jargon

### Don'ts
- ❌ don't use playful or rounded fonts — screenshot shows a structured transition serif and geometric sans.
- ❌ don't use loud neon colors — screenshot shows a restrained palette of deep green and muted grays.
- ❌ don't clutter the layout with too many elements — screenshot shows generous whitespace and minimal text.
- ❌ don't use dark mode — screenshot shows a predominantly white and off-white background.
- ❌ don't use overly complex icons — screenshot shows simple, white line-art inside solid circles.
- ❌ don't use casual, lowercase CTAs — screenshot shows 'GET STARTED' in strict uppercase.

The system deliberately avoids playful typography, neon accents, and cluttered layouts, maintaining a focused, institutional aesthetic that prioritizes clarity and trust over trendy visual embellishment.

## System Prompt (paste into AI tool)

```
This is a premium property management platform for real estate investors. The design uses a sophisticated palette of deep forest green (#33755E) and off-white (#F8F9F8) with dark navy (#0A253A) for depth. Typography pairs a transitional serif (Taviraj) for elegant headlines with a clean geometric sans (Poppins) for UI. The layout is clean and spacious, featuring full-bleed photography. Critical donts: do not use rounded or bubbly fonts, avoid bright neon accents, and never clutter the interface with excessive icons or text. Maintain a professional, institutional tone.
```
