Branding Assets

Logos oficiais da blipee e variantes para campanhas de sensibilização.

palette Selecionar Tema de Cores

Cor personalizada: #00D4FF

business White Label - Logos Personalizados

Importe os logos da sua marca. Os logos personalizados mantêm as suas cores originais, independentemente do tema selecionado.

Logo Curto (Ícone)

add_photo_alternate Arrastar ou clicar para importar

Logo Expandido (Nome)

add_photo_alternate Arrastar ou clicar para importar

Favicon (Ícone do Browser)

tab Arrastar ou clicar para importar

Especificações Técnicas:

Logo Curto

aspect_ratio Exibição: 56×56px

photo_size_select_large Recomendado: 128×128px ou maior

crop_square Formato: Quadrado (1:1)

Logo Expandido

aspect_ratio Exibição: altura 32px

photo_size_select_large Recomendado: altura 64px ou maior

crop_landscape Formato: Horizontal

Favicon

aspect_ratio Exibição: 32×32px / 16×16px

photo_size_select_large Recomendado: 64×64px ou maior

image Formato: PNG, ICO, SVG

Dicas: Use SVG para máxima qualidade • Fundo transparente recomendado • Tamanho máximo do ficheiro: 2MB

Logos Standard

Variantes principais do logo para diferentes contextos de utilização.

Principal

Fundos claros

download PNG

Letras Brancas

Alto contraste

download PNG

Preto

Fundos claros, impressão

download PNG

Branco

Fundos escuros

download PNG

Esquema de Cores - Brand Principal

Primary

#00D4FF

Primary Dark

#00A8CC

Background Light

#FFFFFF

Background Dark

#121212

Campanhas de Sensibilização

Logos especiais para campanhas de awareness.

touch_app Clica num logo para aplicar esse esquema de cores à página

Outubro Rosa

Cancro da Mama

download PNG

Setembro Amarelo

Prevenção Suicídio

download PNG

Verde

Saúde Mental / Ambiente

download PNG

Novembro Azul

Cancro da Próstata

download PNG

Laranja

Esclerose Múltipla

download PNG

Roxo

Alzheimer / Lupus

download PNG

Pride

LGBTQIA+

download PNG

Esquemas de Cores por Campanha

Paletas de cores recomendadas para cada campanha.

Outubro Rosa

Setembro Amarelo

Verde

Novembro Azul

Laranja

Roxo

Pride

Guia de Utilização

check_circle Correto

Usar logo sobre fundo com contraste adequado
Manter proporções originais
Respeitar área de proteção (padding mínimo)
Usar versão apropriada para o fundo

cancel Evitar

Distorcer ou esticar o logo
Alterar as cores fora do contexto de campanha
Usar logo sobre imagens muito detalhadas
Reduzir abaixo do tamanho mínimo (40px)

Sistema de Cores

Baseado em Material Design 3 com tema escuro. Surface base: #121212 com overlays brancos para elevação.

palette Primary (Brand)

Primary

#00d4ff

--md-sys-color-primary

On Primary

#003738

--md-sys-color-on-primary

Primary Container

#004f50

--md-sys-color-primary-container

On Primary Container

#6ff7f6

--md-sys-color-on-primary-container

layers Surface & Background

Surface

#121212

--md-sys-color-surface

Surface Container

#1e2020

--md-sys-color-surface-container

Surface Container High

#282a2a

--md-sys-color-surface-container-high

Surface Container Highest

#333535

--md-sys-color-surface-container-highest

check_circle Semantic Colors

Success

#4ade80

--md-sys-color-success

Warning

#ffb74d

--md-sys-color-warning

Error

#ffb4ab

--md-sys-color-error

Tertiary (Meetings)

#cfbdff

--md-sys-color-tertiary

/* Uso de cores */
background: var(--md-sys-color-surface-container);
color: var(--md-sys-color-on-surface);
border: 1px solid var(--md-sys-color-outline-variant);

/* Para elementos de destaque */
background: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);

Tipografia

Escala tipográfica baseada em Material Design 3. Sofia Sans para branding, Roboto para texto.

text_fields Escala Tipográfica

Display Large

blipee Sales

Sofia Sans / 57px / 400 / Line height 64px

Headline Large

Dashboard Principal

Sofia Sans / 32px / 400 / Line height 40px

Headline Medium

Calendário de Reuniões

Sofia Sans / 28px / 400 / Line height 36px

Title Large

Nova Oportunidade

Roboto / 22px / 500 / Line height 28px

Title Medium

Detalhes do Contacto

Roboto / 16px / 500 / Line height 24px

Body Large

Este é um exemplo de texto corpo grande, usado para parágrafos principais e conteúdo importante.

Roboto / 16px / 400 / Line height 24px

Body Medium

Texto corpo médio para descrições e conteúdo secundário.

Roboto / 14px / 400 / Line height 20px

Label Large

NOME DO CAMPO

Roboto / 14px / 500 / Line height 20px

Body Small

Texto auxiliar, timestamps, metadados

Roboto / 12px / 400 / Line height 16px

/* Tipografia via classes */
<h1 class="md-typescale-headline-large">Título</h1>
<p class="md-typescale-body-medium">Texto</p>

/* Ou via CSS variables */
font-family: var(--md-sys-typescale-title-large-font);
font-size: var(--md-sys-typescale-title-large-size);
font-weight: var(--md-sys-typescale-title-large-weight);
line-height: var(--md-sys-typescale-title-large-line-height);

Escala de Espaçamento

Sistema de espaçamento baseado em múltiplos de 4px para consistência.

space_bar Tokens de Espaçamento

--md-sys-spacing-1

4px

--md-sys-spacing-2

8px

--md-sys-spacing-3

12px

--md-sys-spacing-4

16px

--md-sys-spacing-5

20px

--md-sys-spacing-6

24px

--md-sys-spacing-8

32px

--md-sys-spacing-10

40px

--md-sys-spacing-12

48px

/* Padding e margin */
padding: var(--md-sys-spacing-4);          /* 16px */
margin-bottom: var(--md-sys-spacing-6);   /* 24px */
gap: var(--md-sys-spacing-3);              /* 12px */

/* Exemplo de card */
.card {
    padding: var(--md-sys-spacing-6);
    margin-bottom: var(--md-sys-spacing-4);
}

Sistema de Elevação

Em dark theme, elevação é representada por overlays brancos sobre #121212, não por sombras.

layers Níveis de Elevação

0dp

#121212 (0%)

1dp

#1e1e1e (5%)

2dp

