LinkDoc

Style Guide & Design System

Linguagem visual do LinkDoc. Tema Dark Periwinkle, extraido da referencia. Esta pagina e a prova viva dos tokens em tokens.css.

Versao 1.0 · Fundacao
01

Cores

Dark Periwinkle
Marca / Accent
Accent 300
#A6B0F7
--accent-300
Accent (Primary)
#7B8AF2
--accent
Accent 600
#6B7BEF
--accent-600
Bar Gradient
#B9C1FA → #6E7DF0
--bar-gradient
Superficies (Neutros)
Canvas
#0C0C0E
--bg-canvas
Surface 1 (card)
#161619
--surface-1
Surface 2 (input)
#1D1D21
--surface-2
Surface 3
#26262B
--surface-3
Texto
Primary
#F5F5F7
--text-primary
Secondary
#9A9AA2
--text-secondary
Tertiary
#62626B
--text-tertiary
Semantica
Success
#57D9A3
--success
Warning
#F5B84E
--warning
Danger
#F0574B
--danger
Info
= accent
--info
02

Tipografia

Plus Jakarta Sans
display / 40 / 800
$8,484k
h1 / 28 / 700
Dashboard Overview
h2 / 20 / 700
Total Balance
h3 / 16 / 600
Income source statistic
body / 14 / 400
Linked to main account, monthly regular fee applies.
sm / 13 / 500
Financial security report
micro / 11 / 700
0.24%
Regular
Medium
Semibold
Bold
Extra
03

Espaco & Forma

base 4px

Escala de espacamento

sp-1 · 4px
sp-2 · 8px
sp-4 · 16px
sp-6 · 24px (grid gap)
sp-8 · 32px
sp-12 · 48px

Raio de borda

12 sm
16 md
24 lg
pill
Cards usam 24px, inputs e elementos internos 16px, botoes e chips pill (100%).
04

Componentes

specs interativas
Botoes
Inputs
Status & rotulos
Successful Pending Failed Processing 0.24% 0.28%
Navegacao & tabela

Transactions

TransactionDateAmountStatus
P
PayPal
#748373
7 Jul 2024$8474Successful
W
Wise
#748374
6 Jul 2024$4568Pending
A
Atlassian
#748375
5 Jul 2024$6642Successful
05

Graficos

tokens de data-viz

Statistics

Barra real em --bar-gradient sobre --chart-ghost hachurada (valor potencial). Topo com raio 16px.

Expense Categories

100% Data Recorded
Income Outcome
06

Movimento & Principios

Curvas & duracao

fast · 140ms · hover, press
base · 220ms · transicoes
slow · 380ms · entrada, charts
Easing padrao --ease-out cubic-bezier(0.16, 1, 0.3, 1). Botoes escalam para 0.97 no active.

Principios

1
Superficies em camadasProfundidade por luminancia, nao por sombra. Cada nivel sobe um degrau.
2
Accent com parcimoniaPeriwinkle so em acao primaria, dado ativo e destaque. O resto e neutro.
3
Pill como assinaturaBotoes, chips e controles totalmente arredondados; cards com 24px.
4
Numeros em destaqueDado sempre mais pesado que o rotulo. Tabular para alinhar colunas.