palette UI/UX & Branding
view_in_ar 3D & Motion
terminal Dev & CRM
bolt Automação WhatsApp
Arkkan Studio · Design System Live

Design, Tecnologia & Automação

Transformamos a presença da sua marca combinando UI/UX moderno, experiências 3D e Motion, desenvolvimento de alta performance e automações inteligentes conectadas ao seu CRM.

Solicitar Orçamento Ver Portfólio
07
Soluções
3D
Motion Ready
24/7
Automação
Scroll
01 — Sobre o Studio

A Agilidade de um Studio Autônomo com a Maestria de Grandes Agências.

Na Arkkan, unimos visão estratégica, estética apurada e tecnologia de ponta para criar produtos digitais que destacam sua marca e geram resultados reais. Do conceito visual ao desenvolvimento de plataformas e automação de processos, entregamos um acompanhamento exclusivo e direto, garantindo precisão em cada detalhe.

Conhecer Serviços WhatsApp Direto
Arkkan — craft digital
Studio Autônomo
palette
view_in_ar
code
bolt
devices
auto_awesome
hub
rocket_launch
02 — Serviços

Soluções Sob Medida para
Impulsionar seu Negócio

Do branding à automação — um ecossistema integrado para escalar sua marca no digital.

01
brush
Branding & Identidade Visual
Construção de marcas fortes e memoráveis. Desenvolvemos o posicionamento, universo visual e guias de marca alinhados ao seu propósito.
Identidade
02
view_in_ar
UI/UX Design, 3D & Motion
Interfaces intuitivas aliadas a modelagem 3D e Motion Design que agregam sofisticação, dinamismo e valor percebido ao produto digital.
Experiência
03
code
Desenvolvimento (Web, Apps e CRM)
Engenharia de alta performance para sites, apps e CRMs customizados. Soluções rápidas, seguras e otimizadas para conversão.
Engenharia
04
chat
Automação de Atendimento
WhatsApp como canal ativo de vendas. Fluxos automatizados integrados ao CRM para captação, qualificação e agendamento 24/7.
WhatsApp + CRM
05
campaign
Divulgação da Marca na Web
Estratégia e posicionamento digital para atrair o público certo. Visibilidade e alcance através de presença digital estratégica.
Growth
06
speed
Atualização e Otimização
Reformulação visual, melhorias de UI/UX, otimização de velocidade e manutenção contínua para gerar resultados.
Performance
07
restaurant_menu
Cardápios & Catálogos Digitais
Catálogos interativos e cardápios digitais otimizados para restaurantes e estabelecimentos — escolha fácil e gestão de pedidos.
Soluções Especiais
03 — Diferenciais

Por que a ARKKAN

Atendimento direto, design interativo e um ecossistema que conecta marca, produto e operação.

handshake
Atendimento Direto
Comunicação ágil e sem intermediários diretamente com quem projeta e desenvolve a sua solução.
animation
Design Interativo (3D & Motion)
Animações e elementos 3D para criar experiências visuais marcantes e altamente engajadoras.
hub
Eco-sistema Integrado
Da identidade visual e desenvolvimento ao fluxo automatizado no WhatsApp conectado ao CRM.
04 — Portfólio

Projetos Recentes

Seleção de trabalhos — filtre por especialidade.

Design System
05 — Typography

Type Scale & Hierarchy

Primary: Satoshi · Display: AventaLight · Accent: Orbitron · Mono: Orbitron / system mono · Brand: Nico Moji. Todas as faces de marca via @font-face local.

H1 — Display
Escalamos Marcas
AventaLight · 300 · clamp(3rem, 6vw, 5.5rem) · lh 1.02 · ls -0.03em · none
H2 — Section
Feito para ser sentido
AventaLight · 300 · clamp(2.4rem, 4.5vw, 4rem) · lh 1.05 · ls -0.02em
H3
Plataforma de próxima geração
Satoshi · 500 · clamp(1.8rem, 3.5vw, 2.8rem) · lh 1.1 · ls -0.01em
H4
Processo refinado
Satoshi · 500 · clamp(1.4rem, 2.5vw, 2rem) · lh 1.15
H5
Component Label
Satoshi · 600 · clamp(1.1rem, 1.8vw, 1.5rem)
H6
Card Heading
Satoshi · 600 · clamp(0.95rem, 1.4vw, 1.2rem)
Body Large
Cada detalhe moldado com intenção e precisão.
Satoshi · 400 · 1.1rem · lh 1.7
Body
Experiências duradouras não acontecem por acaso.
Satoshi · 400 · 0.95rem · lh 1.65
Body Small
Dashboards e KPIs para resultados mensuráveis.
Satoshi · 400 · 0.82rem · lh 1.6
Caption
20 jul. 2026 · Studio
Satoshi · 500 · 0.72rem · ls 0.04em
Label
In-house Methodology
Orbitron · 600 · 0.62rem · ls 0.18em · UPPERCASE
Helper
Insira um e-mail válido
Satoshi · 400 · 0.7rem · lh 1.5
RoleFamilyWeightSizeLHLSTransform
h1AventaLight300clamp 3–5.5rem1.02-0.03emnone
h2AventaLight300clamp 2.4–4rem1.05-0.02emnone
bodySatoshi4000.95rem1.650none
labelOrbitron6000.62rem1.40.18emuppercase
Design System
06 — Color System

