O que GIGA UI: calmo, preciso, vivo faz?

Este skill transforma uma solicitação de UI de uma linha em uma interface refinada e pronta para produção. A linguagem visual é inspirada pelo trabalho público de design de @marcelkargul (Kargul Studio): UI de produto silenciosa e quase monocromática, tipografia muito cuidadosa, sombras suaves e em camadas em vez de bordas pesadas, uma cor de acento confiante e movimento que é rápido, físico e nunca decorativo por si só.

Funciona com qualquer modelo de codificação e qualquer stack. Os exemplos usam React + Tailwind + Motion (motion/react), e cada um tem um equivalente em CSS puro.

Legenda de proveniência usada abaixo: [visto] observado diretamente em suas postagens/imagens ou declarado em suas legendas. [inferido] uma extrapolação razoável do que foi visto (medido a partir de capturas de tela ou implícito). [expert] prática geral de motion/UX da documentação do Motion, Emil Kowalski, Apple HIG. Não de suas postagens.

1. Filosofia de design

Se pode ser removido, remova-o. [visto, legenda: "every screen. every component. every frame. if it doesn't need to be there, it shouldn't be. simple is always hard, but simple always wins."]
A tipografia faz o trabalho pesado. [visto: "just master typography and you can make anything look good."] Use uma família (Inter por padrão na web, Geist como alternativa opcional; SF Pro Rounded para mobile com sabor iOS) e no máximo 2 pesos [visto: "sf pro rounded, maximum 2 font weights, keep it simple"].
Branco, preto e sombras. [visto: "No animations, no gradients, no fancy effects. Just FFFFFF, 000000, and some shadows. This is design at its peak."] A maior parte da paleta são cinzas neutros. A cor é usada para significado, como estado, categoria ou a única ação primária.
A profundidade vem de sombras suaves em camadas e linhas finas, não de bordas grossas. [visto: "this button only requires 3 shadows!" e a receita de botão secundário na §3]
O movimento faz parte do produto, não é decoração. [visto: "micro-interactions throughout", "subtle loading animation. not overdone, just perfect", "every website needs this level of animation", "idea → design → animation"]. Anime apenas para explicar uma mudança, confirmar uma ação ou guiar a atenção [expert].
Crie os últimos 10% manualmente. [visto: seu processo é "design in figma, build with the help of claude, spend hours fixing small details manually and improving code quality"]. A checklist de QA na §9 são esses últimos 10%.
Limpo vence esperto. Suas legendas sempre voltam às palavras "clean", "calm" e "simple" (por exemplo, "Every task in one calm list"). Mesmo quando há muitos dados, a tela deve parecer calma.

2. O estilo observado (como o trabalho dele realmente se parece)

2.1 Tipografia

