Samara

Overview

Samara is a premium architectural technology brand that manufactures backyard homes and ADUs with elevated design, expert craftsmanship, and solar-powered sustainability. The design system embodies "Architectural Minimalism with Technical Precision"—a philosophy that strips away ornament to reveal essential form, combining the austere geometry of modernist architecture with the clarity of industrial design. The brand serves homeowners and developers seeking sophisticated, efficient living solutions without compromise. The visual language evokes confidence through restraint: deep blacks (#000000) provide a canvas for vibrant accent colors (primary blue #0096f7, secondary orange #ff6400), while generous whitespace and precise typography communicate expertise and intentionality. The UI feels engineered, not decorative—every pixel serves a function.

Samara's voice is precise, direct, and grounded in expertise. The brand avoids breathless marketing language, instead favoring concrete specifications and honest communication. Tone examples: "950 square feet. Two bedrooms, two baths." and "We handle everything, from installation to financing." The vocabulary is technical but accessible, favoring active verbs and measurable outcomes. Brand personality: confident without arrogance, innovative without pretension, premium without elitism. The writing assumes the reader is intelligent and values clarity over persuasion.

Colors

The color system operates on a high-contrast principle: a near-black surface (#000000) serves as the dominant background, creating visual drama and focusing attention on content and interactive elements. The primary accent color is a vibrant, saturated blue (#0096f7), used exclusively for primary CTAs, links, and key interactive states—this is the brand's signature accent, appearing on buttons like 'Design yours' and secondary navigation elements. The secondary accent is a warm, energetic orange (#ff6400), reserved for urgent or promotional CTAs like 'Find out more' and fire-relief messaging, creating visual hierarchy and emotional differentiation. Neutral surfaces employ a refined palette of off-whites and beiges (#fdfdf7, #f7f7f0, #e9ecef) for content areas and cards, providing breathing

Typography

The type system is built on Regola, a geometric sans-serif family with four weights (light, book, regular, medium) that communicate hierarchy through weight and scale rather than stylistic variation. Display (72px, regola-light, -3px letter-spacing) is reserved for hero headlines and major section breaks, commanding attention through size and negative space. Headline-lg (64px, regola-book, -2px letter-spacing) and headline-md (36px, regola-book, -1px letter-spacing) structure content sections with clear visual separation. Body text (16–18px, regola-book, 24–30px line-height) is set with generous leading (1.5x) to ensure readability on both dark and light backgrounds. Labels and UI text (14–15px, regola-book) use tighter tracking (0.01–0.02em) to maintain legibility at small sizes. When sma

Layout

The layout system uses a flexible 12-column grid with a maximum container width of 1280px, allowing content to breathe on large screens while maintaining focus. The grid employs a gutter of 24px between columns, with responsive adjustments to 12px on tablets and 0px on mobile (full-bleed sections). Page rhythm is established through consistent spacing: major section breaks use 64px (xl) vertical spacing, subsection breaks use 40px (lg), and component-level spacing uses 24px (md) or 12px (sm). The hero section occupies 100vh on desktop, creating an immersive entry point; content sections below use a 2:1 or 3:2 aspect ratio for images paired with text. Container max-widths vary by section type (950px for narrow content, 1280px for full-width layouts, 1024px for editorial), but never exceed 1

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy, diffuse shadows of skeuomorphism. Level 1 (Base/Surface): no shadow; flat, matte appearance. Level 2 (Raised Cards/Inputs): box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08), a subtle shadow that lifts elements 2–4px above the surface. Level 3 (Modals/Popovers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a more pronounced separation. Level 4 (Floating Elements/Tooltips): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), reserved for the most prominent overlays. Shadows are always directly below elements (no blur-spread offse

Shapes

The shape philosophy is "Architectural Softness"—a balance between the sharp geometry of modernist design and the approachability of contemporary interfaces. Border-radius values are used strategically: buttons and small interactive elements use 12px (rounded.md), creating a subtle softness without appearing playful. Cards and larger containers use 18px (rounded.lg) or 24px (rounded.xl) for a more pronounced curve. Form inputs use 12px to align with button styling, creating visual cohesion in interactive areas. Badges and pills use 9999px (rounded.full) for a fully rounded appearance, reserved

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (blue #0096f7 background, white text, 12px rounded, 44px height, 12px 24px padding), secondary (orange #ff6400 background, white text, same dimensions), and ghost (transparent background, blue text, 1px blue border). All buttons use regola-book at 15px with 200ms ease-out transitions on hover. Primary buttons shift to #008de8 on hover; secondary buttons shift to #e85c00. Ghost buttons gain a 10% blue overlay (rgba(0, 150, 247, 0.1)) on hover. Buttons never have text-decoration or underlines; focus states use a 3px outer ring at rgba(0, 150, 247, 0.3). Disabled buttons use opacity: 0.5 and cursor: not-allowed.

Containers & Surfaces Cards use a 1px border at #4a4a4a (outline-variant) wi

Do's and Don'ts

**Do**

• Do use the primary blue (#0096f7) exclusively for primary CTAs and interactive focus states—never use it for decorative elements or backgrounds.
• Do maintain at least 24px of whitespace between major sections and 12px between components to create visual breathing room.
• Do apply consistent 12px border-radius to all interactive elements (buttons, inputs, cards) to establish a cohesive, approachable aesthetic.
• Do use regola-book for all body copy and UI text; reserve regola-light only for display headlines (72px+).
• Do transition all interactive states (hover, focus, active) over 200ms with ease-out timing to feel responsive without jarring.
• Do use the secondary orange (#ff6400) only for urgent or promotional CTAs; never use it for primary navigation or standard interactions.

**Don't**

• Don't mix border-radius values within a component family—all buttons should use 12px, all cards should use 18px or 24px.
• Don't apply shadows to text or typography; shadows are reserved for containers, cards, and floating elements only.
• Don't use the primary blue (#0096f7) for backgrounds or large surface areas—it's an accent color for interactive elements and focus states.
• Don't introduce new colors outside the defined palette; the system uses only black, white, blue, orange, and carefully calibrated grays.
• Don't use italic or oblique type in body copy; regola-book-oblique is reserved for editorial emphasis in long-form content only.
• Don't exceed 1280px container max-width; content should never stretch beyond this boundary to maintain readability and focus.