Tribe Family Lawyers

Overview

Tribe Family Lawyers is a digital-first legal services platform that democratizes access to family law expertise for everyday Australians. The brand embodies an aesthetic of "Optimistic Clarity"—combining vibrant, energetic accent colors (emerald green #27eb89 as primary) with clean, minimal surfaces to convey both approachability and professional competence. The interface prioritizes transparency and ease of navigation, reflecting the brand's core mission to demystify legal processes. The emotional response is one of relief and empowerment: users feel supported, not intimidated, by the visual language.

Tribe's voice is conversational yet authoritative, avoiding legal jargon while maintaining credibility. The tone is warm, direct, and solution-focused—never patronizing, never breathless. Vocabulary favors active verbs and concrete outcomes over abstract legal terminology. Example sentence in brand voice: "We handle the paperwork. You focus on moving forward."

Colors

The color system is anchored by a vibrant emerald primary (#27eb89), which appears on all call-to-action buttons, interactive states, and key brand moments. This green conveys growth, trust, and forward momentum—critical signals for a legal platform serving people navigating life transitions. Secondary accent colors include a warm coral-red (#ff4c5b) for alerts and important notices, and a rich purple (#b14aed) for tertiary actions and highlights. The surface stack uses near-white (#fbfbfb, #f3f3f3, #ffffff) to maintain clarity and reduce cognitive load, with a neutral body text color (#4b4b4b) that ensures readability without harshness. Error states use a muted red (#cf2e2e) paired with a soft error-container (#f9dedc) to communicate issues without alarm. All interactive elements transiti

Typography

The type system uses Rubik throughout, a geometric sans-serif that balances friendliness with professionalism—essential for a legal brand that must feel both human and trustworthy. Display text (57px, weight 300) anchors hero sections with elegant lightness, while headline-lg (40px, weight 600) commands attention on section introductions. Body text sits at 16px with 24px line-height (1.5x), providing comfortable reading rhythm for longer-form legal content. Headlines employ negative letter-spacing (-0.02em to -0.01em) to tighten their visual impact, while body and label text use subtle positive spacing (0.01em to 0.05em) to enhance legibility at smaller sizes. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm) when layered over busy backgrounds or image overlays to

Layout

The layout follows a 12-column grid with a max-width of 1440px, allowing flexible content arrangement across desktop, tablet, and mobile viewports. The page rhythm is structured around 40px (lg spacing) section separations, creating clear visual breathing room between major content blocks. Container padding uses 24px (gutter) on desktop, reducing to 16px on tablet and 12px on mobile to maintain proportional margins. Hero sections occupy full-width with 80px top/bottom padding, establishing a generous entry point. The grid supports both fluid (percentage-based) and fixed-width layouts; cards typically span 3–4 columns on desktop, stacking to full-width on mobile. White-space is treated as a design element, not an afterthought—empty space around text and buttons increases perceived quality a

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. Level 1 (Base/Surface) uses no shadow, maintaining a flat, approachable foundation. Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating gentle separation from the background. Level 3 (Elevated/Modals) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), signaling modal importance without visual heaviness. Hover states transition smoothly (200ms ease-in-out) from Level 2 to Level 3, providing tactile feedback. No elements use harsh shadows or blur effects; the system prioritizes clar

Shapes

The shape philosophy is "Soft-Technical"—combining subtle rounded corners with geometric precision to balance approachability with professional authority. Buttons and inputs use 4.75px (0.3125rem) border-radius, creating a soft but defined edge that feels modern without being overly playful. Cards and containers use 12px (0.75rem) for slightly more breathing room, while modals and elevated surfaces use 20px (1.25rem) to signal importance and separation. Full-radius (9999px) is reserved for badges and pill-shaped elements, creating visual distinction for status indicators and tags. This graduat

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #27eb89 background with white text, 40px height, 12px vertical / 24px horizontal padding, and 4.75px border-radius. On hover, the background shifts to #1db86d (a darker emerald) with a 200ms ease-in-out transition, providing clear feedback without animation lag. The button-secondary variant uses a transparent background with a 1px primary-colored border, allowing secondary actions to coexist without visual dominance. Focus states apply a 3px glow (rgba(39, 235, 137, 0.1)) around the button to support keyboard navigation.

Containers & Surfaces Cards use a white background (#ffffff) with 12px border-radius and 24px padding. The default shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, t

Do's and Don'ts

**Do**

• Do use the primary green (#27eb89) exclusively on CTAs, focus states, and brand-critical moments—it is the visual anchor of user intent.
• Do maintain 40px (lg spacing) between major sections to create breathing room and reduce cognitive load for users in stressful situations.
• Do apply the 3px rgba(39, 235, 137, 0.1) focus ring to all interactive elements to ensure keyboard accessibility and visual clarity.
• Do use Rubik at 16px with 24px line-height for body text to ensure comfortable reading of legal content without eye strain.
• Do transition all hover/focus states over 150–200ms using ease-in-out timing to provide smooth, non-jarring feedback.

**Don't**

• Don't use the secondary red (#ff4c5b) or tertiary purple (#b14aed) as primary CTAs—reserve them for alerts and supporting actions only.
• Don't apply shadows stronger than 0 8px 24px rgba(0, 0, 0, 0.12) or use blur effects; the system prioritizes clarity over depth.
• Don't use border-radius values outside the defined scale (sm/DEFAULT/md/lg/xl/full); inconsistent rounding fragments the visual system.
• Don't reduce padding below 12px (sm spacing) on interactive elements or below 24px (md spacing) on card containers; white-space is a trust signal.
• Don't use system fonts or generic sans-serif fallbacks; always specify Rubik with appropriate fallbacks to maintain brand consistency.