Extracted from the live site rodrigocazuza.com ↗

Rodrigo Cazuza / Personal identity

A system that makes the work feel as clear as it is.

A navigable inventory of the patterns already present in the portfolio—without inventing colors, type, or spacing to fill gaps.

3core type families
8spacing-scale steps
2primary accents
7open decisions
Confirmed on site Sampled from file Flagged inference Placeholder

01 / Foundation

The brand already presents itself as an end-to-end creative practice.

The published work connects strategy, design, marketing, development, and production—with clarity and usefulness as the standard.

Confirmed

Brand name

Rodrigo Cazuza

Faithful site translation

What I do

Multimedia design and front-end development shaped around strategy, story, and real-world production.

Observed functional audience

Who buys

Businesses, brands, and collaborators who need brand systems, email campaigns, paid-media creative, social content, video, and websites.

The site describes needs and deliverables but does not state a formal buyer persona. Validate before finalizing.
Channels

Where it appears

  • Websiteconfirmed and audited
  • Instagramreferenced; screenshots pending
  • Proposalsfiles pending

Visual personality in five adjectives

StrategicClearBoldEditorialPractical

Basis: “strategy,” “clear,” “useful,” “memorable,” the high-contrast type scale, and the Poppins + italic Playfair pairing observed on the site.

The brand does

  • Connects strategy, design, and technical execution.
  • Explains the usefulness of each deliverable.
  • Shows the process, not only the final result.
  • Combines visual impact with clear hierarchy.
  • Adapts one logic across multiple channels.

The brand avoids

  • Separating the piece from its goal and audience.
  • Treating design as decoration without function.
  • Breaking the process into disconnected stages.
  • Placing green directly against violet.
  • Using near-identical variants without defined roles.

02 / Logos

One confirmed file. All other versions remain placeholders.

The only brand asset recovered from the site is a 500 × 500 px transparent PNG. Its color was sampled directly from the opaque pixels.

Rodrigo Cazuza wordmark in lime green
Current wordmark / dark background #C1FF72 Contrast on black: 17.81:1
Rodrigo Cazuza lime wordmark on white
Same file / light background #C1FF72 Contrast on white: 1.18:1—not recommended
LOGO
DARK
Dark version for light backgrounds [FILE PENDING] Not extracted from the site.
MONO
GRAM
Monogram / avatar / favicon [FILE PENDING] Not extracted from the site.

01

Confirmed application

The site places the mark on black, left-aligned, with object-fit: contain. Its CSS box is 10.8rem × 3.12rem on desktop and 8.4rem × 2.7rem below 480 px.

02

Confirmed restriction

The file's lime green loses legibility on white. Until an approved dark version exists, use this file only on near-black backgrounds.

03

Rule still missing

Clear space, minimum width, and monochrome treatments are not encoded on the site. They remain open.

03 / Colors

Dominant black, signal green, and electric violet.

The names below are the site's real CSS variable names. The logo color is listed separately because the file has no equivalent token.

Canvas Black#000000--color-background

Base for every screen.

Surface#0D0D0D--color-surface

Quiet sections and surfaces.

Panel Gray#1A1A1A--color-surface-raised

Raised cards and panels.

Paper White#FFFFFF--color-text-primary

Headings and priority text.

Secondary Text#B6B6BD--color-text-secondary

Supporting text and metadata.

Electric Violet#6026EC--color-accent

Calls to action, focus, emphasis.

Accent Hover#7A45FF--color-accent-hover

CTA hover state.

Accent Light#9B5CFF--color-accent-light

Borders and gradients.

Signal Green#66D487--color-green

Headings, numbers, and links.

Logo Lime#C1FF72no token—PNG file

Exact color of the current logo.

Danger#FF6B6B--color-danger

Error state.

04 / Typography

Geometric sans for impact, italic serif for editorial warmth.

Aa

Poppins

Display / headings / buttons

500 · 600 · 700 · 800
Aa

Playfair Display Italic

Highlighted editorial words

500 · 600 · 700
Aa

Inter

Body / interface / supporting text

400 · 500 · 600 · 700
UseFamily / weightDesktopMobileCSS source
Hero H1Poppins 800115.86 px @1363 px62.4 px @390 pxclamp(3.6rem,8.5vw,8.2rem)
clamp(3rem,16vw,5rem) ≤540
Page H1Poppins 80080 px40 pxclamp(2.5rem,6vw,5rem)
H2Poppins 70047.7 px @1363 px30.4 pxclamp(1.9rem,3.5vw,3rem)
H3Poppins 70028 px28 px--text-xl
Body largeInter 40018 px18 px--text-md
BodyInter 40016 px16 px--text-base
Small / navPoppins / Inter14 px14 px--text-sm
EyebrowPoppins 60014 px11.2 px ≤480--text-sm / .7rem

