Design System

{{ t.meta.byLabel }} Gabriel Moreira · @GabrielTechDesign · LinkedIn · gabrielmoreira.tech

React 19 + Vite Tailwind + shadcn/ui CSS variables por tenant react-i18next PT-BR / EN Recharts MediaPipe Face Landmarker Cloudflare Worker Supabase + RLS

brand.indigo{{ t.color.brandNote }}

50
#F0F2FB

100
#DDE1F6

200
#BCC3EE

300
#939EE2

400
#6C79D4

500
#4756C9

600
#3742A8

700
#2B3486

800
#232C6B

900
#171D46

neutral.slate{{ t.color.neutralNote }}

50
#F5F6FA

100
#EBEDF4

200
#D7DAE8

300
#B6BBD0

400
#9198B5

500
#6A7192

600
#4E5573

700
#3C4262

800
#262C45

900
#10142B

#0F7A4A · {{ t.color.risk.lowNote }}

#B06A00 · {{ t.color.risk.reviewNote }}

#B3261E · {{ t.color.risk.highNote }}

Libre Franklin 700 · 44/44 · -0.032em
{{ t.type.use.display }}

Libre Franklin 700 · 32/35
{{ t.type.use.h1 }}

Libre Franklin 600 · 24/28
{{ t.type.use.h2 }}

Geist 600 · 19/25
{{ t.type.use.h3 }}

Geist 400 · 16/26
{{ t.type.use.bodyLg }}

Geist 400 · 14/22
{{ t.type.use.body }}

Geist 500 · 13/18
{{ t.type.use.label }}

Geist 600 · 11/13 · 0.1em
{{ t.type.use.overline }}

2.860.417

Geist 600 · tabular-nums
{{ t.type.use.number }}

sm 4

md 6

lg 12

pill

{{ t.comp.field.consentBio }} {{ t.comp.field.required }} {{ t.comp.field.consentMkt }} {{ t.comp.field.optional }}

{{ t.comp.chip.low }} {{ t.comp.chip.review }} {{ t.comp.chip.high }} {{ t.comp.chip.unknown }} {{ t.comp.chip.opened }}

{{ t.comp.chip.scoreLabel }}84 / 100

0 {{ t.comp.chip.auto }}3070100

{{ t.comp.num.checks }} 1.284 {{ t.comp.num.checksDelta }}

{{ t.comp.num.losses }} R$ 418 mil {{ t.comp.num.lossesNote }}

{{ t.comp.alert.demoTitle }} {{ t.comp.alert.demoBody }}

{{ t.comp.alert.capTitle }} {{ t.comp.alert.capBody }}

{{ t.nav.crumb }}/{{ t.nav.items.queue }}

Marina RibeiroCPF ***.418-02

{{ t.nav.rows.r1time }} 84 {{ t.nav.rows.r1state }}

Anna-Lena Wiesenberger-SchmidtCPF ***.093-71

{{ t.nav.rows.r2time }} 58 {{ t.nav.rows.r2state }}

José CarvalhoCPF ***.702-55

{{ t.nav.rows.r3time }} 12 {{ t.nav.rows.r3state }}

1 2 3

{{ t.comp.num.checks }} 1.284

{{ t.states.partMetric }} —

38{{ t.dark.pending }}

91%{{ t.dark.auto }}

Marina Ribeiro · CPF ***.418-02

José Carvalho · CPF ***.702-55

:root {
  /* brand — overridden per tenant by the Brand Kit */
  --brand-50:#F0F2FB; --brand-100:#DDE1F6; --brand-200:#BCC3EE;
  --brand-300:#939EE2; --brand-400:#6C79D4; --brand-500:#4756C9;
  --brand-600:#3742A8; --brand-700:#2B3486; --brand-800:#232C6B;
  --brand-900:#171D46;
  --brand-primary:var(--brand-800); --brand-accent:var(--brand-500);

  /* neutral */
  --n-50:#F5F6FA; --n-100:#EBEDF4; --n-200:#D7DAE8; --n-300:#B6BBD0;
  --n-400:#9198B5; --n-500:#6A7192; --n-600:#4E5573; --n-700:#3C4262;
  --n-800:#262C45; --n-900:#10142B;

  /* semantic — never overridden */
  --risk-low:#0F7A4A;    --risk-low-bg:#E6F2EB;    --risk-low-ink:#0B5C37;
  --risk-review:#B06A00; --risk-review-bg:#FBF0DF; --risk-review-ink:#7A4900;
  --risk-high:#B3261E;   --risk-high-bg:#FBE9E7;   --risk-high-ink:#8C1D18;
  --risk-unknown:#5A6570;--risk-unknown-bg:#EEF0F2;--risk-unknown-ink:#3D464F;

  /* type — sans only, no serif in the system */
  --font-display:'Libre Franklin', system-ui, sans-serif;
  --font-text:'Geist', system-ui, sans-serif;

  /* shape — set chosen in the Brand Kit */
  --radius-sm:4px; --radius-md:6px; --radius-lg:12px; --radius-pill:999px;

  /* elevation */
  --shadow-raised:0 1px 2px rgba(16,20,43,.08);
  --shadow-overlay:0 4px 14px rgba(16,20,43,.1);
  --shadow-modal:0 14px 36px rgba(16,20,43,.16);
  --scrim:rgba(16,20,43,.48);

  /* focus — never removed */
  --focus-ring:var(--brand-500); --focus-width:2px; --focus-offset:2px;

  /* motion */
  --dur-instant:80ms; --dur-fast:160ms; --dur-base:240ms; --dur-slow:400ms;
  --ease-in:cubic-bezier(.2,.8,.3,1); --ease-out:cubic-bezier(.4,0,1,1);

  /* layout */
  --bp-md:600px; --bp-lg:900px; --bp-xl:1280px;
  --content-max:1240px; --flow-max:520px;
  --target-desktop:40px; --target-mobile:44px;

  /* icon */
  --icon-stroke:1.5; --icon-sm:16px; --icon-md:18px; --icon-lg:24px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant:0ms; --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
}

[data-theme="dark"] {
  --brand-primary:var(--brand-300);
  --surface:#0C1024; --surface-raised:#151A33; --border:#262C45;
  --ink:#EDEFF7; --ink-muted:#B6BBD0;
  --focus-ring:var(--brand-300);
  --risk-low-bg:rgba(15,122,74,.18);    --risk-low-ink:#7FDCAE;
  --risk-review-bg:rgba(176,106,0,.18); --risk-review-ink:#F0C077;
  --risk-high-bg:rgba(179,38,30,.16);   --risk-high-ink:#FFB4AC;
}

Design System

{{ t.about.title }}

{{ t.color.title }}

{{ t.type.title }}

{{ t.space.title }}

{{ t.comp.title }}

{{ t.icons.title }}

{{ t.nav.title }}

{{ t.over.title }}

{{ t.states.title }}

{{ t.motion.title }}

{{ t.voice.title }}

{{ t.dark.title }}

{{ t.tokens.title }}

{{ t.wl.title }}