An editorial, document-first system: Alegreya serif for headings, display, and legal body copy; a native system-sans stack for interface text; JetBrains Mono for citations, metadata, and eyebrows. Small, sober radii and a warm burgundy accent give the product the feel of a verifiable legal document rather than a consumer app.
src/components/brand/logo.tsx; guidelines in docs/living/BRAND.md). One burgundy per surface: where the logo is on the page, nothing else on that page is burgundy.horizontal · default · min 88px wide
stacked · square spaces · min 56px wide
mark · dense nav, avatars · min 16px
Sourced from the Redesign v2 mockups (oklch tokens, converted to HSL to match this app's existing oklch(var(--x)) convention). Never hardcode a hex value — tokens shift per theme (light/dark), high-contrast mode, and the three colorblind-safe variants.
Primary
oklch(var(--primary))
Primary CTAs, links, focus ring
Primary Foreground
oklch(var(--primary-foreground))
Text on primary surfaces
Secondary
oklch(var(--secondary))
Alternate paper surface
Destructive
oklch(var(--destructive))
Errors, critical findings
Background (Paper)
oklch(var(--background))
Warm off-white canvas
Foreground (Ink)
oklch(var(--foreground))
Near-black, blue-leaning ink
Muted
oklch(var(--muted))
Metadata backgrounds, subtle fills
Card / Surface
oklch(var(--card))
Panels, chat bubbles, table rows
Border
oklch(var(--border))
Rule lines, dividers
Input Border
oklch(var(--input))
Form field borders
Alegreya is a humanist serif designed for extended literary reading, with calligraphic letterforms that stay legible at small sizes. It gives the product the air of a legal document without sacrificing legibility, and is used for headings, display type, and legal clause quotes — not general body copy. Free under the SIL Open Font License.
Redesign v2 originally specified Bitstream Charter as the serif, and it shipped self-hosted under src/app/fonts/charter/. Alegreya replaced it on 2026-08-04: it is free under the OFL, it reads better at body sizes, and its two variable files span the whole 400–900 weight axis — so font-semibold (600) is a real weight rather than a synthesized one, where Charter only shipped static 400/700. The Charter files were deleted in the same change; no live reference to them remains.
Separately, the old blueprint's “Alegreya body + Belleza headings” pairing was never shipped. Alegreya returning here is a fresh decision, not a revival of that pairing: it is the serif/heading face, and Belleza is not used at all.
All three families — Alegreya, JetBrains Mono and Atkinson Hyperlegible — are self-hosted through next/font. Never add a Google Fonts <link> or @import: it would be render-blocking, and every face the product uses already ships from our own origin.
Atkinson Hyperlegible was specifically designed for improved readability and accessibility. It features increased character spacing, unique letterforms that reduce confusion between similar characters (like b/d, p/q), and enhanced contrast that helps with dyslexia, low vision, and general reading fatigue.
4.5:1 minimum contrast ratio for WCAG AA compliance
Specialized fonts with improved character distinction
Alternative color schemes for color vision deficiency
Optimized for low-light reading environments
14px - Legal fine print
16px - Compact reading
20px - Better readability (default)
24px - Comfortable reading
28px - Large text
32px - Extra large
36px - High visibility
40px - Maximum size
Try adjusting the font size above and observe how this text changes:
The quick brown fox jumps over the lazy dog. This pangram contains all letters of the alphabet and helps you evaluate character legibility at different sizes. Legal documents often contain complex terminology that benefits from larger, clearer typography.
4xl / Bold / -0.02em
3xl / Bold / -0.015em
2xl / Bold / -0.01em
xl / Semibold
lg / Semibold
base / Semibold
Large body text for prominent content and introductions that need to stand out from regular content.
lg / Normal / Relaxed
Regular body text for main content, paragraphs, and general reading material that forms the bulk of the content.
base / Normal / Normal
Small body text for secondary information, captions, and supporting details that complement the main content.
sm / Normal / Normal
Extra small text for fine print, metadata, and minimal supporting information.
xs / Normal / Normal
Rectángulo de 2px, borde de 1px, sin sombra. El primario descansa en tinta y sólo toma el acento al pasar el cursor — el acento se usa una vez por pantalla, nunca como decoración.
.btn-primary, .btn-ghost, .btn-danger — más action, exclusiva de la superficie de chat.action pinta los tokens --action* y pertenece sólo al chat (nueva consulta, enviar, recalcular, reintentar). Fuera de ahí compite con la tinta y el borgoña.
min-h, así una etiqueta que se parte crece en vez de recortarse.This is a basic card component with a header, description, and content area.
This card includes action buttons in the footer area.
+12% from last month
Advanced document insights
| Document | Type | Status | Confidence | Actions |
|---|---|---|---|---|
| Contract_Agreement_2024.pdf | Contract | Completado | 98.5% | |
| Legal_Brief_Client_A.docx | Legal Brief | En proceso | - | |
| Privacy_Policy_Draft.pdf | Policy | Completado | 94.2% | |
| Terms_of_Service_v2.pdf | Terms | Requiere revisión | 87.3% |
This comprehensive analysis examines the terms and conditions outlined in the Master Service Agreement dated January 15, 2024, between TechCorp Industries and Legal Services Group. The agreement encompasses multiple facets of service delivery, including but not limited to intellectual property rights, liability limitations, and termination clauses.
The intellectual property clause (Section 4.2) establishes clear ownership boundaries between pre-existing materials and work product created during the engagement. Notable provisions include the assignment of derivative works and the retention of moral rights where applicable under jurisdictional law.
Liability limitations are structured through a tiered approach, with general liability capped at the total contract value, while specific exclusions apply to consequential damages, lost profits, and business interruption. The indemnification provisions create mutual protection mechanisms for both parties in cases of third-party claims arising from the performance of services.
Based on industry standards and risk assessment protocols, we recommend clarification of the force majeure provisions in Section 7.3, particularly regarding pandemic-related disruptions and cybersecurity incidents. Additionally, the data protection clauses should be updated to ensure compliance with evolving privacy regulations across multiple jurisdictions.
Instructions: Read the above text in different theme and font combinations using the accessibility controls at the top of this page. Notice how the optimized fonts and contrast ratios affect your reading comfort and comprehension during extended reading sessions.
Professional, trust-first deletion interface designed specifically for legal professionals. Features comprehensive confirmation patterns, bulk operations, and accessibility compliance.
Comprehensive filtering system designed specifically for legal document analysis and management. These components provide powerful search and filtering capabilities while maintaining accessibility and professional appearance.
Autocomplete with legal document suggestions
Organized by legal document categories
Complex filtering with multiple criteria
Los componentes reales de /documents — components/library/*. Esta sección reemplazó una galería de componentes con efectos de cristal y tarjetas que nunca llegaron a producción; lo de aquí abajo es lo que el usuario ve hoy.
Encabezados ordenables con aria-sort, cada fila expandible a un panel de detalle. Sin efectos de cristal ni sombra — hairline y el token de radio, como el resto del sistema.
| Acciones | |||||
|---|---|---|---|---|---|
Codigo Civil Federal Federal · Códigos | Federal | Códigos | 1 ene 2024 | 64.1 MB | |
Laboral Estatal Estado de México · Leyes | Estado de México | Leyes | 1 ene 2024 | 32.5 MB | |
Reglamento Tributario Ciudad de México · Reglamentos | Ciudad de México | Reglamentos | 1 ene 2024 | 21.8 MB |
Conteo de resultados en vivo más los filtros activos como chips removibles individualmente.
Nombra los filtros activos para que el usuario entienda por qué no hay resultados, con una acción para deshacerlos.
Sin resultados
Ningún documento coincide con «término imposible» · Federal · Códigos
Mobile-first design approach with progressive enhancement across all screen sizes. Optimized for touch, responsive layout, and accessibility.