The diegonmtz System · v1.2.0

The System

Serious frame, playful mouth.

One brand, three books: Brand, Web and Motion. Everything I make, from this site to a fifteen-second story, is built from the pieces on this page. The values come straight from the same token file the site uses.

[ 01 · PRINCIPLES ]

Two looks, one voice

Couture · the identity

A luxury fashion magazine

Black, space, few words, gold detail. Website, LinkedIn, case studies, portraits and closers.

Archivo · the lens

A museum catalog

White walls, frames, gallery labels. Culture, travel, museums, events and behind the scenes.

Voice · the fun

Sharp, warm, bilingual

Humor never comes from playful visuals. It comes from what I say: captions, subtitles, talking to camera.

  • Clarity first: one idea at a time, easy to scan.
  • Editorial precision: type and spacing feel intentional and calm.
  • Restrained signal: a stable black-and-white base, with accents used sparingly so they mean something.
  • Space is a material: more empty room than feels comfortable.
  • Recognizable in three seconds, without the name and without sound.

[ 02 · PERSONALITY ]

Serious frame, playful mouth

The image stays elegant everywhere, social included. The fun never comes from the visuals; it comes from what I say. The contrast between the two is the brand.

Black-and-white portrait of Diego on a black seamless
Strategy, tailored.

The frame

Black, space, one hard light, a still pose. It could hang in a gallery.

The mouth

A line that makes you smile. Short, sharp, written natively in Spanish and English.

We areSober, sure, preciseWe aren’tCold, solemn, corporate
We areCuratorial, exact, unhurriedWe aren’tAcademic, pretentious, distant
We areWitty in wordsWe aren’tSilly in images
We areBilingual by natureWe aren’tTranslated word for word

Not the brand

  • GradesTeal and orange, sepia, vintage filters, vignettes, light leaks.
  • EffectsBlur, glow, shadows of any kind, decorative gradients. The D is the only metallic thing in the brand.
  • Craft storeStickers, tape, paper textures, stamps, cutouts, collage.
  • TemplatesSwooshes, stock transitions, preset text animations.
  • Visual jokesMemes, bouncing or spinning graphics. The joke is in the words.
  • Borrowed marksAnother house’s logo or emblem, even next to a greca.

[ 03 · IDENTITY ]

One mark, two names

The D is the brand. It signs everything outside the interface: avatar, favicon, video intro, slides, email and print. The names come second: Diego Núñez in Cinzel next to the D in Couture pieces, and the wordmark, alone, for the interface.

The D: a black-and-white logomark made of layered metallic ribbons
The mark
A D of layered ribbons, turning into itself. Built from 37 tonal layers.
Why it fits
Black and white like the photography. It never takes a brand color.
Files
logo-layers.svg · logo-4k.png · logo-2k.png

Lockups

Primary · the D aloneAvatar, favicon, video intro, the back of a card. Whenever the name is already nearby.
Diego Núñez
Couture · D + nameLinkedIn banner, slide covers, case studies, print, email. The D at about 1.6× the height of the name’s capitals.
diegonmtz
UI · the wordmark, no DSite header and small sign-offs. The D never appears in the interface.

One version, three grounds

There is only the full-tone D. No flat, outline or one-color version: the D is the ribbons. Where they can’t survive, the wordmark takes its place.

On blackThe default. Black fields and dark photos.
On whiteDocuments, email, light pages and print on white stock.
In a circle or badgeWhite or black, centered with its clear space. Avatars, laptop stickers, app icons.

The wordmark

One wordmark: DIEGONMTZ in Cinzel Decorative 400, wide tracking. It signs the interface, and it stands in for the D wherever the ribbons can’t survive: embroidery, engraving, a stamp, one-color print, anything under 32 px. The Space Mono wordmark belonged to the old system and is retired.

diegonmtz
On whiteAll capitals, one height, wide tracking.
diegonmtz
On blackWhite on black.
diegonmtz
Gold · one inkFoil, embroidery, the spine of a printed piece. Print and video only.

Three signatures

How a piece signs off. The bigger the piece, the more of the signature it carries.

Diego Núñez

AI-native product manager

Let’s build something clear, useful, and hard to ignore.

diegonmtz.com

Full · CoutureVideo closers, the last slide, print, the LinkedIn banner. The gold filete closes it in video, print and slides, never on the web.

Diego Núñez

AI-native product manager