#222222 (7%)

3dp

#242424 (8%)

4dp

#272727 (9%)

8dp

#2e2e2e (12%)

12dp

#333333 (14%)

24dp

#383838 (16%)

rounded_corner Tokens de Shape

None

0px

Extra Small

4px

Small

8px

Medium

12px

Large

16px

Extra Large

28px

Full

9999px

blur_on Tokens de Sombra

Sombras para feedback visual e hierarquia de componentes.

Elevation 1

Cards em repouso

Elevation 2

Hover states

Elevation 3

Menus, dropdowns

Elevation 4

Modais, dialogs

Primary Glow

Botões filled hover

token Tamanhos de Ícones

Material Symbols usa tamanhos padronizados.

settings

18px

Dense UI

settings

20px

Menus

settings

24px

Default

settings

48px

Feature

touch_app Tamanhos de Touch Targets

Áreas mínimas para interação táctil.

edit

40×40px

Standard

edit

44×44px

Touch-friendly

edit

48×48px

WCAG AAA

add

56×56px

FAB

/* Usar surface containers para elevação */
.card-level-0 { background: var(--md-sys-color-surface); }
.card-level-1 { background: var(--md-sys-color-surface-container-low); }
.card-level-2 { background: var(--md-sys-color-surface-container); }
.card-level-3 { background: var(--md-sys-color-surface-container-high); }
.card-level-4 { background: var(--md-sys-color-surface-container-highest); }

/* Sombras para feedback visual */
--md-sys-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08);   /* Cards em repouso */
--md-sys-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.12);   /* Hover states */
--md-sys-elevation-3: 0 4px 12px rgba(0, 0, 0, 0.15);  /* Menus, dropdowns */
--md-sys-elevation-4: 0 8px 24px rgba(0, 0, 0, 0.2);   /* Modais */
--md-sys-elevation-glow: 0 2px 8px rgba(0, 212, 255, 0.3); /* Primary hover */

/* Border radius */
border-radius: var(--md-sys-shape-corner-medium);  /* 12px */
border-radius: var(--md-sys-shape-corner-large);   /* 16px */
border-radius: var(--md-sys-shape-corner-full);    /* pill */

/* Tamanhos de ícones */
font-size: 18px;  /* Dense UI, inline */
font-size: 20px;  /* Menus, listas */
font-size: 24px;  /* Default (icon buttons, nav) */
font-size: 48px;  /* Feature icons, empty states */

/* Touch targets */
min-width: 40px; min-height: 40px;  /* Standard */
min-width: 44px; min-height: 44px;  /* Touch-friendly (WCAG AA) */
min-width: 48px; min-height: 48px;  /* WCAG AAA */

Layout & Grid

Padrões de layout, grids e containers para estruturar páginas.

grid_view Container Principal

O container principal limita a largura do conteúdo e centra na página.

max-width: 1200px | padding: 24px | margin: 0 auto

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--md-sys-spacing-6);  /* 24px */
}

view_column Grid de Colunas

Use CSS Grid para layouts responsivos com colunas flexíveis.

Auto-fill Grid (Cards)

Card 1

Card 2

Card 3

Card 4

Grid Fixo (2, 3, 4 colunas)

1/3

Sidebar + Content

Sidebar
280px fixo

Main Content
1fr (flexível)

/* Grid auto-fill para cards responsivos */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--md-sys-spacing-4);  /* 16px */
}

/* Grid fixo de 3 colunas */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--md-sys-spacing-4);
}

/* Layout sidebar + content */
.layout-sidebar {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--md-sys-spacing-6);  /* 24px */
}

swap_horiz Flexbox Patterns

Row com espaçamento

Item 1

Item 2

Item 3

Space Between

Título à esquerda

Centered

Conteúdo centrado

/* Row com gap */
.flex-row {
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-3);  /* 12px */
    flex-wrap: wrap;
}

/* Header pattern (space between) */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Centered content */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

padding Padrões de Padding

Valores consistentes de padding para diferentes contextos.

Compact
8px (spacing-2)

Dense
12px (spacing-3)

Normal
16px (spacing-4)

Comfortable
24px (spacing-6)

Contexto	Padding	Token
Botões	12px 24px	spacing-3 spacing-6
Inputs	14px 16px	~spacing-3.5 spacing-4
Cards	24px	spacing-6
Modal Body	24px	spacing-6
Modal Header/Footer	20px 24px	spacing-5 spacing-6
Page Container	24px	spacing-6
Nav Drawer Items	14px 16px	~spacing-3.5 spacing-4

vertical_distribute Padrões de Gap

Contexto	Gap	Token
Ícone + Label (inline)	8px	spacing-2
Botões em row	12px	spacing-3
Grid de cards	16px	spacing-4
Form groups	20px	spacing-5
Secções de página	24-32px	spacing-6 a spacing-8

Navegação

Layout integrado: Top App Bar + Navigation Drawer/Rail + Conteúdo. A navegação lateral fica abaixo da top bar, sem sobreposição.

dashboard Layout Completo (Drawer Expandida)

Top App Bar com logo e menu hamburguer. Drawer sem logo, começa abaixo da top bar.

blipee

home Home groups Leads view_kanban Pipeline analytics Analytics

settings Settings

Dashboard

Conteúdo principal aqui...

<!-- Layout Structure -->
<div class="app-layout">
    <!-- Top App Bar (só logo + ações, sem título) -->
    <header class="top-bar">
        <button class="icon-btn" onclick="toggleDrawer()">
            <span class="material-symbols-rounded">menu</span>
        </button>
        <a class="logo">blipee</a>
        <div class="spacer"></div>
        <div class="top-bar-actions">...</div>
    </header>

    <!-- Body: Nav + Content -->
    <div class="app-body">
        <!-- Navigation Drawer -->
        <nav class="nav-drawer">...</nav>

        <!-- Main Content (título aqui!) -->
        <main class="main-content">
            <h1>Page Title</h1>
            <!-- conteúdo -->
        </main>
    </div>
</div>

/* CSS */
.app-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
}
.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.nav-drawer {
    width: 260px;
    border-right: 1px solid var(--md-sys-color-outline-variant);
}

dock_to_right Layout Completo (Rail Colapsada)

Mesma estrutura mas com Navigation Rail (80px) em vez de Drawer (260px).

blipee

home Home groups Leads view_kanban Pipeline analytics Analytics

settings Settings

Dashboard

Conteúdo principal com mais espaço...

