Regal

Overview

Regal is a legal-tech platform that simplifies rental agreement drafting for users in Karnataka and Bangalore. The design system embodies 'Warm Legalism'—a fusion of approachable, human-centered design with the gravitas and trustworthiness required for legal documents. The brand personality is confident yet accessible: it demystifies complex legal processes through clear language, intuitive workflows, and a refined visual language rooted in warm earth tones (primary #8c4826, a terracotta-brown) paired with fresh greens (#1e5c2a) and calm blues (#5b87c2). The emotional response is one of relief and empowerment: users feel guided, not intimidated. Example sentence in brand voice: 'Your rental agreement is ready to sign—no lawyer, no queue, just clarity.'

Colors

The color system is built on a foundation of warm, natural tones that evoke trust and professionalism without coldness. Primary (#8c4826) is a rich terracotta used exclusively for CTAs, interactive elements, and brand moments—it appears on the 'Get Started' button (14px, 500 weight, DM Sans) and signals actionable intent. Secondary (#1e5c2a), a deep forest green, reinforces positive actions and success states (e.g., checkmarks in the 'Free drafting' benefit card, background: hsl(143, 85%, 96%), border: hsl(145, 92%, 87%)). Tertiary (#5b87c2), a muted slate-blue, provides calm contrast for informational elements and secondary data visualization. The surface stack ranges from #faf9f4 (surface, page background) through #f2eee6 (surface-dim) to #ffffff (surface-bright, cards and modals). On-su

Typography

The type system pairs Playfair Display (serif, 700 weight) for headlines with DM Sans (sans-serif, 400–600 weight) for body and UI text. This pairing communicates 'established yet modern'—Playfair's high contrast and elegant serifs evoke legal documents and heritage, while DM Sans's geometric clarity ensures digital readability. Display (56px, 700, -0.02em letter-spacing) anchors hero sections; headline-lg (40px, 700) is used for major section breaks; headline-md (28px, 700) for subsections. Body-lg (18px, 400, 28px line-height) is reserved for hero copy and long-form explanations. Body-md (16px, 400, 24px line-height, 0.03em letter-spacing) is the default paragraph text. Label-md (14px, 500, 20px line-height) is applied to button text and form labels. Label-sm (12px, 600, 16px line-height

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. The page rhythm is built on the spacing scale: lg (40px) separates major sections (hero from benefits, benefits from testimonials); md (24px) is the default gutter for cards and component padding; sm (12px) is used for internal component spacing (button padding, list item margins). The hero section uses a two-column layout (56% text, 44% image/mockup) with the h1 set to 56px Playfair Display and the subheading in body-lg (18px, #49453f on-surface-variant). The benefits card (background: hsl(143, 85%, 96%), border-radius: 8px, padding: 24px) uses a left-aligned checkmark icon (16px, #1e5c2a) followed by body-md text. Container max-width ensures readability: no line exceeds 75 characters at body-md size

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle transforms. Level 1 (Base): no shadow, flat surface (#faf9f4 background). Level 2 (Cards, inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), border: 1px solid #ccc7bf (outline-variant), border-radius: 8px. Level 3 (Modals, elevated cards, hover state): box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), border: 1px solid #79746e (outline), border-radius: 8px. On hover, cards lift 2px (transform: translateY(-2px)) and transition to Level 3 shadow over 200ms. Focus states on interactive elements apply a 3px inset box-shadow in primary with

Shapes

The shape philosophy is 'Refined Approachability'—rounded corners are present but restrained, signaling modernity without sacrificing formality. Buttons use 14px border-radius (lg), creating a soft pill-like appearance that feels inviting but not playful. Cards and modals use 8px border-radius (md), balancing softness with professional geometry. Input fields use 6px border-radius (DEFAULT), slightly sharper than cards to denote functional precision. The 'Create Agreement' CTA button uses 14px radius with 12px vertical and 24px horizontal padding, resulting in a 48px height—a touch target that

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses background: #8c4826, color: #ffffff, padding: 12px 24px, height: 48px, border-radius: 14px, font-size: 14px, font-weight: 500, font-family: DM Sans. On hover, background transitions to #7a3d1f over 200ms (button-primary-hover). On focus, apply box-shadow: 0 0 0 3px rgba(140, 72, 38, 0.1). The secondary button (button-secondary) uses background: #e2d8cb (primary-container), color: #8c4826, same padding and height, and transitions to #d4cfc4 on hover. Ghost buttons (button-ghost) have transparent background, 1px solid #ccc7bf border, and #8c4826 text; on hover, background becomes #ede9e0 and border becomes #79746e. All button transitions use ease timing over 200ms.

Containers & Surf

Do's and Don'ts

**Do**

• Do use primary (#8c4826) exclusively for CTAs and high-priority interactive elements—never for decorative or passive content.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel.
• Do maintain 40px vertical spacing between major sections and 24px padding inside cards to preserve breathing room and readability.
• Do pair Playfair Display headlines with DM Sans body text to balance formality with digital clarity—never mix serif and sans-serif within a single text block.
• Do use the secondary green (#1e5c2a) for success states, confirmations, and positive affordances (checkmarks, badges, progress indicators).
• Do apply box-shadow: 0 0 0 3px rgba(140, 72, 38, 0.1) on all focused interactive elements for WCAG AAA compliance.

**Don't**

• Don't use primary color for body text, backgrounds, or non-interactive elements—it dilutes its signal strength as a CTA indicator.
• Don't apply border-radius greater than 14px on buttons or inputs; it risks appearing frivolous in a legal-tech context.
• Don't mix tertiary blue (#5b87c2) with primary brown (#8c4826) in the same interactive element; use one or the other to avoid visual confusion.
• Don't exceed 75 characters per line in body-md text; longer lines reduce readability and increase cognitive load for legal document review.
• Don't animate shadows or transforms for more than 300ms; slower transitions feel sluggish and undermine the 'efficient' brand promise.
• Don't use the error color (#b3261e) for warnings or informational states; reserve it exclusively for destructive actions or validation failures.