Famílias: Inter (padrão neste skill) e Geist (alternativa opcional). [visto: "After using 100s of different fonts, I realized nothing beats Inter and Geist."; postagem de piada: designers juniores e seniores usam "Inter, Geist"]. SF Pro Rounded para apps mobile [visto, várias postagens]. Ele também recomenda Google Sans Rounded como alternativa multiplataforma para SF Pro Rounded [visto, resposta]. Uma monoespaçada (semelhante a Geist Mono) aparece para números grandes, tickers e código [visto: saldos de app cripto, cartões KPI do Statsnap, variante de barra lateral de navegação]. Trabalhos de marca e marketing às vezes usam uma face de exibição serifada (serifa transicional editorial, peso leve) [visto: landing fintech "Every payment protected…", landing page de VC].
Tracking (números exatos dele, demonstrados com Geist; aplique o mesmo ao Inter, que ele também demonstrou a −6%) [visto]:
- 16px → 0%
- 36px → −3%
- 100px+ → −5% a −6%
- "A regra de nunca ir negativo é para texto do corpo. Em 100px+ o espaçamento padrão parece solto."
- SF Pro Rounded: +1% de espaçamento entre letras [visto, espécime de tipo].
Pesos: Regular (400) e Medium (500) carregam quase toda a UI do produto. Semibold (600) é para títulos e números. Bold/Black apenas para manchetes grandes de exibição [inferido de capturas de tela].
Tamanhos na UI do produto [inferido, medido de capturas de tela em 1×]: texto do corpo e da tabela 13–14px, secundário/meta 12–13px, rótulos de seção 11–12px em maiúsculas ou small-caps cinza (ex.: "WORKSPACE", "PINNED TOOLS"), títulos de página 18–24px Medium, números KPI 24–32px, manchetes hero 48–72px com tracking negativo. Botões são 14px Medium [visto: "Geist/14/Medium"].
Cor do texto: primário preto próximo (#171717–#1F1F1F), secundário cinza médio (#6B6B6B–#737373), terciário/placeholder (#A3A3A3). Tags usam texto escuro matizado em um tom claro em vez de texto branco em preenchimentos saturados [visto: postagem "Do / Don't": "Dark text improves overall readability greatly."].

2.2 Cor

Amostrado de capturas de tela (aproximado) [visto/inferido]:

Função	Claro	Escuro
Canvas / página	`#FFFFFF`	`#0D0D0D`–`#121212`
Superfície sutil (sidebar, painéis, bg mobile)	`#F7F7F7` / `#F4F4F4` / `#FAFAFA`	`#1A1A1A`–`#1E1E1E`
Fundo de apresentação atrás de mockups	`#E5E5E5`–`#EDEDED`, cinza médio `#8A8A8A`	`#1F1F1F`–`#262626`
Borda (hairline)	`#ECECEC` / `#EBEBEB`	`rgba(255,255,255,0.08)`
Texto primário	`#171717`	`#FAFAFA`
Texto secundário	`#737373`	`#A1A1A1`

Acentos (um por produto, nunca vários ao mesmo tempo) [visto]:

Violeta #7B3AEC (cadastro Underlay, onboarding), também uma variante índigo #5B5BF0
Azul #255CD1 / azul iOS #2F7BF6 (calculadora, calendário, Statsnap)
Laranja #FF5A1F / #F97316 (Plunio, Nexora)
Verde-azulado #0F766E (pipeline de IA, AIData)
Lima #B4F05A em preto próximo (botão "Start" do editor de código, marca Soma)
Coral/vermelho #F2435A (app de sono)
Preto puro #0A0A0A como cor do botão primário em apps neutros (app de sono, "=" da calculadora, "Deploy v13", "New event") [visto]

Matizes semânticos [visto]: verde #16A34A texto em #ECFDF3; vermelho #DC2626 em #FEF2F2; âmbar/laranja em #FFF4E5; azul em #EEF4FF. Iniciais de avatar ficam em círculos pastel com texto de mesmo matiz mais escuro ("SW", "AJ", "MP").

Gradientes: usados raramente, mas bem [visto: "the art of using gradients"]. Botões ganham um gradiente sutil de cima para baixo (#FFFFFF → #F7F7F7 para secundário; um topo ligeiramente mais claro para primário). A arte hero usa borrões coloridos multicoloridos com mesclagem Plus-Darker mais uma sobreposição de ruído/grão [visto: thread de ilustração hero].

2.3 Forma, espaçamento, profundidade

Raios [visto e inferido]: controles e botões pequenos 8–10px [visto: "30px height, 10px radius"]; inputs 10–12px; cartões 12–16px; modais e paletas de comando 20–24px; folhas mobile e cartões de telefone 24–32px; pills e chips totalmente arredondados. Botões mobile são frequentemente pills completas [visto].
Espaçamento: uma grade base de 4px. Espaços comuns são 4/8/12/16/24/32/48 [inferido]. Muito ar ao redor do conteúdo; tabelas densas ainda recebem linhas de ~40–48px [inferido].
Alturas de controle [visto/inferido]: botões desktop compactos 30–32px, padrão 36–40px, CTA primário mobile 48–56px.
Bordas: hairlines de 1px em cinza muito claro. Frequentemente a borda é feita de uma sombra com 0 de desfoque e 1px de espalhamento em vez de border [visto: receita de botão secundário].
Sombras [visto]: botão secundário = 0 1px 2px rgba(40,40,40,.08), 0 0 0 1px #ECECEC. Superfícies flutuantes (popovers, paletas, tooltips) usam uma sombra ambiente grande e muito suave mais uma hairline. Tooltips escuros ficam sobre UIs claras [visto: tooltip de gráfico do Statsnap, toast "Task completed · Undo"].
Mobile: artboard 430×932 [visto], botões de ícone redondos de 40–44px na barra superior, cartões de lista "inset" agrupados em um canvas cinza, barras de abas pill flutuantes [visto].

2.4 Padrões de layout [visto]

Shell de app SaaS: barra lateral esquerda (220–260px) em um cinza sutil, navegação agrupada com pequenos rótulos cinza em maiúsculas, item ativo = pill branca com sombra suave (claro) ou preenchimento #1E1E1E (escuro); conteúdo principal em branco com uma barra superior fina (breadcrumb Home > Transaction, pesquisa com dica /, botões de ícone). Às vezes há uma trilha de ícones fina (48–56px) em vez disso.
Linha de chips de filtro acima de tabelas: Range Last 30 days ▾, Scope All tools ▾. O rótulo é cinza e o valor é escuro.
Tabelas: sem listras de zebra, divisores de linha hairline, texto de cabeçalho cinza pequeno, pills de status matizadas, pilhas de avatar + nome + email, números alinhados à direita, figuras tabulares.
Cartões KPI: rótulo, número grande (geralmente mono), pill de delta (▲ +14.7% vs last year).
Autenticação/onboarding: cartão dividido. Formulário à esquerda (logotipo em um círculo suave, título, subtítulo, botão Google, divisor "ou", input, primário), pré-visualização do produto à direita em um painel cinza com pontos de carrossel [visto: "just designed the perfect signup page"].
Paleta de comando: raio de 24px, linha de pesquisa com tecla ESC, pills de filtro, resultados agrupados, rodapé de legenda do teclado [visto].
Onboarding mobile: barra de progresso segmentada + "1/5", pergunta centralizada em negrito, linhas de opções selecionáveis com verificações de círculo, CTA pill fixo [visto].
Heróis de landing: barra de navegação pill flutuante, badge pequeno "Backed with X", manchete curta e impactante (às vezes grotesca em maiúsculas, às vezes serifada), botão primário escuro + botão secundário branco, grande ilustração abaixo [visto].

2.5 Iconografia e ilustração [visto]

Ícones: ícones outline de traço fino (semelhante a Lucide/Phosphor, ~1,5px de traço, 16–18px na UI), cinza por padrão, mais escuros quando ativos.
Pequenos tiles de ícone de app coloridos (quadrados arredondados com gradiente e glifo) para cartões de recurso e categorias.
Estilos de ilustração: (a) arte linear isométrica em grade tracejada, monocromática; (b) fitas/streams de gradiente vívido em um fundo pastel granulado com grade isométrica e confetes flutuantes; (c) ilustrações spot planas e amigáveis e ícones de emoji 3D para aplicativos de consumo e mobile; (d) toques esqueumórficos (uma carteira de couro costurada segurando um cartão).
Pipeline de animação dele: "Draw the illustrations in Figma → Animate in AE/Rive → Export to lottie if using AE → Implement onto the website". Em um projeto ele usou "Figma… Rive for animation, Next.js + Sanity". Seções hero frequentemente levam "design + illustration + animation" [visto].

2.6 Escuro vs claro [visto]

Ele usa ambos e entrega conjuntos correspondentes ("light/dark mode", "figma tokens are so useful!"). Claro é o padrão para SaaS de produtividade. Escuro é usado para cripto/trading, editores de código, barras laterais e banners de marketing. Superfícies escuras sobem em incrementos de ~6–10 de claridade (#0D0D0D → #121212 → #1A1A1A → #222), não preto puro em todos os lugares.

3. Tokens de design (variáveis CSS)

Cole isso na folha de estilo global. Usuários de Tailwind podem mapear isso em @theme (v4) ou theme.extend (v3).

:root {
  /* Tipo */
  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Geist Mono", "SF Mono", Menlo, monospace;
  --font-rounded: "SF Pro Rounded", ui-rounded, "Google Sans Rounded", var(--font-sans);

  --text-xs: 12px;   --text-sm: 13px;  --text-base: 14px; --text-md: 16px;
  --text-lg: 18px;   --text-xl: 24px;  --text-2xl: 32px;  --text-3xl: 48px;
  --text-4xl: 64px;  --text-5xl: 96px;
  --tracking-body: 0;       /* <= 16px */
  --tracking-tight: -0.01em;/* 18–24px */
  --tracking-title: -0.03em;/* ~36px  (regra dele) */
  --tracking-display: -0.055em; /* 100px+ (regra dele: -5% a -6%) */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  /* Neutros (claro) */
  --bg: #ffffff;
  --bg-subtle: #f7f7f7;
  --bg-muted: #f0f0f0;
  --bg-backdrop: #e8e8e8;
  --border: #ececec;
  --border-strong: #e0e0e0;
  --fg: #171717;
  --fg-secondary: #737373;
  --fg-tertiary: #a3a3a3;
  --fg-inverse: #ffffff;

  /* Acento: escolha UM por produto */
  --accent: #7b3aec;             /* violeta; alternativas: #255cd1 azul, #ff5a1f laranja, #0a0a0a preto */
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-soft: color-mix(in oklab, var(--accent), white 90%);
  --accent-fg: #ffffff;
  --ring: color-mix(in oklab, var(--accent), transparent 65%);

  /* Semântico (texto escuro em tom suave) */
  --success: #16a34a; --success-soft: #ecfdf3;
  --danger:  #dc2626; --danger-soft:  #fef2f2;
  --warning: #d97706; --warning-soft: #fff7e6;
  --info:    #2563eb; --info-soft:    #eef4ff;

  /* Espaçamento (grade de 4px) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* Raios */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px;

  /* Alturas */
  --h-control-sm: 30px; --h-control: 36px; --h-control-lg: 44px; --h-cta-mobile: 52px;

  /* Sombras (em camadas, suaves; hairline via spread) */
  --hairline: 0 0 0 1px var(--border);
  --shadow-xs: 0 1px 2px rgb(40 40 40 / 0.08);
  --shadow-btn: 0 1px 2px rgb(40 40 40 / 0.08), 0 0 0 1px #ececec;     /* botão secundário dele */
  --shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(0 0 0 / 0.16), 0 0 0 1px color-mix(in oklab, var(--accent), black 12%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 1px var(--border);
  --shadow-pop: 0 0 0 1px rgb(0 0 0 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.04);
  --shadow-modal: 0 0 0 1px rgb(0 0 0 / 0.06), 0 24px 64px -12px rgb(0 0 0 / 0.18);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* Movimento (veja §5) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* ease-out forte (Emil Kowalski) */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* para movimento na tela */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* folha tipo iOS (Vaul) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-instant: 100ms; --dur-fast: 150ms; --dur-base: 200ms;
  --dur-moderate: 250ms; --dur-slow: 350ms; --dur-page: 500ms;
}

[data-theme="dark"], .dark {
  --bg: #0d0d0d;
  --bg-subtle: #141414;
  --bg-muted: #1c1c1c;
  --bg-backdrop: #0a0a0a;
  --border: rgb(255 255 255 / 0.08);
  --border-strong: rgb(255 255 255 / 0.14);
  --fg: #fafafa;
  --fg-secondary: #a1a1a1;
  --fg-tertiary: #6b6b6b;
  --shadow-btn: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08);
  --shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px rgb(255 255 255 / 0.10), 0 1px 2px rgb(0 0 0 / 0.40);
  --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.40), 0 2px 6px rgb(0 0 0 / 0.20);
  --shadow-modal: 0 0 0 1px rgb(255 255 255 / 0.06), 0 24px 64px -12px rgb(0 0 0 / 0.60);
  --hairline: 0 0 0 1px var(--border);
  --shadow-focus: 0 0 0 3px var(--ring);
  --accent-soft: color-mix(in oklab, var(--accent), black 70%);
}

4. Receitas de componentes

4.1 Botões

Primário (preenchido):

<button class="btn-primary">Ação</button>
<style>
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 20px; border-radius: 10px;
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--weight-medium);
  white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-btn-primary);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-btn-primary), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-primary:active { transform: scale(.98); }