<!-- Navigation Rail (colapsada) -->
<nav class="nav-rail">
    <div class="nav-rail-items">
        <a class="nav-rail-item active">
            <span class="material-symbols-rounded">home</span>
            <span class="nav-rail-label">Home</span>
        </a>
    </div>
</nav>

/* CSS */
.nav-rail {
    width: 80px;
    background: var(--md-sys-color-surface-container);
    border-right: 1px solid var(--md-sys-color-outline-variant);
}
.nav-rail-item {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.nav-rail-label {
    font-size: 10px;
}

/* Toggle entre Drawer e Rail */
.nav-drawer.collapsed {
    width: 80px;
}
.nav-drawer.collapsed .nav-item-label {
    display: none;
}

tab Tabs

Para alternar entre vistas ou filtrar conteúdo.

Pill Tabs (Toggle)

Segmented Button

Icon + Label Tabs

<!-- Pill Tabs -->
<div class="tabs">
    <button class="tab active">Mês</button>
    <button class="tab">Semana</button>
</div>

/* CSS */
.tab {
    padding: 10px 20px;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
}
.tab.active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

account_circle User Menu

Pedro Alves

pedro@blipee.com

<!-- User Avatar -->
<div class="user-avatar">PA</div>

/* Avatar CSS */
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Dropdown */
.user-dropdown {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

Botões

Hierarquia de botões para diferentes níveis de ênfase.

smart_button Variantes de Botão

Filled (Alta ênfase)

Tonal (Média ênfase)

Outlined (Baixa ênfase)

Text (Mínima ênfase)

Icon Buttons

FAB (Floating Action Button)

<!-- Filled Button -->
<button class="btn btn-filled">
    <span class="material-symbols-rounded">add</span>
    Criar Novo
</button>

<!-- Outlined Button -->
<button class="btn btn-outlined">Cancelar</button>

<!-- Icon Button -->
<button class="icon-btn">
    <span class="material-symbols-rounded">edit</span>
</button>

<!-- FAB -->
<button class="fab">
    <span class="material-symbols-rounded">add</span>
</button>

Formulários

Inputs, selects e outros controlos de formulário.

edit_note Controlos de Formulário

Text Input

Nome

Select

Fase

Textarea

Notas

<!-- Form Field -->
<div class="form-field">
    <label class="form-label">Nome</label>
    <input type="text" class="form-input" placeholder="Introduza...">
</div>

<!-- Select -->
<div class="form-field">
    <label class="form-label">Fase</label>
    <select class="form-input form-select">
        <option>Selecionar...</option>
    </select>
</div>

Selection Controls

Checkbox, Radio, Switch e Slider para seleção e ajuste de valores.

check_box Checkbox

Para seleções múltiplas ou opções on/off independentes.

Estados

Unchecked Checked Disabled

<!-- Checkbox -->
<label class="checkbox-label">
    <input type="checkbox" class="checkbox">
    <span>Label text</span>
</label>

/* CSS */
.checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--md-sys-color-primary);
    cursor: pointer;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

radio_button_checked Radio Buttons

Para seleção única entre opções mutuamente exclusivas.

Opção 1 (selecionada) Opção 2 Opção 3

<!-- Radio Group -->
<div class="radio-group">
    <label class="radio-label">
        <input type="radio" name="group" class="radio" checked>
        <span>Opção 1</span>
    </label>
    <label class="radio-label">
        <input type="radio" name="group" class="radio">
        <span>Opção 2</span>
    </label>
</div>

/* CSS */
.radio {
    width: 20px;
    height: 20px;
    accent-color: var(--md-sys-color-primary);
}

toggle_on Switch

Toggle para ativar/desativar funcionalidades.

Off On

<!-- Switch -->
<label class="switch-label">
    <input type="checkbox" class="switch-input">
    <span class="switch-track">
        <span class="switch-thumb"></span>
    </span>
    <span>Label</span>
</label>

/* CSS */
.switch-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.switch-input { display: none; }
.switch-track {
    width: 52px;
    height: 32px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: 16px;
    position: relative;
    transition: background 0.2s;
}
.switch-thumb {
    width: 24px;
    height: 24px;
    background: var(--md-sys-color-outline);
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: all 0.2s;
}
.switch-input:checked + .switch-track {
    background: var(--md-sys-color-primary);
}
.switch-input:checked + .switch-track .switch-thumb {
    background: var(--md-sys-color-on-primary);
    left: 24px;
}

tune Slider

Para seleção de valores dentro de um intervalo.

0 50 100

<!-- Slider -->
<input type="range" class="slider" min="0" max="100" value="50">

/* CSS */
.slider {
    width: 100%;
    height: 4px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--md-sys-color-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

Dialogs & Menus

Modais, diálogos de confirmação e menus dropdown.

web_asset Dialog / Modal

Estrutura padrão com header, body e footer.

Título do Modal

Conteúdo do modal. Pode incluir formulários, texto informativo, ou qualquer outro conteúdo.

<!-- Modal Structure -->
<div class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h2 class="modal-title">Título</h2>
            <button class="modal-close">×</button>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button class="btn btn-text">Cancelar</button>
            <button class="btn btn-filled">Confirmar</button>
        </div>
    </div>
</div>

/* CSS */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal {
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-extra-large); /* 28px */
    max-width: 560px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
}
.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.modal-body { padding: 24px; }
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

help Confirmation Dialog

warning

Eliminar item?

Esta ação não pode ser desfeita.

menu Menu Dropdown

Lista de ações ou opções.

<!-- Menu -->
<div class="menu">
    <button class="menu-item">
        <span class="material-symbols-rounded">edit</span>
        Editar
    </button>
    <div class="menu-divider"></div>
    <button class="menu-item danger">
        <span class="material-symbols-rounded">delete</span>
        Eliminar
    </button>
</div>

/* CSS */
.menu {
    background: var(--md-sys-color-surface-container);
    border-radius: 12px;
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow: hidden;
}
.menu-item {
    width: 100%;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
}
.menu-item:hover {
    background: var(--md-sys-color-surface-container-high);
}
.menu-divider {
    height: 1px;
    background: var(--md-sys-color-outline-variant);
    margin: 4px 0;
}

Lists

Listas de items com diferentes variantes e layouts.

list List Items

Single Line

inbox Inbox

send Enviados

drafts Rascunhos 3

Two Lines

João Dias joao.dias@empresa.com

Maria Santos maria.santos@empresa.com

Three Lines

description

Proposta Comercial Empresa XYZ - Projeto de implementação Atualizado há 2 horas

<!-- Single Line List -->
<div class="list-item">
    <span class="material-symbols-rounded">inbox</span>
    <span class="list-item-text">Inbox</span>
    <span class="badge">3</span>
</div>

<!-- Two Line List -->
<div class="list-item-two-line">
    <div class="avatar">JD</div>
    <div class="list-item-content">
        <span class="list-item-title">Título</span>
        <span class="list-item-subtitle">Subtítulo</span>
    </div>
    <button class="icon-btn">...</button>
</div>

/* CSS */
.list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    cursor: pointer;
}
.list-item:hover {
    background: var(--md-sys-color-surface-container-high);
}
.list-item-content {
    flex: 1;
    min-width: 0;
}
.list-item-title {
    display: block;
    font-weight: 500;
}
.list-item-subtitle {
    display: block;
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
}

