Buttons
Primary is a machined object — surface gradient, dark seat border, inset top light, letterpress label. Secondary is glass in the theater, white machined on paper (one class, themed automatically). Ghost and destructive keep the flat grammar; nothing there needed elevating.
Specimen row only — five primaries side by side to catalogue every state. On a live surface the color law holds: never two primary CTAs in one viewport.
Recipe — Machined primary (GRAMMAR-v3 §3, §9d)
.btn-primary { background: var(--ox-btn-primary-bg); /* #84AA8B→#5E8065→#527258 */ border: 1px solid var(--ox-btn-primary-border); border-radius: 11px; /* 9999px for --pill */ color: var(--ox-btn-primary-fg); text-shadow: var(--ox-btn-letterpress); box-shadow: var(--ox-btn-primary-shadow); /* inset top light + inset bottom shade + seat + glow */ transition: transform 180ms cubic-bezier(0.34,1.56,0.64,1), filter 180ms ease, box-shadow 180ms ease; } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: var(--ox-btn-primary-shadow-hover); } .btn-primary:active { transform: translateY(1px); filter: brightness(0.94); } /* Secondary — one class, remaps per theme via the alias */ .btn-secondary { background: var(--ox-btn-secondary-bg); /* dark: glass · light: machined-light */ backdrop-filter: blur(12px); border: 1px solid var(--ox-btn-secondary-border); box-shadow: var(--ox-btn-secondary-shadow); }
Inputs
Text, search, and textarea. Sage focus ring with a 3px glow. Terracotta error state. Disabled at 45% opacity.
Recipe — Field input
.field-input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--ox-radius-md); box-shadow: inset 0 1px 0 var(--ox-inset-highlight); } .field-input:focus { border-color: var(--input-border-focus); box-shadow: inset 0 1px 0 var(--ox-inset-highlight), 0 0 0 3px oklch(0.60 0.10 150deg / 0.18); }
Cards
Four elevation levels. Dark: lightness-lift. Light: shadow-expressed, warm-tinted. A 1px inset top highlight on every elevated card. Hover: translateY(-2px) + a stronger shadow.
Recipe — Elevated card (dark)
.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); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 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, colour only in the 4–5px leading dot — the same palette as the life-signal dots (--ox-dot-high/review/ready). Citation chips: neutral surface + teal dot. Amber = warning/deadline dots only, never a loud fill.
Recipe — Status chip (colour lives in the dot only)
.chip-spec { /* neutral surface + border, always */ background: var(--ox-surface-2); color: var(--ox-fg-secondary); border: 1px solid rgba(255,255,255,0.10); } .chip-spec::before { width: 5px; height: 5px; border-radius: 50%; } .chip-spec.is-ready::before { background: var(--ox-dot-ready); } /* same palette as the life signals */ .chip-spec.is-review::before { background: var(--ox-dot-review); } .chip-spec.is-high::before { background: var(--ox-dot-high); }
Icon System
Lucide at stroke-width 1.5. Defined once as SVG symbols, referenced via <use href="#id">. Severity lives in the row's dot chip, never in icon colour. Icon containers in list/stat rows stay monochrome.
Lexi / AI Grammar
Lexi is the Outlex gradient mark, not sparkles. AI bubbles are neutral elevated cards — no amber tint, no coloured border. Colour appears only where it means something alive: the teal pulse dot, a typed verdict with its caret, and the gradient confidence ring.
Recipe — Life signals (GRAMMAR-v3 §1, §9e)
/* Teal pulse — AI working */ .dot-label--live::before { background: var(--ox-life-teal); /* #54D6A4 */ animation: ox-teal-pulse 1.2s ease-in-out infinite; } /* Typed verdict caret */ .caret { width: 7px; height: 15px; background: var(--ox-fg-primary); animation: ox-caret 1.1s steps(1) infinite; } /* Confidence ring — r42, circumference 264, dashoffset = 264 × (1 − pct) */ <circle r="42" stroke="var(--ox-ring-track)" stroke-width="7"/> <circle r="42" stroke="url(#oxg-ring)" stroke-width="7" stroke-linecap="round" stroke-dasharray="264" stroke-dashoffset="{264*(1-pct)}" transform="rotate(-90 48 48)"/> /* gradient stops: #306AEF @0.35 → #54D6A4 @1.0 */
Tables
Legal Hub document rows. Mono column headers, uppercase. Hairline dividers. Hover reveals row actions. Dates and references in monospace.
| Documento | Tipo | Ref. / Origem | Data | Estado | ||
|---|---|---|---|---|---|---|
| Contratos de subcontratante 4 | ||||||
Contrato TI Subcontratante — AWS EMEA |
DPA | AWS-DPA-PT-2024-003 | 12 Mar 2024 | Conforme | ||
Acordo de Processamento de Dados — Salesforce |
DPA | SFC-EU-2023-087 | 7 Nov 2023 | Em revisão | ||
| Jurisprudência 2 | ||||||
Acórdão STJ — Proc. 4521/18.0T8PNF.P1.S1 |
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); } .doc-row:hover { background: var(--ox-surface-1); } /* Actions reveal on hover */ .doc-actions { opacity: 0; } .doc-row:hover .doc-actions { opacity: 1; }
Product Theater
Screenshots never ship flat. Frame → 8° tilt (hover flattens to 3°) → floor shadow → a 12s specular sheen → a living loop inside, never a static image → rising through a horizon.
02 — tilt 8° · hover → 3°
03 — floor shadow, blurred 12px
04 — sheen every 12s
05 — alive inside (~18s loop)
06 — rises through a horizon
Recipe — Frame (GRAMMAR-v3 §5)
.frame { transform: var(--ox-frame-tilt); /* perspective(1900px) rotateX(8deg) */ transition: transform 700ms cubic-bezier(0.23,1,0.32,1); } .frame:hover { transform: var(--ox-frame-tilt-hover); } /* rotateX(3deg) */ .frame__inner { background: var(--ox-frame-bg); border: 1px solid var(--ox-frame-border); box-shadow: var(--ox-frame-shadow); } .frame__sheen span { background: var(--ox-sheen); animation: ox-sheen var(--ox-sheen-cycle) ease-in-out infinite; } .frame__floor { background: var(--ox-frame-floor); filter: blur(12px); }
Empty States
The Outlex mark as an aperture backdrop — radial glow at 8–12% opacity. Display type + muted description + one CTA. A sanctioned moment, not decoration.
Importe contratos, regulamentos ou jurisprudência para começar a trabalhar com a Lexi.
Não encontrámos documentos para "Art. 28 responsável". Tente outra pesquisa.
Toasts & Banners
Four semantic variants — warning, error, success, info — floating cards with a four-layer shadow. An SLA timer banner for lawyer notifications, amber only on the timer digits.
Command Palette
The glow moment. Triggered by ⌘K. A radial blue glow in the box-shadow on dark. Search row, grouped results, selected state, footer shortcuts.
Recipe — Command palette glow (dark)
.cmd-palette { background: linear-gradient(180deg, oklch(0.21 0.012 270), oklch(0.17 0.012 270)); border-radius: var(--ox-radius-xl); 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
The foundation tokens (colour, spacing, radius, type) plus the Gravity layer (scene, machined controls, life signals, motion cycles). See tokens-v2.css and tokens-v3-gravity.css for the full ramps.
CTA / dot-ready
warning / dot-review
danger / dot-high
AI pulse — always animated live
7s · phrase sweep
12s · frame sweep
18s · demo loop
4s · mark glow
| Wrong | Correct |
|---|---|
| transition: all ... | explicit properties — transform, box-shadow, color… |
| gap: 4px (gap-1) | gap: 8px minimum (--ox-space-2) |
| a second primary CTA in view | one machined primary per viewport (color law) |
| redeclaring @keyframes ox-shine / ox-sheen | load tokens-v3-gravity.css once — canonical, never redeclared |
| font-weight: 700 on the display font | max weight 400 for display, 600 for body |
| #ic-sparkles on AI affordances | #ic-lexi (mono) on buttons · #outlex-mark (gradient) on avatars |
Do / Don't
Five live-rendered pairs. The Don't panel carries a terracotta ✗ corner tag.
Reviewed the NDA — liability cap at €500k, 3-year term.
Reviewed the NDA — liability cap at €500k, 3-year term.
Elevated card — inset highlight + 3 shadow layers
No warmth — pure black box-shadow, no inset highlight
border-radius: 11px;
/* mixing legacy + --ox-* = broken surface */