/* dark: funciona com as variáveis acima */
</style>

Secundário (outline com sombra):

<button class="btn-secondary">Secundário</button>
<style>
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 20px; border-radius: 10px;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--weight-medium);
  white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-btn);  /* hairline + sombra suave */
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover { background: var(--bg-subtle); box-shadow: var(--shadow-btn); }
.btn-secondary:active { transform: scale(.98); }
</style>

Ghost (sem borda):

<button class="btn-ghost">Ghost</button>
<style>
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: 10px;
  background: transparent; color: var(--fg-secondary);
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--weight-medium);
  white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover { background: var(--bg-subtle); color: var(--fg); }
</style>

Ícone (quadrado, para ações de barra de ferramentas):

<button class="btn-icon" aria-label="Configurações"><svg>…</svg></button>
<style>
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: transparent; color: var(--fg-secondary); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-icon:hover { background: var(--bg-subtle); color: var(--fg); }
</style>

4.2 Inputs

<div class="field">
  <label class="field-label" for="email">Email</label>
  <input id="email" type="email" class="field-input" placeholder="[email protected]" />
  <p class="field-hint">Nós nunca compartilharemos seu email.</p>
</div>
<style>
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: var(--weight-medium); color: var(--fg); }
.field-input {
  height: 40px; padding: 0 14px; border-radius: 12px;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: 14px;
  box-shadow: 0 0 0 1px var(--border);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.field-input:focus { outline: none; box-shadow: var(--shadow-focus); }
.field-input::placeholder { color: var(--fg-tertiary); }
.field-hint { font-size: 12px; color: var(--fg-secondary); }
</style>

4.3 Cartão

<div class="card">
  <h3 class="card-title">Título do cartão</h3>
  <p class="card-body">Descrição do conteúdo do cartão.</p>
</div>
<style>
.card {
  padding: 20px; border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--shadow-card);
}
.card-title { font-size: 16px; font-weight: var(--weight-medium); color: var(--fg); margin-bottom: 8px; }
.card-body { font-size: 14px; color: var(--fg-secondary); line-height: 1.5; }
</style>

