Style Specification

Systemic Tech
Premium

Enterprise AI System Interface — documento técnico de direção de arte, layout e UI para reproduzir esse estilo em web, Figma ou código.

O spec na prática: UI card funcional

Layout hero 7+5 colunas. Glass container com backdrop-blur, mini-cards internos, progress bars e badge em tempo real — todos os componentes do design system ao vivo.

Performance Overview Live
Conversion Rate+24.8%
78 / 100 targetQ1 2026
System Uptime99.97%
30-day rollingOperational
AI Accuracy96.2%
Model v4.1Production

01 — Conceito Visual

Enterprise AI System Interface

Branding corporativo premium, UI futurista controlada, sistema operacional de crescimento, tecnologia aplicada a negócios.

Estética

  • Branding corporativo premium
  • UI futurista controlada
  • Sistema de crescimento
  • Tecnologia aplicada
  • Digital-first

Sensação

  • Precisão
  • Inteligência operacional
  • Sofisticação técnica
  • Confiança corporativa
  • Infraestrutura digital
  • Escala

Posicionamento

  • Enterprise AI System
  • Growth Infrastructure
  • OS Aesthetics
  • Premium Digital Ops
StripeLinearVercelPalantirApple Enterprise

02 — Composição

Centro limpo, periferia atmosférica

Eixo centralizado com logotipo protagonista. Complexidade concentrada no ambiente, não no conteúdo textual.

Tagline
1. Logotipo
2. Tagline
3. Linhas diagonais
4. Glow / energia

03 — Paleta Cromática

Escuridão com energia

Cada cor tem papel específico. Clique para copiar o hex.

#0F172A
Deep Navy
Fundo principal
Copiado!
#1E293B
Dark Slate
Fundo secundário
Copiado!
#334155
Graphite
Fundo terciário
Copiado!
#B6E23D
Lime Tech
Accent / marca
Copiado!
#6A8E2B
Lime Dark
Gradiente marca
Copiado!
#F1F5F9
Soft White
Texto principal
Copiado!
#CBD5F5
Slate Text
Texto secundário
Copiado!
#94A3B8
Muted Slate
Texto terciário
Copiado!
Principal
Marca
Glow Inferior
70% Fundo escuro
20% Neutros claros
10% Lime / glow

04 — Tratamento Gráfico

Arquitetura atmosférica

Grafismos como arquitetura atmosférica — brilho controlado, transparências baixas, profundidade por camadas.

Dots Pattern
Diagonais 35°
Glow
Tech Grid
Transparência
Retícula
dots:
size: 2px | grid: 8px
opacity: 0.05
color: #B6E23D
diagonals:
width: 1px | angle: 35°
opacity: 0.08
color: #B6E23D
grid:
stroke: 1px
color: #64748B
opacity: 0.08

05 — Tipografia

Manrope — escala completa

Geométrica com personalidade. Alternativas: Avenir Next, Inter.

Logo
600 / 48px
tracking: -2%
Headline
500 / 52px
lh: 1.1 / -1%
Growth with intelligence
Subheadline
400 / 20px
lh: 1.6
Uma plataforma de crescimento que opera com tecnologia proprietária e inteligência aplicada a cada decisão.
UI Label
500 / 12px
uppercase / 0.12em
Performance Overview · Active Users · System Status
Body
400 / 16px
lh: 1.6
Este style spec produz uma estética de AI Enterprise System, com tecnologia, sofisticação, clareza, profundidade visual e marca forte.
Ag
200
Ag
300
Ag
400
Ag
500
Ag
600
Ag
700
Ag
800

06 — Layout

Grid de 12 colunas

Hero split: 7 colunas texto + 5 colunas UI card. Max-width 1280px.

7 col — texto
5 col — ui card
Grid12 colunas
Max-width1280px
Padding top120px
Padding bottom120px
Padding L/R48px
Headline → Sub32px
Sub → CTA40px
CTA → Cards48px

07 — Botões

Primary e Secondary

Primary

background#B6E23D
color#0F172A
radius10px
padding14px 28px
weight600
hover#C6F04A + Y(-2px)

Secondary

backgroundtransparent
border1px solid rgba(…,0.2)
colorwhite
radius10px
padding14px 28px
hoverbg rgba(…,0.05)

