Cockpit Design System

Smart Navigator 2026 - Baseado em Garmin GTN Xi

Telas do Smart Navigator

Prototipos HTML das telas do Smart Navigator com o Cockpit Design System aplicado.

Primary Flight Display

A tela mais importante do Smart Navigator - Design Cockpit Profissional

Abrir Prototipo
✓ Hierarquia visual profissional
✓ Codigo de cores ICAO/FAA
✓ Tipografia para turbulencia
✓ Posicao por memoria muscular

Aplicacao Smart Navigator

Landing Page

Tela inicial com branding

Home

Dashboard com status

Navigation

Dados de navegacao

Nearest

Objetos proximos

Flight Plan

Plano de voo

Weather

Meteorologia

Tools

Ferramentas

Estudos e Layouts

Garmin Pilot

Layout com mapa e controles

MapBox FullScreen

Mapa em tela cheia

Layout Grid

Estudo de grid

Layout Detalhe

Estudo de detalhe

Cores Semanticas

Status & Feedback

Active

#00FF00

Info

#00D4FF

Standby

#FFCC00

Caution

#FF9900

Critical

#FF0000

Extreme

#FF00FF

Traffic (TCAS Standard)

Other Traffic

Non-threat

Proximity

6nm / 1200ft

Traffic Advisory

TA - Caution

Resolution Adv.

RA - Action Required

Weather Radar Returns

Light Moderate Heavy Extreme

Surfaces & Backgrounds

Background

#000000

Surface

#0A0A0A

Elevated

#141414

Hover

#1A1A1A

Tipografia

HEADINGS

Heading 4XL

Heading 3XL

Heading 2XL

Heading XL

Heading LG

DATA DISPLAY (Monospace)

GS 125 KT
ALT 5,500 FT
HDG 347 °

Botoes (Cockpit Style)

Command Buttons

Action Buttons (Footer)

Directional & Zoom

Up / Down

Botoes para Mapa (Opcoes de Estilo)

Dois estilos de botoes estao sendo avaliados para controles de mapa. Compare as opcoes abaixo para decidir qual padrao adotar.

ESTILO A

Bordas Coloridas + Glow

Bordas coloridas semanticas, fundo gradiente semi-transparente, efeito glow no hover. Ver em EstudoMapBoxFullScreen.html

PREVIEW

+ Feedback visual claro por cor

+ Hierarquia semantica evidente

+ Efeito glow moderno no hover

- Mais elementos visuais competindo

ESTILO B

Flat / Solido

Fundo solido escuro, bordas minimas ou ausentes, estilo mais limpo e discreto. Ver em GarminPilot.html

PREVIEW

+ Visual mais limpo e discreto

+ Nao compete com o conteudo do mapa

+ Estilo Garmin tradicional

- Menor destaque para acoes primarias

Caracteristica Estilo A Estilo B
Bordas Coloridas semanticas Minimas/sutis
Background Gradiente transparente Solido escuro
Hover Glow + box-shadow Leve clareamento
Uso ideal Controles destacados UI discreta sobre mapa
Referencia EstudoMapBoxFullScreen GarminPilot

Nota: O sistema de botoes unificado (.sn-btn) foi implementado em EstudoMapBoxFullScreen.html com variantes de tamanho (sm, lg), cor (primary, success, danger, ghost) e modificadores (icon, block, group).

Data Display Panels

COM
136.97
118.00
NAV
117.95
108.00
XPDR
IDENT 1200
MODE ALT

Flight Data Strip (Status Bar)

TRK 347°
DTK 350°
BRG 352°
GS 125 KT
ETE 1:23
DIS 45.2 NM

App Icons (Home Page Grid)

Alerts & Messages

Advisory

Database expires in 3 days. Update recommended.

CAUTION

Terrain within 500ft. Check altitude.

WARNING - TERRAIN

PULL UP! PULL UP!

TRAFFIC

Traffic Advisory - 2 o'clock, 3nm, same altitude

Checklist Component

Database Updates