ayris-legal-main/DESIGN.md

name, description, colors, typography, rounded, spacing, components

name	description	colors	typography	rounded	spacing	components
AyrisLegal	AI-Powered Strategic Workspace for Legal Professionals	primary primary-dark primary-soft neutral-bg neutral-surface neutral-card neutral-border neutral-muted neutral-text #E61919 #B8140F #FDEEEC #FFFFFF #FAFAFA #FFFFFF #E4E4E7 #71717A #09090B	display headline title body label fontFamily fontSize fontWeight lineHeight letterSpacing Archivo, ui-sans-serif, system-ui, sans-serif clamp(2.375rem, 5.5vw, 3.75rem) 800 1.03 -0.03em fontFamily fontSize fontWeight lineHeight letterSpacing Archivo, ui-sans-serif, system-ui, sans-serif clamp(1.75rem, 3.5vw, 2.5rem) 800 1.12 -0.025em fontFamily fontSize fontWeight lineHeight letterSpacing Archivo, ui-sans-serif, system-ui, sans-serif 1.25rem 700 1.35 -0.015em fontFamily fontSize fontWeight lineHeight letterSpacing Archivo, ui-sans-serif, system-ui, sans-serif 1.0625rem 400 1.625 normal fontFamily fontSize fontWeight lineHeight letterSpacing JetBrains Mono, monospace 0.8125rem 600 1.4 0.02em	sm md lg xl full 8px 12px 16px 24px 9999px	xs sm md lg xl 2xl 3xl 4px 8px 16px 24px 32px 48px 64px	button-primary button-primary-hover button-outline card-elevated input-field backgroundColor textColor rounded padding {colors.primary} {colors.neutral-bg} {rounded.full} 14px 28px backgroundColor {colors.primary-dark} backgroundColor textColor rounded padding {colors.neutral-bg} {colors.neutral-text} {rounded.full} 14px 28px backgroundColor textColor rounded padding {colors.neutral-card} {colors.neutral-text} {rounded.xl} 24px backgroundColor textColor rounded padding {colors.neutral-bg} {colors.neutral-text} {rounded.md} 10px 16px

Design System: AyrisLegal

Overview

Creative North Star: "The Modern Jurist Studio"

The AyrisLegal design system embodies rigorous editorial precision, surgical focus, and high-trust clarity. Built for Turkish lawyers navigating dense case dockets, precedent archives, and evidentiary records, the interface rejects noisy SaaS clichés in favor of stark white-and-zinc architectural surfaces punctuated by deliberate, high-contrast Ayris Red accents.

The aesthetic philosophy bridges judicial gravitas with cutting-edge analytical intelligence. Typographic hierarchy is tight, bold, and authoritative. Cards, preview frames, and case documents float cleanly above the canvas with deep ambient drop shadows, giving digital artifacts physical substance and scanability.

Key Characteristics:

