01 -- Identity

Rewvo

A plataforma que conecta marcas e clippers. Cada clip é uma oportunidade. Cada view e dinheiro no bolso.

Name
Rewvo
Tagline
Clipe. Ganhe. Repita.
Essence
Empoderar criadores com renda real atraves de clipping de video para marcas. Gamificado, transparente, justo.
Personality Tags
Energetico Direto Transparente Gamificado Jovem Tech-native
Brand Archetype
O Criador
Expressão, originalidade, transformar ideias em realidade. Cada clip é uma obra.
O Explorador
Liberdade, independência, novas fronteiras. Ganhar dinheiro no seu tempo, do seu jeito.
O Herói
Superação, meritocracia, subir de nível. Gamification como motor de progresso.
02 -- Color Palette

Color System

549 custom properties organizados em primitivas, semânticas, escalas e aliases. Tudo começa com Ink, Lime e Canvas.

Core Triad
Ink#0A0A0A -- --rw-color-ink
Lime#BFFF00 -- --rw-color-lime
Canvas#FFFFFF -- --rw-color-canvas
Secondary
Surface Dark#1A1A1A
Lime 600#9AE600
Cloud#F5F5F5
Muted#525252
Semantic
Success#22C55E
Warning#F59E0B
Error#EF4444
Info#3B82F6
Lime Scale (12 Steps)
1#FCFFE6
2#F7FFBF
3#F0FF8C
4#E6FF4D
5#D9FF1A
6#BFFF00
7#ACE600
8#9AE600
9#84CC00
10#6BB300
11#529900
12#3D7300
Neutral Scale (12 Steps)
1#0A0A0A
2#171717
3#1A1A1A
4#262626
5#404040
6#525252
7#737373
8#A3A3A3
9#D4D4D4
10#E5E5E5
11#F5F5F5
12#FAFAFA
Lime Alpha Ladder
a12%
a36%
a512%
a720%
a1040%
a1265%
a1490%
Gradients
Hero--rw-gradient-hero
Energy--rw-gradient-energy
Gamification--rw-gradient-gamification
CTA--rw-gradient-cta
Card--rw-gradient-card
Dark Section--rw-gradient-dark-section
03 -- Typography

Type System

Três familias. 13 níveis de escala. De Display 64px a Micro 10px.

Font Families
Space Grotesk
Headings & Display
Inter
Body & UI
Space Mono
Data, Money & Labels
Type Scale
Display 64px
4remLH 1.0LS -0.03emSpace Grotesk 700
Heading 1 -- 48px
3remLH 1.05LS -0.025em
Heading 2 -- 40px
2.5remLH 1.1LS -0.02em
Heading 3 -- 32px
2remLH 1.15LS -0.015em
Heading 4 -- 24px
1.5remLH 1.2LS -0.01em
Heading 5 -- 20px
1.25remLH 1.25
Body Large -- 18px. Paragrafo com mais destaque, leitura confortavel em seções de texto longo.
1.125remLH 1.6Inter 400
Body -- 16px. Texto padrão do sistema, a maioria do conteúdo usa este tamanho.
1remLH 1.6Inter 400
Body Small -- 14px. Labels, helpers, texto secundário.
0.875remLH 1.5
Caption -- 12px. Timestamps, counters, disclaimers.
0.75remLH 1.4LS 0.01em
Micro -- 10px. Badges números, footnotes mínimos.
0.625remLH 1.3LS 0.02em
R$ 2.847,50
Data LG 2remSpace Mono 700For money & metrics
45.2K views -- R$ 8,50 CPM
Data 1remSpace Mono 400
05 -- Imagery & Icons

Imagery & Icons

Ícones em stroke 1.5px, 20x20 grid. Estilo limpo, geométrico. Cores: ink no light, canvas no dark.

Icon Grid (20x20, stroke 1.5px)
Play
Add
Search
Heart
Menu
Close
Download
Upload
Clock
Transfer
Check
Wallet
Icon on Dark Background
06 -- Voice

Brand Voice

Tom direto, energético, jovem. Sem formalidade. Sem enrolação. Fala de igual para igual com o clipper.

