Xispeh Design System

Identidade visual, tokens, componentes e padrões da agência.

Preto Carbono Laranja Vibrante Space Grotesk Premium Dark
01 · Identidade

Marca

Logotipo V1 em 4 orientações × 3 fundos.

Fundo Preto
Horizontal
Horizontal
Vertical
Vertical
Símbolo
Símbolo
Tipográfico
Tipográfico
Fundo Branco
Horizontal
Horizontal
Vertical
Vertical
Símbolo
Símbolo
Tipográfico
Tipográfico
Fundo Laranja
Horizontal
Horizontal
Vertical
Vertical
Símbolo
Símbolo
Tipográfico
Tipográfico
02 · Tipografia

Tipografia

Space Grotesk (Light 300, Medium 500). Letter-spacing: -9%.

Corpo · Principal
Space Grotesk
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
Pesos: Light 300, Medium 500Spacing: -0.09em
Display · Headlines
Boldye
Peso: RegularFonte: Local TTF
Fallback · System
Helvetica Neue
Uso: Fallback (zero download)
03 · Expressão

Títulos

Variantes nomeadas para referência rápida.

Grotesk
Aceleração Visual
Display
Xispeh Group
Clean
Design Premium
Scroll Fill
Impacto Real
Typewriter
Shiny
Aceleração Visual
Scramble
Xispeh Group
Blur Fade
Design Premium
04 · Paleta

Cores

Clique para copiar o valor.

Primárias
Preto Carbono
#121111
Laranja Vibrante
#FF8D07
Off White
#F5F5F5
Variações
Black Deep
#0a0a0a
Black Mid
#161515
Orange Bright
#FFA033
Orange Dark
#CC7006
05 · Ritmo

Espaçamento

sp-1 4px
sp-2 8px
sp-4 16px
sp-6 24px
sp-8 32px
sp-12 48px
sp-16 64px
sp-24 96px
06 · Elevação

Bordas e Sombras

Radius
sm
r-sm4px
md
r-md8px
lg
r-lg12px
xl
r-xl16px
2xl
r-2xl24px
pill
r-pill100px
Sombras
shadow-sm
shadow-md
shadow-lg
glow
glow-strong
07 · Separação

Divisores

Dot Orange
Dot White
Dot Orange + Linhas Brancas
Dot White + Linhas Laranja
White Fade
Gradient Fade
Center Glow
08 · Interação

Botões

Nomes-chave para referência nos projetos.

Flare
Stroke
Glass
Ghost
Capsule
Nova
Flow
Liquid
Metal
Disabled
09 · Estrutura

Componentes

Cards
Glass
Backdrop-blur translúcido.
Solid
Elevação no hover.
Glow Center
Radial no cursor.
Spotlight
Glow só na borda/stroke.
Badges
Glass Glow Stroke Filled
Input
10 · Fundos

Backgrounds

Padrões fullscreen + patterns com masks. Use o nome-chave.

Pixel OrangeAnimated Pixels · Orange
Pixel WhiteAnimated Pixels · White
DotsStatic Dots
NoiseNoise Grain
OrbsBlurred Orbs
GridFuturistic Grid
MeshGradient Mesh
Pulse OrbsPulsing Ellipses
Grid SVG · RadialGrid Pattern Skewed
Grid SVG · LinearGrid Pattern Linear
Grid SVG · DashedGrid Pattern Dashed
Grid · Fade EdgesCSS Grid + Mask
Dots · Fade CenterCSS Dots + Mask
Diagonal · Fade YDiagonal Stripes
H-Lines · Fade RightHorizontal Lines
V-Lines · Fade BottomVertical Lines
Checker · Fade TopCheckerboard
11 · Atmosfera

Efeitos Visuais

Cada efeito tem nome. Use para referenciar.

GlassmorphismGlass
Orange GlowGlow
AnimatedOrbit
Blur PanelBlur
Top LineAccent
Copiado!