Component Playground

Precision + Atmosphere

Every component built directly from tokens-v2.css and GRAMMAR.md. Toggle dark/light at top-right. No lorem ipsum — real Outlex legal content throughout.

Outlex Ltda. · Direction B — approved 2026-06-10 · 1440px optimised

Buttons

Four semantic roles: primary sage CTA, secondary ghost-fill, ghost for low-hierarchy actions, destructive for irreversible operations. All states interactive — hover, active (press), disabled, loading.

Primary — Sage CTA
Default
Large
Small
Loading
Disabled
Icon Only
Secondary
Default
Small
Disabled
Ghost
Default
With icon
Disabled
Destructive
Default
Small
Disabled
Recipe — Primary CTA 
/* Sage gradient fill — canonical CTA */
.btn-primary {
  background: linear-gradient(180deg, #7BA081, #5F8266);
  color: #F0EDE8;                /* warm white on sage */
  padding: 10px 20px;
  border-radius: var(--ox-radius-md);  /* 8px */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),  /* inset highlight */
    0 1px 2px rgba(0,0,0,0.3),
    0 4px 16px oklch(0.60 0.10 150deg / 0.35);  /* sage glow */
  transition: transform var(--ox-press) ease, box-shadow var(--ox-enter) var(--ox-ease);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #8BAD91, #6F9276);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(1px) scale(0.99);
}

Inputs

Text, search, and textarea. Sage focus ring with 0 0 0 3px glow. Terracotta error state. Disabled at 45% opacity. All states functional.

Número de identificação fiscal português
Endereço de e-mail inválido
Campo preenchido automaticamente
⌘ K
Recipe — Field Input 
.field-input {
  background: linear-gradient(180deg, oklch(0.18 0.010 270), oklch(0.15 0.010 270));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--ox-radius-md);
  box-shadow: inset 0 1px 0 var(--ox-inset-highlight);
  transition: border-color var(--ox-enter), box-shadow var(--ox-enter);
}
.field-input:focus {
  border-color: oklch(0.60 0.10 150deg / 0.6);
  box-shadow: inset 0 1px 0 var(--ox-inset-highlight),
    0 0 0 3px oklch(0.60 0.10 150deg / 0.18);  /* sage glow ring */
}
.field-input.error {
  border-color: oklch(0.60 0.15 28deg / 0.6);
  box-shadow: inset 0 1px 0 var(--ox-inset-highlight),
    0 0 0 3px oklch(0.60 0.15 28deg / 0.15);
}

Cards

Four elevation levels. Dark: lightness-lift. Light: shadow-expressed via warm-tinted multi-layer. 1px inset white top highlight (Linear signature) on all elevated cards. Hover: translateY(-2px) + stronger shadow.

Elevation 1 — Panel
CNPD · Parecer 2/2024
Orientações sobre subcontratação de tratamento de dados pessoais.
Elevation 2 — Card
Art. 28.º RGPD
Responsável pelo tratamento e subcontratante. Controlo de conformidade.
Elevation 3 — Hover lift
Acordo de Assessoria
Outlex Ltda. × Fundação para a Ciência e a Tecnologia. Art. 5.º, n.º 1.
Elevation 4 — Float / Modal
DGSI · Ac. STJ
Acórdão do STJ, proc. 4521/18.0T8PNF.P1.S1, de 12-03-2024.
Stat block variant
Documentos
247
+12 esta semana
Consultas Lexi
1.4k
3 em análise
Contrapartes
18
2 pendentes revisão
Recipe — Elevated Card (Dark) 
/* Dark — gradient + inset highlight + warm shadow stack */
.card {
  background: linear-gradient(180deg, oklch(0.21 0.012 270), oklch(0.18 0.012 270));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--ox-radius-lg);  /* 12px */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),  /* Linear inset-highlight */
    0 1px 2px rgba(0,0,0,0.40),
    0 4px 16px rgba(0,0,0,0.35),
    0 12px 40px rgba(0,0,0,0.25);
}
.card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
}

Chips & Badges

Status chips: neutral surface + border, colour expressed only in the 4–5px leading dot (Linear-style). Citation chips: neutral surface + teal dot (AI accent). Filter pills. Badge variants for counts and SLA states. Amber = warning/deadline dots only — NEVER on AI/Lexi surfaces.