diegonmtz.com

Short · D + nameEmail, documents, proposals, invoices. No tagline, no filete.
diegonmtz
UI · the wordmarkThe site header and small sign-offs. Nothing else.

Clear space

The D with its clear space marked

Keep a margin equal to the counter, the hole inside the D, on every side. Nothing enters it: no text, no greca, no edge of the frame.

Never

Tint it a brand color
Rotate or spin it
Stretch it
Add a shadow or outline
Flatten it to one color
diegonmtz
Put it in the UI

Where it lives

AvatarThe D on black, centered. Platforms crop it round: the clear space keeps it whole.
Design System | diegoNMTZ
FaviconThe D on transparent.
Diego NúñezAI-native product manager
LinkedIn bannerCouture: the name on the left, the D on the right, black field.
Diego NúñezAI-native product managerdiegonmtz.com
Email signatureThe short signature. No banner, no icons.

Videos can open with the D: the official intro is style F · Light, a light that travels around the ribbons and turns them on, stepped at 12 fps, then the wordmark revealed in 6 steps.

[ 04 · IMAGE ]

Couture: one light, black, still

Portraits read like a fashion editorial. High-contrast black and white; the only color allowed is a palette color already in the scene. People stay whole in their own space.

Couture portrait: Diego in a black suit on a black seamless, one hard light
FramingVertical. Full body or three-quarter, with generous negative space above for a title.
LightOne hard source at 45°, black seamless. Deep shadows, no fill.
PoseStill. Direct gaze or three-quarter, hands in pockets, chin slightly up.
StylingBlack and white, tailored, no logos. At most one object in a palette color: a flower, a pocket square.
GradeBlack and white with selective color. Colors outside the palette go to gray.
Type on itIn the negative space, never across the face. Name in Cinzel, lines in Newsreader.

Never

Sepia or vintage grades
A brand color laid over as a tint
Cut out onto a color field
Vignettes and light leaks
Glow, blur, beauty filters
Tilted, collaged, stickered

[ 05 · COLOR ]

Six core inks, four extended

Black and white carry the page. Pink is the signal, once per piece. Orange is the action. Gold colors the ornament, so it lives in video, print and slides, never on this site. The extended inks are for data, categories and languages, one per piece. Click a swatch to copy it.

  • Black --black Ink: text, lines, structure On white 21.0:1 · on black 1.0:1
  • White --white Paper: background On white 1.0:1 · on black 21.0:1
  • Gray --gray Second sheet: quiet surfaces On white 1.1:1 · on black 19.1:1
  • Pink --pink Signal: emphasis, once per piece On white 3.7:1 · on black 5.6:1
  • Orange --orange Action: calls, time, warmth On white 2.5:1 · on black 8.4:1
  • GoldNot on the web --gold Ornament only: video, print and slides On white 2.6:1 · on black 8.0:1
  • Blue --blue Data, long links On white 4.7:1 · on black 4.4:1
  • Yellow --yellow Data highlight on black On white 1.4:1 · on black 14.5:1
  • Violet --violet Categories, chapters On white 5.5:1 · on black 3.8:1
  • Graphite --graphite Secondary text On white 13.4:1 · on black 1.6:1

Couture proportions: black ~68%, white and gray ~23%, pink ~6%, orange ~2%, gold ~1%. Solid inks only: no tints, no gradients, no green.

[ 06 · TYPE ]

Four families, one job each

Strike · once per page

--font-strike

Craft

Voice · headings, names

--font-voice

Strategy, tailored.

Voice italic · taglines

--font-voice

Let’s build something clear, useful, and hard to ignore.

Read · body

--font-read

Producto con oficio. Less noise, better decisions: a product manager’s job is to make the next decision obvious, then make it again tomorrow with better information.

Read capitals · labels

--font-read

AI-native product manager

System · UI, data

--font-system

Case studies · Reports · Nº 01 — ToDoTo

StyleFamilyWebVideo (share of short side)
Strike"Cinzel Decorative", serifclamp(2.1rem, 6vw, 4.7rem)14 vmin
Title L"Newsreader", serifclamp(2rem, 4.2vw, 3.4rem)6.5 vmin
Title M"Newsreader", serif1.48rem4.8 vmin
Body"Cormorant Garamond", serif1.14rem3.6 vmin · subtitles 4.4
Label / systemRead capitals · "Space Mono", monospace~0.62–0.66rem2.2 vmin

