<!-- Exemplo de exibição de cor -->
<div class="color-grid"> <!-- Contêiner Flex/Grid -->
    <div class="color-item"> <!-- Item individual -->
        <div class="color-sample" style="background-color: var(--primary-color);">
            <span style="color: white;">Primary</span> <!-- Nome da cor (cor do texto para contraste) -->
        </div>
        <div class="color-info"> <!-- Informações -->
            <code class="color-value">#000000</code> <!-- Valor (HEX/RGBA) -->
            <code class="color-token">var(--primary-color)</code> <!-- Token CSS -->
        </div>
    </div>
    <!-- Repetir para outras cores -->
</div>

/* Estilos para exibição de Cores */
.color-grid {
    display: flex;
    gap: var(--spacing-md); /* Espaço entre os itens de cor */
    flex-wrap: wrap; /* Quebra linha no mobile */
}

.color-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha info abaixo da amostra */
}

.color-sample {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    display: flex; /* Para centralizar o texto interno */
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    padding: var(--spacing-xs);
    font-size: var(--text-sm);
    line-height: 1.2;
}

.color-sample span {
     display: block; /* Garante que o span é um bloco para alinhamento */
     /* Cor do texto definida inline para garantir contraste */
}

.color-info {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     font-size: var(--text-xs);
     line-height: 1.4;
     /* Remove default code styling */
}
 .color-info code {
     background-color: transparent;
     padding: 0;
     border-radius: 0;
     /* Ajustes específicos para legibilidade */
 }
 .color-info .color-value {
     font-weight: 500; /* Valor mais proeminente */
 }
 .color-info .color-token {
     color: var(--light-text); /* Nome do token menos proeminente */
 }

/* Variáveis CSS para Tipografia */
:root {
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.9rem;      /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-md: 1.1rem;      /* 18px */
    --text-lg: 1.2rem;      /* 20px */
    --text-xl: 1.5rem;      /* 24px */
    --text-2xl: 2rem;       /* 32px */
    --text-3xl: 2.5rem;     /* 40px */
    --text-4xl: 3rem;       /* 48px */
    --text-5xl: 4.5rem;     /* 72px */

    /* Default Font */
    font-family: 'Epilogue', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.3px;
}

/* Estilos padrão para elementos tipográficos */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
    margin-top: var(--spacing-lg);
    font-style: normal;
}

h1 { font-size: var(--text-5xl); margin-bottom: var(--spacing-3xl); }
h2 { font-size: var(--text-2xl); margin-bottom: var(--spacing-2xl); }
h3 { font-size: var(--text-lg); margin-bottom: var(--spacing-lg); }
p { font-size: var(--text-base); line-height: 1.6; margin-bottom: var(--spacing-md); }

/* Exemplo de uso com classes utilitárias (se existirem) */
.text-heading-xl { font-size: var(--text-xl); }
.text-small { font-size: var(--text-sm); }
.font-bold { font-weight: 700; }

/* Variáveis CSS para Espaçamento */
:root {
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */
    --spacing-3xl: 4rem;    /* 64px */
    --spacing-4xl: 6rem;    /* 96px */
    --spacing-5xl: 8rem;    /* 128px */
}

/* Exemplo de uso */
.element {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  gap: var(--spacing-sm); /* For flex/grid */
}

/* Exemplo de classes utilitárias (se existirem) */
.mb-md { margin-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.gap-sm { gap: var(--spacing-sm); }

<!-- Estrutura básica de layout -->
<body>
    <header class="top-header">...</header>
    <aside class="sidebar">...</aside>
    <main class="main-content">
        <!-- Seção de Cabeçalho (ex: Introdução) -->
        <section id="introduction" class="section-header">
             <div class="component-tag"><span>...</span></div>
             <h1 class="component-title">...</h1>
             <p class="component-description">...</p>
        </section>

        <!-- Seção de Documentação (para componentes e fundação) -->
        <section id="alguma-secao" class="ds-section">
            <div class="component-tag"><span>...</span></div>
            <h2>Título da Seção</h2>
            <p>Descrição...</p>
            <!-- Conteúdo da seção (demo, código, uso, props) -->
            <div class="demo-area">...</div>
            <div class="table-responsive">...</div>
            <div class="controls-panel">...</div>
        </section>

        <!-- Outras seções ds-section -->

    </main>
    <!-- Footer removido -->
</body>

/* Contêiner principal */
.app-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Área de conteúdo principal */
.main-content {
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    padding: var(--spacing-2xl);
    width: calc(100% - var(--sidebar-width));
    background-color: var(--content-bg);
    min-height: calc(100vh - var(--header-height));
}

/* Seções de documentação */
.ds-section {
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--content-bg);
}

/* Seção de cabeçalho (primeira seção) */
.section-header {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
     background-color: var(--content-bg);
     padding-left: var(--spacing-2xl);
     padding-right: var(--spacing-2xl);
     margin-left: 0;
     margin-right: 0;
     width: 100%;
}
/* Adjust padding-top for scroll-margin */
#introduction.section-header {
    padding-top: calc(var(--spacing-2xl) + var(--header-height));
    scroll-margin-top: var(--header-height);
}


/* Responsivo */
@media (max-width: 768px) {
   .main-content {
       margin-left: 0;
       width: 100%;
       padding: var(--spacing-lg);
   }

   .section-header {
       padding-left: var(--spacing-lg);
       padding-right: var(--spacing-lg);
   }
   #introduction.section-header {
      padding-top: calc(var(--spacing-lg) + var(--header-height));
   }
}

