design system
Ginga transforma um Galaxy Tab em segunda tela do Mac. O nome carrega as duas leituras da marca: 銀河, galáxia em japonês, e a ginga da capoeira. A interface inteira segue essa ideia: um céu calmo e escuro, um tablet levemente inclinado fora do eixo, e movimentos que passam um pouco do ponto e voltam, como um balanço.
Ginga é também o nome do código: módulos, a ferramenta de linha de comando ginga, logs e bundle id.
adb reverse tcp:47800 tcp:47800, portas, codec) fica recolhido em Avançado ou Diagnóstico.mono: 2560×1600, 60 Hz, 482 913. Use “×”, não “x”.Temas. Os apps têm três, escolhidos pela pessoa (Claro / Escuro / Black espacial) ou seguindo o sistema. O site usa só Claro e Escuro, com as telas de marca em cosmos:
bg Névoa, surface branco, texto ink Noite.bg Noite, surface Superfície escura, primária Cobalto noturno.bg é #000 e toma o lugar de cosmos nas telas de marca dos apps; tudo que é área (bg, surface, surface-2, fundo do stream) é #000000 exato; cartões e controles existem só pelo contorno line de 1px e pelo brilho glow-cobalt, sem nenhum cinza‑escuro; detalhes espaciais pequenos: poeira de estrelas no canto de cada grupo, halo no toggle ligado e no status, código de pareamento com leve brilho. Nunca fundos grandes em cinza: se não for preto, é pequeno.Cor. Use cobalt para a única ação principal da tela, toggles ligados, links e o anel de foco; texto sobre ele em on-cobalt. star é só a estrela e faíscas, nunca texto. Estados: success, warning, danger aparecem como ponto ou ícone ao lado de texto em ink (no tema claro, success e warning ficam abaixo de 4.5:1 como texto). cobalt-brand é fixo e pinta a placa do ícone e o cometa. Fique longe do azul da Samsung (#1428A0) e de degradês à la Apple: a marca não pode parecer afiliada a nenhuma das duas.
Tipo. display e title em Unbounded, só SemiBold (600) ou ExtraBold (800), e só em títulos de tela, estados grandes e marca. Todo o resto em Figtree (headline, body, label, caption). Números, specs e códigos em IBM Plex Mono (mono, code-digits). No Mac, a UI nativa pode seguir com SF Pro e usar Unbounded só no título da janela e na marca.
Espaço e forma. Grade de 4px: space-3/space-4 dentro das linhas, space-6 entre grupos, space-8 de margem. Cantos: radius-md em botões e campos, radius-lg em grupos, radius-xl em sheets e alertas, radius-pill em toggles, status e botões do tablet (toque de 44px).
Profundidade. Claro: shadow-card suave. Escuro: borda de luz no topo. Black espacial: sem sombra, só contorno e brilho. Alertas e sheets usam shadow-float sobre um véu cosmos a 40%.
Foco. Anel sólido de 2px em cobalt, afastado 2px, em todo controle focável. Passa de 3:1 em todas as superfícies dos três temas.
O movimento é o “espacial” da marca, e é barato: só transform e opacity, um único canvas para o céu, nada animando fora da tela.
ease-ginga): toggles, dígitos surgindo, o tablet encaixando. Passa ~6% do ponto e volta.dur-tap.star saem do centro (Ginga.spark). Nunca ao desligar.dur-orbit, ease-orbit.star atravessa de Mac para tablet em dur-warp, termina num anel que se expande e o tablet entra em warp (estrelas esticando) até o primeiro quadro.cobalt corre pelo cabo no lugar do cometa.Ginga.starfield (suave) ou Ginga.pixelSky (em pixels) em telas de marca apenas.ginga-app-icon.png (placa cobalt-brand), ginga-orbit.png / ginga-orbit-dark.png sem placa.-dark em fundos mais escuros que #6F82FF (temas Escuro e Black espacial e todo fundo cosmos).cobalt dentro de g-row__icon. No Mac, SF Symbols equivalentes são aceitos. A barra de menus usa o mark A em modelo (template) monocromático.Veja a seção Fluxos de UI/UX para as telas de cada app e o componente ConnectDemo para a demo clicável (Mac + tablet) com a animação de conexão.
Como os dois apps mudam com a marca Ginga. Base: a UI atual de 26/09/2026 (painel SwiftUI com 9 seções soltas; tela Android em Views XML com instruções longas e radio buttons). Objetivo: uma decisão por tela, o técnico recolhido, o estado sempre visível.
adb sai da tela inicial e vai para Avançado.| Estado | Ícone (mark A, template) | Menu |
|---|---|---|
| Desligado | contorno | “Ginga está desligado” · Aceitar tablets · Abrir Ginga… · Sair |
| Procurando | estrela pisca | “Anunciando na rede” · tablets pareados (com ponto de estado) · Parar |
| Conectado | ponto success no canto | “Galaxy Tab S11 · 60 Hz · Wi‑Fi” · Pausar display · Desconectar · Ajustes de Telas… |
| Erro | ponto danger | a causa em palavras + a ação (“Cabo desconectado · Tentar de novo”) |
title) + StatusOrbit.mono, Esquecer). Vazio: “Nenhum tablet pareado ainda.”mono.Ajustes (janela separada, grupos): Display (resolução, HiDPI, taxa 60/120 Hz como Segmented, posição, alinhamento) · Toque e S Pen (um dedo, ⌘ no teclado do tablet, permissão de Acessibilidade) · Captura (cursor, downscale) · Energia (codificador) · Aparência (Claro / Escuro / Black espacial / Sistema) · Avançado (adb, porta, prévia de debug).
Sheet presa à janela (não NSAlert solto): ícone A, “Parear com Galaxy Tab S11?”, PairingCode em dois grupos, “O tablet mostra o mesmo código? Pareie só tablets seus.”, Não parear / Parear. Ao parear: faísca, sheet fecha, cometa.
display “Conectado” ou “Pausado”, explicação curta (“Nada do Mac está nesta tela, então ele parou de enviar.”), Mostrar tela (primário) e Desconectar.cosmos com o buraco negro em dithering (DitherSpace) centralizado, “Transmitindo de MacBook Pro do Kelvin” em stardust e status Conectando…. Tocar no horizonte explode as partículas (microinteração). Quando chega o primeiro quadro: warp e o stream.mono/star (“DIRECT‑Ginga‑4F2A”), “O Mac está entrando na órbita deste tablet.” e Encerrar.#000 em vez de cosmos.Reconectar automaticamente (toggle) · Taxa preferida (Segmented: Mac decide / 60 Hz / 120 Hz) · Decodificação rápida (toggle, “usa mais bateria”) · Aparência (Claro / Escuro / Black espacial / Sistema) · Diagnóstico (toggle) · Avançado (instruções adb).
| Passo | Mac | Tablet | Movimento |
|---|---|---|---|
| 1 Ligar | Toggle Wi‑Fi ou USB | Radar procurando | Faísca no toggle; órbita no status |
| 2 Encontrar | “Anunciando na rede” | DeviceRow entra subindo | g-rise 420ms |
| 3 Parear (1ª vez) | Sheet com código | Mesmo código | Dígitos surgem como estrelas |
| 4 Estender | Status Conectado, tablet na lista, primário vira Desconectar | Warp → área de trabalho estendida | Cometa (Wi‑Fi) ou pulso no cabo (USB), anel no tablet, tablet encaixa |
| Sem roteador | Sheet explica que o Mac sai do Wi‑Fi | Galáxia em dithering + nome da rede | Galáxia girando devagar |
| Pausado | Status Pausado | “Pausado” + Mostrar tela | Órbita para |
| Erro | Ponto danger + causa + ação | Mesmo texto | Sem animação |
Os valores de cada tema: Claro, Escuro e Black espacial. O quadrado grande segue o tema escolhido no topo.
Primária (Cobalto / Cobalto noturno). Botões principais, toggles ligados, links, anel de foco, o tablet da marca. Como texto: 5.7:1 em bg e 6.3:1 em surface no claro; 5.1:1 em surface no escuro. Black espacial: Cobalto noturno, 5.9:1 sobre preto.
Texto e ícones sobre um preenchimento cobalt. Branco no claro (6.3:1), Noite no escuro (5.3:1): branco sobre o Cobalto noturno fica em 3.2:1 e não passa. Black espacial: preto.
Cobalto fixo, igual nos dois temas: a placa do ícone do app, o tablet do logotipo, o cometa da animação de conexão. Nunca como texto no escuro.
Adição intencional. Fundo de estado selecionado (segmento ativo, linha em foco, halo do toggle). Texto sobre ele: ink. Black espacial: único tom não preto permitido em área, e só em elementos pequenos (segmento ativo, chip).
Fundo da janela e da tela: Névoa no claro, Noite no escuro, preto puro #000000 no Black espacial (pixels apagados em AMOLED, zonas desligadas em mini‑LED).
Cartões e grupos de configurações sobre bg (Superfície escura no escuro). Black espacial: também #000000; o cartão existe só pelo contorno line e pelo brilho, nunca por um cinza.
Adição intencional. Trilho do segmented control, blocos de código (adb reverse …), trilho do toggle desligado. Black espacial: #000000 com contorno line.
Texto principal sobre bg, surface, surface-2 e cobalt-soft (15:1 ou mais nos dois temas).
Adição intencional. Valores à direita das linhas, legendas, ajuda. Sobre bg, surface e surface-2: 5.5:1 ou mais no claro, 6.4:1 ou mais no escuro. Black espacial: 7.1:1 ou mais.
Divisórias entre linhas de um grupo e contorno de cartões. Decorativa: nunca é a única coisa que separa um controle. No Black espacial é o que desenha os cartões sobre o preto.
Estrela. Só a estrela da marca, a faísca dos microinterações e pequenos destaques (o selo “120 Hz”). Nunca texto longo: 2:1 sobre branco no claro.
Conectado / transmitindo. No claro fica 4.4:1 sobre branco (valor da marca, mantido): use como ponto ou ícone ao lado de texto em ink, não como texto corrido.
Pausado / aguardando pareamento. No claro fica 4.2:1 sobre branco (valor da marca, mantido): ponto ou ícone com rótulo em ink.
Erro, “Esquecer tablet”, “Desconectar” destrutivo. 5.3:1 sobre branco, 6:1 sobre surface no escuro. Sempre com palavra, nunca só a cor.
Adição intencional. O céu da marca: site, onboarding, a demo de conexão, espera do stream nos temas Claro e Escuro. Igual nos temas; no Black espacial os apps usam bg (#000) no lugar dele. Texto: stardust.
Adição intencional. Texto e estrelas sobre cosmos (17.5:1). Estrelas pequenas a 30–90% de opacidade.
Entre ícone e rótulo.
Entre botões vizinhos, dentro de pílulas.
Padding vertical de uma linha de configuração.
Padding horizontal de linhas e cartões.
Entre grupos de configurações.
Margem da janela no Mac, margem da tela no tablet.
Respiro de telas de marca e do stage da demo.
Botões pequenos, chips, blocos de código.
Botões, campos, segmented control.
Grupos de configurações e cartões.
Folhas (sheets) no tablet, alerta de pareamento, janela da demo.
Toggles, pílulas de status, botões do tablet.
No Black espacial não há sombra (preto não projeta sombra em preto): elevação vira contorno fino de luz cobalto e brilho.
Grupos e cartões. No escuro a borda de luz de cima substitui a sombra.
Alertas, sheets, popovers.
Halo de hover/foco do botão primário e do toggle ligado.
Brilho da estrela e da faísca. Nunca em texto.
Clique numa trilha para ver a duração ou a curva.
Pressionar: escala 0.97 de botões e linhas.
Toggles, segmentos, troca de estado.
Abrir alertas e sheets; entrada de cartões.
Uma volta do satélite no status “Procurando”.
Viagem do cometa Mac → tablet ao conectar.
O balanço: leve passada do ponto e volta. Toggles, estrelas surgindo, o tablet encaixando.
Entradas, sheets, fades.
Rotações contínuas (órbitas, radar).
Exports PNG oficiais da marca (os SVGs vivem em design/brand/ no repositório).
ginga-app-icon.png — mark A na placa cobalt-brand (1024 px). Ícone dos apps, lojas, favicon.ginga-orbit.png / ginga-orbit-dark.png — mark A sem placa. Tinta Noite + tablet Cobalto no claro; branco + Cobalto noturno no escuro.ginga-monogram.png / ginga-monogram-dark.png — mark B, o “g”. Detalhes: cabeçalhos, loading, avatares. Nunca ícone de app.ginga-wordmark.png / ginga-wordmark-dark.png — mark C, o logotipo. Header, footer, hero.Use as -dark sobre fundos mais escuros que #6F82FF: temas Escuro, Black espacial e cosmos. Não recolorir, endireitar o tablet, sombrear ou aplicar degradê.
Demo interativa: clique na UI do Mac e do tablet para conectar. O seletor de tema muda só a UI dos apps; o site fica igual.
Demo clicável do fluxo de conexão: um MacBook e um Galaxy Tab lado a lado sob um céu, com a UI nova dos dois apps.
O consumidor fornece nada: é uma página de vitrine (site, apresentação, testes de usabilidade). Carrega tokens.css, bundle.css e bundle.js.
star pulsante com rótulo aponta sempre o próximo clique; a narração embaixo explica o passo.transform/opacity. Movimento reduzido pula cometa e warp.Primário, secundário, fantasma, destrutivo
Botão de ação: uma ação primária por tela, o resto secundário ou fantasma.
O consumidor fornece o rótulo (verbo no infinitivo: “Criar display”, “Conectar”) e, se quiser, a estrela g-btn__star só no primário.
g-btn--primary: fundo cobalt, texto on-cobalt, halo glow-cobalt no hover. Uma por tela (Mac: “Criar display”/“Remover display”; tablet: “Conectar”).surface-2.g-btn--ghost: links de ação (“Mostrar prévia”, “Ajustes de Telas…”).g-btn--danger: “Esquecer”, “Desconectar” quando encerra uma sessão ativa. Texto danger, contorno line.g-btn--pill (44px) no tablet, para toque; g-btn--sm (28px) em linhas do Mac.dur-tap. Desativado: 45% de opacidade, sem hover.star.Orientação e taxa de atualização
Escolha entre 2 a 4 opções curtas, visíveis ao mesmo tempo (orientação, taxa de atualização).
O consumidor fornece div.g-seg com um span.g-seg__thumb e botões com aria-pressed; liga com Ginga.segmented(root, onChange).
surface-2, polegar surface com shadow-card que desliza com ease-ginga.Toggle com faísca ao ligar
Toggle liga/desliga para opções que valem na hora (sem “Aplicar”).
O consumidor fornece um <input type="checkbox" role="switch"> dentro de label.g-switch, seguido de g-switch__track e g-switch__thumb; o rótulo fica na linha (g-row__label), não no switch.
cobalt, polegar branco desliza com ease-ginga (passa um pouco e volta).Ginga.spark(switchEl): sete pontinhos star saem do centro. Só ao ligar, nunca ao desligar.cobalt de 2px. Com movimento reduzido não há faísca.Código de 6 dígitos em dois grupos
Os seis dígitos de pareamento, iguais no Mac e no tablet, surgindo um a um como estrelas.
O consumidor fornece os dígitos: el.innerHTML = Ginga.pairingCode("482913").
code-digits em ink.ease-ginga; com movimento reduzido aparecem direto.aria-label.headline) e os botões “Parear” (primário) / “Não parear”.Seis estados de conexão
Pílula de estado da conexão: um “planeta” colorido com uma órbita animada, e o estado em palavras.
O consumidor fornece o estado (g-status--searching|pairing|connected|paused|error, nenhum = desligado) e o texto.
cobalt girando (ease-orbit). Aguardando código e Conectado: pulso que se expande. Pausado e Erro: parados.ink (os tons de estado no claro não chegam a 4.5:1 como texto).mono (“60 Hz”, “2560×1600”).Tablet pareado ou Mac encontrado
Uma linha por aparelho: tablets pareados no Mac, Macs encontrados no tablet.
O consumidor fornece o nome amigável (nunca só o modelo cru: “Galaxy Tab S11”, com “SM‑X730” no meta), o meta em mono (estado · via) e uma ação.
cobalt-brand e star.g-rise, dur-sheet), escalonadas 120ms, como estrelas aparecendo.Grupo de linhas, substitui o Form do Mac
Grupo de linhas em cartão: a unidade de toda tela de ajustes, no Mac e no tablet.
O consumidor fornece um título curto (g-group-title, fora do cartão), as linhas (g-row) e, se preciso, uma ajuda (g-help) abaixo.
surface com radius-lg e shadow-card sobre bg; divisórias line recuadas space-4.g-row__icon, 28px, cobalt sobre cobalt-soft), rótulo body, subtítulo caption em ink-muted, e à direita um valor (g-row__value, números em mono), um Switch, um Segmented ou um Button --sm.Buraco negro e galáxia em dithering, nas telas de espera dos apps
Espaço em dithering pixelizado: um buraco negro com disco de acreção e uma galáxia espiral, desenhados em baixa resolução com matriz de Bayer 4×4 sobre a paleta da marca e ampliados sem suavização.
O consumidor fornece um <canvas> com resolução interna baixa (1 pixel de canvas = 4 px de tela, por exemplo width="190" height="122" para 760×486) e CSS image-rendering: pixelated, e chama:
Ginga.ditherLoop(canvas, Ginga.blackHole()): gás espiralando para dentro com Doppler (lado esquerdo dourado), anel de fótons, arco lenteado, estrelas deformadas pela lente e ~700 partículas em órbita. O retorno expõe shade.pullT (0–1, colapso das órbitas: ligue à distância do ponteiro ou do dedo) e shade.tb = loop.now() (explosão das partículas: ligue a um <button> sobre o horizonte).Ginga.ditherLoop(canvas, Ginga.galaxy({ cx, cy, s, spin })): espiral inclinada, núcleo star, braços cobalt-brand/cobalt.Ginga.pixelSky(canvas): céu inteiro em pixels de 4 px, com cintilação e estrela cadente. Redimensiona sozinho.Paleta (do escuro ao quente): cosmos (transparente), Noite, cobalt-brand, Cobalto noturno, stardust, star. Não use outras cores.
Onde usar
#000 e o nível mais escuro fica transparente, então os pixels apagados continuam apagados.Desempenho: ~24 fps, só putImageData numa imagem de ~20 mil pixels; pausa fora da tela, com a aba oculta e com movimento reduzido (desenha um quadro parado). No Android: um Bitmap pequeno + drawBitmap com isFilterBitmap = false; no SwiftUI: CGImage num Image(...).interpolation(.none) atualizado por TimelineView(.animation(minimumInterval: 1/24)).
Céu em canvas, pausa fora da tela
O céu da marca: fundo cosmos com estrelas stardust, algumas cobalt e star, cintilando e derivando devagar.
O consumidor fornece um contêiner .g-sky com um <canvas> e chama Ginga.starfield(canvas).
stardust (17.5:1 em cosmos).