Listing & Follow-Up

Overview

Listing & Follow-Up is a B2B SaaS platform designed for solo real estate agents to automate the repetitive writing tasks that consume billable hours—listing descriptions, lead follow-ups, and client check-ins. The design system embraces a "Warm Minimalism" aesthetic: a tactile, print-inspired visual language that feels authoritative yet approachable, grounded in natural earth tones (warm beige #EFE7D6, deep forest ink #1C2B26, and a signature brick-red accent #A8432B) paired with high-contrast serif and monospace typography. The interface evokes the precision of a real estate contract crossed with the humanity of handwritten notes—every element is intentional, nothing is decorative. The brand voice is direct, confident, and conversational: it speaks to the agent's frustration with busywork, acknowledges the real cost of time, and positions the tool as a trusted partner that handles the words so the agent can focus on relationships. Example: "Every week you're writing something. A listing description. A follow-up text to a lead who went quiet. It all eats hours you don't get back — and none of it is why you got into this business."

Colors

The color palette is rooted in natural materials and print tradition. Primary (#A8432B, a warm brick-red) is reserved exclusively for CTAs, accent elements, and interactive states—it commands attention without aggression, evoking the warmth of a handshake or a signed contract. The surface stack uses warm, off-white tones: the base surface is #EFE7D6 (a soft, aged paper), with deeper variants (#E4D9C1, #D9CCBA) used for container hierarchy and hover states. On-surface text is a deep forest ink (#1C2B26) for maximum readability and authority. Secondary accent colors include brass (#A9822F) for metadata and step numbers, and sage (#5C6E4F) for status indicators and secondary information. The divider color is a subtle rgba(28,43,38,0.16)—a semi-transparent ink that creates visual separation wi

Typography

The type system pairs Fraunces (a high-contrast serif with distinctive letterforms) for all headings and display text with Inter (a clean, geometric sans-serif) for body copy and UI labels, and IBM Plex Mono (a technical monospace) for metadata, prices, and transactional information. This three-font hierarchy creates clear visual separation: Fraunces commands attention and conveys authority (used at 54px for display, 36px for headlines, 24px for titles), Inter provides neutral readability for longer passages (18px for body-lg, 16px for body-md), and IBM Plex Mono adds precision and technical credibility to pricing, timestamps, and feature tags (13.5px for labels, 12px for small text). All headings use a tight letter-spacing of -0.01em to create a compressed, confident appearance. Monospace

Layout

The layout uses a fixed 920px container max-width centered on the viewport, with 28px horizontal gutters on mobile/tablet. The page is organized into full-width sections (hero, problem, features, offer, steps, FAQ, footer), each separated by a 1px divider line (rgba(28,43,38,0.16)) and padded with 64px vertical spacing (lg token). The hero section uses 76px top padding and 56px bottom padding to establish breathing room. The features section uses a 3-column grid (gap: 1px, creating a subtle grid line effect) that collapses to 1 column below 720px. The offer section centers a 560px card (the "sheet") with 70px top and 80px bottom padding. All text blocks maintain a max-width of 46–60 characters for optimal readability. The spacing scale is semantic: section separation uses lg (40px), compon

Elevation & Depth

Depth is conveyed through a combination of subtle shadows and tactile drop-shadows rather than color darkening. The standard elevation uses a soft shadow (0 3px 8px rgba(0,0,0,0.15)) for cards and modals, creating a gentle lift from the surface. Interactive elements—specifically buttons—use a distinctive 6px drop-shadow (0 6px 0 #8A3421, the darker brick tone) that appears on hover, creating a physical sense of the button being pressed down and then released. This shadow is paired with a -2px translateY transform to create a "pop" effect: the button moves up slightly while the shadow grows, mi

Shapes

The shape philosophy is "Architectural Precision"—minimal, sharp corners that evoke the clean lines of technical drawings and contracts. The default border-radius is 2px (a barely-perceptible rounding that softens the edge without introducing organic curves), used on all buttons, inputs, cards, and the demo frame. Smaller elements like the play-dot circle use 50% border-radius (full token) for a perfect circle. The receipt rows and slot grid use 1px border-radius (sm token) for a nearly-square appearance. Status pills use 50% border-radius for a capsule shape. This restrained use of rounding r

Components

Action Elements Buttons use the primary brick color (#A8432B) with white/paper text (#EFE7D6) and IBM Plex Mono typography (13.5px, 0.03em letter-spacing). The primary button has 15px vertical and 26px horizontal padding, a 2px border-radius, and a 1px solid border matching the background. On hover, the button applies a transform: translateY(-2px) and a box-shadow: 0 6px 0 #8A3421 (the darker brick), creating a tactile press-and-release effect over 0.15s ease. The secondary button (used in the header) has a transparent background, a 1px border in the on-surface color (#1C2B26), and 9px vertical / 16px horizontal padding. On hover, it inverts: background becomes #1C2B26 and text becomes #EFE7D6. Both button variants use transition: transform 0.15s ease, box-shadow 0.15s ease to ensure s

Do's and Don'ts

**Do**

• Do use the primary brick color (#A8432B) exclusively for CTAs, focus states, and interactive accents—never for backgrounds or body text.
• Do pair Fraunces headings with Inter body copy to create clear visual hierarchy; never mix serif and sans-serif within the same text block.
• Do apply the 6px drop-shadow (0 6px 0 #8A3421) on button hover to create tactile feedback; pair it with a -2px translateY transform for a press-and-release effect.
• Do maintain the warm paper aesthetic (#EFE7D6) as the base surface; never use pure white (#FFFFFF) or pure black (#000000) for backgrounds or text.
• Do use IBM Plex Mono for all metadata, pricing, and transactional information to signal precision and technical credibility.

**Don't**

• Don't use rounded corners larger than 4px (lg token) on any component; the brand relies on architectural precision, not organic softness.
• Don't apply shadows to cards or containers; use 1px borders (rgba(28,43,38,0.16)) instead to maintain the flat, print-like aesthetic.
• Don't mix the three typefaces within a single component; Fraunces for headings, Inter for body, IBM Plex Mono for labels—never cross these boundaries.
• Don't use secondary colors (brass, sage) for CTAs or primary interactive elements; reserve the brick red (#A8432B) for all high-priority actions.
• Don't introduce blur or glassmorphism effects beyond the header's 6px backdrop-filter; the design system prioritizes clarity and print authenticity over atmospheric effects.