• Stark editorial canvas: pure white (#FFFFFF) and architectural zinc neutrals (#FAFAFA, #F4F4F5, #E4E4E7, #09090B).
• Singular, surgical accent: high-contrast Ayris Legal Red (#E61919) used strictly for high-intent actions, critical alerts, and focal insights.
• Authoritative typography: Archivo with tight tracking (-0.03em) and heavy weights for display, paired with JetBrains Mono for dates, case numbers, and system badges.
• Confident tactile geometry: pill-shaped primary action buttons (rounded-full), generous 24px container corners, and layered floating cards with deep ambient shadows.
• Zero fluff: no decorative gradient text, no floating particle meshes, and no icon-stuffed bento boxes.

Colors

The palette is restrained, high-contrast, and purposeful: a surgical scarlet accent grounded upon an immaculate monochrome zinc foundation.

Primary

• Ayris Legal Red (#E61919 / oklch(0.58 0.23 27)): The sole high-energy accent. Reserved exclusively for primary conversion CTAs, critical case conflict highlights (Çelişki Avcısı), and active status pulses.
• Deep Crimson (#B8140F / oklch(0.48 0.21 27)): Hover and active interaction state for primary red elements.
• Soft Rose Tint (#FDEEEC / oklch(0.96 0.03 27)): Low-contrast background wash for accent badges, selection states, and success callouts.

Neutral

• Paper White (#FFFFFF): Primary page canvas and elevated card surface background.
• Subtle Surface Tint (#FAFAFA): Secondary container background and alternating table rows.
• Hairline Border Zinc (#E4E4E7 / zinc-200): Structural boundary for cards, input controls, and divider rules.
• Muted Caption Slate (#71717A / zinc-500): Supporting explanatory text, timestamps, and secondary metadata.
• Deep Ink Black (#09090B / zinc-950): High-contrast headline text, primary typography, and dark framing accents.

Named Rules

The Rarity Rule. The Ayris Red accent is applied to ≤5% of any viewport. Its scarcity is what commands immediate cognitive attention when flagging legal conflicts or driving conversion.

The Hairline Rule. All borders use crisp, unblurred 1px to 1.5px solid strokes (#E4E4E7). Borders define geometry; they never glow or carry colored stroke gradients.

Typography

Display Font: Archivo (with ui-sans-serif, system-ui, sans-serif fallback)
Body Font: Archivo (with ui-sans-serif, system-ui, sans-serif fallback)
Label / Mono Font: JetBrains Mono (with ui-monospace, SFMono-Regular, monospace fallback)

Character: Archivo delivers heavyweight editorial punch with geometric discipline and condensed proportions. JetBrains Mono anchors legal docket numbers, case dates, and live status feeds with courtroom precision.

Hierarchy

• Display (800 / Extrabold, clamp(2.375rem, 5.5vw, 3.75rem), line-height 1.03, tracking -0.03em): Hero headlines and commanding value propositions.
• Headline (800 / Extrabold, clamp(1.75rem, 3.5vw, 2.5rem), line-height 1.12, tracking -0.025em): Section headings and core feature titles.
• Title (700 / Bold, 1.25rem / 20px, line-height 1.35, tracking -0.015em): Card titles, module headers, and modal names.
• Body (400 / Regular & 500 / Medium, 1.0625rem / 17px, line-height 1.625): Long-form explanations, case summaries, and narrative paragraphs (optimal line length 52–65ch).
• Label / Mono (600 / SemiBold, 0.8125rem / 13px, tracking 0.02em): Case numbers, dates, badge pills, and legal metadata.

Named Rules

The Editorial Lead Rule. Hero and section headlines lead with stark monochrome ink (#09090B) and isolate key thesis statements with solid accent color—never split across multi-stop gradients.

The Monospace Docket Rule. Every date, file reference, and courtroom docket timestamp is typeset in JetBrains Mono to reinforce authentic document reality.

Layout

The spatial model uses an asymmetric, content-driven rhythm optimized for fast legal triage:

• Max Container Width: 1400px with generous lateral gutters (px-5 on mobile, px-16 on desktop).
• Vertical Spacing Rhythm: 64px to 96px between major sections; 16px to 24px between internal card groups.
• Asymmetric Composition: Two-column hero layouts pairing left-aligned bold copy with right-aligned floating interactive browser frames and offset accent overlays.
• Density: High density within document/file preview modules (compact line items, clear borders), balanced by expansive white breathing space around high-level messaging.

Elevation & Depth

Surfaces are clean and physical. Depth is communicated through layered white cards floating over light zinc backgrounds, separated by crisp hairline strokes and deep, diffuse ambient shadows.

Shadow Vocabulary

• Card Float Ambient (box-shadow: 0 30px 70px -25px rgba(24, 24, 27, 0.25)): Applied to hero browser preview frames and featured product mockups to create dramatic physical lift.
• Overlay Pop (box-shadow: 0 20px 45px -15px rgba(24, 24, 27, 0.20)): Applied to offset badges (e.g. Çelişki Avcısı pill) and floating status widgets.
• Form Card Base (box-shadow: 0 20px 60px -30px rgba(24, 24, 27, 0.20)): Applied to interactive inquiry and lead generation forms on /iletisim.

Named Rules

The Tonal Lift Rule. Shadows are always neutral carbon/zinc tinted (rgba(24, 24, 27, ...)). Never use colored or saturated drop shadows under buttons or cards.

Shapes

• Primary Action Buttons: Full pill geometry (rounded-full / border-radius: 9999px) creating distinct, unmistakable call-to-action touchpoints.
• Containers & Framing Cards: Generous 24px to 28px rounded corners (rounded-3xl / rounded-[1.75rem]), softening structural grids.
• Input Fields & Micro-cards: 12px to 16px rounded corners (rounded-xl / rounded-2xl) for comfortable form completion.
• Dividers & Strokes: 1px to 1.5px solid hairline borders in #E4E4E7.

Components

Buttons

• Shape: Pill (border-radius: 9999px)
• Primary: Ayris Legal Red background (#E61919), white text (#FFFFFF), padding 14px 28px, font-size 15px, font-weight 600.
• Hover / Focus: Deep crimson (#B8140F), subtle spring physics or magnetic cursor tracking, active scale 0.98. Focus ring in #E61919.
• Secondary / Outline: White background (#FFFFFF), dark zinc text (#18181B), 1.5px border (#E4E4E7), hover background #FAFAFA.

Cards & Document Containers

• Corner Style: 24px to 28px rounded corners (rounded-3xl).
• Background: Crisp white (#FFFFFF) with 1px border (#E4E4E7).
• Internal Padding: 20px to 32px depending on viewport and data density.
• Header: Embedded browser chrome bar (three control dots + URL slug) or clean docket category banner.

Inputs & Lead Fields

• Style: Minimum height 46px, 12px rounded corners (rounded-xl), 1.5px solid border in #E4E4E7, background #FFFFFF.
• Focus: Border transitions directly to Ayris Red (#E61919) with no harsh outline glow.
• Labels: 13px semi-bold in #09090B with red asterisk for mandatory inputs.

Badges & Chips

• Style: Pill-shaped (rounded-full), padding 6px 14px, font-size 13px, font-weight 600.
• Accent Badge: Soft rose tint background (#FDEEEC) with deep crimson text (#B8140F).
• Status Live Pulse: 8px solid red dot with concentric pulsing ping animation.

Do's and Don'ts

Do:

• Do maintain extreme typographic hierarchy with tight tracking (-0.03em) on Archivo display headings.
• Do reserve Ayris Red (#E61919) strictly for primary conversion actions, conflict detection badges, and focus indicators.
• Do typeset dates, docket IDs, and file timestamps in JetBrains Mono (label token).
• Do pair crisp hairline borders (#E4E4E7) with deep ambient zinc drop shadows on floating card mockups.
• Do keep lead capture and demo inquiries strictly on /iletisim.

Don't:

• Don't use multi-color gradient text, rainbow highlights, or glowing neon outlines.
• Don't use generic blue corporate SaaS styling or unbranded generic templates.
• Don't clutter views with icon-stuffed bento boxes; let real case file structures and legal workflows lead.
• Don't use colored or tinted drop shadows under buttons or cards.
• Don't place the full contact form on the home page.