Akme Design System 2026 V2

Arquitetura

Layers do Design System

LAYER 0

Infrastructure

Tailwind CSS CDN + Inter font + JetBrains Mono. As unicas constantes que sobreviveram a todas as iteracoes.

Tailwind CDN Inter JetBrains Mono

LAYER 1

Foundation foundation.css

Tokens compartilhados: surfaces (slate), text, borders, spacing, typography, shadows, transitions. Ambas as marcas herdam.

Surfaces Text Spacing Radius Shadows

LAYER 2a

Akme Brand akme-tokens.css

Blue-500/600 primary. Componentes corporativos: nav, cards, tables, forms, badges.

LAYER 2b

Smart Navigator cockpit-tokens.css

Sky-400 primary + ICAO/FAA colors. Cockpit components: telemetry, alerts, panels, data strips.

Foundation Tokens

Tokens Compartilhados

Surfaces

--f-bg #020617

--f-surface #0f172a

--f-surface-raised #1e293b

--f-surface-hover #334155

--f-surface-active #475569

Text Hierarchy

Primary Text --f-text #f8fafc

Secondary Text --f-text-secondary #94a3b8

Muted Text --f-text-muted #64748b

Disabled Text --f-text-disabled #475569

Semantic Colors (Foundation)

Success

--f-success #10b981

Warning

--f-warning #f59e0b

Error

--f-error #ef4444

Info

--f-info #06b6d4

Brand Extensions

Duas Marcas, Uma Foundation

Akme Sistemas

Buttons

Card

Titulo do Card

Conteudo do card com texto secundario e informacoes relevantes para o usuario.

Input

Badges

Ativo Concluido Pendente Erro

Table

Projeto	Status	Progresso
PRJ336 Pixel Perfect	Ativo	72%
PRJ309 Smart Navigator	Em Progresso	45%

Smart Navigator

Buttons

Telemetry

GS 125 KTS

ALT 5,500 FT

HDG 074 DEG

VS +800 FPM

Alerts

GPS 3D FIX - 12 satellites in view

TERRAIN - 500ft clearance

PULL UP - Terrain ahead

Panel

COM/NAV Frequencies

COM1 118.30 MHz

NAV1 110.50 MHz

ICAO/FAA Semantic

ACTIVE INFO STANDBY CAUTION CRITICAL EXTREME

Como Usar

Import Order

Pagina Akme (Portal, ECM, Gecobo)

<!-- Fonts -->
<link href="...Inter..." rel="stylesheet">
<link href="...JetBrains Mono..." rel="stylesheet">

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Design System -->
<link rel="stylesheet" href="foundation.css">
<link rel="stylesheet" href="akme-tokens.css">

Pagina Smart Navigator (EFB, PFD)

<!-- Fonts -->
<link href="...Inter..." rel="stylesheet">
<link href="...JetBrains Mono..." rel="stylesheet">

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Design System -->
<link rel="stylesheet" href="foundation.css">
<link rel="stylesheet" href="cockpit-tokens.css">

Catalogo