Mobile sizes are calculated directly from the site's CSS formulas at a 390 px reference width; they are not a new scale.

05 / Spacing

A compact, legible scale based on rem.

Values assume the site's standard 16 px root.

--space-3xs4 px
--space-2xs8 px
--space-xs12 px
--space-sm16 px
--space-md24 px
--space-lg40 px
--space-xl64 px
--space-2xl96 px
--space-section56–112 pxclamp(3.5rem,6vw,7rem)
Content1280 px--container-width
Narrow reading860 px--container-narrow
Page padding20–48 pxclamp(1.25rem,4vw,3rem)
Mobile padding ≤48016 pxconfirmed override

06 / Components

The building blocks that create rhythm and make the language recognizable.

Buttonsradius 999px

Primary: violet + white. Secondary: transparent + light border. Poppins 600, 16 px, padding 0.85em × 1.8em.

Cardradius 16px
BRAND SYSTEMBodyFactoryB
Brand Systems

Visual system source material.

View project ↘

#1A1A1A panel, white border at 14%, 4:3 media, and elevation on hover.

Eyebrowtracking .14em

WHAT I DO

A little about me.

2 px line, uppercase Poppins, and an editorial word in italic Playfair.

07 / Applications

What is already proven—and what still needs to be observed.

Websiteaudited
rodrigocazuza.com

HEY, I'M A

Multimedia
Designer

View my work
  • Dominant black background
  • Photographic hero with dark overlays
  • Violet CTA and green accents
  • Poppins + Playfair for editorial contrast
  • Modular cards, fine borders, and rounded corners
Instagramplaceholder
1:1SCREENSHOTS
PENDING

The site confirms Instagram production exists, but it does not support reliable extraction of the grid, margins, sizes, or recurring treatments from the personal profile.

Proposalsplaceholder
A4 / US LetterFILES
PENDING

No commercial proposal is published on the site. Cover, header, table, signature, and CTA treatments must be extracted from your files.

08 / Implementation mega prompt

Invoke the system on any platform.

Reusable implementation brief

Replace the bracketed inputs, then paste the prompt into your production tool, AI workspace, developer brief, Figma task, or content workflow. It carries confirmed rules forward and forces unknown values to remain visible.

You are implementing the Rodrigo Cazuza design system for [PLATFORM / FORMAT].

PROJECT INPUTS
- Goal: [WHAT THIS MUST ACHIEVE]
- Deliverable: [WEBSITE, SOCIAL POST, EMAIL, DECK, PROPOSAL, AD, VIDEO COVER, FIGMA, CANVA, FRONT-END COMPONENT, OR OTHER]
- Audience: [PRIMARY AUDIENCE]
- Dimensions / breakpoint / duration: [REQUIREMENTS]
- Technology or production tool: [STACK / PLATFORM]
- Content supplied: [COPY, IMAGES, LOGOS, DATA]
- Accessibility, compliance, and deadline constraints: [CONSTRAINTS]

SOURCE OF TRUTH
Use only the confirmed design-system values below. Do not invent a color, font, logo version, spacing value, radius, or visual rule. If a required value is missing, mark it [NEEDS DECISION], preserve the placeholder, and ask a focused question before finalizing.

BRAND FOUNDATION
- Brand: Rodrigo Cazuza
- Positioning: multimedia design and front-end development shaped around strategy, story, and real-world production.
- Observed audience: businesses, brands, and collaborators needing brand systems, email campaigns, paid-media creative, social content, video, and websites. This audience is an inference, not a formally approved persona.
- Visual personality: strategic, clear, bold, editorial, practical.
- Do: connect strategy, design, and technical execution; explain usefulness; show process; combine visual impact with clear hierarchy; adapt one logic across channels.
- Avoid: decoration without function; disconnected production stages; nearly identical color variants without a role; direct green-to-violet contact without black separation.

CONFIRMED VISUAL TOKENS
- Background #000000; surface #0D0D0D; raised surface #1A1A1A.
- Primary text #FFFFFF; secondary text #B6B6BD.
- Violet #6026EC; hover #7A45FF; light violet #9B5CFF.
- Signal green #66D487.
- Logo-file lime #C1FF72 is file-specific and is not an approved UI token.
- Display: Poppins. Editorial accent: Playfair Display Italic. Body/interface: Inter.
- Spacing: 4, 8, 12, 16, 24, 40, 64, 96 px. Section spacing: clamp(56px, 6vw, 112px).
- Radius: 8, 16, 24 px; pill 999 px.
- Logo: current transparent 500 × 500 PNG, sampled #C1FF72. Use on near-black backgrounds only until a dark logo is supplied.