horizontal_rule Divider

Separador visual entre secções ou items.

Conteúdo acima

Conteúdo abaixo

Inset Divider

folder Pasta 1

folder Pasta 2

<!-- Full width divider -->
<div class="divider"></div>

<!-- Inset divider (for lists) -->
<div class="divider-inset"></div>

/* CSS */
.divider {
    height: 1px;
    background: var(--md-sys-color-outline-variant);
}
.divider-inset {
    height: 1px;
    background: var(--md-sys-color-outline-variant);
    margin-left: 56px; /* icon + gap */
}

table Data Table

Nome arrow_upward	Email unfold_more	Tipo unfold_more	Valor unfold_more	Ações
João Silva	joao@email.com	Showroom	€12,500	more_vert
Maria Santos	maria@email.com	Retail	€8,750	more_vert
Pedro Costa	pedro@email.com	Showroom	€23,100	more_vert

<!-- Data Table -->
<div class="data-table-container">
    <table class="data-table">
        <thead>
            <tr>
                <th class="checkbox-cell">
                    <input type="checkbox">
                </th>
                <th class="sortable sorted">
                    Nome
                    <span class="sort-icon">arrow_upward</span>
                </th>
                <th class="numeric">Valor</th>
                <th class="actions">Ações</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>...</td>
            </tr>
            <tr class="selected">...</tr>
        </tbody>
    </table>
    <div class="data-table-footer">
        <span>1-3 de 24</span>
        <div class="data-table-pagination">...</div>
    </div>
</div>

/* Classes especiais */
.numeric { text-align: right; }
.sortable { cursor: pointer; }
.selected { background: var(--md-sys-color-primary-container); }

Chips & Badges

Para filtros, tags e indicadores de estado.

sell Chips

label Badges de Estado

Novo Ativo Pendente Cancelado

<!-- Chip -->
<button class="chip">Filtro</button>
<button class="chip selected">Selecionado</button>

<!-- Badges -->
<span class="badge badge-success">Ativo</span>
<span class="badge badge-warning">Pendente</span>
<span class="badge badge-error">Cancelado</span>

Cards

Containers para agrupar conteúdo relacionado.

dashboard Exemplo de Card

Oportunidade #123

Empresa XYZ - Proposta de implementação do sistema.

Qualificado

<!-- Card básico -->
<div class="card">
    <div class="card-title">
        <span class="material-symbols-rounded">icon</span>
        Título do Card
    </div>
    <!-- Conteúdo -->
</div>

/* CSS do Card */
.card {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    padding: var(--md-sys-spacing-6);
}

speed KPI Cards

Cards para métricas principais com valor, trend e sparkline opcional.

Receita Total

€124.5K

trending_up +12.5% vs mês anterior

Leads Ativos

847

groups

trending_down -3.2% vs mês anterior

Conversão

24.8%

trending_up +5.4% vs mês anterior

Tempo Médio

18 dias

remove Sem alteração

<!-- KPI Card -->
<div class="kpi-card">
    <div class="kpi-label">Receita Total</div>
    <div class="kpi-value">€124.5K</div>
    <div class="kpi-trend positive">
        <span class="material-symbols-rounded">trending_up</span>
        +12.5% vs mês anterior
    </div>
</div>

/* Trend colors */
.kpi-trend.positive { color: var(--md-sys-color-success); }
.kpi-trend.negative { color: var(--md-sys-color-error); }
.kpi-trend.neutral { color: var(--md-sys-color-on-surface-variant); }

grid_view Stat Cards

Cards compactos para estatísticas em grelha.

156

Novos Leads

Em Negociação

Propostas

Ganhos

<!-- Stat Card -->
<div class="stat-card primary">
    <div class="stat-value">156</div>
    <div class="stat-label">Novos Leads</div>
</div>

/* Variantes: .primary, .secondary, .tertiary, .success */

payments Value Cards

Cards para apresentar valores monetários ou métricas importantes.

Meta Mensal 78%

€78,400 / €100,000

Pipeline Total

€342,800

Showroom €198,500

Retail €144,300

Comparação

Este Mês

€45.2K

Mês Anterior

€38.7K

arrow_upward +16.8% crescimento

<!-- Value Card with Progress -->
<div class="value-card">
    <div class="value-card-header">
        <span>Meta Mensal</span>
        <span class="percentage">78%</span>
    </div>
    <div class="value-card-amount">
        €78,400 <span>/ €100,000</span>
    </div>
    <div class="progress-bar">
        <div style="width: 78%"></div>
    </div>
</div>

person Entity Cards

Cards para representar entidades como leads, clientes, oportunidades.

João Silva

Empresa ABC, Lda

Showroom Qualificado

more_vert

Valor

€12,500

Probabilidade

75%

Fase

Proposta

Implementação CRM

Tech Solutions, SA

Negociação

€45,000

calendar_today Fecho previsto: 15 Fev 2026

<!-- Lead Card -->
<div class="entity-card">
    <div class="entity-header">
        <div class="avatar">JS</div>
        <div class="entity-info">
            <div class="entity-name">João Silva</div>
            <div class="entity-company">Empresa ABC</div>
        </div>
    </div>
    <div class="entity-meta">...</div>
</div>

<!-- Card com borda lateral colorida -->
.card-accent {
    border-left: 4px solid var(--md-sys-color-primary);
}

widgets Action Cards

Cards com ações ou estados interativos.

add_circle

Nova Oportunidade

Criar registo de oportunidade

chevron_right

Sistema Operacional

Última sincronização: há 2 min

inbox

Sem tarefas pendentes

<!-- Clickable Card -->
<div class="card card-clickable">
    <!-- hover: background mais escuro, lift -->
</div>

<!-- Status Indicator -->
<div class="status-dot online"></div>
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.status-dot.online {
    background: var(--md-sys-color-success);
    animation: pulse 2s infinite;
}