08 — Componentes UI

Glass cards, progress, mini-cards

Glass container com backdrop-blur 20px, mini cards com bordas sutis, progress bars com gradiente da marca.

Demo ao vivo

Active Campaigns+18.3%
85% target+12.4%
Lead Pipeline184
62% filledQ1 2026
Response Time<2s
Avg latencyExcellent

Spec

container:
  bg: rgba(15,23,42,0.65)
  blur: 20px
  border: 1px solid rgba(…,0.08)
  radius: 20px
  shadow: 0 30px 80px rgba(0,0,0,0.6)
mini-card:
  bg: rgba(15,23,42,0.6)
  radius: 12px | padding: 16px
  border: 1px solid rgba(…,0.06)
progress:
  track: #1E293B | fill: #B6E23D
  height: 6px | radius: 999px

09 — Luz e Contraste

Luz como sistema

A luz sugere fluxo, ativação e movimento de dados. Glow localizado com highlights sutis e energia concentrada.

primary blur: 80px opacity: 0.25 color: #B6E23D secondary blur: 40px secondary opacity: 0.15

10 — Estilo de Branding

Corporate Future

Enterprise AI, growth infrastructure, operating system aesthetics. Intelligent systems com premium digital operations.

O que é

Enterprise techAI systemsB2B future-forwardInfraestrutura premiumCorporate futureIntelligent systems

O que não é

BrutalistaEditorial minimal puroSaaS genérico flatCyberpunkLuxo clássico

11 — Regras

Definição e limites

Elementos permitidos

  • ✔Linhas diagonais
  • ✔Grid técnico
  • ✔Dots pattern
  • ✔Glow lime controlado
  • ✔UI floating cards
  • ✔Ícones stroke 1.5px rounded
  • ✔Muito espaço negativo

Evitar

  • ✘Gradientes aleatórios
  • ✘Sombras duras
  • ✘Cores extras fora da paleta
  • ✘Ilustrações orgânicas
  • ✘Excesso de elementos
  • ✘Fontes pesadas ou agressivas
  • ✘Poluição com mensagens comerciais
1Fundo sempre escuro
2Lime sempre como acento
3Poucos elementos por área
4Muito espaço negativo
5UI card sempre flutuante

12 — Tokens e Sistema

Profundidade, spacing e código

1
BG Gradient
2
Grid Lines
3
Dot Pattern
4
Hero Content
5
UI Card
6
Lime Glow

Spacing Scale (px)

Border Radius

8pxInput
10pxButton
12pxMini
20pxCard
999pxPill

CSS Tokens

tokens.css
:root { /* Backgrounds */ --color-bg-primary: #0F172A; --color-bg-secondary: #1E293B; --color-bg-tertiary: #334155; /* Text */ --color-text-primary: #F1F5F9; --color-text-secondary: #CBD5F5; --color-text-muted: #94A3B8; /* Accent */ --color-accent: #B6E23D; --color-accent-dark: #6A8E2B; --color-accent-hover: #C6F04A; /* Radii */ --radius-card: 20px; --radius-button: 10px; --radius-input: 8px; /* Shadows */ --shadow-deep: 0 30px 80px rgba(0,0,0,0.6); }
style_name: "Systemic Tech Premium"

mood:
  - precise
  - premium
  - futuristic
  - corporate
  - intelligent

composition:
  - centered logo
  - peripheral graphic texture
  - diagonal energy lines
  - restrained visual density

color_palette:
  background:
    - deep navy #0F172A
    - dark slate #1E293B
  accent:
    - lime tech #B6E23D
  text:
    - soft white #F1F5F9
    - slate text #CBD5F5
    - muted slate #94A3B8

typography:
  family: Manrope
  weights: 200–800
  behavior: geometric, modern, restrained

brand_effect:
  - enterprise AI
  - growth infrastructure
  - operating system aesthetics

AI Enterprise System

Uma identidade visual tech-premium de fundo escuro, com branding centralizado, acento lime controlado, textura digital sutil e sensação de sistema operacional corporativo.

Systemic Tech Premium

Precisão Inteligência operacional Sofisticação técnica Confiança corporativa Infraestrutura digital

SS-ESCURO FINAL — NX / NEX.OS — SYSTEMIC TECH PREMIUM — 2026