DXZO Studio Brand Style Guide

DXZO Studio System

Identidad de estudio de diseño: negro puro como lienzo, navy como base de marca y un amplio sistema de color gobernado con rigor. Sistemático, sofisticado y de alto contraste.

FUENTE: DXZO-Studio-Brand-Identity-DESIGN.md

Typography

1 familia · 200–800
Heading system
Manrope
ExtraBold 800 · 38px · ls -0.03em · display y wordmark
Body system
Manrope
Regular 400 / Medium 500 · specimen 38px · 16px/1.6 body · misma familia
A clean, contemporary identity built on sophistication, modernity and clarity across digital and print.
Manrope es la familia única del sistema (diseñada por Zumayed Shahria). Documentada literalmente por la marca y disponible en Google Fonts, así que se renderiza tal cual, sin sustitución.
LightRegularMediumSemiboldBoldExtraBold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 0%

Colors

Primary · dark
Navy Blue#3E4FA5
Light Blue#7895CB
Matte Black#171717
Off White#F2F2F2
CYAN
YELLOW
ORANGE
RED

Background Black #000000 · Surface Matte Black #171717 · Text Off White #F2F2F2 · Border #262626 · Brand Navy #3E4FA5 / Light Blue #7895CB · Accents Cyan #00D1FE · Yellow #FFCF1E · Orange #FF710F · Red #FF2A4B (uno por contexto)

Overview

Index / bento
LayoutÍndice editorial + grid bento
Content width1280px máx, centrado
FramingNegro puro, clearspace explícito
Grid12 col · gutter 24px · paleta 4 cols

Buttons

3 styles
Primary#3E4FA5 · #F2F2F2 · 10px
Secondaryoutline #262626 · 10px

Components

Live recipe
rXPrimary Color · 02
Navy Blue
HEX #3E4FA5RGB 62 79 165CMYK 62 76 0 0
Brand Info Alert Default

Spacing

base 8px
Index content
Title block
La copy de descripción refleja la medida de línea, el clearspace del módulo y el espaciado del CTA en la retícula.
Scale
481216244896
Gap · Card padding
gap 24pxcard 24pxsection 96px

Elevation & Depth

Matte / editorial

Profundidad sobria: superficies Matte Black (#171717) sobre negro puro, separadas por un hairline (#262626) y sombras suaves. Sin glow ni gradientes; una card navy o de acento "salta" sobre el negro por contraste de color, no por brillo.

TécnicaSurface + hairline border + soft shadow; el bloque de color sólido es la elevación en las fichas de paleta.
Surface#171717
Border1px #262626
Shadow0 18px 44px -16px rgba(0,0,0,.6)
Canvas#000000 (pure)

Shapes

Radius family

Radios contenidos (10–16px): redondeados y contemporáneos, en sintonía con la marca rX en cuadrado redondeado, sin caer en lo blando.

8px · sm10px · md16px · lg20px · xl9999px · pill
Primary radius10px botones · 16px cards
Marca · treatmentrX en cuadrado redondeado

Do's and Don'ts

Guardrails

Do

Respetar el clearspace del logo rX y del wordmark.
Usar negro puro de lienzo y Off White de texto, máximo contraste.
Navy como base de marca, light blue como contrapunto.
Aplicar un acento del sistema por contexto, no todos a la vez.
Mantener las mismas reglas en digital y print.

Don't

Invadir el clearspace ni deformar la marca rX.
Usar todos los acentos juntos; rompe la jerarquía.
Bajar el contraste (acento sobre acento, gris medio sobre negro).
Introducir gradientes o texturas ajenas al sistema.
Sustituir Manrope o improvisar grises fuera de la rampa.

Motion

Subtle · derivado

La fuente es un board estático: motion no observado. Escala mínima propuesta, limpia y mecánica, al servicio de la claridad. Transiciones de estado y revelado ordenado de módulos; sin efectos expresivos.

Motion levelSubtle
Durations140 · 220 · 320ms
Easingcubic-bezier(.4,0,.2,1)
Hovercolor, border, lift 1px