/* ============================================================================ DESIGN SYSTEM GABRIEL AMARAL · TOKENS Extraido de ~/Downloads/Base/ Design System / PROVENIENCIA DE CADA VALOR Cores de fase (solido + pastel): hex literal dos SVGs em Assets/Icons/. O vetor e a fonte da verdade, nao a amostragem do PDF rasterizado. Superficies (papel, tinta): amostragem de pixel dos dois diagramas autorais FLUXO e ROTEIRO DE DESENVOLVIMENTO DE PRODUTO (assinados "Feito por: Gabriel Amaral"). Nao existe fonte vetorial para elas. Escala INK: derivada. Ver o bloco "AS CINCO REGRAS" abaixo. ========================================================================= */ :root{ /* --- SUPERFICIES --------------------------------------------------------- O fundo do sistema NAO e branco. E #EEECEB, um cinza quente (R>G>B) que ocupa 82% da area do ROTEIRO. Branco e a cor dos CARDS que flutuam sobre ele: 1,18:1 de contraste entre os dois, ou seja, a separacao card/papel nunca pode depender so da cor. Sempre borda ou sombra junto. ------------------------------------------------------------------------ */ --paper: #EEECEB; /* fundo do sistema */ --card: #FFFFFF; /* superficie elevada · 1,18:1 vs papel */ --anchor: #232323; /* ancora escura: hero, numeros, sobre, footer */ --ink: #232323; /* texto · 13,35:1 papel · 15,72:1 card */ --ink-muted: #5C5A58; /* texto secundario · 5,83 papel · 6,87 card */ --ink-faint: #6D6A66; /* legendas · 4,57 papel · 5,38 card */ /* O card so tem 1,18:1 contra o papel, entao a BORDA e que delimita o card, nao a cor de fundo. Por ser portante ela precisa de 3:1 (WCAG 1.4.11) e por isso e bem mais escura do que costuma ser uma hairline. */ --rule-strong: #8D867E; /* borda de card · 3,05 papel · 3,59 card */ --rule: #D9D6D3; /* separador DECORATIVO · 1,23:1, isento */ /* --- SOBRE A ANCORA ESCURA ---------------------------------------------- */ --on-anchor: #FFFFFF; /* 15,72:1 */ --on-anchor-muted: #C9C6C4; /* 9,25:1 */ --on-anchor-rule: #3D3C3B; /* separador DECORATIVO dentro da ancora */ /* --- AS QUATRO FASES ----------------------------------------------------- Pesquisa / Planejamento / Design / Ajustes. Tres niveis por cor, cada um com UM trabalho so. Ver "AS CINCO REGRAS". ------------------------------------------------------------------------ */ /* PESQUISA · o que voce descobriu */ --pesquisa: #854DCE; /* solido · dos SVGs */ --pesquisa-pastel: #E4CBFF; /* superficie · dos SVGs */ --pesquisa-ink: #7536C6; /* 5,75 papel · 6,78 card · 4,61 pastel */ /* PLANEJAMENTO · como voce planejou */ --planejamento: #CC534A; --planejamento-pastel: #FFC7C1; --planejamento-ink: #A1352D; /* 5,82 · 6,86 · 4,63 */ /* DESIGN · como voce executou */ --design: #CCA946; --design-pastel: #FFE9A3; --design-ink: #7D6522; /* 4,75 · 5,59 · 4,64 */ /* AJUSTES · o impacto que gerou */ --ajustes: #4AC670; --ajustes-pastel: #AFF4C6; --ajustes-ink: #24733C; /* 4,96 · 5,85 · 4,61 */ /* MARCA · so o logo e o CTA. Nao e uma quinta fase. */ --marca: #FFCC00; /* 10,39:1 na ancora · 1,28:1 no papel */ --marca-ink: #816700; /* unica forma de escrever em amarelo no claro */ /* --- AS CINCO REGRAS ----------------------------------------------------- Sobre o papel, SO O ROXO passa AA como texto (4,51:1). Vermelho 3,64 · amarelo 1,91 · verde 1,86 · amarelo da marca 1,28. Os diagramas do Gabriel ja resolvem isso por instinto: a palavra colorida sempre esta sobre um card pastel, e o solido so aparece em icone, bolinha e borda. O sistema abaixo apenas formaliza o que o material ja faz. 1. SOLIDO -> icone, bolinha, borda, regua, conector. NUNCA texto pequeno. 2. PASTEL -> superficie. O texto por cima e sempre --ink (10,6 a 13,1:1). 3. INK -> unica forma de texto colorido em fundo claro. Passa AA nos tres fundos possiveis: papel, card e o pastel da propria cor. 4. NA ANCORA ESCURA, INVERTE: o texto colorido usa o PASTEL (10,6 a 13,1:1). O roxo solido reprova ali (2,96:1). 5. --marca SO EXISTE DENTRO DA ANCORA. E o que torna o CTA amarelo possivel no hero e impossivel no corpo da pagina. Corolario herdado dos diagramas: cor nunca informa sozinha. Toda fase carrega cor + icone + rotulo escrito. ------------------------------------------------------------------------ */ /* --- TIPOGRAFIA ---------------------------------------------------------- Helvetica Neue e a fonte da marca: o logo em Ass.svg usa Helvetica Neue LT Std. Ela so existe em maquinas Apple, e a maioria dos recrutadores esta no Windows, entao a segunda camada e quem a maior parte das pessoas vai ver de fato. Por isso ela foi escolhida por proximidade com a marca e nao por conveniencia: Archivo, variavel, subset latin, 34 KB, self-hosted. Nao e Inter, e nao e Instrument Sans. As duas sao mais largas e de altura-x maior que a Helvetica Neue, e as duas estao na monocultura de faces que quase toda interface gerada por IA usa. Archivo e uma grotesca de largura e cor de texto proximas da marca, fora dessa lista, e pesa 34 KB. ------------------------------------------------------------------------ */ --font: "Helvetica Neue", "Archivo", Helvetica, Arial, sans-serif; /* escala fluida · min em 360px, max em 1280px */ --t-hero: clamp(2.75rem, 1.6rem + 5.1vw, 5.5rem); --t-h1: clamp(2.25rem, 1.5rem + 3.3vw, 4rem); --t-h2: clamp(1.75rem, 1.3rem + 2.0vw, 2.75rem); --t-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); --t-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-label: 0.75rem; --t-stat: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --lh-tight: 1.04; --lh-snug: 1.22; --lh-body: 1.6; --tr-tight: -0.025em; --tr-label: 0.1em; /* --- ESPACO · escala de 4 ------------------------------------------------ */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px; --section-y: clamp(64px, 9vw, 128px); /* respiro vertical entre secoes */ /* --- FORMA --------------------------------------------------------------- Os cards dos dois diagramas tem canto generoso e borda de 1px na cor da fase. Sombra e sutil: o papel ja e cinza, sombra pesada suja. ------------------------------------------------------------------------ */ --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:999px; --shadow-sm: 0 1px 2px rgba(35,35,35,.05); --shadow-md: 0 2px 4px rgba(35,35,35,.05), 0 8px 20px rgba(35,35,35,.06); --shadow-lg: 0 4px 8px rgba(35,35,35,.06), 0 16px 40px rgba(35,35,35,.09); --border: 1px solid var(--rule); --border-strong: 1px solid var(--rule-strong); /* --- MOVIMENTO ----------------------------------------------------------- Escala de tempo por FUNÇÃO, não por gosto. Cada faixa tem um uso só, e o movimento aqui existe para dar retorno, orientar ou manter contexto. Nunca para enfeitar. press resposta ao dedo/clique. Descer é mais rápido que subir, como num botão físico. fast micro-retorno: hover, foco, cor. normal transição pequena: abrir, fechar, deslizar. medium transição média: dissolve, troca de estado maior. slow sequência coreografada. As curvas também são semânticas. Antes havia cinco cubic-bezier escritas na mão espalhadas pelos arquivos e um único token genérico: cada rodada acrescentava uma curva nova e nada garantia coerência entre elas. ------------------------------------------------------------------------ */ --d-press:90ms; --d-fast:150ms; --d-normal:260ms; --d-medium:420ms; --d-slow:820ms; --ease-entra: cubic-bezier(.22,.61,.36,1); /* desacelera, sem arranque */ --ease-sai: cubic-bezier(.55,0,1,.45); /* acelera ao sair */ --ease-entre: cubic-bezier(.33,0,.67,1); /* simétrica, para dissolve */ --ease-toque: cubic-bezier(.2,.8,.2,1); /* retorno curto de interação */ --ease: var(--ease-toque); /* padrão histórico, mantido para não quebrar */ /* --- LAYOUT ------------------------------------------------------------- */ --container: 1160px; --measure: 68ch; /* largura maxima de bloco de texto corrido */ } /* --- ESCOPO DE FASE ------------------------------------------------------ [data-fase="pesquisa"] reescreve --cor/--cor-pastel/--cor-ink dentro do bloco. Um card de fase, um icone e uma lista com bolinha leem os mesmos tres tokens e nao precisam saber de que fase sao. ------------------------------------------------------------------------ */ [data-fase="pesquisa"]{ --cor:var(--pesquisa); --cor-pastel:var(--pesquisa-pastel); --cor-ink:var(--pesquisa-ink); } [data-fase="planejamento"]{ --cor:var(--planejamento); --cor-pastel:var(--planejamento-pastel); --cor-ink:var(--planejamento-ink); } [data-fase="design"]{ --cor:var(--design); --cor-pastel:var(--design-pastel); --cor-ink:var(--design-ink); } [data-fase="ajustes"]{ --cor:var(--ajustes); --cor-pastel:var(--ajustes-pastel); --cor-ink:var(--ajustes-ink); } /* Dentro da ancora escura vale a REGRA 4: o texto colorido vira o pastel. */ .anchor [data-fase]{ --cor-ink: var(--cor-pastel); }