<!-- Empty State -->
<div class="card card-empty">
    <!-- border: 2px dashed outline-variant -->
</div>

Charts

Gráficos e visualizações de dados usando CSS puro e SVG. Ideais para dashboards e analytics.

bar_chart Bar Chart (Vertical)

Jan

Fev

Mar

Abr

Mai

Jun

<!-- Bar Chart Vertical -->
<div class="bar-chart">
    <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 60%;">
            <span>60</span>
        </div>
        <span class="bar-chart-label">Jan</span>
    </div>
    <!-- Variantes: .success, .secondary, .tertiary -->
</div>

align_horizontal_left Bar Chart (Horizontal)

Showroom

85%

€42.5K

Retail

62%

€31.0K

Online

45%

€22.5K

Partners

28%

€14.0K

<!-- Bar Chart Horizontal -->
<div class="bar-chart-horizontal">
    <div class="bar-chart-horizontal-item">
        <span class="bar-chart-horizontal-label">Label</span>
        <div class="bar-chart-horizontal-track">
            <div class="bar-chart-horizontal-bar"
                 style="width: 85%;">
                <span>85%</span>
            </div>
        </div>
        <span class="bar-chart-horizontal-value">€42.5K</span>
    </div>
</div>

show_chart Line Chart

Jan Fev Mar Abr Mai Jun Jul

<!-- Line Chart com SVG -->
<div class="line-chart">
    <svg viewBox="0 0 400 150">
        <!-- Grid lines -->
        <line class="line-chart-grid"
              x1="0" y1="75" x2="400" y2="75"/>
        <!-- Area fill -->
        <path class="line-chart-area"
              d="M0,120 L66,90 ... L400,150 L0,150 Z"/>
        <!-- Line -->
        <polyline class="line-chart-line"
                  points="0,120 66,90 133,100..."/>
        <!-- Dots -->
        <circle class="line-chart-dot"
                cx="0" cy="120" r="4"/>
    </svg>
</div>

area_chart Area Chart

Jan Fev Mar Abr Mai Jun Jul

Receita

Custos

<!-- Area Chart com múltiplas séries -->
<div class="area-chart">
    <svg viewBox="0 0 400 150">
        <!-- Área preenchida -->
        <path class="area-chart-area primary"
              d="M0,130 L66,100 ... L400,150 L0,150 Z"/>
        <!-- Linha -->
        <polyline class="area-chart-line primary"
                  points="0,130 66,100..."/>
    </svg>
</div>

/* Variantes: .primary, .secondary, .tertiary */

stacked_bar_chart Stacked Bar Chart (Vertical)

Jan

Fev

Mar

100

Abr

Mai

Jun

Showroom

Retail

Online

<!-- Stacked Bar Chart Vertical -->
<div class="stacked-bar-chart">
    <div class="stacked-bar-item">
        <span class="stacked-bar-total">85</span>
        <div class="stacked-bar-stack" style="height: 85%;">
            <div class="stacked-bar-segment primary"
                 style="height: 47%;">40</div>
            <div class="stacked-bar-segment secondary"
                 style="height: 29%;">25</div>
        </div>
        <span class="stacked-bar-label">Jan</span>
    </div>
</div>

align_horizontal_left Stacked Bar Chart (Horizontal)

€40K

€30K

€20K

€90K

€54K

€34K

€20K

€108K

€42K

€38K

€20K

€100K

€65K

€32K

€20K

€117K

Showroom

Retail

Online

<!-- Stacked Bar Chart Horizontal -->
<div class="stacked-bar-horizontal">
    <div class="stacked-bar-horizontal-item">
        <span class="stacked-bar-horizontal-label">Q1</span>
        <div class="stacked-bar-horizontal-stack">
            <div class="stacked-bar-horizontal-segment primary"
                 style="width: 40%;">€40K</div>
            <div class="stacked-bar-horizontal-segment secondary"
                 style="width: 30%;">€30K</div>
        </div>
        <span class="stacked-bar-horizontal-total">€90K</span>
    </div>
</div>

monitoring Mixed Chart (Bar + Line)

Jan Fev Mar Abr Mai Jun

Vendas (€)

Taxa conversão (%)

<!-- Mixed Chart (Bar + Line) -->
<div class="mixed-chart">
    <!-- Barras no fundo -->
    <div class="mixed-chart-bars">
        <div class="mixed-chart-bar"
             style="height: 50%;"></div>
    </div>
    <!-- Linha sobreposta -->
    <svg viewBox="0 0 400 150">
        <polyline class="mixed-chart-line"
                  points="33,95 100,70..."/>
        <circle class="mixed-chart-dot"
                cx="33" cy="95" r="5"/>
    </svg>
    <div class="mixed-chart-labels">...</div>
</div>

donut_large Donut Chart

€110K Total

Showroom 45%

Retail 30%

Online 20%

Partners 5%

<!-- Donut Chart com SVG -->
<svg class="donut-chart-svg" viewBox="0 0 160 160">
    <!-- stroke-dasharray: segmento circunferência -->
    <!-- Circunferência = 2 * π * r = 376.99 (r=60) -->
    <!-- Segmento 45% = 0.45 * 376.99 = 169.65 -->
    <circle class="donut-chart-segment"
            cx="80" cy="80" r="60"
            style="stroke: var(--md-sys-color-primary);
                   stroke-dasharray: 169.65 376.99;
                   stroke-dashoffset: 0;"/>
    <!-- Próximo segmento: offset = -soma anteriores -->
</svg>

speed Gauge Chart

75%

Conversão

50%

Pipeline

25%

Risco

<!-- Gauge Chart (semi-círculo) -->
<!-- Arco total = π * r = 188.5 (r=60) -->
<!-- 75% = 0.75 * 188.5 = 141.37 -->
<div class="gauge-chart">
    <svg viewBox="0 0 160 160">
        <!-- Background arc -->
        <path class="gauge-chart-bg"
              d="M 20,80 A 60,60 0 0,1 140,80"/>
        <!-- Fill arc -->
        <path class="gauge-chart-fill"
              d="M 20,80 A 60,60 0 0,1 140,80"
              style="stroke-dasharray: 141.37 188.5;"/>
    </svg>
    <span class="gauge-chart-value">75%</span>
</div>

trending_up Sparklines

€42.5K

trending_up +12.5%

€18.2K

trending_down -8.3%

156

Leads

