OXIDE Visual System · Lumen & Co. · Guia de Design

OXIDE
Visual
System

Guia de design · Paleta · Tipografia · Tokens CSS

L
LUMEN & Co.
Estúdio de Design
Paraty · RJ · Brasil
lumencompany.online
Versão 1.0 · 2026

01 · Paleta base

9 cores formam o núcleo do sistema OXIDE. Inspirado em papel envelhecido, tinta ferruginosa e máquinas analógicas.

Modo claro

Paper
#ECE7DA
--paper
--cream
Bone
#F5F1E7
--bone
Parchment
#E3DCC9
--parchment
--cream-2
Ash
#C9C0AC
--ash
--line
Umber
#56503F
--umber
--muted
Ink
#211E18
--ink
--indigo
Clay
#B65A37
--clay
Rust
#A8472A
--rust
--gold
Oxide
#6E2E18
--oxide
--gold-dark

Modo escuro  ·  data-theme="dark"

Paper
#13110E
--paper
Bone
#1C1916
--bone
Parchment
#100E0B
--parchment
Ash
#2C2820
--ash, --line
Umber
#8C7E6E
--umber
Ink
#EBE5D4
--ink
Clay
#C87850
--clay
Rust
#C05A38
--rust
Oxide
#D47050
--oxide

02 · Temas de accent

4 temas de accent intercambiáveis via atributo HTML. Cada um redefinindo --clay, --rust e --oxide.

Modo claro

Variável
Rust · padrão
Clay · data-accent="clay"
Moss · data-accent="moss"
Steel · data-accent="steel"
--clay
variante clara
#B65A37
#C8724F
#5E7A67
#688078
--rust / --gold
accent principal
#A8472A
#B65A37
#3D6352
#4F635F
--oxide
variante escura
#6E2E18
#7C3E26
#294540
#33433F

Modo escuro

Variável
Rust
Clay
Moss
Steel
--clay
#C87850
#D4886A
#7EA88E
#8AADA6
--rust
#C05A38
#C0693E
#5A7D6A
#6A9190
--oxide
#D47050
#E09080
#8AB09A
#9BBAB8

03 · Tipografia

Display · Spectral
FamíliaSpectral (Google Fonts) Pesos usadosLight 300 · Regular 400
Medium 500 · Italic 300i / 400i Variável CSSvar(--font-display)
Títulos H1–H3, citações, displays, o itálico como elemento de ênfase. Uso editorial e emocional.
Marcas
que iluminam
Spectral 400 — Texto editorial
Spectral Light 300 — Subtítulos e apoio
Spectral Italic — Ênfase, destaques em acento
Body · Hanken Grotesk
FamíliaHanken Grotesk (Google Fonts) Pesos usadosRegular 400 · Medium 500
SemiBold 600 · Bold 700 Variável CSSvar(--font-body)
Corpo de texto, parágrafos, navegação, descrições. Base 17px / line-height 1.7.
Identidades visuais artesanais, desenhadas à mão e pensadas à luz de cada lugar. O bom design une estética e estratégia.
Hanken Grotesk Bold 700
Hanken Grotesk Medium 500 — Subtextos
Hanken Grotesk SemiBold 600 — Captions
Mono · IBM Plex Mono
FamíliaIBM Plex Mono (Google Fonts) Pesos usadosRegular 400 · Medium 500
Italic 400i Variável CSSvar(--font-mono)
Labels, eyebrows, numerais romanos, valores de código, preços, CTAs de botão. Letra-espaçamento expandido (0.14–0.26em).
ESTÚDIO DE DESIGN
R$ 1.897
VER PACOTES →
I. · II. · III. · IV. · V. · VI.
--rust: #A8472A; /* accent primary */

04 · Hierarquia tipográfica