Status chips
Pronto Em revisão Alta prioridade RGPD Art. 28 Aguarda advogado Prazo excedido
Citation chips (inline AI output)
Nos termos do RGPD Art. 28.º, n.º 3 e da decisão da CNPD, o subcontratante deve garantir a confidencialidade dos dados tratados. O acórdão do STJ Proc. 4521/18.0T8PNF esclarece que tal obrigação subsiste após a cessação do contrato.
Filter pills
Todos Contratos Regulamentos Jurisprudência Contrapartes
Badges
Conforme Pendente Urgente Informação 7 12
Recipe — Status Chip (Sage/Ready) 
.chip {
  font-family: var(--ox-font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--ox-radius-sm);  /* 4px */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.25);
}
.chip::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
}
.chip-ready {
  background: linear-gradient(180deg, oklch(0.60 0.10 150deg / 0.20), oklch(0.60 0.10 150deg / 0.12));
  color: oklch(0.80 0.09 150deg);
  border: 1px solid oklch(0.60 0.10 150deg / 0.35);
}
.chip-ready::before {
  background: oklch(0.75 0.09 150deg);
  box-shadow: 0 0 4px oklch(0.75 0.09 150deg / 0.60);  /* subtle glow */
}

Icon System

Lucide at stroke-width 1.5. Defined once as SVG symbols, referenced via <use href="#id">. NEVER display:none on the symbol container. Standard sizes: 16px inline, 18px in icon boxes, 20px in nav. Icon containers in list/stat rows: monochrome (.icon-box-mono). Severity lives in the row's dot chip, never in icon colour.

Icon containers — semantic accent + monochrome base
Sage / success
Blue / info
Amber / warning
Mono / AI, lists
Base
Document
Users
Cases
Hub
Sizes (inline, no container)
12px
14px
16px inline
18px box
20px nav
24px hero
Semantic color roles
fg-muted (idle)
fg-secondary
fg-primary (active)
sage (confirm)
amber (warning/deadline dots only)
blue (info)
terracotta (danger)
Outlex Mark — 6-petal asterisk
16px favicon
20px nav
32px card
48px glow
72px hero
Recipe — Symbol definition (never display:none) 
<!-- Define ONCE near top of <body> — width=0 height=0 style="position:absolute" -->
<svg width="0" height="0" style="position:absolute">
  <symbol id="ic-home" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="1.5"
    stroke-linecap="round" stroke-linejoin="round">
    <!-- paths -->
  </symbol>
</svg>

<!-- Reference anywhere: -->
<svg width="18" height="18"><use href="#ic-home"/></svg>

/* Color via semantic token ONLY (never hardcoded hex): */
color: var(--ox-fg-muted);  /* idle */
color: var(--ox-fg-primary);  /* active */
color: var(--ox-amber-500);  /* warning / deadline dots only — NOT AI/Lexi */

Lexi / AI Grammar

Neutral grammar — 2026-06-11. Lexi is represented by the Outlex gradient mark, not sparkles. AI card = neutral elevated card (no amber tint, no coloured border). Confidence bar: solid sage, 2px. Citation chips: neutral + teal dot. Body text: fw600 in fg-primary. Anatomy fully annotated.

O contrato de subcontratante celebrado com a nossa empresa de TI cumpre os requisitos do Art. 28.º do RGPD? Precisamos de uma cláusula de confidencialidade específica?
Lexi agora

Com base na análise do documento, o contrato de subcontratante cumpre parcialmente os requisitos do Art. 28.º, n.º 3 do RGPD RGPD Art. 28.º§3. Identifico três lacunas:

1. A cláusula 5.2 não especifica a finalidade limitada do tratamento conforme exigido pela alínea a). O CNPD esclareceu esta obrigação no Parecer 2/2024 CNPD.

2. Falta uma cláusula de eliminação ou devolução de dados após o término do serviço (alínea g)). O acórdão Ac. STJ 4521/18 é jurisprudência relevante aqui.

82% confiança
Lexi há 2 min

Quanto à cláusula de confidencialidade: é obrigatória ao abrigo do Art. 28.º, n.º 3, alínea b). Recomendo uma redação que inclua (i) a identificação das pessoas autorizadas, (ii) a natureza da obrigação — contratual ou legal — e (iii) a subsistência da obrigação após a cessação. Posso redigir uma proposta de cláusula.

