Back to Dashboard

Brand Guidelines

Design system, colors, typography, and assets for Tenant Bird

Colors

Primary Palette

Eden Green

Primary brand color

HSL: 120 25% 14%

Tailwind: bg-eden

CSS: --eden-green

Eden Green Light

Hover states

HSL: 120 20% 20%

Tailwind: bg-eden-light

Eden Green Dark

Dark variants

HSL: 120 30% 10%

Tailwind: bg-eden-dark

Eden Cream

Text on primary

HSL: 40 33% 94%

Tailwind: text-eden-cream

Eden Cream Muted

Subtle backgrounds

HSL: 40 20% 80%

Tailwind: bg-eden-cream-muted

Accent Colors

Deep Olive

Action buttons, highlights

HSL: 60 40% 30%

Hex: #556b2f

Tailwind: bg-deep-olive

CSS: --deep-olive

Slate

Neutral actions, secondary buttons

HSL: 215 16% 47%

Tailwind: bg-slate

CSS: --slate

Typography

Font Families

Sans Serif

Geist Sans

Body text, UI elements

Serif

Playfair Display

Headings, titles

Monospace

Geist Mono

Code, invite codes

Type Scale

Heading 1

font-serif text-4xl

Heading 2

font-serif text-2xl

Heading 3

font-serif text-xl

Heading 4

font-semibold text-lg

Body Text

text-base (default)

Small Text

text-sm

Component Examples

Buttons

Cards

Card Title

Example card with border and padding. Used for content sections.

Highlighted Card

Card with subtle background color for emphasis.

Badges & Status

ActivePendingDraftCompleted

Assets

Logo

Logo files are located in /public/logo/

Primary Logo

logo.svg

Bird Icon

logo_bird_origami.svg

Usage Guidelines

  • •Use Eden Green as the primary brand color for main actions and navigation
  • •Use Deep Olive for important actions like “Mark as Leased” and completion states
  • •Use Slate for neutral secondary actions and less prominent buttons
  • •Use Playfair Display (serif) for headings and titles to add elegance
  • •Use Geist Sans for body text and UI elements for readability
  • •Maintain consistent spacing with rounded corners (rounded-lg, rounded-xl, rounded-2xl)