Display H1Spectral 300–400
clamp(2.8rem,7vw,5.6rem)
line-height 1.02
Marcas que iluminam
Heading H2Spectral 300–400
clamp(2rem,4vw,3.4rem)
Identidade visual completa
Heading H3Spectral 400–500
1.2–1.4rem
Plano Lume · Identidade visual essencial
Eyebrow / LabelIBM Plex Mono 400
10–11px · 0.22–0.28em
UPPERCASE
Identidade Visual · Portfólio · Processo
Body textHanken Grotesk 400
17px / 1.7
Criamos marcas com estratégia, estética e desenho autoral. Cada identidade visual é pensada para traduzir a essência do negócio e criar uma presença marcante.
Subtexto / MutedHanken Grotesk 400
0.85–0.92rem
--umber color
Texto secundário, descrições de contexto, informações de apoio, placeholders e captions.
Preço / Destaque monoIBM Plex Mono 500
1.4–1.6rem
A partir de R$ 1.897

05 · Botões e elementos

Sobre fundo claro

Ver pacotes
Primário · --rust bg
Saiba mais
Ghost · border --ink
Falar com a Lumen
Primário + ícone WA
Header WA icon

Sobre fundo escuro (.on-dark / CTA)

Iniciar projeto
Primário · --gold
Saiba mais
Ghost · border --bone
Falar com a Lumen
Primário + ícone WA

06 · Uso dos temas

Tema claro / escuro

  • Claro — nenhum atributo (padrão)
  • Escuro — data-theme="dark" no elemento <html>
  • Persistido em localStorage('lumen-theme')
/* Ativar escuro */
<html data-theme="dark">

/* JS */
root.setAttribute('data-theme','dark');

Accent theme

  • Rust — padrão (sem atributo)
  • Clay — data-accent="clay"
  • Moss — data-accent="moss"
  • Steel — data-accent="steel"
/* Ativar Moss */
<html data-accent="moss">

/* Persiste em */
localStorage('lumen-accent')

Textura de página

  • Papel (grain) — padrão
  • Scanlines — data-texture="scanlines"
  • Nenhuma — data-texture="none"
/* body::after overlay */
<html data-texture="none">

localStorage('lumen-texture')

Prevenção de FOUC

Script inline no <head> aplica todos os estados antes do primeiro paint.

(function(){
 var t=localStorage.getItem('lumen-theme'),
  a=localStorage.getItem('lumen-accent'),
  x=localStorage.getItem('lumen-texture');
 if(t==='dark')html.attr('data-theme','dark');
 if(a&&a!=='rust')html.attr('data-accent',a);
 if(x&&x!=='paper')html.attr('data-texture',x);
})()

07 · CSS Tokens

VariávelClaroEscuroUso principal
--paper#ECE7DA #13110E Fundo principal da página
--bone#F5F1E7 #1C1916 Superfície elevada — cards, header
--parchment#E3DCC9 #100E0B Painel rebaixado, seção alternada
--ash / --line#C9C0AC #2C2820 Bordas, linhas divisórias, regras
--umber / --muted#56503F #8C7E6E Texto secundário, labels, eyebrows
--ink / --indigo#211E18 #EBE5D4 Texto principal, ícones, contornos
--clay#B65A37 #C87850 Variante clara do accent — itálico CTA
--rust / --gold#A8472A #C05A38 Accent principal — botões, underlines
--oxide / --gold-dark#6E2E18 #D47050 Hover de botão, deep accent, glow escuro
--font-display'Spectral', Georgia, serifTítulos, display, editorial
--font-body'Hanken Grotesk', system-ui, sans-serifParágrafos, UI, navegação
--font-mono'IBM Plex Mono', 'SF Mono', monospaceLabels, código, preços, CTAs
--padclamp(22px, 5.5vw, 80px)Padding lateral das seções
--easecubic-bezier(.2,.7,.2,1)Curva de easing padrão para transições
Lumen & Co.
OXIDE Visual System v1.0
global.css?v=14 · global.js?v=3
lumencompany.online · Paraty · RJ · 2026