Sistema visual · Pencilbox

La voz visual. Abierta a quien quiera mirarla.

Pencilbox tiene un sistema visual cerrado: Arial, Margen, Ink, Spotlight amarillo. Sin gradientes. Sin sombras decorativas. Sin emojis. Tres radii nada más: 0, 22 o píldora. Los manuales se distinguen por mood color del producto, no por inventos del autor. Lo que sigue es la fuente única de verdad.

§ 01 — Surfaces · el papel

Margen vive acá

Margen

#F7F7F6

paper · voz neutra

Surface

#F1F1F0

elevation 1

Surface Hi

#E7E7E6

elevation 2 · hover

§ 02 — Ink · tinta sobre el papel

4 niveles

Ink

texto principal

#111111

Ink dim

secundario

α 0.66

Ink mute

kickers · meta

α 0.44

Ink faint

estados desactivados

α 0.22

§ 03 — Spotlight

Máx 1-2 por vista

#FFFE3F

Reservado para identidad y momentos de aplauso visual. Marca el valor atómico de cada pantalla — el plan actual en pricing, el plan que estás usando en cambio de plan, el badge “Tu plan”, el dato más importante de un panel. La regla no negociable: máximo 1 o 2 spotlights por vista. Si todo brilla, nada brilla.

§ 04 — Semantic · solo estados

Nunca chrome

Success

#2F5A2A

Decisión firmada · publicado

Warn

#8A6A1C

Revisar · experimental due

Danger

#8C2E1C

Errores · descontinuado

§ 05 — Tipografía · Arial. Solo Arial.

Display + body + voz

H xxl

Marcas despiertas

64px · -0.035em · 0.95 · 700

H xl

Marcas despiertas

56px · -0.03em · 1.0 · 700

H l

Marcas despiertas

44px · -0.025em · 1.05 · 700

H m

Marcas despiertas

36px · -0.02em · 1.1 · 700

H s

Marcas despiertas

24px · -0.015em · 1.2 · 700

§ 06 — Radii · tres valores

0 · 22 · píldora

0px

Chip · esquinas vivas

22px

Card · contenedor

9999px

Píldora · botones, badges

§ 07 — Moods · tipos de manual

5 colores del producto

strategic

Estrategia

brand

Identidad

advertising

Campañas

retail

Locales

product

Producto

§ 08 — Reglas no-negociables

Si rompés esto, rompés el sistema

·Arial para todo (incluso código en specs).
·Spotlight amarillo #FFFE3F sólo para el valor atómico — máx 1-2 elementos por vista.
·Radii solo 0, 22 o 9999. Nada de 8/12/16/24.
·Sin sombras pesadas. Solo 0 1px 2px rgba(17,17,17,0.04) si hace falta.
·Sin gradientes — incluyendo cover, hero, cards, banners.
·Sin emojis en UI. (Sí en READMEs internos.)
·Voz editorial sobria en español argentino. No 'guau', 'increíble', 'amazing'.

We are awake

Un sistema visual no es decoración. Es un acuerdo.

Cada token de esta página vive como decisión firmada en algún Brandcenter. Cada radius está documentado. Cada hex tiene autor. Manuales vivos, marcas despiertas.

Probar Pencilbox →