Allo Justice

Overview

Allo Justice is a Moroccan legal consultation platform that democratizes access to legal guidance through a digital-first, trust-centric design language. The brand embodies 'Authoritative Minimalism'—a design movement that pairs institutional gravitas (deep navy backgrounds, serif typography) with modern accessibility (vibrant emerald CTAs, clean whitespace, conversational copy). The visual system evokes clarity and confidence: users encounter a sophisticated, professional interface that never feels cold or bureaucratic. The emotional response is reassurance: 'I can trust this platform to guide me through complex legal matters.' Voice: precise, empathetic, and locally grounded. Allo Justice speaks in clear French, avoiding legal jargon when possible, and always prioritizes the user's understanding over formality. Example sentence in brand voice: 'Votre situation est unique—nous vous aidons à comprendre exactement ce qui s'applique à vous.'

Colors

The color system balances institutional authority with modern accessibility. Primary (#25d366, vibrant emerald) is the signature action color—deployed on all CTAs, WhatsApp buttons, and interactive focus states. This high-saturation green signals trust, growth, and digital-native confidence; it appears sparingly but decisively, commanding attention without aggression. Secondary (#cba557, warm gold) provides a supporting accent for highlights, badges, and secondary CTAs, evoking professionalism and legal tradition. Tertiary (#0274be, corporate blue) is reserved for links, metadata, and informational elements. The surface stack is deliberately light: surface (#f5f7f8, off-white) as the default canvas, with surface-container-high (#e6e6e6, light gray) for hover states and elevated cards. The

Typography

The type system pairs Cormorant Garamond (serif, 400–600 weight) for headlines and display text with Outfit (sans-serif, 400–500 weight) for body and UI labels. This pairing communicates 'established yet approachable': Cormorant's classical proportions signal legal authority and heritage, while Outfit's geometric clarity ensures modern readability. Display (64px, 600 weight, -0.02em letter-spacing) is reserved for hero headlines like 'Un problème juridique au Maroc ? Commencez par une réponse claire.' Headline-lg (55px, 600 weight, 64px line-height) is used for section titles and major content blocks. Body-lg (19px, 400 weight, 28px line-height) is the default body text, set at 1.65em line-height for comfortable reading. Label-md (15px, 500 weight) is applied to button text and UI labels,

Layout

The layout follows a 12-column fluid grid with a max-width of 1200px (--ast-normal-container-width). The page rhythm is built on a spacing scale: unit (8px) as the base, with semantic tokens for section separation (lg: 40px between major sections, md: 24px for component padding, sm: 12px for internal spacing). The hero section uses full-width background imagery with a semi-transparent overlay (rgba(11, 17, 32, 0.85)) to ensure text legibility; content is centered and padded with lg spacing (40px) on desktop, reducing to md (24px) on tablet and sm (12px) on mobile. Container max-width is enforced at 1200px to prevent line-length from exceeding 75 characters, maintaining readability. White-space is generous: cards and sections are separated by at least lg spacing (40px), and internal padding

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background layering. Level 1 (Base): the default surface (#f5f7f8) with no shadow, representing the primary content plane. Level 2 (Elevated Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and secondary containers to lift them 4–8px above the base. Level 3 (Modals & Overlays): box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3), a larger, softer shadow with a green tint that reinforces the primary brand color and signals the highest interactive layer. The header uses a semi-transparent dark b

Shapes

The shape philosophy is 'Refined Pragmatism'—sharp corners for structural elements (cards, containers at 0.75rem / 12px border-radius) paired with fully rounded buttons (9999px / border-radius: 50px) to signal action and approachability. Buttons use full rounding (border-radius: 50px, padding: 14px 28px) to feel modern and touch-friendly, contrasting with the classical serif typography. Cards and input fields use md rounding (0.75rem / 12px) to feel contemporary without sacrificing the institutional aesthetic. The header and footer use sharp corners (0px) to anchor the page visually. This hier

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (background: #25d366, color: #ffffff, padding: 14px 28px, border-radius: 50px, font-weight: 500, font-size: 15px) is used for all primary CTAs: 'Parler à Allo Justice', 'Découvrir nos services'. On hover, transition to button-primary-hover (background: #1fa852) over 0.2s ease-in-out, maintaining the white text. Button-secondary (background: transparent, border: 2px solid #cba557, color: #cba557, padding: 14px 28px, border-radius: 50px) is used for secondary actions and outline-style CTAs. On hover, transition to button-secondary-hover (background: #d4af37, color: #000000, border-color: #d4af37) over 0.2s. All buttons use label-md typography (15px, 500 weight) and maintain a minimum height of 48px for touch targ

Do's and Don'ts

**Do**

• Do use primary (#25d366) exclusively for CTAs and interactive focus states—it's the brand's signature accent and must remain distinctive.
• Do maintain the serif/sans-serif pairing (Cormorant Garamond for headlines, Outfit for body) to reinforce the 'authoritative yet modern' brand voice.
• Do apply generous spacing (lg: 40px) between major sections to create breathing room and reduce cognitive load for users navigating legal content.
• Do use the three-tier shadow system (no shadow, 0 3px 8px, 0 4px 15px) consistently to establish clear visual hierarchy and depth.
• Do round all buttons fully (border-radius: 50px) to signal interactivity and approachability, contrasting with sharp-cornered containers.

**Don't**

• Don't use secondary (#cba557) or tertiary (#0274be) as primary CTAs—they dilute the brand's signature green accent and confuse interaction hierarchy.
• Don't mix serif and sans-serif within a single headline or body paragraph; maintain the established pairing to preserve visual consistency.
• Don't apply shadows larger than 0 4px 15px rgba(37, 211, 102, 0.3) or use multiple layered shadows—this creates visual noise and undermines the refined aesthetic.
• Don't use border-radius values between 12px and 50px on buttons; stick to either sharp (0px), structured (12px), or fully rounded (50px) to maintain clarity.
• Don't reduce line-height below 1.65em on body text or below 1.2em on headlines—this compromises readability and accessibility for users with dyslexia or low vision.