<!-- Botão Primário -->
<a href="#" class="btn btn-primary">Botão Primário</a>
<button type="button" class="btn btn-primary">Botão Primário</button> <!-- Use <button> para ações -->

<!-- Botão Secundário -->
<a href="#" class="btn btn-secondary">Botão Secundário</a>
<button type="button" class="btn btn-secondary">Botão Secundário</button>

<!-- Botão Outline -->
<a href="#" class="btn btn-outline">Botão Outline</a>
<button type="button" class="btn btn-outline">Botão Outline</button>

<!-- Tamanhos -->
<button type="button" class="btn btn-primary btn-sm">Pequeno</button>
<button type="button" class="btn btn-primary btn-lg">Grande</button>

<!-- Botão com Ícone (Requer Font Awesome) -->
<button type="button" class="btn btn-primary"><i class="fas fa-download mr-sm"></i> Download</button>
<!-- 'mr-sm' é uma classe utilitária para margem à direita -->

<!-- Botão Desabilitado -->
<button type="button" class="btn btn-primary" disabled>Desabilitado</button>
<button type="button" class="btn btn-secondary" disabled>Desabilitado</button>
<button type="button" class="btn btn-outline" disabled>Desabilitado</button>

/* Estilos Base para Botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);

    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-full);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    border: none;
    font-family: 'Epilogue', sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
 .btn::after { display: none; }


.btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}
.btn:active {
     transform: translateY(0);
     opacity: 0.9;
}
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

/* Button Types */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.btn-primary:hover {
    background-color: var(--secondary-color);
}

.btn-secondary {
    background-color: var(--light-text);
    color: var(--background-color);
}
.btn-secondary:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}

.btn-outline {
    background-color: var(--card-bg);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}
.btn-outline:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Disabled State */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: translateY(0);
    pointer-events: none;
}


/* Button Sizes */
.btn-sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-xs);
    gap: var(--spacing-xs);
}
.btn-lg {
    padding: var(--spacing-md) var(--spacing-2xl);
    font-size: var(--text-md);
    gap: var(--spacing-sm);
}

/* Button Icon styles */
.btn i {
    line-height: 1;
}

/* Utility for icon spacing */
.mr-sm { margin-right: var(--spacing-sm); }

<!-- Header no HTML -->
<header class="top-header">
    <div class="logo"> <!-- Clique no logo abre menu mobile -->
        <img src="..." alt="Logo">
    </div>
    <!-- Menu toggle HTML removido -->
    <nav class="top-nav">
        <a href="#">v<span id="current-version">1.0.0</span></a>
        <a href="LINK_GITHUB" class="btn btn-top-nav">GitHub</a> <!-- Usando classe -->
    </nav>
</header>

/* Estilos do Header */
.top-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    padding: var(--spacing-md) var(--spacing-xl);
    backdrop-filter: blur(10px);
    background-color: rgba(231, 229, 222, 0.8);
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
}

/* Ajuste para desktop: esconder menu toggle, alinhar nav */
@media (min-width: 769px) {
    .nav { flex-wrap: nowrap; }
}

.logo img { height: 30px; }

.top-nav {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.top-nav a {
    font-size: var(--text-sm);
    text-decoration: none;
}
 .top-nav a::after { display: none; }

 /* Estilo para o botão GitHub no header */
 .btn-top-nav {
     background: var(--primary-color);
     color: white;
     padding: 6px 12px;
     border-radius: var(--radius-full); /* Use variable */
     font-size: var(--text-xs);
     /* Inherits other .btn styles like transition, cursor, etc. */
 }
 /* Ensure hover/active/focus styles are inherited or defined */
  .btn-top-nav:hover {
      opacity: 0.9;
     transform: translateY(-1px);
  }
   .btn-top-nav:active {
      transform: translateY(0);
       opacity: 0.95; /* Slight change on active */
   }
   .btn-top-nav:focus {
       outline: none;
       box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); /* Match other button focus */
   }



/* Estilos mobile para Header */
@media (max-width: 768px) {
    .top-header {
        padding: var(--spacing-md);
        background-color: var(--background-color);
        backdrop-filter: none;
    }
    .top-header .nav {
         justify-content: space-between;
         flex-wrap: nowrap;
    }
    /* Removido margin-right: auto do logo */


     /* A navegação principal no mobile está na Sidebar */
     .nav-list { display: none; }
}

<!-- Grupo de links sociais -->
<div class="social-links">
    <a href="LINK_TWITTER" class="social-link" aria-label="Twitter">
        <i class="fab fa-twitter"></i>
    </a>
    <a href="LINK_INSTAGRAM" class="social-link" aria-label="Instagram">
        <i class="fab fa-instagram"></i>
    </a>
    <!-- ... outros links -->
</div>

/* Estilo para Links Sociais */
.social-links {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center; /* Centraliza */
    margin: var(--spacing-xl) 0; /* Margem vertical */
}

.social-link {
    background-color: var(--primary-color);
    border-radius: 50%;
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: white;
    text-decoration: none;
}
.social-link::after { display: none; }


.social-link:hover {
    transform: translateY(-2px);
    opacity: 0.7;
}

.social-link i {
     color: inherit;
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
}