Attorna Law Firm

Overview

Attorna is a premium legal services brand that embodies classical institutional authority through architectural minimalism. The design system channels the gravitas of courthouse neoclassicism—towering columns, symmetry, enduring materials—while maintaining contemporary clarity and accessibility. The aesthetic movement is 'Institutional Minimalism': restraint in color (warm neutrals #b1976b, #767676, #ffffff), precision in typography (Playfair Display for headlines, Poppins for body), and strategic use of architectural photography to reinforce trust and permanence. The UI evokes a sense of timeless professionalism: users feel they are engaging with an established, credible institution, not a startup. Voice: measured, authoritative, precise. Vocabulary favors substantive language ('financial & business industry', 'more than 20 years of experience') over marketing hyperbole. Example sentence in brand voice: 'Our firm specializes in complex corporate restructuring with a 94% favorable settlement rate.'

Colors

The color system is anchored in a warm, earthy primary (#b1976b) derived from natural stone and aged bronze—materials synonymous with law and permanence. This accent appears on CTAs ('CONTACT NOW', 'FREE CONSULTANT'), links, and interactive focus states. The palette is deliberately muted: secondary grays (#767676, #525252) provide hierarchy without visual noise, while the surface stack (white #ffffff down to light gray #dddddd) ensures legibility across all contexts. Tertiary (#b6a188) is reserved for supporting accents and hover states on secondary elements. The inverse surface (#171717) is used sparingly for dark-mode contexts or high-contrast overlays. Error states use a restrained red (#cf2e2e) only when critical. Usage rules: Primary (#b1976b) is reserved for primary CTAs, active navi

Typography

The type system pairs Playfair Display (serif, classical, high-contrast) for headlines with Poppins (sans-serif, modern, geometric) for body and UI text. This pairing communicates 'established authority meets contemporary clarity.' Display (72px, 700 weight, -0.03em tracking) is reserved for hero headlines and major section titles; its generous size and negative letter-spacing create visual impact while maintaining legibility. Headline-lg (48px) and headline-md (36px) are used for section headers and card titles, maintaining the serif's formality. Body-lg (18px, 400 weight, 0.02em tracking) is applied to introductory paragraphs and prominent copy; the slight positive tracking improves readability on light backgrounds. Body-md (16px) is the default for all body text, form labels, and second

Layout

The layout follows a 12-column grid with a max-width of 1170px, centered on the viewport. This fixed-width approach reinforces the brand's structured, institutional character—the grid is neither fluid nor chaotic. Section spacing uses the lg token (40px) for vertical rhythm between major sections (hero, services, testimonials, footer), creating a measured cadence that feels deliberate rather than cramped. Horizontal gutters are consistently {spacing.gutter} (24px) on desktop, reducing to 16px on tablets and 12px on mobile. The hero section spans full-width with a background image (architectural photography) and a semi-transparent overlay (rgba(255, 255, 255, 0.95)) to ensure text legibility. Cards and content containers use md padding (24px) internally, with sm (12px) gaps between nested e

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through dramatic effects. The elevation system uses three tiers: sm (0 1px 3px rgba(10, 10, 10, 0.06)) for minor UI elements like input fields and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for primary cards, buttons, and modals; lg (0 0 35px rgba(10, 10, 10, 0.08)) for hero overlays and elevated sections. Shadows are soft and diffuse, never sharp—this reinforces the brand's refined, non-aggressive aesthetic. Hover states on cards transition from md to lg shadow over 200ms, creating a subtle lift effect. The hero section uses a la

Shapes

The shape philosophy is 'Architectural Precision': minimal, intentional border-radius that respects the grid and avoids unnecessary ornamentation. Buttons and inputs use sm (3px) radius, creating a subtle softness without appearing rounded or playful. Cards use md (5px) radius, slightly more generous than buttons to signal containment and hierarchy. The hero section and full-width containers have no border-radius (0px), maintaining clean edges aligned to the viewport. Badges and pill-shaped elements use full (9999px) radius only when semantically appropriate (e.g., status indicators). The rati

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses primary color (#b1976b) background with white text, 17px vertical padding, 50px horizontal padding, and 3px border-radius. The typography is label-md (14px, 600 weight, 0.04em tracking) in all-caps (e.g., 'CONTACT NOW'). On hover, the background transitions to primary-fixed-dim (#d4c4a8) over 150ms, maintaining the same text color. Button-secondary is transparent with a 1px solid border in primary color, same padding and radius, with text in primary color. On hover, the background fills with primary-container (#e8dcc8) and text becomes on-primary-container (#3a3a3a). Both button states include box-shadow: {elevation.sm} to lift them off the surface. Avoid using button-secondary for critical CTAs; reserve

Do's and Don'ts

**Do**

• Do use Playfair Display for all headlines (display, headline-lg, headline-md) to reinforce institutional authority and visual hierarchy.
• Do apply primary color (#b1976b) exclusively to CTAs, active navigation states, and focus indicators—never use it for body text or decorative elements.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to create a measured, deliberate rhythm that reflects the brand's professionalism.
• Do use the dark input style (#373737 background) for all form fields to create visual separation and signal interactivity.
• Do transition hover states over 150–200ms using ease-out timing to create smooth, intentional interactions.
• Do apply md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and elevated elements; avoid sharp or dramatic shadows.

**Don't**

• Don't use Poppins for headlines—it undermines the institutional character that Playfair Display establishes.
• Don't apply primary color (#b1976b) to body text, secondary buttons, or decorative elements; reserve it for interactive CTAs and focus states only.
• Don't use border-radius larger than md (5px) on buttons or inputs—lg and xl radii feel too casual for a legal brand.
• Don't add visible borders to cards; rely on shadows and background color to define surfaces.
• Don't use more than three font sizes in a single section; maintain typographic hierarchy by limiting to display/headline-lg, body-md, and label-md.
• Don't apply animations longer than 300ms or use bounce/elastic easing; the brand favors restraint and precision over playfulness.