Legalic Design Systemv2.0

Crisp, professional legal OS.

This page documents the shared visual language for Legalic: cool slates, highly legible typography, and confident accents. Use it as the single source of truth for UI decisions.

Governance

Color tokens

Modern professional palette

A crisp slate base, deep ink foreground, and gold accents keep the UI focused and authoritative.

Background

Main canvas

--background

Foreground

Primary text

--foreground

Card

Surface panels

--card

Primary

Primary actions

--primary

Secondary

Secondary surfaces

--secondary

Accent

Highlights

--accent

Muted

Subtle fill

--muted

Border

Hairlines

--border

Destructive

Destructive state

--destructive

Typography

Legibility first

Fraunces leads headlines, while Inter provides maximum clarity for dense legal text.

The Legalic Signal

Display 1

The Legalic Signal

Display 2

The Legalic Signal

Heading

The Legalic Signal

Subhead

The Legalic Signal

Body

The Legalic Signal

Small

Page context

Context header

Establish page identity with a clear title, supporting metadata, and actions.

WorkspaceActivo

Expedientes

Visualiza casos, fechas clave y responsables sin perder contexto.

142 activos12 por vencer6 asignados hoy

Soft accents

Ambient surfaces

Soft tints support informative surfaces like empty states or highlighted panels.

Sage SoftAccent surface

Sky SoftAccent surface

Amber SoftAccent surface

Teal SoftAccent surface

Terracotta SoftAccent surface

Components

Reusable building blocks

Consistent controls reinforce trust and speed through repetitive tasks.

Buttons

Try these buttons

Badges

ActivoBorradorRevisiónVencido

Inputs

Navegación lateral

Navegación principal

Una barra lateral colapsable proporciona cambio de contexto de alto nivel utilizando tokens especializados.

Estado expandido

Estado colapsado

Fondo de superficiebg-sidebar

Elemento activobg-sidebar-primary

Interacción hoverhover:bg-sidebar-accent

Navigation patterns

Tabs provide fast switching between related legal artifacts.

Show case highlights, involved parties, and key milestones at a glance.

Data surfaces

Use metric cards and compact lists for at-a-glance status.

Open matters

142

+12 this week

Alerts triaged

96%

Median response: 14 min

Recent activity

New filing: Martinez vs. Rivera
Alert delivered: SCJN ruling update
Client added: Ortega Holdings

Forms & states

Field behaviors

Inputs should feel calm, with clear focus and validation signals.

Default

Use sentence case labels and concise helper text.

Focused

Disabled

Error state

Please enter a valid email address.

Textarea

Feedback & loading

Status communication

Keep users informed with subtle progress and contextual alerts.

Syncing docket updates

QueuedSynced

Skeleton

Alert banners

Filing reminder sent to the team.

Pending response: 3 items need review.

Upload failed. Retry or contact support.

Pagination

Mostrando 16 de 128 tareas

Pág.de 8

Selection controls

Choice & toggles

Use warm accent tones for selected states to keep interactions visible.

Switch

Alertas activas

Modo enfoque

Select

Data table

Structured lists

Use soft accents to highlight status without overpowering the grid.

Expediente	Cliente	Estado	Vence
SCJN 1482/24	Ortega Holdings	Activo	14 Ago
Amparo 552/23	Ramirez & Co	En revision	21 Ago
Mercantil 119/22	Lucero SA	En cola	30 Ago

Keep table density moderate and use badges for quick status scanning.

Overlays & menus

Layered interactions

Use overlays for quick actions without leaving context.

Lists & scroll

Dense information

Use scroll areas when lists exceed the available space.

Ramirez vs. OrtegaNew

SCJN Amparo 451/24In review

Gonzalez PartnershipActive

Labor dispute updateQueued

Compliance auditScheduled

IP portfolio reviewQueued

Regulatory follow-upIn review

Hearing prep: 08/14Active

Client onboardingNew

Keep lists short when possible. Use grouping and badges for rapid scanning.

Utilities

Command + dividers

Command menus and separators keep power features organized.

Command menu

Command dialog

Separators

Profile

Billing

Security

Skeleton states

Use multiple densities for card, list, and headline loading.

Global interactions

System-wide tools

Omni-search and global actions accessible from anywhere.