More components continue in the full markdown: modals, command palette, navigation sidebar, table, KPI card, auth form, onboarding flow, landing page hero, menu dropdown, toggle and switch, avatar, badge, divider, tooltip, progress bar, skeleton, and toast. Use the design tokens for consistency.

5. Movimento e micro-interações

5.1 Princípios (expert, de Emil Kowalski, Apple HIG, Motion docs)

Animar para explicar, confirmar ou guiar.
Rápido (100–350ms). Sempre use will-change: transform, opacity.
Escala para press é 0,97–0,98.
Elementos que aparecem: opacity + translateY(4px) com duração de 150–200ms.
Modais/folhas: entrada vinda de baixo, com scale: .95 → 1 no backdrop.
Itens de lista: opacity + translateY escalonado.
Páginas: transições de rota suaves, 300–500ms.

5.2 Utilitários de movimento (CSS)

.motion-fade-in {
  animation: fadeIn 150ms var(--ease-out) both;
}
.motion-slide-up {
  animation: slideUp 200ms var(--ease-out) both;
}
.motion-scale-in {
  animation: scaleIn 200ms var(--ease-out) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

5.3 Micro-interações

Like/bookmark: coração/estrela escala para 1.3, depois volta.
Toggle: bolinha desliza, fundo muda de cor.
Progresso: barra se enche com uma curva.
Notificação: aparece por cima, some por cima.
Tooltip: fade + translateY(4px).

6. Modo escuro

Use data-theme="dark" ou classe .dark no <html>. Tokens se ajustam automaticamente. Para imagens/logos, troque entre variantes claro/escuro.

7. Inter e Geist: equivalência de tamanho

Para melhor correspondência, Inter é um pouco mais largo. Se você trocar, ajuste larguras:

Inter 14px = Geist 14px
Inter 13px = Geist 12,5px (aproximado)

8. Checklist de QA (os últimos 10%)

9. Guia de prompt

9.1 Prompt mínimo

"Crie um dashboard para [tipo de app] usando a linguagem visual GIGA UI. Inclua sidebar, cabeçalho, cartões KPI e tabela."

9.2 Prompt detalhado

"Projete uma página de autenticação com divisão esquerda/direita: formulário à esquerda (logo, título, subtítulo, botão Google, input de email, input de senha, CTA primário) e pré-visualização do produto à direita com carrossel de pontos. Use o estilo GIGA UI: tipografia Inter, acento violeta, fundo cinza sutil para a pré-visualização."

9.3 Prompt de refinamento

"Refine esta tela de [app] com os tokens do GIGA UI. Ajuste tipografia, espaçamento, sombras e adicione micro-interações para o botão e o toggle."

Este skill mantém a essência do trabalho de @marcelkargul: calmo, preciso e vivo. Use-o para criar UIs que pareçam premium, mas que nunca chamem a atenção para si mesmas.

GIGA UI: calmo, preciso, vivo

O que é GIGA UI: calmo, preciso, vivo?

Perguntar na sua IA favorita

Documentação