Lysto iconLysto logotype
01 / Brand

Real estate photography, delivered.

The marks, colors, and components that make LYSTO recognizable. Use them truthfully and keep them sharp.

Jump to assets

02 — Naming

Naming

LYSTO is one word, set all-caps in the wordmark and written Lysto in running prose. It is a proper noun — never a verb, never possessive in a product name.

The home is lysto.ca. Every agent gets a subdomain, so name.lysto.ca is part of the system, not a one-off.

Correct usageDo“Shot with Lysto”
Incorrect usageDon't“I lysto’d the listing”

03 — Logo

Wordmark, logomark & app icon

Wordmark

The primary mark. Use it wherever space allows.

Logomark

The standalone icon — favicons, avatars, tight layouts.

Logo lockup

The full lockup for hero placements and headers.

Previews use the SVG components and small PNGs. Multi-megabyte store icons are download-only, in the app-icon section below.

04 — Color & background rules

On every background

Correct usageDo

Purple mark on near-black.

Correct usageDo

White mark over photography, on a dark scrim.

Correct usageDo

Near-black mark on light.

Use the purple mark only on black or white. On photography or color, use solid white or solid black — a dark scrim behind a white mark is the safe pattern over listing photos.

Gold is reserved for the Premium-tier signal only — never the everyday logo color.

05 — Clearspace & minimum size

Give it room, keep it legible

Clearspace equals the height of the “L” on all sides.

Wordmark — never below 80px digital / 20mm print. Logomark — never below 24px / 6mm.

06 — Do & don’t

Keep the mark intact

Correct usageDo

White mark on a dark scrim.

Correct usageDo

Logomark as an avatar / app icon.

Incorrect usageDon't

Don’t recolor the mark.

Incorrect usageDon't

Don’t stretch or distort.

Incorrect usageDon't

Don’t rotate.

Incorrect usageDon't

Don’t add shadows or effects.

07 — Color

The palette

Core

Brand Primary
--brand
The everyday interactive accent
Brand Dark
--brand-dark
Hover / secondary
Brand Foreground
--brand-foreground
Text on brand

Signature gradients

Purple — primary action

The primary action surface — the same light source as the hero glow and every primary button.

Gold — Premium signal

Gold signals Premium. It has no single hex — never replaces purple, never the everyday logo color.

Neutrals & surfaces

Canvas
--brand-bg-primary
Surface
--brand-surface
Border
--brand-border
Divider
--brand-divider
Text Primary
--text-primary
Text Secondary
--text-secondary
Text Tertiary
--text-tertiary

Near-black canvas #1a1a1a. #000 lives on html only — set dark surfaces on a wrapper, not body, or background layers render black. Cards use rgba(255,255,255,0.03) + backdrop-blur.

Deprecated — do not use in new work

Action (legacy)
--brand-action-primary
oklch(0.62 0.135 233)
Action Hover (legacy)
--brand-action-primary-hover
oklch(0.56 0.138 234)

08 — Typography

Two faces

Suisse International

Display · weights 300 / 400 / 500

Aa Bb Cc
0 1 2 3 4 5 6 7 8 9
ABC Diatype

Body / UI · --font-sans · 400 / 500 / 700

Aa Bb Cc
0 1 2 3 4 5 6 7 8 9
Real estate photographyDisplay · 48px · 300 · -0.02em
Real estate photographySection · 30px · 400 · -0.01em
Real estate photographyBody · 16px · 400 · 1.6
Real estate photographyCaption · 12px · 500 · uppercase

Web fallback stack: Helvetica Neue → Helvetica → Arial, sans-serif.

09 — Components

The buttons that ship

The legacy cyan-blue action button is deprecated. Do not use --brand-action-primary in new work. Use NewPrimaryButton (purple) for the primary action, and GoldButton (gold) for the Premium accent.

NewPrimaryButton — Primary

The everyday primary action across the portal and marketing. A purple radial gradient (bright violet → deep indigo) lifted from the app icon, with a 1px top-lit border, a glossy top sheen, and a purple drop shadow — never a white glow. The look lives in the .new-primary utility.

import { NewPrimaryButton } from "@/components/ui/new-primary-button";

<NewPrimaryButton>Continue</NewPrimaryButton>
defaultfull-width · h-11
.no-glowdrops the purple glow
.logo-marksofter overlaid edge

GoldButton — Premium

The Premium accent — and only that. An animated conic metallic gold rim (drifts over 14s, accelerates on hover, respects reduced motion) around a dark bevel and an inner face that matches the portal gradient. Use it to signal the Premium tier; never as a generic CTA.

import { GoldButton } from "@/components/ui/gold-button";

<GoldButton size={44}>Upgrade to Premium</GoldButton>
sizenumber = 40
squareboolean = false

Where each accent applies

Essential
  • Photography
  • Standard delivery
  • Web galleries
Professional
  • Everything in Essential
  • Priority editing
  • Virtual tour
PremiumGold
  • Everything in Professional
  • Same-day delivery
  • Premium support

Surfaces in product

Frosted card

rgba(255,255,255,0.03) + backdrop-blur over the ambient glow — the portal surface.

Order status
DraftConfirmedIn progressCompleted

10 — Iconography

Icons & app icon

Product icons

Monochrome zinc; purple only for the active / interactive state.

App icon

The logomark in a squircle — never reconstructed as decoration.

16px
32px
180px
512px

11 — Voice

How LYSTO talks

Confident

We know real estate.

Effortless

Photos delivered, not chased.

Premium, plain-spoken

Luxury results, zero jargon.

Correct usageDoYour photos are ready — view your gallery.
Incorrect usageDon'tYour order #4821 has reached COMPLETED status.
Correct usageDoYour payment didn’t go through. Update your card to keep your site live.
Incorrect usageDon'tDUNNING NOTICE: subscription past due.