Switch between the rendered Visual preview and the Raw DESIGN.md.
Homstar's design system embodies a modern, trustworthy aesthetic built for the real estate market. The visual language combines clean minimalism with warm, organic accents—drawing inspiration from natural landscapes and contemporary architecture. The system prioritizes clarity and accessibility, using generous whitespace, precise typography, and thoughtful color moments to guide users through property discovery with confidence. The atmosphere is professional yet approachable, creating an environment where users feel guided and supported in one of life's biggest decisions.
Key Characteristics
#000000): Default text for body copy, labels, and interface elements#FFFFFF): Primary surface and container background#F5F5F5): Subtle background differentiation for secondary surfaces#1DA44F): Primary action color, success states, trust indicators, growth metrics#F6E04B): Secondary accent for calls-to-action, highlights, and prominent buttons#333333): Secondary text for links and tertiary content in light contextsrgba(0, 0, 0, 0)): Transparent overlays for hover states#000000): Navigation text, headings, dominant typography#333333): Supporting text, secondary information#F5F5F5): Subtle section backgrounds, input fields#FFFFFF): Cards, containers, modal backgrounds#F5F5F5): Light borders between sections#1DA44F): Positive confirmations, trust badges, active states#F6E04B): Primary CTA buttons, attention-grabbing actionsPrimary Display Font: Interdisplay, fallback stack: Interdisplay, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Secondary Body Font: Inter, fallback stack: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/H1 | Interdisplay | 72px | 500 | 80px | 0px | Hero headlines, primary messaging |
| Heading/H2 | Interdisplay | 64px | 500 | 72px | 0px | Section headings, large titles |
| Subheading/H3 | Inter | 28px | 500 | 36px | 0px | Secondary headings, card titles |
| Body/Paragraph | Inter | 16px | 400 | 24px | 0px | Default body copy, descriptions |
| Emphasis/Strong | Inter | 16px | 500 | 24px | 0px | Highlighted inline text, labels |
| Caption/Small | Inter | 14px | 400 | 20px | 0px | Input placeholders, helper text, metadata |
| Link | Inter | 16px | 400 | 24px | 0px | Hyperlinks in default state |
| Navigation | Inter | 16px | 400 | 24px | 0px | Primary navigation menu items |
#F6E04B#00000012px 24px60px0px none48px#E6D130, shadow 0px 4px 8px rgba(0, 0, 0, 0.12)#D6C020, transform scale(0.98)rgba(0, 0, 0, 0)#00000012px 24px60px2px solid #00000048px#F5F5F5, border 2px solid #000000#E8E8E8rgba(0, 0, 0, 0)#FFFFFF0px 0px0px0px none24px0.7, text color #FFFFFF#1DA44F#FFFFFF0px none12px0px0px 2px 8px rgba(0, 0, 0, 0.08)0px 8px 16px rgba(0, 0, 0, 0.12), transform translateY(-4px)#FFFFFF60px 40px0px0px none1200px0 auto#F5F5F524px8px0px none#333333, 14px, weight 400#1DA44F, 32px, weight 500#F5F5F5#0000008px 24px60px0px none48px20px#999999#FFFFFF, border 2px solid #1DA44F, outline none#E8E8E8, cursor not-allowed, opacity 0.6#F5F5F5#00000012px 24px12px0px none20px120px#FFFFFF, border 2px solid #1DA44Frgba(0, 0, 0, 0) (transparent over hero)#FFFFFF20px 40px0px none24px#F6E04B#1DA44F, border-bottom 2px solid #1DA44F#000000#FFFFFF40px0px none#F6E04B#FFFFFF1px solid #E8E8E88px 16px24px#000000#F6E04Brgba(29, 164, 79, 0.1)#1DA44F4px 12px16pxBase Unit: 4px
Spacing Scale:
4px: Micro gaps between icons and text8px: Tight spacing within components12px: Interior padding, button text spacing16px: Standard gap between elements20px: Comfortable margin between sections24px: Component internal padding32px: Section spacing36px: Medium section breaks40px: Container padding, component height60px: Large section padding64px: Major section breaks100px: Hero section vertical padding1200px24px40px on desktop, 20px on tablet, 16px on mobileGenerous whitespace is used intentionally to reduce cognitive load and emphasize key messaging. Hero sections employ substantial vertical padding (100px) to convey trust and confidence. Card-based layouts maintain breathing room between adjacent elements (24px–32px). Body copy is surrounded by ample margins, never exceeding 65 characters per line for optimal readability.
0px: Navigation bars, full-width sections8px: Stat cards, subtle container separations12px: Property cards, moderate emphasis containers24px: Badge labels, pill-shaped tags49%: Circular profile images, avatar containers60px: Pill-shaped buttons and input fields| Level | Treatment | Use |
|---|---|---|
| Flat | box-shadow: none | Navigation, backgrounds, disabled states |
| Raised | box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08) | Standard cards, default buttons, input fields |
| Elevated | box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12) | Hover cards, active modals, focused elements |
| Floating | box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.16) | Dropdowns, expanded menus, lightbox overlays |
Shadow Philosophy:
Shadows in Homstar's system are subtle and purposeful, guiding user attention without overwhelming the interface. Elevation increases are reserved for interactive moments—hover states on cards, expanded navigation menus, and modal overlays. The shadow values use consistent blur radii and alpha values to create a cohesive depth model that feels natural and accessible. No single element should cast a shadow darker than 0.16 alpha to maintain visual lightness and approachability.
#1DA44F) for trust signals: Success confirmations, verified badges, stat highlights, and active states.#F6E04B) as the primary CTA: This is the most prominent action color; use it for primary buttons and important calls-to-action.24px in cards and containers keeps the interface breathable.rgba(0, 0, 0, 0) to maintain visual hierarchy.0px 2px 8px rgba(0, 0, 0, 0.08)) should be the default; elevate only on interaction.0px none as the default border.0px, 8px, 12px, 24px, 49%, 60px).8px in buttons: Maintain touch-target accessibility by preserving minimum spacing.| Breakpoint | Width | Primary Changes | Key Adjustments |
|---|---|---|---|
| Mobile | < 768px | Single column, full-width cards | Padding 16px, font sizes reduced by 4–8px, buttons full-width |
| Tablet | 768px – 1024px | 2-column grid, adjusted spacing | Padding 24px, hero H1 56px, margin 20px |
| Desktop | ≥ 1025px | Full 12-column grid, max-width 1200px | Padding 40px, full typography scale, optimal spacing |
| Large Desktop | ≥ 1440px | Wider sections, enhanced hero content | Padding 60px, max-width 1200px enforced |
48px × 48px (buttons, links, form inputs)16px minimum between adjacent touch targets12px minimum)48px on all devices to ensure accessibility12px padding on mobile, 16px on tablet/desktop100px to 60px on tablet, 40px on mobile; headline size scales from 72px → 56px → 40px.16px gutter on mobile, 24px on larger screens.768px; reveal full horizontal navigation on tablet and above.object-fit: cover while maintaining aspect ratios; never crop property photos below 280px width.48px height across all breakpoints for accessibility; increase input width to 100% on mobile.40px → 20px, 60px → 30px).#F6E04B)#1DA44F)#000000)#333333)#F5F5F5)#FFFFFF)Start with Typography Hierarchy: All text must use Interdisplay (display/headings) or Inter (body/UI). Match sizes exactly to the provided table; no approximations.
Apply Spacing Consistently: Use only the defined spacing scale (4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 40px, 60px, 64px, 100px). Apply horizontal padding of 40px (desktop) / 20px (tablet) / 16px (mobile) to all major containers.
Color Placement is Intentional: Yellow (#F6E04B) goes on primary buttons and high-priority CTAs only. Green (#1DA44F) appears in success badges, trust indicators, and stat highlights. Never invert these roles.
Component Shadows Follow the Elevation Table: Default cards use 0px 2px 8px rgba(0, 0, 0, 0.08). Hover states elevate to 0px 8px 16px rgba(0, 0, 0, 0.12). Do not deviate from these exact values.
Border Radius is Limited: Use only 0px (flat), 8px (subtle), 12px (standard cards), 24px (badges), 49% (circles), or 60px (pills). No other radius values.
Input Fields Always Use Light Gray Background: Default background is #F5F5F5, padding is 8px 24px, height is 48px, border-radius is 60px. Focus state adds 2px solid #1DA44F border.
Buttons Maintain Consistent Dimensions: All primary/secondary buttons are 48px tall with 60px border-radius and 12px 24px padding. Hover states shift background color and add shadow; do not change button size on interaction.
Responsive Scaling is Automatic: Hero H1 drops from 72px (desktop) to 56px (tablet) to 40px (mobile). Container padding halves on mobile. Card layouts collapse from 3-column to 1-column below 768px breakpoint.
Accessibility is Non-Negotiable: All text meets WCAG AA contrast (4.5:1 for normal, 3:1 for large). Touch targets are minimum 48px × 48px. Line-height is never less than 1.2x font size. Do not rely on color alone to convey meaning.
Test Real Estate Context: Property cards, listings, and agent profiles should always feature high-quality imagery with subtle shadow depth. Stats and trust indicators use green highlights. Navigation remains clean and minimal to avoid competing with property showcase content.