[ 07 · WEB ]

Square, hairline, no shadows

The components below are the site’s own CSS, not pictures of it. Depth comes from a line, never from a shadow. Buttons never move on hover; only their fill changes. No ornament on the web: the site stays pure line and type.

Labels

Product strategy

[ CASE STUDY ]

Card

Report · 2024

The State of Design Leadership

Square corners, a 1px line, no shadow.

Text and link

Read the ToDoTo case study for the full story. Focus shows a 2px pink outline.

  • Focus is always visible: outline: 2px solid var(--accent), offset 2px.
  • Transitions are short and linear (160ms), and reduced-motion turns them off.
  • Breakpoints: 640px, 780px, 900px, 1060px. Hierarchy and readability come before decorative structure.

[ 08 · ORNAMENT ]

Grecas are the accent, never the subject

The ornament took the place of shadows, cutouts and stickers. It frames, divides and signs in video, print and slides. These are specimens: the site itself never uses them.

Greca · Couture

The meander. Video chapters, dividers in slides and print.

Ola · Archivo

The running wave. Above gallery labels, for culture and travel.

Filete · the smallest

One greca unit between two hairlines. The closer’s base line.

Chapter · chapterCut to black. The title cuts in and a fine gold greca draws underneath in 6 steps.
Closer · closerThe Couture signature. The name is revealed in 6 steps, then the pink hairline, the role, the tagline, the orange URL and a gold filete.
Gallery label · gallery_labelArchivo. A black ola draws above the label, straight on the wall, with no box.
  • One family per piece: greca or ola. The filete goes with either.
  • Black on light, white on dark, gold on black. Never pink, orange or an extended ink.
  • Drawn left to right in 6 steps, then held. It never loops, rotates or scales.
  • About 4% of a surface at most. If the eye finds the greca before the headline, there is too much.

[ 09 · MOTION ]

Reveal, don’t throw

Still by default. Things appear through a mask or a line being drawn, in 4 or 6 steps at 12 fps, then hold. Hard cuts, never a cross-dissolve. Nothing rotates, bounces, shakes, scales or flies in. These clips are rendered by the video kit.

Name · nameA hairline draws in 4 steps, the name cuts in, the role follows 4 frames later.
Figure reveal · figureThe number in Cinzel is unmasked bottom-up in 6 steps; the label cuts in when it lands.
Thread under a word · threadThe piece’s one pink: a hairline draws under one word.
Letterbox · letterboxBlack bars close in 4 steps to a cinema frame; the line cuts in inside the bottom bar.
Color develops · color_matteThe shot opens in black and white; its palette colors come up in 6 steps and stay.

Every hit has a sound on the frame where it lands: a dry click, a shutter, a key, a marker, and a two-bell signature on the closer. All of them are synthesized in code.

[ 10 · VOICE ]

Witty in words, quiet in images

Spanish and English, each written natively; Portuguese in subtitles. Short sentences, one idea per line, confidence without adjectives.

SpanishEnglish
BioProducto con oficio.Strategy, tailored.
CTAHablemos.Let’s talk.
PostMenos ruido. Mejores decisiones.Less noise. Better decisions.
Archivo labelNº 01 — ToDoTo. Producto en vivo.Nº 01 — ToDoTo. Live product.

[ 11 · TOKENS ]

One file, every value

Every value on this page and on the site comes from one file. A build step writes it into the site’s CSS, and a check fails if a brand color is typed by hand anywhere.

TokenValueResolves to
--primaryvar(--black)#000000
--bgvar(--white)#FFFFFF
--surfacevar(--gray)#F4F4F4
--textvar(--black)#000000
--mutedvar(--graphite)#2F2F2F
--accentvar(--pink)#FF0088
--ctavar(--orange)#FA8334
--linevar(--black)#000000
--space-14px
--space-28px
--space-312px
--space-416px
--space-524px
--space-632px
--space-748px
--space-864px
--space-996px
--space-10128px
--motion-ui160ms
--motion-ui-fast80ms
--motion-reveal500ms
--motion-reveal-steps6
sm breakpointmax-width: 640px
md breakpointmax-width: 780px
lg breakpointmax-width: 900px
xl breakpointmax-width: 1060px

Diego Núñez

AI-native product manager

Let’s build something clear, useful, and hard to ignore.

diegonmtz.com