ProptechOS Design System
Visual Identity System
Logotype
Primary version: Horizontal lockup (symbol + wordmark).
Clearspace: Maintain sufficient breathing room around the logo.
Placement: Top-left or bottom-right corners (standardized per format).
Do not: stretch, rotate, recolor, outline, or rearrange symbol and wordmark
Logo URL
Colors
Depending on the situation different color
variations of the logo can be used.
Design tokens
“colors”:
“primary”: “#59124C”,
“secondary”: “#D8FF54”,
“background”: “#E0EBE9”,
“text”: “#FFFFFF”
“typography”:
“fontPrimary”: “Avenir,
“fontWeights”: [400, 600, 700],
“headlineSize”: “48px”,
“bodySize”: “16px”
“cornerRadius”: “16px”,
“shadow”: “0px 4px 20px rgba(0,0,0,0.2)”
Visual Identity System
Font-family
Primary Typeface: Avenir
Avenir is modern, clear, and balanced—suitable for both print and digital.
Rules:
Avoid all caps except in UI buttons or tags.
Maintain high contrast for readability.
Use brand colors for emphasis (e.g., Canary for keywords or highlights).
Design Token
Design system CSS file based on the official Brand Book
/**
* ProptechOS Design System – CSS Variables
* Based on ProptechOS Brand Book (September 2025)
* Use these custom properties in your CSS/SCSS files
*/
:root {
/* Brand Colors */
–color-primary: #59124C; /* Loulou – Primary Purple */
–color-secondary: #D8FF54; /* Canary – Neon Green */
–color-tertiary: #E0EBE9; /* Fog – Light Blue-Green */
–color-mystic: #300D2E; /* Mystic – Deep Dark Purple */
–color-swirl: #D6CCC4; /* Swirl – Soft Beige */
/* UI Colors */
–color-bg-primary: #FFFFFF;
–color-bg-secondary: #E0EBE9;
–color-bg-tertiary: #F5F5F5;
–color-text-primary: #1A1A1A;
–color-text-secondary: #666666;
–color-text-tertiary: #999999;
–color-text-inverse: #FFFFFF;
–color-border-light: #E0E0E0;
–color-border-medium: #CCCCCC;
–color-border-dark: #59124C;
/* Data Visualization – Temperature */
–color-temp-cold: #4A90E2;
–color-temp-cool: #7EC8E3;
–color-temp-comfortable: #50C878;
–color-temp-warm: #FFB347;
–color-temp-hot: #FF6B6B;
/* Data Visualization – Charts */
–color-chart-1: #59124C;
–color-chart-2: #D8FF54;
–color-chart-3: #4A90E2;
–color-chart-4: #50C878;
–color-chart-5: #FFB347;
–color-chart-6: #7EC8E3;
/* Status Colors */
–color-success: #50C878;
–color-warning: #FFB347;
–color-error: #FF6B6B;
–color-info: #4A90E2;
–color-neutral: #999999;
/* Typography */
–font-family-primary: Avenir, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
–font-family-mono: ‘Monaco’, ‘Courier New’, monospace;
–font-weight-book: 400;
–font-weight-medium: 600;
–font-weight-heavy: 700;
/* Font Sizes */
–font-size-h1: 72px;
–font-size-h2: 48px;
–font-size-h3: 32px;
–font-size-h4: 24px;
–font-size-h5: 20px;
–font-size-h6: 16px;
–font-size-body-lg: 18px;
–font-size-body: 16px;
–font-size-body-sm: 14px;
–font-size-body-xs: 12px;
–font-size-metric-value: 48px;
–font-size-metric-label: 14px;
/* Line Heights */
–line-height-tight: 120%;
–line-height-normal: 140%;
–line-height-relaxed: 160%;
/* Spacing */
–spacing-xs: 4px;
–spacing-sm: 8px;
–spacing-md: 16px;
–spacing-lg: 24px;
–spacing-xl: 32px;
–spacing-2xl: 48px;
–spacing-3xl: 64px;
–spacing-4xl: 96px;
/* Border Radius – Based on logomark form */
–radius-sm: 6px; /* Small elements: buttons, small interactive areas */
–radius-md: 8px;
–radius-lg: 16px; /* Medium elements: cards, image frames, modules */
–radius-xl: 24px;
–radius-full: 9999px;
/* Shadows */
–shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.05);
–shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.1);
–shadow-lg: 0px 4px 20px rgba(0, 0, 0, 0.2);
–shadow-xl: 0px 10px 40px rgba(0, 0, 0, 0.15);
/* Layout */
–container-max-width: 1440px;
–grid-columns: 12;
–grid-gutter: 24px;
–sidebar-width: 280px;
–header-height: 72px;
/* Component Specific */
–card-padding: 24px;
–card-radius: 16px;
–card-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
–button-padding: 12px 24px;
–button-radius: 8px;
–input-height: 48px;
–input-padding: 12px 16px;
–input-radius: 8px;
/* Animations */
–transition-fast: 150ms;
–transition-normal: 300ms;
–transition-slow: 500ms;
–easing-default: cubic-bezier(0.4, 0.0, 0.2, 1);
}
/* Base Styles */
body {
font-family: var(–font-family-primary);
font-size: var(–font-size-body);
line-height: var(–line-height-relaxed);
color: var(–color-text-primary);
background-color: var(–color-bg-secondary);
}
/* Typography Classes */
h1, .h1 {
font-size: var(–font-size-h1);
font-weight: var(–font-weight-book);
line-height: var(–line-height-tight);
letter-spacing: -0.02em;
}
h2, .h2 {
font-size: var(–font-size-h2);
font-weight: var(–font-weight-book);
line-height: var(–line-height-tight);
letter-spacing: -0.01em;
}
h3, .h3 {
font-size: var(–font-size-h3);
font-weight: var(–font-weight-medium);
line-height: var(–line-height-tight);
}
h4, .h4 {
font-size: var(–font-size-h4);
font-weight: var(–font-weight-medium);
line-height: var(–line-height-tight);
}
/* Component Classes */
.proptechos-card {
background: var(–color-bg-primary);
border-radius: var(–card-radius);
padding: var(–card-padding);
box-shadow: var(–card-shadow);
}
.proptechos-button-primary {
background: var(–color-primary);
color: var(–color-text-inverse);
padding: var(–button-padding);
border-radius: var(–button-radius);
font-weight: var(–font-weight-medium);
font-size: var(–font-size-body);
border: none;
cursor: pointer;
transition: all var(–transition-normal) var(–easing-default);
}
.proptechos-button-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: var(–shadow-md);
}
.proptechos-button-secondary {
background: var(–color-secondary);
color: var(–color-primary);
padding: var(–button-padding);
border-radius: var(–button-radius);
font-weight: var(–font-weight-medium);
font-size: var(–font-size-body);
border: none;
cursor: pointer;
transition: all var(–transition-normal) var(–easing-default);
}
.proptechos-metric-card {
background: var(–color-bg-primary);
border-radius: var(–card-radius);
padding: var(–card-padding);
box-shadow: var(–card-shadow);
text-align: center;
}
.proptechos-metric-value {
font-size: var(–font-size-metric-value);
font-weight: var(–font-weight-heavy);
line-height: 1;
color: var(–color-primary);
margin-bottom: var(–spacing-sm);
}
.proptechos-metric-label {
font-size: var(–font-size-metric-label);
font-weight: var(–font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(–color-text-secondary);
}
.proptechos-badge {
display: inline-block;
padding: 4px 12px;
border-radius: var(–radius-full);
font-size: var(–font-size-body-xs);
font-weight: var(–font-weight-medium);
}
.proptechos-badge-success {
background: var(–color-success);
color: white;
}
.proptechos-badge-warning {
background: var(–color-warning);
color: var(–color-text-primary);
}
.proptechos-badge-error {
background: var(–color-error);
color: white;
}
/* Dashboard Grid */
.proptechos-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(–spacing-lg);
padding: var(–spacing-lg);
}
/* Responsive Typography */
@media (max-width: 768px) {
:root {
–font-size-h1: 48px;
–font-size-h2: 36px;
–font-size-h3: 28px;
–font-size-h4: 20px;
–font-size-metric-value: 36px;
}
}
