Biblioteca oficial: Google Material Symbols Outlined. Parâmetros: FILL@0, wght@400, GRAD@0, opsz@24.
Como usar
<!-- 1. Adicionar no <head> --> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
<!-- 2. Usar o ícone como texto dentro de um span --> <span class="material-symbols-outlined">flight_takeoff</span>
Ícones usados na plataforma
search_checksearch_check_2
notificationsnotifications
credit_scorecredit_score
casinopoker_chip
warningwarning
schoolschool
flight_takeoffflight_takeoff
priority_highpriority
arrow_forwardarrow_forward
arrow_backarrow_back
dashboarddashboard
boltbolt
tunetune
rocket_launchrocket_launch
starstar
check_circlecheck_circle
closeclose
menumenu
personperson
locklock
chatwhatsapp / chat
trending_uptrending_up
scheduleschedule
attach_moneyattach_money
Tamanhos
flight_takeoff16px
flight_takeoff20px
flight_takeoff24px — padrão
flight_takeoff32px — cards
flight_takeoff48px — hero
Cores
flight_takeoff--primary-color
flight_takeoff--black-color
flight_takeoff--green-color
flight_takeoff--aqua-color
flight_takeoff--white-color
flight_takeoff--cinza-medium
04 — Gradientes & Padrões
Gradientes
Gradientes oficiais usados em heroes, cards de destaque e backgrounds de seções.
Primary — #6457F4 → #333396
Green — #16C62E → #0A4D15
Soft — #C7FFD5 → #C6E1F4
Dark — #1A1A2E → #333396
Brand — #6457F4 → #C7FFD5
Light BG — --neutro-light-color
✔ Use
• Sempre usar as variáveis CSS do projeto • Manter border-radius 100px nos botões • Usar Funnel Sans em todos os textos • Gradiente primary nos heroes e CTAs • Aqua/mint como acento positivo
✗ Evite
• Criar cores fora do sistema • Usar outras fontes sem alinhamento • Botões com border-radius quadrado • Misturar gradiente primary com verde • Textos em cor primaria sem hierarquia