Tone Meters
Formal
2/10
Humor
6/10
Urgência
7/10
Energia
9/10
Tecnico
3/10
Approved Phrases
"Clipe. Ganhe. Repita."
"Cada view e dinheiro no bolso."
"Sem promessa. So resultado."
"Subiu de nível? Você merece."
"A maior plataforma de clipping do Brasil."
Banned Phrases
"Vamos desbloquear seu potêncial"
"Revolucionando o mercado"
"Fique tranquilo que..."
"Caro usuario..."
"Não perca essa oportunidade unica"
07 -- Layout & Spacing

Layout & Spacing

Grid de 12 colunas, base de 4px, 8 níveis de spacing semantico. Breakpoints mobile-first.

Spacing Scale (base 4px)
--rw-space-2xs
4px
--rw-space-xs
8px
--rw-space-sm
16px
--rw-space-md
24px
--rw-space-lg
32px
--rw-space-xl
48px
--rw-space-2xl
64px
--rw-space-3xl
96px
Border Radius Scale
0
none
4
xs
8
sm
12
md
16
lg
24
xl
32
2xl
pill
pill
Shadow Elevation
xs
sm
md
lg
xl
glow-lime
08 -- Visual Patterns

Background Patterns

7 patterns CSS-only ou SVG inline. Opacidade 3-8% para sutileza em light mode. Max 1 pattern por seção visível.

Dot Grid
Line Grid
Play Button Grid
Diagonal Lines
Hex Grid
Gradient Mesh
Lime Pattern Variants
Dot Grid -- Lime
Play Grid -- Lime
Diagonal -- Lime
09 -- Motion & Effects

Motion & Effects

Hover para interagir. 6 durações, 5 easings, micro-interações reais. Performance como constraint.

Hover Effects (interact with these)
Lift (-4px)
Glow Lime
Scale 1.05
Spring Bounce
Glow Pulse (continuous)
Skeleton Loading
Badge Unlock Animation (click to replay)
7
Click to replay
10 -- Components: Action

Action Components

12 componentes de acao. Botões, links, segmented controls, FAB, share buttons.

Button Primary Lime3 sizes
Disabled Statesdisabled
Button Secondaryoutline
Button Ghosttertiary
Button Lime Outlineaccent
Button Destructivedanger
Icon Buttoncircle
IconButton (Icon+Label)with-icon
Button Loadingspinner
Ver todas as campanhas Ganhos disponíveis Termos de uso
Links3 variants
Segmented Controltab
11 -- Components: Input

Input Components

10 componentes de entrada. Inputs, selects, checkboxes, toggles, sliders, file upload.

Esse sera seu identificador público
Text Inputdefault
Email invalido
Input Errorerror
Codigo valido!
Input Successsuccess
Textareamultiline
Toggle Switchon/off
Checkboxmulti-select
Radiosingle-select

Arraste seu clip aqui

MP4 ou WebM, max 500MB

File Uploaddrag-drop
12 -- Components: Data Display

Data Display Components

10 componentes. Cards, tabelas, badges, chips, avatars, listas.

Ativa
Nike Brasil

Air Max 2026 Launch

CPMR$ 12,50
3 dias
8/20 vagasLifestyle
Card Campaignmarketplace
Ganhos este mes R$ 2.847,50
Abril 2026+23%
Card Earningsfinancial
Ativa Pendente Expirada Revisao Rascunho Pro NEW
Badges7 variants
Gaming Filtro Tech
Tag / Chip3 variants
P
PC
RW
LU
Avatar4 sizes
ClipadorViewsCPM MedioStatus
@pedroclipper45.2KR$ 8,50Ativo
@mariavlogs38.7KR$ 12,00Pendente
@lukegaming92.1KR$ 15,00Ativo
Tabledata display
13 -- Components: Feedback

Feedback Components

Toasts, progress bars, tooltips, skeleton loaders.

Clip enviado com sucesso!
Pagamento confirmado: R$ 127,50
Erro ao processar clip
Campanha expira em 2 horas
Toast Notifications4 variants
Processando clip...65%
Upload concluido100%
Progress Barlinear
CPM = Custo por mil views
Informações adicionais
Tooltiphover
Skeleton Loadershimmer
14 -- Components: Navigation

Navigation Components

Tabs, bottom nav, breadcrumbs.

Tabsnavigation
Home
Buscar
Clips
Perfil
Bottom Navmobile
15 -- Gamification

