--- version: alpha name: "& Co. Real Estate" description: "A refined, warm, and locally grounded visual system for a boutique real estate brokerage." colors: primary: "#1E1B1A" on-primary: "#F3EEE6" neutral: "#F3EEE6" on-neutral: "#1E1B1A" secondary: "#D7C7B2" sage: "#8E9881" tertiary: "#B08A5A" text-muted: "color-mix(in srgb, #1E1B1A 70%, #F3EEE6)" typography: display-xl: fontFamily: "Newsreader" fontSize: 5.5rem fontWeight: 400 lineHeight: 0.96 letterSpacing: -0.045em heading-lg: fontFamily: "Newsreader" fontSize: 3rem fontWeight: 400 lineHeight: 1.05 letterSpacing: -0.03em heading-md: fontFamily: "Newsreader" fontSize: 2rem fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.02em body-lg: fontFamily: Manrope fontSize: 1.125rem fontWeight: 400 lineHeight: 1.75 body-md: fontFamily: Manrope fontSize: 1rem fontWeight: 400 lineHeight: 1.75 label-caps: fontFamily: Manrope fontSize: 0.75rem fontWeight: 600 lineHeight: 1 letterSpacing: 0.2em rounded: none: 0px sm: 0px md: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-caps}" rounded: "{rounded.none}" padding: 12px 20px button-primary-hover: backgroundColor: "color-mix(in srgb, #1E1B1A 82%, #B08A5A)" button-outline: backgroundColor: "{colors.neutral}" textColor: "{colors.primary}" typography: "{typography.label-caps}" rounded: "{rounded.none}" padding: 12px 20px editorial-rule: backgroundColor: "{colors.tertiary}" height: 1px property-card: backgroundColor: "{colors.neutral}" textColor: "{colors.on-neutral}" rounded: "{rounded.none}" padding: 0px market-tag: backgroundColor: "{colors.sage}" textColor: "{colors.primary}" typography: "{typography.label-caps}" rounded: "{rounded.none}" padding: 8px 12px body-muted: backgroundColor: "{colors.neutral}" textColor: "{colors.text-muted}" typography: "{typography.body-md}" --- # & Co. Real Estate Design System ## Overview **Refined Southern sophistication with warm authority.** & Co. Real Estate is a boutique brokerage rooted in trust, local expertise, and elevated service. The interface should feel personal, intentional, editorial, and quietly premium—not corporate, franchise-driven, or ostentatious. The brand represents people, places, and possibilities across Moore County, the Triangle Area, and Mount Pleasant. Every screen should communicate four qualities: **refined, local, warm, and confident**. The canonical tagline is **“The brokerage that puts YOU first.”** Preserve the wording, punctuation, and uppercase emphasis on **YOU** wherever it appears. Use the official locked logo asset at `assets/brand/and-co-logo.svg`. The transparent raster companion is `assets/brand/and-co-logo.png`. Preserve the supplied proportions and clear space; the mark is an asset, not typography to recreate. The canonical document is publicly available at `https://www.andco.team/DESIGN.md`. Download the supplied artwork and fonts from `https://www.andco.team/brand-kit` or the complete kit at `https://www.andco.team/brand-kit/files/and-co-brand-kit.zip`. Repository paths in this document identify source files; use the brand kit for public downloads. ## Colors The palette comes directly from the brand kit and the CSS variables in `app/globals.css`. - **Primary / Deep Charcoal (`#1E1B1A`):** Headlines, core text, primary actions, and the logo. This replaces pure black while retaining editorial authority. - **Neutral / Warm Cream (`#F3EEE6`):** Default page foundation. It should dominate most layouts and keep the experience warm rather than clinical. - **Secondary / Sand (`#D7C7B2`):** Fine rules, quiet surfaces, input borders, and supporting structure. - **Sage (`#8E9881`):** Restrained local and botanical accent. Use in secondary highlights, never as a broad decorative wash. - **Tertiary / Bronze Gold (`#B08A5A`):** Small labels, editorial rules, focus states, and selected moments. Treat it like foil: rare and deliberate. Maintain readable contrast. Deep Charcoal on Warm Cream is the default pairing. Bronze is an accent, not a body-text color. ## Typography Typography creates the hierarchy: a high-contrast editorial serif for expression and a quiet contemporary sans serif for clarity. - **Display and headings — Newsreader:** Use for hero statements, section titles, pull quotes, and editorial moments. Its softer contrast and more stable proportions keep large type elegant across narrow and wide screens. Prefer regular weight. Italics may emphasize a single meaningful word; they are not decoration. - **Body and interface — Manrope:** Use for paragraphs, navigation, buttons, captions, form controls, and utility text. Prefer regular or medium weights. Heavy sans-serif copy conflicts with the brand. - **Small caps:** Use Manrope at 11–12px, weight 600, with `0.18em`–`0.30em` tracking for interface labels, market names, and secondary information. Do not add decorative eyebrow labels above headings. Balance display headings, keep body copy pretty, and cap readable prose near 65 characters per line. Avoid dense all-caps paragraphs. ## Layout Use a **fluid editorial grid** on small screens and a restrained fixed-max-width grid on large screens. The principal content width is `90rem`; reading columns remain much narrower. Whitespace signals service and confidence. Use generous section spacing, strong alignment, and asymmetrical editorial compositions where content supports them. Fine horizontal or vertical rules may organize regions without boxing everything into cards. The spacing scale is based on 4px, with 16px as the default content unit. Mobile gutters start at 24px, increase to 40px on tablets, and 56px on large screens. The shared site header and footer live in the `(site)` route-group layout. Full site routes inherit that chrome; the standalone coming-soon route does not. Photography, when present, should feel aspirational but authentic: warm natural light, tactile materials, a sense of place, and artful composition. Favor property details and lived-in calm over glossy staging clichés. Property and IDX placeholder photography uses a consistent `4:3` landscape ratio so provider images can replace local assets without changing layout. ## Elevation & Depth The system is primarily flat. Establish hierarchy through whitespace, typography, tonal surfaces, and one-pixel Sand or low-opacity Bronze rules. Use shadows only when an element genuinely floats or overlaps. Shadows should be wide, soft, and low-opacity. Images receive a subtle black outline at 10% opacity in light contexts. Avoid heavy drop shadows, glass effects, gradients, and stacked floating panels. ## Shapes The shape language is editorial and tailored. Structural elements, navigation, buttons, inputs, imagery, and cards use square corners. Circles are reserved for brand-essence icons or subtle line motifs. Organic botanical linework may appear as a supporting motif, never as dense decoration. ## Components - **Logo:** Use the canonical artwork at `assets/brand/and-co-logo.svg`. Verified charcoal, cream, and black exports live in `public/brand-kit/files/logos/`; prefer charcoal on cream or the cream export on dark backgrounds. Keep generous clear space around the full lockup. - **Brand kit:** `/brand-kit` provides individual downloads and `public/brand-kit/files/and-co-brand-kit.zip`. Include SVG, transparent PNG (256, 512, 1024, and 2048px widths), lossless WebP (1024px), full variable Newsreader normal/italic and Manrope TTFs with separate OFL licenses, the five-color CSS/JSON palette, supporting artwork, and usage notes. Export deterministically from the canonical logo; never redraw it. When updating kit files, rebuild the ZIP so it contains the same files, excluding itself. The navbar logo opens an accessible resource menu on right-click or Shift+F10; normal left-click remains a home link. The footer provides a visible Brand Kit link for touch and keyboard users. - **Site header:** Deep Charcoal utility strip over a Warm Cream navigation row. Keep the mobile logo row compact at 64px; place a 40px square hamburger control immediately to the right of the contact action. The header remains fixed in place while the control opens a full-viewport Warm Cream takeover beneath it; the surface rises from the bottom and contains large editorial links, contact information, and sparse brand illustration. Larger viewports use the more generous header scale and persistent Home, Listings, and About links. - **Homepage hero:** On compact mobile widths, lead with a full-width `4:3` property image and follow it with a separate Warm Cream editorial panel; never layer the full message over the photo. The following market strip switches to Deep Charcoal so the hero and next section read as deliberate, separate regions. From tablet widths upward, use full-bleed property photography with a restrained directional gradient and Warm Cream copy directly over the image. Use viewport-specific two-line title locks: “The brokerage that” / “puts YOU first.” on mobile, and “The brokerage” / “that puts YOU first.” on wider screens. Keep normal kerning and optical sizing enabled. Keep the image visible, preserve a glimpse of the next section, and never place the full hero message inside an oversized opaque card. - **Site footer:** Warm Cream surface with a Bronze/Sand rule, canonical tagline, global navigation, contact address, market coverage, and Equal Housing Opportunity text. - **Supporting illustration:** Use the tintable architectural masks and the purpose-built menu artwork in `public/brand/illustrations/`. Apply Deep Charcoal, Sage, or Bronze to masks through CSS `background-color`; set raster linework to multiply over Warm Cream. Keep opacity between 10% and 20% when a drawing sits behind content, and rotate distinct motifs by context instead of repeating one illustration throughout the site. - **Primary button:** Deep Charcoal background, Warm Cream label, square corners, and small-cap Manrope typography. Press state scales to `0.96`. - **Outline button:** Transparent Warm Cream surface with a quiet Sand border. Use for secondary actions. - **Text link:** Prefer an understated bottom rule or precise arrow. Minimum hit area is 40px. - **Property card:** Image-led, minimally framed, with editorial serif titles and sans-serif metadata. Let photography provide the visual weight. - **Listings explorer:** Warm Cream shell with a sticky `17rem` filter rail on desktop and a native details disclosure on mobile. Keep controls square, labels visible, and results image-led in a responsive two- or three-column grid. Filtering and sorting use URL query parameters so every result state is linkable and works without client hydration. - **Listing detail:** Use a true full-bleed split hero. On mobile, place the edge-to-edge gallery before the Deep Charcoal property-information panel. On desktop, reverse that order with flex so equally sized information and gallery panels meet at the viewport center. Place city, state, and postal code directly under the street-address title, keep status below that location, and reserve MLS data for the detailed information section rather than the hero. Pull price plus the six primary facts into the hero instead of repeating a separate facts band. Preserve the RESO-shaped `UnparsedAddress` for metadata and complete-address contexts. Use a shadcn/Embla carousel with one fixed control pair, one fixed position counter, and inset-padded button-based thumbnail navigation that never changes document scroll position. Follow with the editorial property narrative, structured feature groups, location and school details, inquiry action, and related homes. Gallery imagery remains uncropped enough to read as honest real-estate photography. - **Social preview image:** Use a `1200×630` split editorial composition: Warm Cream brand panel at left, page-specific photography at right, official logo, Bronze rule, concise page headline, and `ANDCO.TEAM`. The homepage uses brokerage-work imagery rather than a single listing; About uses Jenny’s portrait; Listings uses market photography; each property detail uses its own exterior and listing facts. - **Input:** Warm Cream surface, Sand border, Manrope body text, and Bronze focus ring. Labels remain visible; placeholders are supplemental. - **Editorial rule:** One pixel in Sand or low-opacity Bronze. Use to align and separate, not to decorate every region. ## Motion Motion uses one coordinated family of tokens from `app/globals.css`: strong ease-out for entrances and fades, strong ease-in-out for on-screen morphs, and the drawer curve for full-surface travel. Fast feedback is 180ms, control morphs and content entrances are 280ms, supporting artwork is 360ms, and full-surface travel is 460ms. The mobile navigation surface rises from the bottom while the header stays fixed. Its icon begins morphing immediately; content follows after 120ms in 60ms increments so the surface leads and the details settle behind it. Closing reverses the same path while content clears first. Reduced-motion mode removes translation, scale, rotation, and stagger while preserving a short opacity transition. ## Do's and Don'ts **Do** - Lead with clarity, whitespace, and intentional hierarchy. - Sound warm, welcoming, confident, and locally knowledgeable. - Let quality, craft, and specific details communicate premium service. - Use language centered on place, relationships, and guidance. - Keep the official logo proportions and palette values exact. **Don't** - Introduce cold blue-grays, pure white foundations, or loud accent colors. - Use heavy sans-serif body copy, oversized bold labels, or generic startup typography. - Fill layouts with cards, pills, shadows, gradients, or decorative noise. - Use corporate jargon, franchise language, or generic luxury clichés. - Redraw, typeset, stretch, rotate, outline, or embellish the logo.