IMPLEMENTATION METHOD
1. Audit the requested platform, format, dimensions, safe areas, interaction states, and export limits.
2. Map every visual choice to a confirmed token or rule above.
3. Build hierarchy with Poppins for impact, Inter for reading, and Playfair Display Italic only for selective editorial emphasis.
4. Keep black dominant. Use green as a signal and violet for calls to action/focus. Separate green and violet with black.
5. Use only the spacing scale. Preserve a central readable content area and prevent horizontal overflow at every width.
6. Render actual reusable components when the format supports them: pill buttons, raised cards, eyebrow headings, and numbered expertise rows.
7. Adapt the composition to the channel's purpose instead of merely resizing it. Preserve brand hierarchy, contrast, and intent.
8. For unsupported or unobserved channels, label assumptions and keep unknowns as placeholders.

OUTPUT CONTRACT
Return:
A. a short requirement-to-token mapping;
B. the finished implementation or production-ready specification;
C. responsive / alternate-format behavior;
D. accessibility and contrast checks;
E. a list of every [NEEDS DECISION] item;
F. a final pre-publish checklist result.

FINAL QUALITY GATE
Confirm: correct positioning and audience; correct logo for its background; palette-only hex values; correct type roles; spacing-scale compliance; no direct green/violet contact; no horizontal overflow; reviewed copy and CTA; checked crop/overlay/alt text; channel-appropriate adaptation. Do not claim completion while an unknown value has been silently invented.

09 / Divergences

Variations found that require a conscious decision.

High

Two brand greens

#C1FF72 in the logo PNG versus #66D487 in the --color-green token. The difference is real and visible.

Medium

Near-duplicate violet

#6026EC is the official token, while CSS-generated covers use #632CFF.

Medium

Near-duplicate green

#66D487 is the official token, while one generated cover uses #62D385.

Medium

Teal and coral pairs vary

The duotone gradient uses #2EC5C5 / #FF7A59; specific covers use #45C4B5 / #FF5737.

Low

Loaded fonts without a core role

Anton, Bodoni Moda, and Work Sans load on the site but do not appear in the personal brand's three type tokens; some usage belongs to client projects.

High

Square canvas for a horizontal lockup

The current file is 500 × 500 px even though its content is a two-line wordmark. This complicates scaling and minimum-width rules.

10 / Open decisions

What is still missing for the system to become complete.

01

Logo package

Dark, white, monochrome, horizontal, symbol, favicon, and vector files.

02

Green rule

Decide whether the logo moves to #66D487 or #C1FF72 becomes a distinct official token.

03

Instagram

Feed screenshots, approved posts, Reels covers, Stories, and recurring formats.

04

Proposals

One or more PDFs/screenshots to measure cover, grid, hierarchy, tables, and signature.

05

Logo clear space

Define the protection unit, minimum width, and prohibited uses.

06

Photographic treatment

Validate exposure, temperature, saturation, crop, and overlay across a larger sample.

07

Priority audience

The site lists services but does not yet explicitly choose an ideal client or priority sector.

11 / CSS tokens

Ready to copy.

:root {
  --color-background: #000000;
  --color-surface: #0d0d0d;
  --color-surface-raised: #1a1a1a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #b6b6bd;
  --color-text-on-accent: #ffffff;
  --color-accent: #6026ec;
  --color-accent-base: #6026ec;
  --color-accent-hover: #7a45ff;
  --color-accent-light: #9b5cff;
  --color-accent-tint: rgba(96, 38, 236, 0.16);
  --color-green: #66d487;
  --color-accent-secondary: #66d487;
  --color-green-tint: rgba(102, 212, 135, 0.14);
  --color-violet: #6026ec;
  --color-panel-gray: #1a1a1a;
  --color-ink: #000000;
  --color-ink-soft: #0d0d0d;
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.28);
  --color-danger: #ff6b6b;
  --color-focus: #66d487;

  --gradient-brand: linear-gradient(135deg, #6026ec 0%, #9b5cff 100%);
  --gradient-hero: radial-gradient(120% 120% at 100% 0%, #1a0f3d 0%, #0a0620 45%, #000000 100%);
  --gradient-duotone: linear-gradient(135deg, #2ec5c5 0%, #6026ec 50%, #ff7a59 100%);

  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 3.75rem;
  --text-5xl: 5rem;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --leading-tight: 1.05;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-section: clamp(3.5rem, 6vw, 7rem);

  --container-width: 1280px;
  --container-narrow: 860px;
  --page-padding: clamp(1.25rem, 4vw, 3rem);
  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 24px;
  --radius-pill: 999px;
}

This block transcribes the site's existing tokens. The logo's #C1FF72 was not automatically added because doing so requires a system decision.

12 / Approval checklist

Before you publish.

Progress is saved only in this browser.

0 of 12 checked