# Tenantcloud Design System

> A structured, high-contrast utility canvas where deep navy ink meets functional forest green accents on a stark white ground.

**Source:** https://tenantcloud.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Tenantcloud utilizes a "High-Contrast Utility" aesthetic, prioritizing legibility and professional trust. The palette is anchored by a deep navy `#102a43` for primary text and a vibrant forest green `#41a541` for all primary actions. Typography relies exclusively on Proxima Nova for a modern, geometric feel, using weights from 300 to 700 to establish hierarchy. Layouts are defined by generous 80px section spacing and large-radius containers (up to 50px), creating a "soft-professional" interface that balances the severity of the dark navy with approachable, rounded geometry.

## Signature DNA
1. **The Navy-Green Anchor** (The pairing of `#102a43` text against `#41a541` primary buttons creates a distinct "professional growth" color story seen across all landing and pricing pages.)
2. **Hyper-Rounded Containers** (Feature cards and primary buttons use extreme radii of 40px to 50px, softening the dense information architecture of property management software.)
3. **Proxima Nova Hierarchy** (The system leverages a wide weight range of a single sans-serif family to differentiate between 50px display headers and 14px utility labels.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 71 | 0.8 | computed_style |
| `{color.navy.900}` | `#102a43` | Primary text, headings, borders | 288 | 0.8 | computed_style |
| `{color.gray.700}` | `#454545` | Secondary body text on pricing pages | 18 | 0.8 | computed_style |
| `{color.gray.100}` | `#f8f9fa` | Subtle section backgrounds | 5 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.green.primary}` | `#41a541` | Primary CTA backgrounds, success indicators | 65 | 0.8 | computed_style |
| `{color.navy.700}` | `#486581` | Muted secondary text | 7 | 0.6 | computed_style |
| `{color.teal.900}` | `#0e2a30` | Dark section backgrounds (Hero/Footer) | 6 | 0.6 | computed_style |
| `{color.green.light}` | `#dbf1db` | Success badges, light surface backgrounds | 6 | 0.6 | computed_style |
| `{color.blue.light}` | `#bcccdc` | Input borders, decorative dividers | 6 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | `#41a541` | Primary action and confirmation |
| `{color.info}` | `#3c9aae` | Secondary accents and feature icons |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Proxima Nova | 300, 400, 600, 700 | All UI, Headings, Body | Montserrat | Licensed |
| Arial | 400 | Form inputs, fallback | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.xl}` | 50px | 56.25px | normal | 600 | Main Hero Title | `h2.header-title` |
| `{text.display.lg}` | 48px | 72px | normal | 600 | Section Headers | `h2.integrated-with-title` |
| `{text.display.md}` | 40px | 40.41px | normal | 700 | Feature Titles | `h3.title` |
| `{text.heading.lg}` | 32px | 36px | normal | 600 | Subsection Titles | `h3.section-title` |
| `{text.heading.md}` | 25px | 28.38px | normal | 600 | Card Titles | `h3.item-title.h5` |
| `{text.body.lg}` | 18px | 27px | normal | 400 | Intro Paragraphs | `p.header-description` |
| `{text.body.md}` | 16px | 23.62px | normal | 400 | Default Body | `article.l-home` |
| `{text.button}` | 16px | 21.26px | 0.15px | 700 | Primary CTA | `a.m-btn.btn-primary` |
| `{text.caption}` | 12px | 18.66px | normal | 400 | Small Metadata | `span` |

### Principles
1. **Weight as Hierarchy:** Use 600 weight for all structural headings; reserve 700 for specific emphasis and primary buttons.
2. **Generous Leading:** Line heights for body text are consistently 1.45x–1.5x the font size to maintain readability in dense feature lists.
3. **Navy over Black:** Never use pure `#000000` for text; use `{color.navy.900}` to maintain brand warmth.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 54 |
| `{space.sm}` | 16px | 27 |
| `{space.md}` | 25px | 64 |
| `{space.lg}` | 40px | 55 |
| `{space.xl}` | 80px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Page sections | 356 occurrences |
| `{radius.sm}` | 8px | Pricing cards, inputs | Pricing page cards |
| `{radius.lg}` | 24px | Feature cards | About page cards |
| `{radius.pill}` | 50px | Primary buttons, Hero cards | `a.m-btn.btn-primary` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(98, 125, 152, 0.12) 0px 8px 16px 0px` | Pricing tier emphasis | Pricing page featured card |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide CTA
**Pages observed:** Home, About
**Spec:** 
- Background: `#41a541`
- Text: `#ffffff`
- Radius: `50px`
- Padding: `10px 50px 10px 30px`
- Typography: Proxima Nova 700 (17.7px)

