Srisunglaw

Overview

Srisunglaw represents institutional legal authority through a sophisticated blend of warm-toned accents and dark, trustworthy foundations. The design system embodies 'Authoritative Minimalism'—a movement that prioritizes clarity, precision, and professional gravitas over decorative flourish. The brand serves Thai legal professionals and clients seeking counsel from a firm with 40+ years of established expertise, evoking confidence through restrained elegance and purposeful visual hierarchy. The UI communicates competence through measured spacing, deliberate color choices, and typography that balances formality with approachability.

The brand voice is precise, measured, and client-centric. Language avoids jargon when possible, preferring clarity over complexity. Tone is respectful but not distant—the firm acknowledges the gravity of legal matters while remaining accessible. Example sentence in brand voice: 'We handle your case with the same rigor we've applied to thousands of matters over four decades.'

Colors

The color system anchors on a warm, earthy primary (#b07c4b) that conveys trust, stability, and professional warmth—distinctly different from cold corporate blues. This burnt sienna tone appears on all primary CTAs ('โลมีหารา'), hover states, and key interactive elements, creating a distinctive visual signature that distinguishes Srisunglaw from competitors. The dark surface foundation (#1a243f, used in hero sections and footers) provides institutional weight and contrast, ensuring text legibility at 16px body size with 1.7 line-height. Secondary accent (#03e78b, a vibrant teal) is reserved for status indicators, success states, and communication widgets (phone/LINE buttons), appearing at 30% frequency in the DOM. Tertiary (#4f6aca, a muted periwinkle) supports secondary information and ta

Typography

The type system uses Poppins as the primary family for headings and interactive elements, paired with IBM Plex Thai for body text in Thai-language contexts—a deliberate choice honoring the firm's Thai heritage while maintaining modern readability. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) structures major sections; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at standard viewport widths. The 1.7 line-height ratio applied globally creates generous vertical rhythm, critical for Thai script legibility where diacritical marks require breathing room. Label-md (14px, 600 weight, 0.05em tracking) is applied to buttons and form labels, with a subtle text-shadow of 0 2px 4px rgba(0, 0, 0, 0

Layout

The layout employs a 12-column fluid grid with 1280px container max-width, adapting gracefully to mobile viewports via CSS Grid and flexbox. Page rhythm is structured around semantic spacing: lg (40px) separates major sections (hero to content, content to footer), md (24px) creates breathing room between cards and components, sm (12px) provides internal padding within interactive elements. The hero section spans full viewport height with a dark overlay (rgba(26, 36, 63, 0.65)) over a background image, establishing visual dominance. Content sections use 24px gutter margins and center-align text blocks to 800px max-width for optimal line length (55–75 characters). Info boxes employ 30px padding (custom spacing, not token-mapped) with 3px borders at rgba(119, 119, 119, 0.17), creating subtle

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of background colors rather than aggressive drop shadows. Level 1 (Base): flat surfaces at #ffffff with no shadow. Level 2 (Standard Card): 0 4px 12px rgba(0, 0, 0, 0.08) with 1px border at #abb8c3, creating subtle separation. Level 3 (Elevated/Modal): 0 16px 40px rgba(0, 0, 0, 0.12) with background at #f5f5f5, reserved for modals and prominent callouts. The hero section uses a semi-transparent dark overlay (rgba(0, 0, 0, 0.65)) with no blur on the background image itself, maintaining photographic clarity while darkening te

Shapes

The shape philosophy is 'Institutional Precision'—sharp corners on major containers (0px border-radius) convey legal formality, while selective rounding on interactive elements softens the aesthetic and improves usability. Buttons use 5px border-radius (0.31rem, a custom value between sm and DEFAULT), balancing approachability with professional restraint. Input fields employ 35px border-radius (2.19rem, near-full roundness) to signal 'search' or 'contact' affordance, a common pattern in modern legal websites. Cards and info boxes use 6px border-radius (0.375rem, between sm and md), creating vi

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses #b07c4b background with white text, 44px height, 12px vertical / 20px horizontal padding, and 5px border-radius. On hover, background shifts to #a06d3d (darkened by ~15%) with a 200ms transition, providing clear feedback. Button-secondary mirrors the primary structure but uses transparent background with 2px white border, ideal for secondary actions in hero sections. Both button variants use label-md typography (14px, 600 weight, 0.05em tracking) for crisp legibility.

Containers & Surfaces Cards employ a consistent pattern: #eeeeee background, 1px border at #abb8c3, 24px padding, and 0 4px 12px rgba(0, 0, 0, 0.08) shadow. On hover, background transitions to #e6e6e6 and shadow elevates to 0 16px 40px

Do's and Don'ts

**Do**

• Do use #b07c4b (primary) exclusively for primary CTAs and interactive focus states—it is the brand's signature accent and must remain distinctive.
• Do maintain 1.7 line-height on body text and 24px line-height on labels to accommodate Thai script diacriticals and ensure accessibility.
• Do apply 200ms ease-in-out transitions to all hover/focus state changes—this measured timing conveys professionalism and prevents jarring visual shifts.
• Do use the dark overlay (rgba(26, 36, 63, 0.65)) on hero background images to ensure text contrast meets WCAG AA standards (4.5:1 minimum for body text).
• Do employ the graduated rounding scale: 0px for major containers (authority), 5px for buttons (balance), 35px for inputs (affordance), 50% for logos (identity).

**Don't**

• Don't use secondary (#03e78b) or tertiary (#4f6aca) as primary CTA colors—these are supporting accents and will dilute brand recognition.
• Don't apply box-shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12)—excessive depth contradicts the Authoritative Minimalism aesthetic and creates visual noise.
• Don't reduce line-height below 1.7 on body text or 20px on labels, as Thai script requires additional vertical space for legibility.
• Don't mix border-radius values arbitrarily—use only the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency and institutional coherence.
• Don't use pure white (#ffffff) text on primary (#b07c4b) backgrounds—contrast ratio falls below WCAG AA; always use white on dark backgrounds or dark text on light backgrounds.