94% confiança
Anatomy annotations
lexi-header: avatar + label + timestamp lexi-bubble: neutral elevated card, surface-1 gradient, no amber citation-chip: teal dot 4px + mono 10.5px, neutral surface confidence-bar: solid sage-500, 2px track, neutral label streaming-cursor: blink 0.9s, fg-muted lexi-action-btn: 28×28, ghost, 6px radius
Recipe — Lexi Bubble + confidence bar (neutral grammar) 
.lexi-bubble {
  background: linear-gradient(180deg, oklch(0.21 0.012 270deg), oklch(0.18 0.012 270deg));
  border: 1px solid rgba(255,255,255,0.07);  /* neutral card border — NO amber spine */
  border-radius: 4px 14px 14px 4px;
  line-height: 1.75;
  /* No pulse animation */
}
.lexi-bubble strong { font-weight: 600; color: var(--ox-fg-primary); }

/* Confidence bar: solid sage, 2px */
.confidence-bar-track {
  height: 2px; background: rgba(255,255,255,0.08);
}
.confidence-bar-fill {
  background: var(--ox-sage-500);  /* solid — no amber gradient */
  transition: width 0.4s var(--ox-ease);
}

/* Citation chip: neutral + teal dot */
.citation-chip::before {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(84,214,164,0.70);  /* #54D6A4 teal at 70% */
}

Tables

Legal Hub document rows. Mono column headers in uppercase. Hairline dividers. Hover reveals row actions. Date + document type in monospace. Group headers for clustering.

Documento Tipo Ref. / Origem Data Estado
Contratos de subcontratante 4
Contrato TI Subcontratante — AWS EMEA
Outlex Ltda. · PDF · Art. 28.º RGPD
DPA AWS-DPA-PT-2024-003 12 Mar 2024 Conforme
Acordo de Processamento de Dados — Salesforce
Outlex Ltda. · PDF · RGPD Cap. IV
DPA SFC-EU-2023-087 7 Nov 2023 Em revisão
Contrato Subcontratante — Infraestrutura Cloud PT
Outlex Ltda. · DOCX · Art. 28.º, 29.º RGPD
DPA INFRA-PT-2024-012 3 Jun 2024 Urgente
Jurisprudência 2
Acórdão STJ — Proc. 4521/18.0T8PNF.P1.S1
Supremo Tribunal de Justiça · DGSI
Acórdão 0006497.15.1TVPRT 12 Mar 2024 Indexado
Recipe — Document Row 
.doc-row {
  cursor: pointer;
  border-bottom: 1px solid var(--ox-border-subtle);  /* hairline divider */
  transition: background var(--ox-enter) var(--ox-ease);
}
.doc-row:hover { background: var(--ox-surface-1); }

/* Actions reveal on hover */
.doc-actions { opacity: 0; transition: opacity var(--ox-enter); }
.doc-row:hover .doc-actions { opacity: 1; }

/* Column header — mono, caps, muted */
.doc-table thead th {
  font-family: var(--ox-font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ox-fg-muted);
}

Empty States

Outlex mark as aperture backdrop (radial glow, 8–12% opacity). Display type + muted description + CTA. Mark appears in 3–4 sanctioned moments per screen.

Sem documentos

Importe contratos, regulamentos ou jurisprudência para começar a trabalhar com a Lexi.

Sem resultados

Não encontrámos documentos para "Art. 28 responsável". Tente outra pesquisa ou ajuste os filtros.

Toasts & Banners

Four semantic variants: warning (SLA), error, success, info. Floating cards with 4-layer shadow. SLA timer banner for lawyer notifications. All states live.

Toast notifications
SLA em risco — Outlex Ltda.
O prazo de resposta ao parecer CNPD expira em 2 horas. Atribuir a um advogado disponível.
Erro ao processar documento
O ficheiro "Acordo Art28 v2.pdf" não pôde ser analisado. Verifique o formato e tente novamente.
Contrato actualizado
As cláusulas de confidencialidade foram adicionadas e o documento foi arquivado com sucesso.
Novo regulamento indexado
O Regulamento (UE) 2024/1689 (AI Act) foi adicionado à biblioteca de jurisprudência.
SLA warning banner (inline)
Prazo de resposta ao advogado expira em breve 01:47:23