<!-- Sparkline -->
<div class="sparkline success">
    <svg width="80" height="32" viewBox="0 0 80 32">
        <path class="sparkline-area"
              d="M0,28 L13,22 ... L80,32 L0,32 Z"/>
        <polyline class="sparkline-line"
                  points="0,28 13,22 26,24..."/>
    </svg>
</div>

/* Variantes: .success (verde), .error (vermelho), default (primary) */

list_alt Chart Legend

Showroom

Retail

Online

Partners

<!-- Chart Legend -->
<div class="chart-legend">
    <div class="chart-legend-item">
        <div class="chart-legend-dot"
             style="background: var(--md-sys-color-primary);"></div>
        <span class="chart-legend-text">Label</span>
    </div>
</div>

grid_on Heatmap

Seg Ter Qua Qui Sex Sáb Dom

09:00

12:00

15:00

18:00

Menos

Mais

<!-- Heatmap -->
<div class="heatmap">
    <div class="heatmap-row">
        <span class="heatmap-label">09:00</span>
        <div class="heatmap-cell level-3">12</div>
        <div class="heatmap-cell level-5">24</div>
        <!-- level-0 a level-5 para intensidade -->
    </div>
</div>

/* Níveis de intensidade */
.level-0 { background: surface; }
.level-1 { background: rgba(0, 212, 255, 0.2); }
.level-2 { background: rgba(0, 212, 255, 0.4); }
.level-3 { background: rgba(0, 212, 255, 0.6); }
.level-4 { background: rgba(0, 212, 255, 0.8); }
.level-5 { background: var(--md-sys-color-primary); }

space_dashboard Treemap

Showroom

€49.5K 45%

Retail

€33K 30%

Online

€27.5K 25%

<!-- Treemap com CSS Grid -->
<div class="treemap"
     style="grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;">
    <!-- Item grande (2 linhas) -->
    <div class="treemap-item primary"
         style="grid-row: span 2;">
        <span class="treemap-item-label">Label</span>
        <div>
            <span class="treemap-item-value">€49.5K</span>
            <span class="treemap-item-percent">45%</span>
        </div>
    </div>
    <!-- Variantes: .primary, .secondary, .tertiary, .success, .surface -->
</div>

filter_alt Funnel Chart

Visitas

1,250

100%

arrow_downward

Leads

800

64%

arrow_downward

Propostas

400

32%

arrow_downward

Negociação

200

16%

arrow_downward

Ganhos

125

10%

<!-- Funnel Chart -->
<div class="funnel-chart">
    <div class="funnel-stage">
        <span class="funnel-stage-label">Visitas</span>
        <div class="funnel-bar-container">
            <div class="funnel-bar"
                 style="width: 100%;
                        background: var(--md-sys-color-primary);">
                <span class="funnel-bar-value">1,250</span>
            </div>
        </div>
        <span class="funnel-stage-rate">100%</span>
    </div>
    <!-- Conector -->
    <div class="funnel-connector">
        <span class="material-symbols-rounded">
            arrow_downward
        </span>
    </div>
    <!-- Repetir para cada estágio -->
</div>

auto_graph ApexCharts (IoT Dashboard)

Gráficos interativos usando ApexCharts. Cada tipo suporta múltiplas opções de estilo configuráveis no painel do widget.

show_chart Line Chart

// Line Chart - Opções de estilo
{
    line_style: 'smooth',     // smooth, straight, stepline, dashed
    stroke_width: 2,
    show_markers: true,
    marker_size: 4,
    show_data_labels: false,
    zoomable: false,
    stacked: false,
    stacked_100: false,
    connect_null_data: false
}

area_chart Area Chart

// Area Chart - Opções de estilo
{
    line_style: 'gradient',   // basic, straight, stepline, gradient
    stroke_width: 2,
    fill_opacity: 40,         // 0-100%
    show_markers: false,
    stacked: true,
    github_style: false       // contribution graph style
}

bar_chart Column Chart

// Column Chart - Opções de estilo
{
    show_data_labels: true,
    data_labels_position: 'top',  // center, top
    stacked: false,
    distributed: false,        // different color per bar
    negative_colors: true,
    border_radius: 4,
    column_width: '60%',
    gradient_fill: false,
    pattern_fill: false
}

align_horizontal_left Bar Chart (Horizontal)

// Bar Chart - Opções de estilo
{
    show_data_labels: true,
    stacked: false,
    distributed: true,
    reversed: false,
    border_radius: 4,
    bar_height: '70%'
}

monitoring Mixed Chart

// Mixed Chart - Opções de estilo
{
    mixed_style: 'line_column',  // line_column, line_area, line_scatter
    multiple_yaxis: true,
    stroke_width: 3,
    show_legend: true,
    legend_position: 'bottom'
}

area_chart Range Area

// Range Area - Opções de estilo
{
    combo: true,              // show average line
    line_name: 'Average',
    fill_opacity: 24,
    show_legend: true
}

view_timeline Timeline / Range Bar

// Timeline - Opções de estilo
{
    group_rows: true,
    distributed: true,
    dumbbell: false,
    bar_height: '50%',
    border_radius: 4
}

pie_chart Pie Chart

// Pie Chart - Opções de estilo
{
    monochrome: false,
    monochrome_color: '#00d4ff',
    gradient: false,
    pattern: false,
    show_data_labels: true,
    show_percent: true,
    show_legend: true
}

donut_large Donut Chart

// Donut Chart - Opções de estilo
{
    semi_donut: false,         // 180° half donut
    donut_size: '70%',
    show_center_labels: true,
    center_label: 'Total',
    monochrome: false,
    gradient: true
}

speed Radial Bar / Gauge

// Radial Bar - Opções de estilo
{
    semi_circle: false,        // 180° gauge
    custom_angle: false,
    start_angle: -135,
    end_angle: 135,
    hollow_size: '70%',
    gradient: true,
    stroked: false,
    show_value: true
}

blur_circular Polar Area

// Polar Area - Opções de estilo
{
    monochrome: false,
    fill_opacity: 80,
    show_data_labels: false,
    show_yaxis: true,
    show_legend: true
}

radar Radar Chart

// Radar Chart - Opções de estilo
{
    polygon_fill: true,
    fill_opacity: 40,
    stroke_width: 2,
    show_markers: true,
    marker_size: 4,
    show_yaxis: false
}

candlestick_chart Candlestick

// Candlestick - Opções de estilo
{
    combo: false,             // show moving average line
    line_name: 'MA',
    upward_color: '#4caf50',
    downward_color: '#f44336',
    rotated_labels: false
}

box Box Plot

