we.clip
Guia visual de referência para o tema do `we.clip`, seguindo a lógica de exposição do exemplo enviado: paleta, tipografia, controles, botões, analytics e padrões de interface exibidos no próprio canvas.
01
Typography
Display
H1 - Revenue Hero
H2 - Section Title
H3 - Block Title
Body regular for settings, explanations and supporting descriptions.
Small text for labels, metadata and field help.
02
Color Palette
Primary
#155EEF
Commerce
#FF5A36
Success
#119C6A
Warning
#F3A712
Slate 900
#0B1220
Slate 100
#E9EEF5
Surface Scale
Base
Canvas e agrupamentos sem container pesado
Subtle
Inputs, filtros, grupos auxiliares
Elevated
KPIs, charts principais e estados importantes
03
Buttons
04
Controls
Input
Select
Smart suggestions
Color, category and similarity
05
Navigation
06
KPI Blocks
Revenue influenced
R$ 182k
+27.4% vs. last period
Uplift
+18.6%
ATC Rate
7.1%
07
Charts
Revenue trend
08
Inputs and Forms
09
Iconography
10
Storefront Actions
Shopper Side
11
Table Pattern
| Video | Revenue | CTR |
|---|---|---|
| Winter Jackets Drop | R$ 41.8k | 8.2% |
| Utility Suede Fit | R$ 28.4k | 6.9% |
| Spring Looks | R$ 21.2k | 5.8% |
12
Notes
O styleguide agora usa o padrão de “folha de referência”, como no exemplo da Aftership, para facilitar a revisão visual dos componentes.
O conteúdo mostrado aqui é a forma como queremos inspecionar os componentes do `we.clip`, mas com nosso tema e nossa hierarquia.
O mockup admin seguirá a mesma limpeza e estrutura do dashboard de referência, preservando o posicionamento premium do produto.