# Outlex v2 Component Grammar Cheat-Sheet
**Direction B — Precision + Atmosphere**
Extracted from the approved dark mockup (`direction-b-precision-atmosphere.html`) and light mockup (`direction-b-light.html`).
All CSS references `--ox-*` tokens from `tokens-v2.css`. Copy exact recipes — do not derive from taste.
---
## (a) Elevated Card — Dark + Light
Both themes share identical structure. Shadow/highlight values are the only theme-specific variables.
```css
/* ---- DARK ---- */
.card-dark {
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);
border-radius: var(--ox-radius-lg); /* 12px */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08), /* Linear inset-highlight signature */
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);
position: relative;
transition:
transform var(--ox-enter) var(--ox-ease),
box-shadow var(--ox-enter) var(--ox-ease),
border-color var(--ox-enter) var(--ox-ease);
}
.card-dark:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,0.12);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 2px 4px rgba(0,0,0,0.50),
0 8px 24px rgba(0,0,0,0.45),
0 20px 60px rgba(0,0,0,0.35);
}
/* ---- LIGHT ---- */
/*
* Page bg = warm cream oklch(0.962 0.010 80deg) ≈ #F5F1EA.
* Cards stay pure white — the cream bg makes them POP rather than merge.
*/
.card-light {
background: linear-gradient(180deg, #FFFFFF, #FDFBF8); /* pure white → barely-warm white */
border: 1px solid var(--ox-border); /* oklch(0.86 0.015 80deg) ≈ #DCD5CA — visible */
border-radius: var(--ox-radius-lg);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95), /* strong inset on white against cream bg */
0 1px 2px rgba(45,38,28,0.07),
0 4px 10px rgba(45,38,28,0.08),
0 12px 32px rgba(45,38,28,0.09);
transition:
transform var(--ox-enter) var(--ox-ease),
box-shadow var(--ox-enter) var(--ox-ease),
border-color var(--ox-enter) var(--ox-ease);
}
.card-light:hover {
transform: translateY(-2px);
border-color: oklch(0.82 0.016 80deg); /* slightly darker border on hover */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
0 2px 4px rgba(45,38,28,0.08),
0 8px 24px rgba(45,38,28,0.11),
0 20px 60px rgba(45,38,28,0.10);
}
```
---
## (b) Primary Sage CTA Button
Identical gradient works on both dark and light backgrounds.
```css
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ox-space-2); /* 8px */
font-family: var(--ox-font-sans);
font-size: 14px;
font-weight: var(--ox-weight-medium); /* 500 */
letter-spacing: var(--ox-tracking-body); /* -0.01em */
padding: 10px 20px;
border: none;
border-radius: var(--ox-radius-md); /* 8px */
cursor: pointer;
text-decoration: none;
/* Sage gradient — the canonical CTA surface */
background: linear-gradient(180deg, #7BA081, #5F8266);
color: #F0EDE8; /* warm white — always this on sage */
/* 3D grammar: inset top edge + warm glow below */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
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),
background-color var(--ox-enter) var(--ox-ease);
}
.btn-primary:hover {
background: linear-gradient(180deg, #8BAD91, #6F9276);
color: #F5F2ED;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.30),
0 2px 4px rgba(0,0,0,0.35),
0 6px 20px oklch(0.60 0.10 150deg / 0.45);
transform: translateY(-1px);
}
.btn-primary:active {
transform: translateY(1px) scale(0.99);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.15),
0 1px 2px rgba(0,0,0,0.4),
0 2px 8px oklch(0.60 0.10 150deg / 0.20);
}
```
---
## (c) Secondary Button — Dark / Light Variants
```css
/* ---- DARK ---- */
.btn-secondary-dark {
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
color: var(--ox-fg-secondary);
padding: 10px 20px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--ox-radius-md);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 1px 3px rgba(0,0,0,0.25);
}
.btn-secondary-dark:hover {
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
color: var(--ox-fg-primary);
border-color: rgba(255,255,255,0.16);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 2px 8px rgba(0,0,0,0.35);
}
/* ---- LIGHT ---- */
.btn-secondary-light {
background: linear-gradient(180deg, #FFFFFF, #F8F6F3);
color: var(--ox-fg-secondary);
padding: 10px 20px;
border: 1px solid var(--ox-border-subtle);
border-radius: var(--ox-radius-md);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.90),
0 1px 2px rgba(40,35,30,0.05),
0 2px 6px rgba(40,35,30,0.04);
}
.btn-secondary-light:hover {
background: linear-gradient(180deg, #FFFFFF, #F4F2EE);
color: var(--ox-fg-primary);
border-color: oklch(0.82 0.016 80deg);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
0 2px 8px rgba(45,38,28,0.09);
}
/* Shared active state */
.btn-secondary-dark:active,
.btn-secondary-light:active {
transform: scale(0.97);
}
```
---
## (d) Chip / Citation Chip
**Linear-style dot-chip grammar (both themes):**
- Chip surface = neutral, one step above ground
- Border = `rgba(255,255,255,0.10)` dark / `var(--ox-border)` ≈ `oklch(0.86 0.015 80deg)` light
- Label text = `var(--ox-fg-secondary)` — NEVER coloured
- Colour lives ONLY in the 4–5px leading dot
- Dot palette: terracotta = HIGH/overdue · amber = needs-review/pending · sage = ready/done · teal (`#54D6A4` at 70% opacity) = AI/citation
```css
/* ---- BASE CHIP (Linear-style neutral — both themes) ---- */
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--ox-font-mono);
font-size: var(--ox-text-chip); /* 11px */
font-weight: var(--ox-weight-medium); /* 500 */
letter-spacing: var(--ox-tracking-caps); /* 0.09em */
text-transform: uppercase;
border-radius: var(--ox-radius-sm); /* 4px */
padding: 3px 8px;
/* DARK: neutral surface one step above ground */
background: linear-gradient(180deg,
rgba(255,255,255,0.06),
rgba(255,255,255,0.03)
);
color: var(--ox-fg-secondary); /* label is ALWAYS neutral — no colour */
border: 1px solid rgba(255,255,255,0.10);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 1px 2px rgba(0,0,0,0.25);
transition:
transform var(--ox-enter) var(--ox-ease),
box-shadow var(--ox-enter) var(--ox-ease),
border-color var(--ox-enter) var(--ox-ease);
}
.chip:hover {
border-color: rgba(255,255,255,0.18); /* border brightens on hover */
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 2px 6px rgba(0,0,0,0.30);
}
/* LIGHT theme override */
[data-theme="light"] .chip {
background: linear-gradient(180deg, #FFFFFF, #FDFCFA);
color: #4A4641; /* fg-secondary light */
border-color: var(--ox-border); /* oklch(0.86 0.015 80deg) — strengthened */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
0 1px 2px rgba(45,38,28,0.07);
}
[data-theme="light"] .chip:hover {
border-color: oklch(0.82 0.016 80deg); /* slightly darker on hover */
}
/* Dot pseudo-element — shared */
.chip::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
/* ---- HIGH / OVERDUE — terracotta dot ---- */
.chip-high::before {
background: oklch(0.70 0.15 28deg);
box-shadow: 0 0 4px oklch(0.70 0.15 28deg / 0.60);
}
/* ---- NEEDS REVIEW / PENDING — amber dot ---- */
.chip-review::before {
background: oklch(0.78 0.14 75deg);
box-shadow: 0 0 4px oklch(0.78 0.14 75deg / 0.60);
}
/* ---- READY / DONE — sage dot ---- */
.chip-ready::before {
background: oklch(0.75 0.09 150deg);
box-shadow: 0 0 4px oklch(0.75 0.09 150deg / 0.60);
}
/* ---- AI / CITATION — teal dot ---- */
.chip-ai::before,
.citation-chip::before {
background: rgba(84, 214, 164, 0.70); /* #54D6A4 at 70% */
box-shadow: 0 0 4px rgba(84, 214, 164, 0.50);
}
/* ---- CITATION CHIP (inline in AI response text) ---- */
/* Neutral surface, teal dot, neutral label — NO amber */
.citation-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--ox-font-mono);
font-size: 10.5px;
font-weight: 400;
color: var(--ox-fg-secondary); /* neutral — never amber */
background: linear-gradient(180deg,
rgba(255,255,255,0.06),
rgba(255,255,255,0.03)
);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--ox-radius-sm);
padding: 2px 8px;
cursor: pointer;
vertical-align: middle;
margin: 0 2px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
0 1px 2px rgba(0,0,0,0.20);
text-decoration: none;
transition: all var(--ox-enter) var(--ox-ease);
}
.citation-chip:hover {
border-color: rgba(255,255,255,0.20); /* border brightens — no colour change */
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 2px 6px rgba(0,0,0,0.25);
}
/* LIGHT theme citation chip */
[data-theme="light"] .citation-chip {
color: #4A4641;
background: linear-gradient(180deg, #FFFFFF, #FDFCFA);
border-color: var(--ox-border); /* strengthened ≈ #DCD5CA */
}
[data-theme="light"] .citation-chip:hover {
border-color: oklch(0.82 0.016 80deg);
}
```
---
## (e) Icon Container (IconBox)
**ONE-ACCENT-PER-ELEMENT RULE**: Icon containers are MONOCHROME. Container bg is neutral; icon stroke is `fg-secondary`. Severity/state lives in the row's dot chip only — never also in icon colour. A coloured icon + coloured label on the same element is a hard violation.
```css
/* ---- BASE ICON BOX (monochrome — both themes) ---- */
.icon-box {
width: 40px;
height: 40px;
border-radius: var(--ox-radius-lg); /* 12px — soft squircle feel */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--ox-enter) var(--ox-ease);
/* DARK: monochrome neutral container */
background: rgba(255,255,255,0.06);
color: var(--ox-fg-secondary); /* icon inherits — neutral, NOT coloured */
border: 1px solid rgba(255,255,255,0.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 1px 3px rgba(0,0,0,0.30),
0 4px 10px rgba(0,0,0,0.20);
}
.icon-box:hover {
transform: scale(1.1) translateY(-2px);
border-color: rgba(255,255,255,0.14);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
0 4px 8px rgba(0,0,0,0.40),
0 10px 24px rgba(0,0,0,0.30);
}
/* LIGHT theme override — warm-tinted container (NOT grey) */
[data-theme="light"] .icon-box {
background: linear-gradient(180deg, #F6F1E9, #EFE9DF); /* warm paper tone — biscuit/parchment */
color: #4A4641; /* fg-secondary light */
border: 1px solid rgba(45,38,28,0.08); /* warm dark border at low opacity */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.85),
0 1px 2px rgba(45,38,28,0.07),
0 3px 8px rgba(45,38,28,0.08);
}
/* Icon inside: always 18×18, stroke-width 1.5 */
.icon-box svg { width: 18px; height: 18px; stroke-width: 1.5; }
/*
* Accent icon-box variants are RESERVED for the CTA (sage) and explicit
* informational callouts (blue) — NOT for general AI/status differentiation.
* One accent per element max.
*/
/* Sage CTA variant — reserved for confirm/success action buttons */
.icon-box-sage {
background: linear-gradient(145deg, oklch(0.30 0.06 150deg), oklch(0.22 0.04 150deg));
color: oklch(0.80 0.09 150deg);
border-color: oklch(0.60 0.10 150deg / 0.30);
}
/* Blue informational variant — reserved for info callouts */
.icon-box-blue {
background: linear-gradient(145deg, oklch(0.28 0.08 270deg), oklch(0.20 0.06 270deg));
color: oklch(0.78 0.14 270deg);
border-color: oklch(0.57 0.15 270deg / 0.30);
}
/*
* icon-box-amber is REMOVED. Amber was the AI icon container colour.
* AI containers now use the neutral .icon-box base (rgba(255,255,255,0.06)).
* Severity/AI distinction lives in the adjacent dot chip, not the icon itself.
*/
```
---
## (f) AI / Lexi Bubble + Confidence Bar
**The Lexi mark symbol (`#ic-lexi`) must be defined once per HTML document alongside the other symbols.**
The `#ic-lexi` symbol uses `fill="currentColor"` — it inherits whatever `color` the parent element has.
For AI buttons and inline labels, it inherits text colour (monochrome). For avatars/card-label rows,
use `` (gradient version) at 14–18px.
```html
```
**ic-lexi usage:**
- AI buttons ("Generate", "Open with Lexi", "Ask Lexi"): `` — inherits button text colour (monochrome).
- Inline AI labels: same 13×14 usage, inherits surrounding text colour.
- Avatars / card label rows: use gradient `` at 14–18px instead.
- `ic-sparkles` is **BANNED** on all AI affordances. It may remain in the symbol set for non-AI decorative contexts only.
---
The canonical Lexi response surface is **neutral** — identical in structure to an elevated card.
No amber background. No amber border. No amber label colour. Teal dot is the AI accent.
```css
/* ---- LEXI RESPONSE BUBBLE (neutral — dark theme) ---- */
.lexi-bubble {
/* Same surface as elevated card — neutral, NOT amber-tinted */
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 */
border-radius: var(--ox-radius-lg); /* 12px — standard card, NOT asymmetric spine */
padding: 18px 20px;
font-size: 14px;
font-weight: 400;
color: var(--ox-fg-primary);
line-height: var(--ox-leading-loose); /* 1.75 — AI prose breathes */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08), /* inset highlight — card signature */
0 1px 3px rgba(0,0,0,0.30),
0 4px 16px rgba(0,0,0,0.20);
/* NO amber bloom. NO left-border spine. */
}
/* LIGHT theme */
[data-theme="light"] .lexi-bubble {
background: linear-gradient(180deg, #FFFFFF, #FDFBF8);
border-color: var(--ox-border); /* strengthened ≈ #DCD5CA */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
0 1px 2px rgba(45,38,28,0.07),
0 4px 10px rgba(45,38,28,0.08),
0 12px 32px rgba(45,38,28,0.09);
}
/* Inline emphasis in AI body text — neutral foreground weight, NOT coloured */
.lexi-bubble strong {
font-weight: var(--ox-weight-semibold); /* 600 */
color: var(--ox-fg-primary); /* foreground/ink colour — NOT amber */
}
/* Light: ink is #231F20 — same rule applies */
/* ---- LEXI HEADER ROW ---- */
.lexi-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: var(--ox-space-3); /* 12px */
}
/* Avatar: gradient mark at 14-18px (the sanctioned AI mark usage) */
.lexi-avatar {
width: 28px; height: 28px;
border-radius: var(--ox-radius-md); /* 8px */
background: var(--ox-surface-2);
border: 1px solid rgba(255,255,255,0.07); /* neutral border */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Inside lexi-avatar: */
/* Label row: LEXI + timestamp — both fg-muted, no amber */
.lexi-label {
font-family: var(--ox-font-mono);
font-size: 11px;
font-weight: var(--ox-weight-medium);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ox-fg-muted); /* muted neutral — NOT amber */
}
.lexi-timestamp {
font-family: var(--ox-font-mono);
font-size: 10px;
color: var(--ox-fg-muted);
margin-left: auto;
}
/* ---- PROCESSING / STREAMING CHIP ---- */
/* Neutral chip surface + pulsing teal dot + muted mono text */
.lexi-streaming-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--ox-radius-sm);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: var(--ox-fg-muted);
font-family: var(--ox-font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.lexi-streaming-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: #54D6A4; /* teal — AI accent dot */
animation: teal-pulse 1.2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes teal-pulse {
0%, 100% { opacity: 0.70; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* ---- CONFIDENCE BAR ---- */
/* 2px track, solid sage fill, mono fg-muted label */
.confidence-bar-wrap {
display: flex;
align-items: center;
gap: var(--ox-space-2);
flex: 1;
margin-top: var(--ox-space-2);
padding-top: var(--ox-space-3);
border-top: 1px solid var(--ox-border-subtle);
}
.confidence-bar-track {
flex: 1;
height: 2px; /* 2px — not 3px */
background: rgba(255,255,255,0.08); /* neutral track */
border-radius: 2px;
overflow: hidden;
}
.confidence-bar-fill {
height: 100%;
border-radius: 2px;
background: var(--ox-sage-500); /* SOLID sage — no sage→amber gradient */
transition: width 0.4s var(--ox-ease);
}
.confidence-label {
font-family: var(--ox-font-mono);
font-size: 9.5px;
letter-spacing: var(--ox-tracking-caps);
text-transform: uppercase;
color: var(--ox-fg-muted); /* fg-muted — not sage, not amber */
}
/* Example label text: "82% CONFIDENCE" or "CONFIANÇA 82%" */
```
---
## (g) Status Badges (Linear-style dot chips)
**The dot-chip is the canonical status pattern.** Colour lives only in the leading dot —
label text is always `fg-secondary` (neutral). Never coloured chip backgrounds or coloured label text.
Use `.chip` + `.chip-{variant}` from section (d) for all status chips.
For standalone inline badges (no dot, text only — e.g. SLA meta text beside a deadline):
use `fg-muted` colour directly on the text, not a chip container:
```css
/*
* SLA / deadline meta text — amber is allowed here as tiny inline warning text only.
* This is plain text, NOT a chip container.
* Example: "Due in 18h — Outlex Ltda."
*/
.meta-warning {
font-family: var(--ox-font-mono);
font-size: var(--ox-text-meta); /* 12px */
color: var(--ox-amber-500); /* amber ONLY for this tiny warning meta text */
letter-spacing: 0.04em;
}
/*
* For stat cards: at most ONE line of coloured meta (e.g. amber deadline text).
* Never: coloured icon + coloured number + coloured label + coloured chip all together.
* State = small dot in the corner chip. Icon, number, label = neutral.
*/
/* Stat card neutral icon box — number and label are fg colours, not accents */
.stat-card {
display: flex;
align-items: flex-start;
gap: var(--ox-space-3);
padding: var(--ox-space-4);
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);
border-radius: var(--ox-radius-lg);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 1px 3px rgba(0,0,0,0.30);
}
.stat-card-number {
font-family: var(--ox-font-sans);
font-size: 28px;
font-weight: var(--ox-weight-semibold);
color: var(--ox-fg-primary); /* foreground — NOT amber */
line-height: 1;
}
.stat-card-label {
font-family: var(--ox-font-mono);
font-size: var(--ox-text-meta);
color: var(--ox-fg-muted); /* muted — NOT coloured */
letter-spacing: var(--ox-tracking-caps);
text-transform: uppercase;
}
/* Lawyer notification count badge (filled — exception: this IS a coloured filled element) */
.badge-count {
min-width: 18px;
height: 18px;
background: oklch(0.55 0.18 28deg);
border-radius: var(--ox-radius-full);
font-size: 10px;
font-weight: var(--ox-weight-semibold);
color: white;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
font-family: var(--ox-font-mono);
}
```
---
## (h) Orb Backdrop
Three radial gradient orbs for ambient atmosphere. Zero layout impact — always behind content.
```css
/* Orb container */
.orbs {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0; /* content must be z-index: 1 */
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(var(--ox-orb-blur)); /* blur(120px) */
animation: orb-pulse var(--ox-orb-cycle) ease-in-out infinite;
}
/* DARK THEME orbs */
.orb-sage-dark {
width: 600px; height: 500px;
top: -100px; left: -200px;
background: radial-gradient(circle,
oklch(0.60 0.10 150deg / 0.18) 0%,
transparent 70%
);
animation-delay: 0s;
}
.orb-blue-dark {
width: 700px; height: 600px;
top: 100px; right: -250px;
background: radial-gradient(circle,
oklch(0.57 0.15 270deg / 0.14) 0%,
transparent 70%
);
animation-delay: 2.7s;
}
.orb-amber-dark {
width: 500px; height: 400px;
bottom: -50px; left: 30%;
background: radial-gradient(circle,
oklch(0.70 0.14 75deg / 0.10) 0%,
transparent 70%
);
animation-delay: 5.3s;
}
/* LIGHT THEME orbs — use same positions, reduced opacity */
.orb-sage-light {
background: radial-gradient(circle, rgba(107,143,113,0.14) 0%, transparent 70%);
}
.orb-blue-light {
background: radial-gradient(circle, rgba(48,106,239,0.08) 0%, transparent 70%);
}
.orb-amber-light {
background: radial-gradient(circle, rgba(196,148,50,0.10) 0%, transparent 70%);
}
@keyframes orb-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.08); }
}
```
---
## (i) Grain Overlay Snippet
Zero layout impact. Apply via `::after` on any surface element.
```css
/*
* The grain overlay is a fixed-position SVG feTurbulence noise layer.
* Always use pointer-events: none and z-index: 9999 (or above content z-index).
* DARK theme: mix-blend-mode: overlay, opacity: 0.04
* LIGHT theme: mix-blend-mode: multiply, opacity: 0.03
*/
.ox-grain::after {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
opacity: 1; /* per-theme blending handles visual weight */
mix-blend-mode: overlay; /* dark */
}
[data-theme="light"] .ox-grain::after {
mix-blend-mode: multiply;
/* Swap the SVG's internal rect opacity to 0.03 for light — or use a separate grain class */
}
/*
* LIGHT-SPECIFIC grain (opacity 0.03 baked into data URI):
*/
.ox-grain-light::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
}
```
---
## (j) macOS-Frame Product Screenshot Staging
For marketing hero and product showcase sections.
```css
/* Product frame container */
.product-frame-wrapper {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
/* The 3D-tilted frame */
.product-frame {
background: var(--ox-surface-1);
border: 1px solid var(--ox-border-subtle);
border-radius: var(--ox-radius-2xl); /* 16px */
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
0 40px 120px oklch(0.05 0.02 270deg / 0.80),
0 8px 40px oklch(0.05 0.02 270deg / 0.50);
/* Perspective tilt — creates 3D depth effect */
transform: perspective(1200px) rotateX(6deg) rotateY(-2deg);
transform-origin: center bottom;
transition: transform 0.6s var(--ox-ease);
}
/* Flatten on scroll / hover — use IntersectionObserver or :hover */
.product-frame:hover {
transform: perspective(1200px) rotateX(2deg) rotateY(-0.5deg);
}
/* Radial glow beneath — simulates light source on dark background */
.product-frame-glow {
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 80px;
background: radial-gradient(ellipse,
oklch(0.57 0.15 270deg / 0.25) 0%,
transparent 70%
);
filter: blur(20px);
pointer-events: none;
}
/*
* macOS chrome bar (fake title bar, optional):
* Place a 44px bar at top of .product-frame with three dots:
*/
.product-frame-chrome {
height: 44px;
background: oklch(0.14 0.012 270deg);
border-bottom: 1px solid var(--ox-border-subtle);
display: flex;
align-items: center;
padding: 0 16px;
gap: 8px;
flex-shrink: 0;
}
.chrome-dot {
width: 12px; height: 12px;
border-radius: 50%;
}
.chrome-dot-red { background: #FF5F57; }
.chrome-dot-yellow { background: #FEBC2E; }
.chrome-dot-green { background: #28C840; }
```
---
## (k) Outlex Mark — Symbol Usage
**Critical gotcha**: the symbol SVG container uses `width="0" height="0" style="position:absolute"` — NEVER `display:none`. `display:none` prevents the gradients from rendering in Safari and Firefox. The `width=0/height=0` approach keeps the SVG in the DOM without taking up layout space.
**Always define once as a symbol near the top of `` and reference everywhere via `