Gamification Components

XP bars, streaks, level badges, leaderboard, earnings cards, achievement unlock effects.

Level 77,200 / 10,000 XP
Level 31,750 / 5,000 XP
XP Bargamification
5 dias
Streak de clips consecutivos
Streak Trackerdaily
Lv 1 Lv 3 Lv 5 Lv 7 Lv 10
Level Badgestiers
Top Clippers -- Semana
1
PC
@pedroclipperLevel 7
45.2K
2
MV
@mariavlogsLevel 5
38.7K
3
LG
@lukegamingLevel 9
32.1K
4
AS
@anasilvaLevel 4
28.5K
Leaderboardranked
First Clip!
+500 XP
CLICK TO REPLAY
Achievement Unlockcelebration
16 -- LP Sections Preview

Landing Page Sections

15 seções reutilizaveis da LP de Clippers. Cada uma e um componente independente com variantes light/ink/cloud.

01 -- Hero
Clipe. Ganhe.
Repita.
A plataforma que conecta seu conteúdo a marcas que pagam por views.
R$ 847K
Pagos
12K+
Clippers
01 Hero
+12K
R$847K
250+
Clippers ativos
Ja pagos
Marcas
02 Social Proof Bar
03 -- Como Funciona
Três passos. Zero complicação.
1
Cadastre-se
30 segundos
2
Aceite campanhas
Escolha as marcas
03 How It Works
04 -- Calculadora
Quanto você pode ganhar?
R$ 2.500
Estimativa mensal
04 Earnings Calculator
05 -- Campanhas
Campanhas ao vivo
Nike Launch
R$ 12,50 CPM
05 Campaign Showcase
06 -- Gamification
Suba de nível.
Lv 1 Lv 3 Lv 7 Lv 10
06 Gamification Preview
17 -- Token Reference

Design Token Reference

Tabela completa com preview live de cada token. Todas as 440+ custom properties do tokens.css.

Color Tokens
TokenValuePreview
--rw-color-ink#0A0A0A
--rw-color-lime#BFFF00
--rw-color-canvas#FFFFFF
--rw-color-surface-dark#1A1A1A
--rw-color-lime-600#9AE600
--rw-color-cloud#F5F5F5
--rw-color-muted#525252
--rw-color-success#22C55E
--rw-color-warning#F59E0B
--rw-color-error#EF4444
--rw-color-info#3B82F6
Typography Tokens
TokenValuePreview
--rw-font-heading'Space Grotesk'Rewvo Heading
--rw-font-body'Inter'Body text Inter
--rw-font-mono'Space Mono'R$ 2,847.50
--rw-text-display-size4rem (64px)Display headings
--rw-text-h1-size3rem (48px)Page title
--rw-text-body-size1rem (16px)Default text
--rw-text-caption-size0.75rem (12px)Labels, helpers
Spacing Tokens
TokenValuePreview
--rw-space-2xs4px
--rw-space-xs8px
--rw-space-sm16px
--rw-space-md24px
--rw-space-lg32px
--rw-space-xl48px
--rw-space-2xl64px
--rw-space-3xl96px
Shadow Tokens
TokenValuePreview
--rw-shadow-xs0 1px 2px rgba(0,0,0,0.04)
--rw-shadow-sm0 1px 3px rgba(0,0,0,0.06)
--rw-shadow-md0 4px 12px rgba(0,0,0,0.08)
--rw-shadow-lg0 8px 24px rgba(0,0,0,0.10)
--rw-glow-lime0 0 24px rgba(191,255,0,0.15)
--rw-glow-lime-strong0 0 32px rgba(191,255,0,0.25)
Motion Tokens
TokenValueUsage
--rw-duration-instant0msImmediate state changes
--rw-duration-fastest75msActive/press feedback
--rw-duration-fast150msHover, focus, color
--rw-duration-normal250msCard enter, fades
--rw-duration-slow400msPage transitions, drawers
--rw-duration-slower600msBadge unlock, celebrations
--rw-ease-outcubic-bezier(0.215, 0.61, 0.355, 1.0)Entries, appearances
--rw-ease-springcubic-bezier(0.34, 1.56, 0.64, 1.0)Bounce, badge unlock