A digital concierge for real estate investment, presented with a high-contrast, mobile-first interface.
02
Color
#ff2a2aAccent
#ffffffInk
#717171Ink soft
#000000BG
rgba(255, 255, 255, 1)Line
A high-contrast dark theme anchored by pure black and white, with a sharp red accent for active states.
03
Typography
geometric-sans · humanist-sans
display20px · 700
body16px · 400
All-caps letterforms are used for primary navigation links and headings. · Body text is set in a legible sans-serif for readability on dark backgrounds. · Headings use a slightly heavier weight and increased letter-spacing for emphasis.
04
Spacing
4px
8px
10px
16px
20px
24px
32px
50px
A tight, consistent vertical rhythm based on a 4px grid, with clear spacing between list items.
05
Surfaces
sm · 6px
md · 10px
lg · 15px
pill · 100px
Thin, 1px solid lines in white or muted gray are used sparingly to define containers and separators.
0 4px 6px rgba(0, 0, 0, 0.3)
06
Layout
600container
1columns
20pxgutter
768 / 1024breakpoints
A single-column, mobile-first layout centered on the screen, optimized for vertical scrolling.
07
Motion & Interaction
150msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Subtle 'ease-in-out' transitions are applied to interactive elements on hover and click. · Transform scales are used for button press feedback.
Subtle background color shifts or opacity changes on interactive list items. · A quick transform scale-down effect on buttons to simulate a physical press.
08
Components
buttonA full-width, pill-shaped button with a red background, white text, and rounded corners, used for primary actions.
cardA simple, list-based row component with an icon, text, and a trailing action icon, separated by subtle lines.
heroA full-width, centered image banner with a dark overlay and prominent gold/white typography.
09
Voice & Don'ts
ToneInformative, direct, and professional, focusing on guidance and investment value.
HeadlinesDirect and capitalized, often repeating the brand name for reinforcement.
CTAsAction-oriented and emphatic, using strong words like 'Download', 'Login', or 'Register'.
Don't use light or pastel background colors — the screenshot shows a pure #000000 black background.
Don't use decorative or script fonts for body text — the screenshot uses Arial and Montserrat for clarity.
Don't use muted or subtle accent colors — the screenshot shows a high-saturation #ff2a2a red for emphasis.
Don't create wide, multi-column layouts — the screenshot shows a strictly single-column, mobile-optimized interface.
Don't use drop caps or complex typographic ornaments — the text layout is strictly functional and clean.
Don't use low-contrast color combinations — the design prioritizes high-contrast white-on-black for legibility.
Captured from the live site · real computed styles
11
System prompt
Design a dark-themed, mobile-first digital guide for modern property investment. Use a pure black (#000000) background with white (#ffffff) and muted gray (#717171) text for high legibility. The primary accent color should be a vibrant red (#ff2a2a) for active states and CTAs. Use geometric and humanist sans-serif font categories (like Montserrat and Arial) with a clear typographic scale. The layout must be strictly single-column and centered. Key critical donts: do not use light backgrounds, do not use decorative serif fonts, and do not create wide multi-column layouts. The interface should feel functional, direct, and professional.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