// Box Plot - Opções de estilo
{
    horizontal: false,
    show_outliers: true,
    upper_color: '#00d4ff',
    lower_color: '#ccc2dc'
}

scatter_plot Scatter Chart

// Scatter Chart - Opções de estilo
{
    datetime_xaxis: false,
    marker_size: 10,
    marker_shape: 'circle',  // circle, square
    x_axis_title: 'X',
    y_axis_title: 'Y'
}

bubble_chart Bubble Chart

// Bubble Chart - Opções de estilo
{
    datetime_xaxis: false,
    effect_3d: true,
    min_bubble_radius: 10,
    max_bubble_radius: 50,
    fill_opacity: 80
}

grid_on Heatmap (ApexCharts)

// Heatmap - Opções de estilo
{
    multiple_colors: false,
    flipped: false,
    color_range: false,
    rounded: false,
    radius: 4,
    show_data_labels: true
}

space_dashboard Treemap (ApexCharts)

// Treemap - Opções de estilo
{
    distributed: true,
    enable_shades: true,
    color_range: false,
    border_radius: 4,
    show_data_labels: true,
    show_values: true
}

trending_up Sparkline (ApexCharts)

€42.5K

+12.5%

156

-8.3%

// Sparkline - Opções de estilo
{
    type: 'line',           // line, area, bar
    color: '#00d4ff',
    curve: 'smooth',        // smooth, straight, stepline
    stroke_width: 2,
    fill: true,
    gradient: true
}

table_rows Data Widgets (IoT Dashboard)

Widgets para exibição de dados tabulares, logs e conteúdo personalizado.

table_rows Data Table

Timestamp	Device	Metric	Value	Status
14:32:15	Sensor-01	temperature	23.5°C	Normal
14:32:10	Sensor-02	humidity	65%	High
14:32:05	Sensor-03	pressure	1013 hPa	Normal
14:32:00	Sensor-01	temperature	24.1°C	Alert
14:31:55	Sensor-04	co2	412 ppm	Normal

// Data Table - Opções de estilo
{
    columns: ['timestamp', 'device', 'metric', 'value'],
    show_header: true,
    striped: true,
    compact: false,
    max_rows: 10,
    sortable: true,
    show_pagination: false
}

// Dados esperados: array de readings
[
    { recorded_at: '2024-01-15T14:32:15', metric_key: 'temperature', value_number: 23.5 },
    ...
]

receipt_long Logs Viewer

14:32:15 INFO Device Sensor-01 connected successfully

14:32:10 WARN Humidity threshold exceeded on Sensor-02 (65% > 60%)

14:32:05 INFO Reading received from Sensor-03: pressure=1013hPa

14:32:00 ERROR Temperature alert triggered on Sensor-01 (24.1°C > 24°C)

14:31:55 DEBUG Heartbeat received from gateway GW-001

14:31:50 INFO Batch processing completed: 15 readings ingested

// Logs Widget - Opções de estilo
{
    max_lines: 50,
    show_timestamp: true,
    show_level: true,
    auto_scroll: true,
    filter_level: 'all',     // all, error, warning, info, debug
    monospace: true,
    wrap_lines: false
}

// Dados esperados: array de log entries
[
    { timestamp: '14:32:15', level: 'info', message: 'Device connected' },
    ...
]

draw Canvas (Freeform)

// Canvas Widget - Elementos configuráveis
{
    elements: [
        {
            type: 'circle',       // circle, rect, text, image, line
            x: 100,
            y: 100,
            radius: 20,
            fill: 'var(--md-sys-color-primary)',
            data_binding: {
                device_id: 'sensor-01',
                metric_key: 'temperature',
                display: 'value'       // value, status, color
            }
        },
        {
            type: 'text',
            x: 100,
            y: 130,
            content: 'Sensor 01',
            font_size: 12,
            color: 'var(--md-sys-color-on-surface-variant)'
        },
        {
            type: 'image',
            x: 0,
            y: 0,
            width: 400,
            height: 300,
            src: '/images/floor-plan.png'
        }
    ],
    background: 'transparent',
    grid: false
}

Date & Time Pickers

Componentes para seleção de datas e horas seguindo os padrões Material Design.

calendar_month Date Picker

Janeiro 2026

DSTQQSS

<!-- Date Picker -->
<div class="date-picker">
    <div class="date-picker-header">
        <span class="date-picker-title">Janeiro 2026</span>
        <div class="date-picker-nav">...</div>
    </div>
    <div class="date-picker-weekdays">...</div>
    <div class="date-picker-days">
        <button class="date-picker-day">1</button>
        <button class="date-picker-day selected">15</button>
        <button class="date-picker-day today">29</button>
        <button class="date-picker-day other-month">1</button>
    </div>
    <div class="date-picker-actions">...</div>
</div>

schedule Time Picker

<!-- Time Picker -->
<div class="time-picker">
    <div class="time-picker-display">
        <input class="time-picker-input" value="10">
        <span class="time-picker-separator">:</span>
        <input class="time-picker-input" value="30">
        <div class="time-picker-period">
            <button class="active">AM</button>
            <button>PM</button>
        </div>
    </div>
</div>

Search

Componente de pesquisa com sugestões e estados interativos.

search Search Input

<!-- Search Input -->
<div class="search-container">
    <div class="search-input-wrapper">
        <span class="material-symbols-rounded">search</span>
        <input class="search-input" placeholder="Pesquisar...">
        <button class="search-clear">...</button>
    </div>
</div>

manage_search Search com Sugestões

history blipee showroom

history blipee retail

search blipee analytics

trending_up blipee dashboard

<!-- Search com Sugestões -->
<div class="search-container">
    <div class="search-input-wrapper">...</div>
    <div class="search-suggestions">
        <div class="search-suggestion">
            <span class="material-symbols-rounded">history</span>
            <span class="search-suggestion-text">
                <mark>blip</mark>ee showroom
            </span>
        </div>
    </div>
</div>

Sheets

Bottom sheets e side sheets para conteúdo secundário ou ações contextuais.

bottom_sheets Bottom Sheet

Conteúdo principal da página...

Opções

share Partilhar

link Copiar link

edit Editar

delete Eliminar

<!-- Bottom Sheet -->
<div class="bottom-sheet">
    <div class="bottom-sheet-handle"></div>
    <div class="bottom-sheet-header">
        <span class="bottom-sheet-title">Opções</span>
        <button class="btn btn-icon">...</button>
    </div>
    <div class="bottom-sheet-content">
        <!-- List items -->
    </div>