Palette & Semantics

Warm amber (Arkkhe) × precise neutrals (Antigravity). Contrast intent AA on text/CTA pairs.

Primary / Accent / Feedback

Aa
Orange Primary
HEX #ff8400
RGB 255,132,0
HSL 31° 100% 50%
Opacity: 10/20/60%
Primary / CTA · AA on dark
Aa
Orange Glow
HEX #ff6b1a
RGB 255,107,26
HSL 21° 100% 55%
Accent / Glow / Gradient
Aa
Blue 600
HEX #3279F9
RGB 50,121,249
HSL 219° 95% 59%
Secondary / Info
Aa
Red Error
HEX #FF4641
RGB 255,70,65
Feedback / Error
Aa
Green Success
HEX #22c55e
RGB 34,197,94
Feedback / Success

Neutrals (White-first scale)

Grey 0 / White
#FFFFFF · RGB 255,255,255
Surface Light / BG
Grey 10
#F8F9FC
Container
Cream
#FAF7F2
Decorative Light BG
Aa
Grey 800
#45474D
Text Muted · AA
Aa
Grey 1200
#121317
Text / Dark Surface
Aa
Black
#000000
Hero / Cinema BG

Contextual Usage

ContextTokenHoverActiveDisabledContrast
text--ark-white / --ag-grey-1200orange accent—38% opacityAA / AAA
backgroundwhite · cream · blackglow overlays———
borderrgba white 8% / grey 8%orange 25%orangemuted—
CTA--ark-orange#ff9a33 + glowdarken40% opacityAA on dark

Gradients

Orange → Glow → Red
Orange → Blue
White Cascade
Design System
07 — UI Components

Interactive Building Blocks

Mesmas classes do design system: .btn, .input, .card, .navbar, .modal, .badge, .tooltip — com animações de hover, ripple e glow.

Buttons

View Projects

Cards · Badges · Tooltips · Modal · Navbar

01
layers
∞scale
Refined Process
Metodologia proprietária para escalar marcas com velocidade.
In-house
02
grid_view
100%
Auditable Results
Tracking em tempo real com dashboards e KPIs.
Real-time
03
local_fire_department
+24/7
ROI-First
Estratégias centradas em ROI, LTV e CAC sustentável.
Measurable
Primary Secondary Success Error Neutral ● Live
Tooltip Arkkan
Prosseguir →
ARKKAN
Início Serviços
Design System
08 — Icons

Material Symbols & Motion

Material Symbols Outlined (variable opsz/wght/FILL) + bouncers inspirados no Antigravity.

palettepalette
view_in_arview_in_ar
codecode
terminalterminal
boltbolt
chatchat
campaigncampaign
speedspeed
hubhub
rocket_launchrocket
auto_awesomespark
layerslayers
grid_viewgrid
downloaddownload
play_arrowplay
menumenu
closeclose
check_circlecheck
devicesdevices
restaurant_menumenu_book
Design System
09 — Animations

Motion & Micro-interactions

Classes: .reveal · .reveal-left/right/scale · .particle · .bg-glow · demos .demo-*. Easings Antigravity.

Entrance
Fade Up
Attention
Pulse
Entrance
Bounce
Loading
Spin
Ambient
Float
Emphasis
Glow
Transition
Scale
Motion
Slide
Loading
Shimmer
Sequence
Stagger

Easing Curves

ease-out-quint
cubic-bezier(.23, 1, .32, 1)
ease-out-expo
cubic-bezier(.19, 1, .22, 1)
ease-out-back
cubic-bezier(.34, 1.85, .64, 1)
ease-in-out-quart
cubic-bezier(.77, 0, .175, 1)
10 — Contato

Pronto para transformar o futuro digital da sua marca?

Preencha o formulário abaixo ou entre em contato diretamente pelo WhatsApp para alinharmos os detalhes do seu projeto.