#### Text Input
**Role:** Lead generation and search
**Pages observed:** Pricing
**Spec:** 
- Background: `transparent`
- Border: `1px solid #bcccdc`
- Radius: `8px`
- Padding: `20px 15px 0px`
- Typography: Proxima Nova 400 (15.75px)

### Tier 2: Patterns

#### Feature Card (Dark)
**Role:** Highlighting core platform capabilities
**Pages observed:** Home, About
**Spec:** 
- Background: `#0e2a30`
- Text: `#ffffff`
- Radius: `50px`
- Padding: `80px 40px`

#### Pricing Card
**Role:** Subscription tier display
**Pages observed:** Pricing
**Spec:** 
- Background: `#ffffff`
- Border: `4px solid #102a43` (Active) | `0px` (Default)
- Radius: `8px`
- Shadow: `{shadow.card}`

### Tier 3: Surface-specific

#### Success Badge
**Role:** Inline status or "Most Popular" tags
**Pages observed:** Pricing
**Spec:** 
- Background: `#dbf1db`
- Text: `#41a541`
- Radius: `25px`
- Padding: `10px 15px`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 80px |
| Grid Gutter | 30px |

## Imagery & decoration
- **Iconography:** Uses thin-stroke line icons contained within circular `#dbf1db` or `#f0f4f8` plates.
- **Photography:** High-quality lifestyle imagery of diverse property managers and tenants, often with soft-focus backgrounds.
- **Avoids:** Heavy drop shadows, gradients, and sharp-cornered primary buttons.

## Do's
- Use `{color.green.primary}` for all conversion-oriented actions.
- Apply `{radius.pill}` to buttons to maintain the "soft-professional" brand voice.
- Set section spacing to exactly `80px` to ensure consistent vertical rhythm.
- Use Proxima Nova 600 for headings to ensure weight without appearing aggressive.
- Maintain a 14.6:1 contrast ratio by using `{color.navy.900}` on white backgrounds.

## Don'ts
- **Wrong:** Using a generic blue for primary buttons. **Right:** Use Forest Green `#41a541`. **Reason:** Blue is reserved for secondary info/borders; Green is the brand's primary action signal.
- **Wrong:** Mixing sharp and rounded buttons. **Right:** All buttons must use at least `{radius.sm}` (8px) or `{radius.pill}` (50px).
- **Wrong:** Using pure black `#000000` for body text. **Right:** Use Navy `#102a43`.
- Do not use shadows on standard feature cards; reserve shadows only for active pricing tiers.

## Similar brands
- Buildium
- AppFolio
- Stessa
- Zillow Rental Manager

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #41a541;
  --color-navy-900: #102a43;
  --color-navy-700: #486581;
  --color-surface-light: #f8f9fa;
  --radius-pill: 50px;
  --radius-card: 24px;
  --shadow-card: 0px 8px 16px 0px rgba(98, 125, 152, 0.12);
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-brand-green: #41a541;
  --color-brand-navy: #102a43;
  --font-proxima: "Proxima Nova", sans-serif;
  --radius-pill: 50px;
  --spacing-section: 80px;
}
```

## Agent prompt examples
- "Generate a hero section for Tenantcloud using a `#102a43` background, white Proxima Nova text at 50px, and a forest green `#41a541` pill button."
- "Create a feature grid with cards using a 24px border radius and 16px Proxima Nova body text in `#102a43`."
- "Design a pricing table where the 'Pro' plan has a 4px border in `#102a43` and a subtle shadow `rgba(98, 125, 152, 0.12)`."

## Known gaps
- Mobile-specific hover states were not captured as the primary interaction is touch-based.
- Dark mode specific tokens are missing as the site is primarily light-themed.
- Exact transition timings for button hover states were not provided in the computed evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://tenantcloud.com | 1440x900 | 2026-06-06 |
| Pricing | https://tenantcloud.com/pricing | 1440x900 | 2026-06-06 |
| About | https://tenantcloud.com/about | 1440x900 | 2026-06-06 |