IMTDESIGN.md alpha

IMT reads as editorial cinema with an amethyst signature — a premium, sober researcher's surface, not a generic course-seller landing page. The canvas is closer to a cinematographer's dark stage than a marketing template: amethyst-black (#15121C — never pure black, the warmth is on purpose), soft amethyst-white type (#E7E0F0), and a single jewel accent (amethyst #7C4FB0 / core #6A3FA0) reserved for focus rings, primary actions, the gem motif, and the soul of the brand.

The fundamental brand decision: the amethyst is the alma, not a decoration. Marcos is from Ametista do Sul-RS and was an amethyst miner; the stone is in every scene of his (geodes in the office, purple light in his sales pieces). It is his origin (miner to professor) and it connects to the universal laws he teaches. The amethyst replaces the old teal-petrol color (a guess without foundation, now revoked — decision D-004). Every piece carries the amethyst as its through-line. Depth comes from soft amethyst-tinted borders, gentle shadows, and a warm purple glow — never from a generative-AI gradient.

The brand line — Você se transforma naquilo que você pensa. — is the tone in one sentence: declarative, second-person, calm, with the weight of a teacher. PT-BR by default; addresses the reader as você, never passive voice. Editorial rhetoric, not hype. The Marcos posture is researcher and educator; the copy never sells like a guru or a motivational coach.

Dark mode is the primary cinematographic context. Most sales pages, dashboards and social pieces are amethyst-black. Light mode (warm paper #EFEADC) is reserved for sustained reading — VSL transcripts, e-mail, books and editorial — where the off-white surface and serif body protect the 45-64 reader. Both modes share the same amethyst signature and the same component library; only the semantic token bindings flip.

Amethyst #7C4FB0 (core #6A3FA0) — the signature. The jewel violet of the stone Marcos mined. Reserved for focus rings, primary CTAs, glow halos, the gem motif, and the only saturated fill in most compositions. Never used decoratively. Never rendered as a purple-to-cyan AI gradient. The amethyst carries depth through its 15-step pre-computed alpha scale (2%, 3%, 4%, 5%, 6%, 8%, 10%, 12%, 15%, 20%, 25%, 40%, 50%, 75%, 90%) — adjust depth via alpha, do not invent new purples. Light tints amethyst-lo #B58FE6 (highlights on dark) and deep tones amethyst-hi #45286F / amethyst-deep #2E1B4D (shadow, pressed, fills) complete the family.

Cream #E7E0F0 (soft amethyst-white) — the default foreground type on amethyst-black. Slightly violet-tinted on purpose so type and canvas read as one cinematographic surface, never clinical. White #FFFFFF is reserved for type on amethyst fills and the brightest accents.

Paper #EFEADC — warm off-white reading surface, taken from Marcos's real office light. The body color for long reading on light mode. Ink #2A2433 (ink-paper) is the near-black body type on paper — a warm violet-black, not pure black, so it pairs with paper without reading clinical.

Surface tier ladder (cinematographic dark): void #0E0B14 (black-deep, sunk/overlay anchor) → background #15121C (canvas) → surface-panel #1C1826 (default panel) → surface-hover #251F33 (hover / popover) → surface-alt #2A2438 (alt panel) → surface-hover-strong #2E1B4D (pressed — amethyst-deep tint) → surface-console #1A1626 (data panel, faint amethyst tint). Components gain weight by surface shift plus a soft shadow, not by harsh elevation.

Foreground ramp on dark: cream #E7E0F0 (default) → ink-soft #B4A9C9 (secondary) → ink-muted #8C82A6 (metadata) → fg-faint #665C7E (faint).

Borders are amethyst-alpha, not solid: --border is rgba(181, 143, 230, 0.16) (1px hairline). --border-strong brightens to 0.34 for emphasis. --border-subtle softens to 0.09. Amethyst hairlines are the primary separator and adapt to every surface tier.

The 4 pillars are 4 semantic accents. One system, four colors; the product inherits its pillar accent (the logo enters as an element, the identity is always IMT — D-004). Cold to warm to warm to cold so the pillars stay unmistakable: Pillar 1 teal #1E8C7E (who are you — reprogramming, paradigms); Pillar 2 burnt amber #C2641F (what do you want — desire, goals); Pillar 3 gold #CDA62C (how money is made — wealth, prosperity); Pillar 4 amethyst #7C4FB0 (the universe ruled by laws — the soul). The big idea integrating all four is PROGRAMAÇÃO MENTAL. Keep the Pillar 2 amber dark and desaturated so it never bleeds into the Pillar 3 gold.

Destructive uses burnt amber #C2641F — warm, editorial, not medical red. The researcher posture is too sober for clinical red.

Semantic feedback. success maps to teal #1E8C7E, warning to amber #C2641F, info to amethyst #7C4FB0. Status dots use lighter values: status-success #1E8C7E, status-warning #E08A4D, status-error #C2641F, status-info #B58FE6.

Gold is money-only. gold #CDA62C (gold-dark #9C7A12) renders prices, wealth KPIs and Pillar-3 contexts. Never use gold as a motivational-stage flourish and never stack gold and amethyst as if they were siblings — gold is the Pillar 3 accent, amethyst is the brand soul.

Three faces, strict roles, no exceptions.

Fraunces (--fd) — variable opsz/wght serif, free Google Font. Used for hero, section titles, headings and the editorial display moments. Editorial premium and authorial; reads as "from a book / from an author," never "from a SaaS." Use the optical size high in titles (dramatic) and discipline WONK/SOFT low and controlled so it never turns cartoonish. Headlines are sentence case with tight negative tracking — IMT is not all-caps in display; the editorial register is the identity.

Newsreader (--fb) — variable optical serif, free Google Font, designed for long reading on screen. Body, sales pages, VSL, e-mail, books, PDF. It replaced Inter on purpose: Inter is the number-one "AI tell" of a generic template (alongside Roboto / Montserrat / Poppins). The serif+serif pairing of Fraunces and Newsreader is what makes the brand read as authorial.

IBM Plex Mono (--fm) — monospace, free Google Font. Prices (R$), offer numbers, data, eyebrow labels, timestamps. Mono is the data and label face, not a code-block afterthought.

Scale. Hero fluid clamp clamp(2.5rem, 6.6vw, 4.6rem) maxing near 74px. Display-1 around 58px, display-2 around 40px. Line-height 1.04–1.06, tight negative tracking -0.02em to -0.015em. Headings: h1 40px · h2 32px · h3 24px · h4 20px (Fraunces 600). h5 shifts to Newsreader 600 at 18px — the register moves from editorial display to UI heading. Body: body-lg 20px/1.62 (marketing prose / long reading); body 18px/1.62 (default — never below 16px); body-sm 16px/1.5 (dense UI). Meta/data (IBM Plex Mono): label 12px +0.09em UPPERCASE; eyebrow 11px +0.22em UPPERCASE; bracket 11px +0.13em UPPERCASE; mono 16px (prices and data); micro 10px +0.14em UPPERCASE.

Case discipline. Display and headings are sentence case, italic emphasis in amethyst-lo for the key word (` in Fraunces italic). Body sentence case. Nav, labels and eyebrows UPPERCASE in mono. The eyebrow is the brand signature: mono amethyst-lo, +0.22em, with unicode dividers (·, /). Example: EXTRAÍDO DO MARCOS REAL · NÃO INVENTADO, TREINAMENTO · PILAR 4 · LEIS DO UNIVERSO`.

Legibility for the 45-64 audience (the number-one factor, above the font itself): body minimum 18px (18-20px in long reading, never below 16); body weight 400-500, never Light; line-height 1.5-1.65; high contrast (warm paper on amethyst-black already satisfies this).

Social pieces of impact (black-and-white bold Instagram post/reel) use Fraunces Black/Bold, not the serif body — the serif vanishes at small sizes. The Instagram cue is one format, not the whole brand. Never use more than two type families. If Newsreader ever reads "too newspaper," Source Serif 4 (Google Fonts) is the only sanctioned body alternative.

Buttons. The primary button is amethyst fill (#7C4FB0 background, #FFFFFF text), 10px radius, 48px height, with a soft drop shadow 0 6px 20px rgba(124, 79, 176, 0.30). On hover it lifts translateY(-2px) and gains an amethyst glow halo 0 0 28px rgba(124, 79, 176, 0.35). Secondary: transparent background, cream text, amethyst hairline border (rgba(181, 143, 230, 0.34)); on hover fills with amethyst-12 and shifts text to white with amethyst-lo border. Ghost: text only, no border. Destructive uses burnt amber (#C2641F) — never red. Gold CTA (#CDA62C, dark text) appears only in money/Pillar-3 contexts. Site CTA is hero-scale: 62px height, 22px radius, generous mono label.

Cards. Dark panel (#1C1826), 14px radius, 24px padding, 1px amethyst hairline (rgba(181, 143, 230, 0.16)), no shadow at rest. On hover, background shifts to #2A2438 (surface-alt), the border brightens to rgba(181, 143, 230, 0.34), and a soft floating shadow 0 8px 24px rgba(8, 5, 14, 0.50) plus a -3px lift appear. Depth through soft surface, gentle shadow and amethyst tint — the cinematographic signature.

Inputs. Canvas background, 10px radius, 1px amethyst hairline border. Amethyst focus ring at 25% alpha + amethyst-lo border. Invalid state swaps text and border to burnt amber (never red). Disabled at 0.4 opacity.

Navigation. 74px height, amethyst-black background with backdrop-filter: blur(16px) (--glass-blur), amethyst hairline bottom border. Brand lockup is the gem motif plus the IMT wordmark in Fraunces. Nav links in IBM Plex Mono 500 +0.06em UPPERCASE at 12px. CTA button uses the same amethyst primary pattern at 48px height and 10px radius. Active states use soft pill backgrounds (amethyst-22), not hard slabs.

Editorial idioms — the brand's content components. eyebrow: amethyst-lo text in IBM Plex Mono +0.22em UPPERCASE with unicode dividers. gemstone: the amethyst geode panel (radial gradient #8B5FC4 → #6A3FA0 → #45286F → #211036) used as a hero / cover / avatar background. seal: a circular amethyst guarantee badge (the 30-day Risco Zero seal). These carry the editorial register and the gem soul.

Surfaces & cards. course-card, pricing-card, principle-card, reference-card. All soft-cornered, 1px amethyst hairline, no shadow at rest, floating shadow on hover. Pillar-accent variants use a 3-4px top border in the pillar color (teal / amber / gold / amethyst).

Data & feedback. Badges use pill geometry (IBM Plex Mono 11px +0.08em UPPERCASE, 999px radius). Prices render in IBM Plex Mono gold (#CDA62C). Alerts use a soft tinted strip with a colored icon disc (amethyst info, teal ok, amber warn). Progress: amethyst gradient fill on a pill track with a soft glow. KPI numbers render in Fraunces; deltas use the pillar/status colors.

Product-specific. gemstone-cover (course cover with gem motif), checkout-summary (price lines in mono gold, bonus in teal), sales-page-hero (amethyst-black with radial glow), editorial-prose (warm paper, drop-cap in amethyst-hi).

Editorial grid. Generous reading column. Cinematographic spreads.

Max content width 1200px, with a --gutter formula — max(1.75rem, calc((100% - 1200px) / 2 + 1.75rem)) — for automatic edge padding. Reading column caps at 66ch for sustained reading. Inline media at 880px.

Grid systems: single editorial column for sales pages and long reading; 2-column for pillar cards and pricing; 3-column for principle/KPI grids; 12-column fluid for dashboards. The hero leads with the amethyst radial glow (radial-gradient(110% 60% at 80% 0%, rgba(124,79,176,.3), transparent 55%)) bleeding from the top-right, evoking the office gem light — content sits above the glow, never inside it.

Spacing scale — 4/8px rhythm: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 128. Component-internal spacing uses 16px (--sp-4) and 24px (--sp-6); section gutters use 48–56px; page-level gaps use 56–96px.

Z-layers — canonical stack, never use arbitrary z-index. base: 0 → elevated: 1 → sticky: 10 → nav: 100 → dropdown: 200 → overlay: 300 → modal: 400 → toast: 500. Sticky nav at top with the glass blur.

Soft, cinematographic depth — not flat brutalism, not heavy drop-shadows. Depth is conveyed through:

1. Surface tiers — canvas → surface-panel → surface-hover → surface-alt → surface-hover-strong. A component gains weight by surface shift first.

2. Amethyst hairline borders — rgba(181, 143, 230, 0.16) hairline; brightens to 0.34 on hover/emphasis.

3. Soft warm shadows — three real elevation tiers tuned to amethyst-black: raised 0 2px 8px rgba(8,5,14,.40), floating 0 8px 24px rgba(8,5,14,.50), overlay 0 18px 50px rgba(8,5,14,.55). Shadows use the deep amethyst-black #08050E, never neutral black, so they stay warm.

4. Amethyst glow — the signature elevation idiom. --glow (rgba(124, 79, 176, 0.35)) used as focus halo, on primary CTAs on hover, and around the gem motif and the guarantee seal. Soft, never neon.

5. Modal overlay dim — rgba(14, 11, 20, 0.66). Warm amethyst-black overlay, not pure black.

6. Gradients are reserved. The canonical gradients are the amethyst radial hero glow and the gemstone radial (#8B5FC4 → #6A3FA0 → #45286F → #211036). Never the purple-to-cyan AI cliché. Never animated decoratively.

Do:

• Carry the amethyst (#7C4FB0) as the through-line of every piece — signature, focus ring, gem motif, primary CTA

• Use warm cream (#E7E0F0) for type on dark and warm paper (#EFEADC) for long reading — never clinical white

• Use ink (#2A2433) for body text on paper — never pure black (#000000)

• Keep body at 18px (18-20px in long reading), weight 400-500, line-height 1.5-1.65 for the 45-64 reader

• Let the accent equal the content's pillar (teal P1 / amber P2 / gold P3 / amethyst P4)

• Use gold (#CDA62C) only in money / wealth / Pillar-3 context — prices, KPIs, checkout

• Prefer amethyst hairline borders (rgba(181, 143, 230, 0.16)) and soft warm shadows for separation

• Use mono + unicode dividers (·, /) as editorial eyebrow labels in amethyst-lo +0.22em

• Address the reader in second person (PT-BR você), in the calm voice of a researcher and educator

• Use the 15-step amethyst alpha scale to adjust depth — do not invent new purples

• Keep Fraunces editorial: sentence case headlines, italic amethyst emphasis on the key word

• Show Marcos (photo/video) and the real signature objects (amethyst geodes, books) — he is part of the identity

• Use the canonical z-layer stack (base 0 → toast 500); arbitrary z-index is forbidden

Don't:

• Use teal-petrol (verde-petróleo) as a brand color — it is revoked (decision D-004)

• Use the purple-to-cyan AI gradient cliché — amethyst is solid cinematographic light, never a generative glow

• Use motivational-stage gold or any guru / hype flourish — Marcos is a researcher, not a coach

• Let the Pillar 2 amber go vibrant — keep it dark and desaturated so it never bleeds into the Pillar 3 gold

• Promise visually with hype — the posture is sober and premium

• Use red (#EF4444) as destructive — use burnt amber (#C2641F); red reads medical

• Use pure black (#000000) for the canvas or pure white (#FFFFFF) for the reading surface

• Add a third type family or swap Newsreader for Inter / Roboto / Montserrat / Poppins (the AI tells)

• Give each product its own brand or color — the identity is always IMT, the logo is just an element (D-004)

• Set Fraunces in all-caps display — the editorial register is sentence case

• Drop the eyebrow once a surface commits to it — keep the editorial mono register throughout

• Use the body serif (Newsreader) for impact social posts — use Fraunces Black/Bold; serif vanishes small

Fluid section spacing collapses from 96px → 56px → 44px as the viewport shrinks (.hero from 88px to 54px top padding). Container max 1200px with the --gutter margin formula. On mobile, single column with clamp(1rem, 4vw, 1.75rem) side padding. Type scale holds — body never drops below 16px, hero scales fluidly via clamp(2.5rem, 6.6vw, 4.6rem) and the editorial negative tracking holds at every breakpoint. Nav collapses to a hamburger; the amethyst CTA stays visible. Multi-column pillar/KPI grids collapse to one column under 640px. Breakpoints: 640 / 1024 / 1280. The amethyst hero glow scales with the viewport and never overpowers the content. Eyebrows shrink to 10px micro at small breakpoints but never disappear — the editorial register is always present.

Use WCAG AA contrast as a release gate. Cream #E7E0F0 on amethyst-black #15121C and ink #2A2433 on warm paper #EFEADC are the default accessible pairs. Amethyst #7C4FB0 is reserved as accent and focus color; avoid using amethyst as the only carrier of meaning (always pair with a text label or icon). For the 45-64 audience, legibility is the number-one accessibility factor: body at 18px+, weight 400-500, line-height 1.5-1.65, high contrast.

All interactive elements must be keyboard reachable, visibly focused (amethyst-lo ring with offset — box-shadow: 0 0 0 3px var(--background), 0 0 0 5px var(--amethyst-lo)), and at least 48px tall when used as primary tap targets. Focus rings use rgba(124, 79, 176, 0.50) to remain visible on dark, paper, and amethyst surfaces.

Respect reduced-motion preferences. The cinematographic easing cubic-bezier(0.2, 0.7, 0.2, 1) around 180–350ms is preferred for color, border, background, opacity, transform-lift and amethyst-glow transitions. Do not use parallax, autoplay motion, or motion that changes layout. Panel fade-ins, glow pulses and any ticker strips are decorative and MUST be paused under prefers-reduced-motion: reduce.

### Quick Color Reference

• Primary CTA: Amethyst #7C4FB0 on amethyst-black #15121C (48–62px height, 10–22px radius, soft glow)

• Brand accent: Amethyst #7C4FB0 (focus rings, glow halos, gem motif — never decorative, never AI gradient)

• Page background (dark): #15121C amethyst-black canvas

• Page background (light/reading): #EFEADC warm paper

• Card background (dark): #1C1826 surface-panel (14px radius, 1px amethyst hairline)

• Border: rgba(181, 143, 230, 0.16) — amethyst alpha hairline, not solid

• Body text on dark: Cream #E7E0F0 — never clinical white

• Body text on paper: Ink #2A2433 — never pure black

• Muted text: #8C82A6 (ink-muted) for mono labels and metadata

• Destructive: Burnt amber #C2641F (warm — replaces medical red)

• Money / prices: Gold #CDA62C in IBM Plex Mono (Pillar 3 only)

• Focus ring: rgba(124, 79, 176, 0.50) amethyst at 50% alpha

### Example Component Prompts

```

Build an IMT-style hero: amethyst-black #15121C background with a soft radial

amethyst glow rgba(124,79,176,.3) bleeding from the top-right. Fraunces 600

sentence-case headline ~clamp(2.5rem,6.6vw,4.6rem) with -0.02em tracking and an

italic amethyst-lo #B58FE6 emphasis word, Newsreader body at 20px/1.62 cream

#E7E0F0, amethyst #7C4FB0 primary CTA at 48px height 10px radius with a soft glow,

secondary button with rgba(181,143,230,0.34) hairline border. IBM Plex Mono eyebrow

"EXTRAÍDO DO MARCOS REAL · NÃO INVENTADO" in amethyst-lo +0.22em UPPERCASE above.

```

```

Build an IMT course card: surface-panel #1C1826 background, 14px radius, 1px

amethyst hairline rgba(181,143,230,0.16), no shadow at rest. Gemstone cover with

radial gradient #7C4FB0 → #45286F → #211036 and a rotated gem badge. On hover:

background shifts to #2A2438, border brightens to rgba(181,143,230,0.34), soft

floating shadow 0 8px 24px rgba(8,5,14,0.50) and a -3px lift. Title in Fraunces 600

24px, body in Newsreader 18px/1.62 cream, price "R$ 333" in IBM Plex Mono gold

#CDA62C, pillar badge "PILAR 4 · AMETISTA".

```

```

Build an IMT navigation bar: 74px height, amethyst-black background with

backdrop-filter blur(16px), amethyst hairline border-bottom. Brand: rotated gem

gradient mark + "IMT" wordmark in Fraunces 600 cream. Nav links in IBM Plex Mono

500 +0.06em UPPERCASE at 12px amethyst-lo on hover. CTA button amethyst #7C4FB0

with white text, 48px height, 10px radius, soft glow. Sticky at top, z-index 100.

```

```

Build an IMT editorial reading section: warm paper #EFEADC background, ink #2A2433

Newsreader body at 20px/1.7 (the inverse — the reading surface inside a dark page),

IBM Plex Mono eyebrow in amethyst-hi #45286F, Fraunces 600 headline, a drop-cap on

the first paragraph in amethyst-hi. No AI gradient. This is the long-reading moment

for VSL transcripts and books — calm, premium, authorial.

```

```

Build an IMT guarantee seal: circular 74px badge, radial gradient #B58FE6 → #6A3FA0

→ #45286F, white IBM Plex Mono micro text "RISCO ZERO · 30 DIAS", soft amethyst glow

0 0 26px rgba(124,79,176,.35), 2px white-alpha border. This is the brand's trust

signature for the Fluxo da Vida guarantee — the gem made into a seal.

```

### Iteration Guide

1. Amethyst is the soul, not the body color. If it appears more than once per screen as a saturated fill, reduce to one and use the 15-step alpha scale for everything else.

2. Body is Newsreader, headlines are Fraunces. Never reverse — Fraunces at 16px reads heavy (correct only at 20px+); Newsreader at 64px reads thin and undramatic.

3. Amethyst hairlines, not solid. rgba(181, 143, 230, 0.16) adapts to every surface tier. Never use a solid neutral as the system border.

4. Cards are surface-panel, not canvas. #1C1826 with 14px radius and a 1px amethyst hairline. Canvas (#15121C) is the page, not the surface.

5. Soft corners everywhere. 8px inputs, 10px buttons, 14px cards, 18–22px featured / hero CTAs, 999px pills. Cinematographic, not brutalist, not bubbly.

6. Cards have no shadow at rest. Surface shift + soft floating shadow + amethyst-tint border appear on hover. Reserve heavier shadows for overlays and modals; reserve the glow for focus, CTAs and the gem.

7. Amethyst stays solid on every surface. Same hex on dark, on paper, on amethyst. The alpha scale and the lo/hi tints are the only legitimate variation — never the AI gradient.

8. Editorial register is sentence case. Fraunces headlines are sentence case with one italic amethyst-lo emphasis word; only mono labels and eyebrows are UPPERCASE.

9. PT-BR researcher voice. Address the reader as você. Calm, premium, anti-hype. Never guru, never motivational-stage. No long em-dashes in brand copy.

10. Whitespace is editorial. Section padding 56–96px, max width 1200px, reading column 66ch. The grid is generous on purpose — premium is not density.

Use this file as the portable source of truth for IMT-style UI generation. It should work in any modern Next.js / React / Tailwind v4 / shadcn project without requiring repository-specific files.

Stack origin: Next.js / React / Tailwind CSS v4 / shadcn-ui compatible + Fraunces (Google) + Newsreader (Google) + IBM Plex Mono (Google). Source of truth: fundacao/marca/DESIGN.md (canonical tokens, extracted from 4 real Marcos videos / 48 frames) + fundacao/marca/brandbook.html (component reference).

Recommended setup: publish the frontmatter tokens as CSS custom properties, map semantic slots to Tailwind/shadcn theme tokens, load the three Google Fonts via ``, and keep component behavior aligned with the rules above.

Key shadcn/Tailwind mappings:

| imt-design.md token | Tailwind utility | Value |

|---------------------|-----------------|-------|

| colors.primary | bg-primary | #7C4FB0 (amethyst) |

| colors.foreground | text-foreground | #E7E0F0 (cream on dark) |

| colors.background | bg-background | #15121C (amethyst-black, dark default) |

| colors.card | bg-card | #1C1826 (surface-panel) |

| colors.border | border-border | rgba(181, 143, 230, 0.16) |

| colors.destructive | bg-destructive | #C2641F (burnt amber — NOT red) |

| rounded.lg | rounded-[14px] | 14px (cards) |

| rounded.md | rounded-[10px] | 10px (buttons, inputs) |

| rounded.full | rounded-full | 999px (pills, avatars) |

| shadows.glow | shadow-[0_0_28px_rgba(124,79,176,0.35)] | amethyst halo |

Critical CSS snippet (dark mode default):

```css

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500;1,9..144,600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {

/ IMT defaults to DARK (cinematographic) /

--background: #15121C;

--foreground: #E7E0F0;

--primary: #7C4FB0;

--primary-foreground: #FFFFFF;

--card: #1C1826;

--card-foreground: #E7E0F0;

--border: rgba(181, 143, 230, 0.16);

--ring: rgba(124, 79, 176, 0.50);

--destructive: #C2641F;

--radius: 14px; / cards /

--radius-md: 10px; / buttons / inputs /

--radius-full: 999px; / pills / avatars /

--glow: rgba(124, 79, 176, 0.35);

--font-display: 'Fraunces', Georgia, serif;

--font-body: 'Newsreader', Georgia, serif;

--font-mono: 'IBM Plex Mono', ui-monospace, monospace;

--hairline: 1px solid var(--border);

--gutter: max(1.75rem, calc((100% - 1200px) / 2 + 1.75rem));

}

.light {

/ Light reading overlay (VSL transcript / e-mail / book / editorial) /

--background: #EFEADC;

--foreground: #2A2433;

--card: #FFFFFF;

--card-foreground: #2A2433;

--primary: #6A3FA0;

--border: rgba(42, 36, 51, 0.14);

}

/ Amethyst alpha scale — the depth mechanism /

:root {

--amethyst-2: rgba(124, 79, 176, 0.02);

--amethyst-10: rgba(124, 79, 176, 0.10);

--amethyst-12: rgba(124, 79, 176, 0.12);

--amethyst-25: rgba(124, 79, 176, 0.25);

--amethyst-50: rgba(124, 79, 176, 0.50);

}

/ 4-pillar accents /

:root {

--p1: #1E8C7E; / teal — reprogramming / paradigms /

--p2: #C2641F; / amber — desire / goals /

--p3: #CDA62C; / gold — wealth (money context only) /

--p4: #7C4FB0; / amethyst — universal laws (the soul) /

}

/ Z-layer governance /

:root {

--layer-base: 0;

--layer-elevated: 1;

--layer-sticky: 10;

--layer-nav: 100;

--layer-dropdown: 200;

--layer-overlay: 300;

--layer-modal: 400;

--layer-toast: 500;

}

```

Component source root: fundacao/marca/brandbook.html (reference implementation). Regenerate command: none required — tokens are hand-curated in fundacao/marca/DESIGN.md, extracted from real Marcos footage (No Invention). Drift detection: compare this file against fundacao/marca/DESIGN.md and fundacao/marca/brandbook.html to surface token-level divergence between the canonical brand brain and this portable export.