Guia do Designer

/* ============================================================
   DESIGN TOKENS , VS Group Rebranding 2024/25
   Arquivo: brand-package/design-system/design-tokens.css
============================================================ */
:root {

  /* CORES PRINCIPAIS */
  --navy:       #0B1728;   /* fundo principal */
  --navy-mid:    #122040;   /* cards, painéis */
  --navy-lt:     #1B3A6B;   /* destaque azul */
  --gold:        #D4AF37;   /* ouro base da marca */
  --gold-lt:     #F0D060;   /* início do gradiente */
  --gold-mid:    #C49B20;   /* meio do gradiente */
  --gold-dk:     #B8960C;   /* fim do gradiente */
  --gray:        #8B96A8;   /* texto secundário */
  --white:       #F5F4F0;   /* off-white */

  /* CORES DE STATUS */
  --danger:      #C0392B;
  --success:     #27AE60;
  --warning:     #F39C12;

  /* TIPOGRAFIA */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ESCALA TIPOGRÁFICA , Major Third (1.250) */
  --text-xs:    0.64rem;   /* 10.24px */
  --text-sm:    0.8rem;    /* 12.8px  */
  --text-base:  1rem;      /* 16px    */
  --text-md:    1.25rem;   /* 20px    */
  --text-lg:    1.563rem;  /* 25px    */
  --text-xl:    1.953rem;  /* 31px    */
  --text-2xl:   2.441rem;  /* 39px    */
  --text-3xl:   3.052rem;  /* 49px    */
  --text-hero:  clamp(3rem, 10vw, 8rem);

  /* ESPAÇAMENTO , escala 4px */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* BORDAS */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 100px;

  /* SOMBRAS */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.3);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 30px rgba(212,175,55,0.18);
  --shadow-glow-lg: 0 0 60px rgba(212,175,55,0.25);

  /* TRANSIÇÕES */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.5s ease;
  --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-INDEX */
  --z-base:    1;
  --z-overlay: 10;
  --z-modal:   100;
  --z-nav:     200;
  --z-toast:   500;
}

/* GRADIENTE OURO , aplicar em elementos dourados */
.gold-gradient-text {
  background: linear-gradient(160deg, #F0D060 0%, #D4AF37 40%, #C49B20 70%, #B8960C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gold-gradient-bg {
  background: linear-gradient(135deg, #F0D060 0%, #D4AF37 50%, #B8960C 100%);
}

.gold-border {
  border: 1px solid rgba(212, 175, 55, 0.25);
}
      

Paleta de Cores , Referência Visual

// figma-tokens.json , importar via Tokens Studio for Figma
{
  "global": {
    "color": {
      "navy":     { "value": "#0B1728", "type": "color" },
      "navyMid":  { "value": "#122040", "type": "color" },
      "navyLt":   { "value": "#1B3A6B", "type": "color" },
      "gold":     { "value": "#D4AF37", "type": "color" },
      "goldLt":   { "value": "#F0D060", "type": "color" },
      "goldMid":  { "value": "#C49B20", "type": "color" },
      "goldDk":   { "value": "#B8960C", "type": "color" },
      "gray":     { "value": "#8B96A8", "type": "color" },
      "white":    { "value": "#F5F4F0", "type": "color" }
    },
    "typography": {
      "fontDisplay": { "value": "Cormorant Garamond", "type": "fontFamilies" },
      "fontHeading": { "value": "Playfair Display",  "type": "fontFamilies" },
      "fontBody":    { "value": "Inter",              "type": "fontFamilies" }
    }
  }
}