FlowOps Surgical Precision

Design System · dossie

Catálogo vivo dos tokens, primitives e padrões. Iteramos aqui — depois traduzimos pra apps/desktop/ui/primitives/. Visual idêntico ao mockup.

01 · Foundations

Tokens

Variáveis CSS em theme.css. Light vs dark redefinem mesmas vars.

Importação

<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="components.css" />
<link rel="stylesheet" href="utilities.css" />

Toggle dark via data-theme="dark" em <html>.

02 · Palette

Cores

Primary + Secondary + Semantic. Don't: nunca introduza accents extras.

Brand

Primary#111827

--primary · accent principal, ações, ativos

Secondary#FFEDD5

--secondary · destaque suave, peach

Tertiary#4B5563

--tertiary · contraste de suporte

Neutral#FFFFFF

--neutral · superfícies, suporte

Primary ramp

50100200300400500600700800900950

Semantic

Success#166534

Warning#B45309

Danger#C2410C

Info#1E3A8A

Surfaces (light · dark)

--bglight: #E5E7EBdark: #0B0E13

--bg-softlight: #EEF0F3dark: #14181F

--surfacelight: #FFFFFFdark: #1A1F2A

--text-primarylight: #111827dark: #F5F5F7

--text-bodylight: #4B5563dark: #C8CAD0

--text-mutedlight: #6B7280dark: #8D9097

03 · Type

Tipografia

Inter para tudo. JetBrains Mono pra código.

.t-display

48 / 500 / -0.025em

Display Heading

.t-display-sm

32 / 500

Display Small

.t-h2

22 / 500

Heading H2

.t-h3

16 / 500

Heading H3 menor

.t-body

16 / 300 / 0.025em

Body de leitura padrão. The quick brown fox jumps over the lazy dog. Resumo de uma análise pode ser escrito aqui.

.t-body-sm

14 / 300

Body menor — meta info, descrições secundárias.

.t-label

14 / 500 / 0.35px

LABEL · botões e títulos curtos

.t-label-sm

12 / 500

label-sm meta

.t-caption

11 / 500 / uppercase

Caption · uppercase, tracking 0.6px

04 · Layout

Spacing

Base 4px. Scale: 4 / 6 / 8 / 10 / 12 / 14 / 16 / 24 / 32.

--s-1 / 4px

6px (dx-gap-6)

--s-2 / 8px

10px (dx-gap-10)

--s-3 / 12px

14px (dx-gap-14)

--s-4 / 16px

--s-5 / 24px

--s-6 / 32px

--s-7 / 64px

--s-8 / 88px

05 · Shape

Radii

Família restrita: 6 / 12 / 20 / 28 / 32 / pill.

6px

--r-xs

12px

--r-sm

20px

--r-md

28px

--r-lg

32px

--r-xl

pill

--r-pill

06 · Elevation

Shadows

Receita única. Não misturar com outras.

card

--shadow-card · default

card hover

--shadow-card-hover

press inset

--shadow-press · primary buttons

07 · Components

Buttons

Pill (radius=9999). 6 variantes × 2 sizes × 2 states.

Default size

Small + icon-only

Inputs

.input default

.input com search

Buscar...⌘K

.input.input-area

Badges

primary secondary outline success warning danger info muted

Cards

.card

Title

Default padding=22, radius=lg.

.card.card-hover

Hoverable

Lift no hover.

.card.card-tight

Tight

radius=md, padding=12.

Toasts

Confirmação visual de ação. Auto-dismiss 2.4s.

Programático: showToast(msg, variant) · ou via attribute data-mock="Label".

Surfaces · 6 layers

Recortes operacionais por camada do Codex.

Web

Frontend, painéis (1+2)

API

REST/GraphQL (3)

App

Mobile + desktop

Endpoint

Workstations

Infra

DNS, cloud (8+9)

Humano

OSINT (11)

Icons

Provider Iconify · set Solar · treatment linear.

magnifer

atom

console

widget

cloud

box

play

settings

shield

key

lock

add

Uso: <iconify-icon icon="solar:NAME-linear" /> · catálogo completo: icon-sets.iconify.design/solar