</div>

side_navigation Side Sheet

Conteúdo principal da página com informações importantes...

O side sheet aparece à direita para detalhes adicionais.

Detalhes

Cliente: João Silva

Email: joao@email.com

Telefone: +351 912 345 678

Criado: 29 Jan 2026

<!-- Side Sheet -->
<div class="side-sheet-demo">
    <div class="side-sheet-content">
        <!-- Conteúdo principal -->
    </div>
    <div class="side-sheet">
        <div class="side-sheet-title">Detalhes</div>
        <!-- Conteúdo do sheet -->
    </div>
</div>

Carousel

Componente para apresentar múltiplos itens numa sequência navegável.

view_carousel Carousel Básico

Slide 1

Slide 2

Slide 3

<!-- Carousel -->
<div class="carousel">
    <div class="carousel-track">
        <div class="carousel-slide">Slide 1</div>
        <div class="carousel-slide">Slide 2</div>
        <div class="carousel-slide">Slide 3</div>
    </div>
    <div class="carousel-controls">
        <button class="carousel-btn">
            <span class="material-symbols-rounded">chevron_left</span>
        </button>
        <button class="carousel-btn">
            <span class="material-symbols-rounded">chevron_right</span>
        </button>
    </div>
    <div class="carousel-indicators">
        <div class="carousel-indicator active"></div>
        <div class="carousel-indicator"></div>
    </div>
</div>

// JavaScript
let currentSlide = 0;
function moveCarousel(dir) {
    const track = document.querySelector('.carousel-track');
    const slides = track.children.length;
    currentSlide = (currentSlide + dir + slides) % slides;
    track.style.transform = `translateX(-${currentSlide * 100}%)`;
    updateIndicators();
}

Feedback

Progress indicators, toasts, estados de loading e feedback visual.

progress_activity Progress Indicators

Linear Progress

Determinate (50%)

Indeterminate

Circular Progress

A carregar...

<!-- Linear Progress -->
<div class="progress-linear">
    <div class="progress-linear-bar" style="width: 50%"></div>
</div>

<!-- Indeterminate -->
<div class="progress-linear progress-linear-indeterminate">
    <div class="progress-linear-bar"></div>
</div>

<!-- Circular Progress -->
<svg class="progress-circular" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
</svg>

/* CSS */
.progress-linear {
    height: 4px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: 2px;
    overflow: hidden;
}
.progress-linear-bar {
    height: 100%;
    background: var(--md-sys-color-primary);
}

notifications Toast / Snackbar

Alterações guardadas com sucesso

error Erro ao guardar alterações

<!-- Toast -->
<div class="toast">
    Alterações guardadas
    <button class="toast-action">Desfazer</button>
</div>

/* CSS */
.toast {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    border-radius: var(--md-sys-shape-corner-small);
}

water_drop Ripple Effect

Efeito de feedback visual ao clicar em elementos interativos.

/* Ripple CSS */
.ripple-container {
    position: relative;
    overflow: hidden;
}
.ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.2;
    transform: scale(0);
    animation: ripple-effect 0.6s ease-out;
}
@keyframes ripple-effect {
    to { transform: scale(4); opacity: 0; }
}

/* JavaScript */
function createRipple(event) {
    const button = event.currentTarget;
    const ripple = document.createElement('span');
    const rect = button.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);

    ripple.style.width = ripple.style.height = size + 'px';
    ripple.style.left = event.clientX - rect.left - size/2 + 'px';
    ripple.style.top = event.clientY - rect.top - size/2 + 'px';
    ripple.classList.add('ripple');

    button.appendChild(ripple);
    ripple.addEventListener('animationend', () => ripple.remove());
}

center_focus_strong Focus Ring

Indicador visual de foco para acessibilidade (navegação por teclado).

/* Focus Ring CSS */
.focus-ring:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

/* Aplicar globalmente */
:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

/* Nota: :focus-visible só aparece na navegação por teclado,
   não ao clicar com o rato - melhor UX */

hourglass_empty Empty States

inbox

Nenhum item encontrado

Crie o primeiro item para começar.

<!-- Empty State -->
<div class="empty-state">
    <span class="material-symbols-rounded">inbox</span>
    <h3>Nenhum item encontrado</h3>
    <p>Crie o primeiro item para começar.</p>
    <button class="btn btn-filled">Criar Novo</button>
</div>

/* CSS */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--md-sys-color-on-surface-variant);
}
.empty-state .material-symbols-rounded {
    font-size: 64px;
    opacity: 0.3;
    margin-bottom: 16px;
}

web_stories Snackbar

Mensagens breves na parte inferior do ecrã com ação opcional.

Item adicionado ao carrinho

Ficheiro eliminado

check_circle Alterações guardadas com sucesso

<!-- Snackbar simples -->
<div class="snackbar">
    <span class="snackbar-text">Mensagem</span>
</div>

<!-- Com ação -->
<div class="snackbar">
    <span class="snackbar-text">Ficheiro eliminado</span>
    <button class="snackbar-action">Anular</button>
</div>

<!-- Com ícone e fechar -->
<div class="snackbar with-icon">
    <span class="material-symbols-rounded snackbar-icon">check_circle</span>
    <span class="snackbar-text">Sucesso!</span>
    <button class="snackbar-close">...</button>
</div>

tooltip Tooltips

Dicas contextuais que aparecem ao passar o rato sobre elementos.

<!-- Tooltip simples -->
<div class="tooltip-trigger">
    <button>...</button>
    <div class="tooltip top">Texto</div>
</div>

<!-- Posições: .top, .bottom, .left, .right -->

<!-- Rich tooltip -->
<div class="tooltip tooltip-rich bottom">
    <div class="tooltip-rich-title">Título</div>
    <div class="tooltip-rich-text">Descrição...</div>
</div>

Design System

Branding Assets

Logo Curto (Ícone)

Logo Expandido (Nome)

Favicon (Ícone do Browser)

Logos Standard

Esquema de Cores - Brand Principal

Campanhas de Sensibilização

Esquemas de Cores por Campanha

Guia de Utilização

Sistema de Cores

Tipografia

Escala de Espaçamento

Sistema de Elevação

Layout & Grid

Navegação

Dashboard

Dashboard

Botões

Formulários

Selection Controls

Dialogs & Menus

Eliminar item?

Lists

Chips & Badges

Cards

Charts

auto_graph ApexCharts (IoT Dashboard)

table_rows Data Widgets (IoT Dashboard)

Date & Time Pickers

Search

Sheets

Carousel

Feedback