Command Palette

The glow moment. Triggered by ⌘K. Radial blue glow in box-shadow on dark. Static demo showing the anatomy: search row, grouped results, selected state, footer shortcuts.

Esc
Documentos
Contrato TI Subcontratante — AWS EMEA
DPA · Art. 28.º RGPD · 12 Mar 2024
↵
RGPD Art. 28.º — Subcontratante
Regulamento · EUR-Lex · 27 Abr 2016
Jurisprudência
Ac. STJ 4521/18.0T8PNF.P1.S1
DGSI · Confidencialidade pós-contratual
CNPD Parecer 2/2024
Subcontratação · Art. 28.º, n.º 1
Ações rápidas
Perguntar à Lexi sobre Art. 28
Abrir nova conversa com contexto
⌘ L
↑↓ Navegar ↵ Abrir ⌘K Fechar
Recipe — Command palette glow (dark) 
.cmd-palette {
  background: linear-gradient(180deg, oklch(0.21 0.012 270), oklch(0.17 0.012 270));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--ox-radius-xl);  /* 14px */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 16px rgba(0,0,0,0.50),
    0 20px 60px rgba(0,0,0,0.40),
    0 0 80px oklch(0.57 0.15 270deg / 0.12);  /* blue glow moment */
}

Token Reference

Quick reference for the most commonly used --ox-* tokens. Both themes shown. See tokens-v2.css for the full 11-step ramps and motion tokens.

Surface ladder
surface-0
surface-1
surface-2
surface-3
surface-4
Semantic colors
sage-500
CTA / success
amber-500
warning / deadline dots only
blue-400
Info / link
terracotta-500
Danger
Typography scale
Acordo de Assessoria 40px · Newsreader 400 · −0.025em
Cláusula 5.2 — Confidencialidade 20px · Inter 500 · −0.02em
O subcontratante deve garantir a confidencialidade dos dados ao abrigo do art. 28.º n.º 3 al. b) do RGPD. 14px · 450 · −0.01em
PROC. 4521/18.0T8PNF.P1.S1 · STJ · 12-03-2024 12px · JetBrains Mono 300
Quick-reference — common mistakes to avoid
Wrong Correct
display: none on symbol SVG width="0" height="0" style="position:absolute"
gap: 4px (gap-1) gap: 8px minimum (--ox-space-2)
color: #7BA081 inline color: var(--ox-sage-500)
font-weight: 700 on Newsreader max font-weight: 600 (--ox-weight-semibold)
background: black var(--ox-surface-0) / var(--ox-fg-primary)
Amber as a loud fill Amber for hairlines, dots, labels only
#ic-sparkles on AI / Lexi affordances #ic-lexi (monochrome mark) on buttons · #outlex-mark (gradient) on avatars/labels
stroke-width="2" on Lucide always stroke-width="1.5"

Do / Don't

Five live-rendered side-by-side pairs. The DON'T panel has a terracotta ✗ corner tag.

01 — Lexi / AI card surface
✓ Do — neutral surface + teal dot
Lexi

Reviewed the NDA — key points: liability cap at €500k, 3-year term.

✗ Don't — amber fill + sparkle on AI
✗
AI

Reviewed the NDA — key points: liability cap at €500k, 3-year term.

02 — Topbar chrome
✓ Do — warm translucent + hairline
Outlex
Matters Library
✗ Don't — flat pure white
✗
Outlex
Matters Library
03 — Chip grammar
✓ Do — colour in dot only, neutral label
Overdue Pending AI Reply
✗ Don't — fully coloured chip background
✗
Overdue Pending AI Reply
04 — Elevation recipe
✓ Do — warm layered shadow (GRAMMAR.md)

Elevated card — inset highlight + 3 shadow layers

✗ Don't — heavy pure-black drop-shadow
✗

No warmth — pure black box-shadow, no inset highlight

05 — Mixing token systems
✓ Do — --ox-* tokens on a NEW v2 surface
background: var(--ox-surface-1);
color: var(--ox-fg-primary);
border: 1px solid var(--ox-border);
✗ Don't — mix --ox-* into an unmigrated V7 surface
✗
background: var(--v7-cream-base);
color: var(--ox-fg-primary);
/* mixing v1 + v2 = broken surface */