Visual
Engineering
System.
Uma união sofisticada de geometria limpa, transições fluidas e um ecossistema de cores orgânicas projetadas especificamente para a marca Edja Rilene.
Tipografia
| Função / Papel | Exemplo de Renderização | Especificação técnica |
|---|---|---|
| Heading Hero (hl) |
Estilo Clássico |
font-family: Raleway font-weight: 600 font-size: 60px / 3.75rem line-height: 1.0 letter-spacing: -0.025em text-transform: uppercase |
| Heading 1 (h1) |
Identidade Exclusiva |
font-family: Raleway font-weight: 600 font-size: 48px / 3rem line-height: 1.1 letter-spacing: -0.02em text-transform: uppercase |
| Heading 2 (h2) |
Design e Sintonia |
font-family: Raleway font-weight: 600 font-size: 36px / 2.25rem line-height: 1.2 letter-spacing: -0.015em text-transform: uppercase |
| Heading 3 (h3) |
Manual de Identidade |
font-family: Raleway font-weight: 600 font-size: 28px / 1.75rem line-height: 1.25 letter-spacing: normal text-transform: uppercase |
| Body Large (body-lg) |
A linguagem visual deve seguir os atributos de modernidade, classicismo e curvas sutis. |
font-family: Raleway font-weight: 400 font-size: 18px / 1.125rem line-height: 1.6 letter-spacing: normal |
| Body Regular (body) |
O símbolo deriva das iniciais E e R, referentes a Edja e Rilene, representando conexão e união. |
font-family: Raleway font-weight: 400 font-size: 14px / 0.875rem line-height: 1.5 letter-spacing: normal |
| Captions / Labels | Informação Complementar |
font-family: Raleway font-weight: 700 font-size: 12px / 0.75rem line-height: 1.3 letter-spacing: 0.15em text-transform: uppercase |
Testador de Fonte Dinâmico
Digite algo abaixo para ver como fica renderizado em Raleway Semibold (títulos) e Raleway Regular (corpo):
Paleta de Cores
Deep Teal
Aqua Teal
Cream Beige
Soft Gold
Blush Clay
Pure Black
Pure White
Variações de Opacidade (Deep Teal)
Gradientes do Sistema
UI Components
1. Botões (Interativos)
2. Inputs & Forms
3. Cards de Demonstração
Visual Asset
Composições Digitais
Assegura a correta aplicação cromática do manual em artes prontas para publicação.
Glow e Iluminação
Efeito premium gerado com gradientes e sombras internas, realçando bordas e criando interfaces exclusivas.
Ticket Concept
Composição que resgata o estilo clássico e orgânico. Apresenta o efeito serrilhado na base que emula papéis e cartões elegantes.
4. Modais (Demonstração Funcional)
Directives de Componentes
Este modal implementa desfoque de fundo (backdrop-blur), esmaecimento (fade-in) e transição de escala (zoom-in). É compatível com o comportamento clássico de UX e atende às restrições de contraste do manual.
5. Badges, Tags & Tooltips
Ativos da Marca
Patterns de Apoio para Peças e Impressões
Pattern 01
Ideal para fundos coloridos oficiais e tecidos.
Pattern 02
Empregado em papelaria corporativa de alto padrão.
Pattern 03
Assinatura visual de leveza geométrica.
Movimento & Animações
Surgimento: fadeInUpBlur
Utilizada para revelar blocos de conteúdo conforme entram na tela. Suaviza a entrada com desfoque de 8px e deslocamento vertical de 24px.
Parallax: Staggered Blinds
O scroll do mouse move os 5 painéis da hero em velocidades dessincronizadas com base na distância em relação ao centro (painel do meio).
Interatividade: Glow hover
Ao passar o cursor do mouse sobre botões especiais ou cards elétricos, é projetada uma aura luminosa (Teal Claro ou Dourado).
Gatilhos Ativos no Viewport
Todas as seções principais usam a classe utilitária .animate-on-scroll. Um IntersectionObserver nativo em JS detecta a visibilidade e ativa a animação perfeitamente no momento exato.