Brand name
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.
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.
What I do
Multimedia design and front-end development shaped around strategy, story, and real-world production.
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.Where it appears
- Websiteconfirmed and audited
- Instagramreferenced; screenshots pending
- Proposalsfiles pending
Visual personality in five adjectives
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.
#C1FF72
Contrast on black: 17.81:1
#C1FF72
Contrast on white: 1.18:1—not recommended
DARK
[FILE PENDING]
Not extracted from the site.
GRAM
[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.
#000000--color-backgroundBase for every screen.
#0D0D0D--color-surfaceQuiet sections and surfaces.
#1A1A1A--color-surface-raisedRaised cards and panels.
#FFFFFF--color-text-primaryHeadings and priority text.
#B6B6BD--color-text-secondarySupporting text and metadata.
#6026EC--color-accentCalls to action, focus, emphasis.
#7A45FF--color-accent-hoverCTA hover state.
#9B5CFF--color-accent-lightBorders and gradients.
#66D487--color-greenHeadings, numbers, and links.
#C1FF72no token—PNG fileExact color of the current logo.
#FF6B6B--color-dangerError state.
04 / Typography
Geometric sans for impact, italic serif for editorial warmth.
Poppins
Display / headings / buttons
500 · 600 · 700 · 800Playfair Display Italic
Highlighted editorial words
500 · 600 · 700Inter
Body / interface / supporting text
400 · 500 · 600 · 700| Use | Family / weight | Desktop | Mobile | CSS source |
|---|---|---|---|---|
| Hero H1 | Poppins 800 | 115.86 px @1363 px | 62.4 px @390 px | clamp(3.6rem,8.5vw,8.2rem)clamp(3rem,16vw,5rem) ≤540 |
| Page H1 | Poppins 800 | 80 px | 40 px | clamp(2.5rem,6vw,5rem) |
| H2 | Poppins 700 | 47.7 px @1363 px | 30.4 px | clamp(1.9rem,3.5vw,3rem) |
| H3 | Poppins 700 | 28 px | 28 px | --text-xl |
| Body large | Inter 400 | 18 px | 18 px | --text-md |
| Body | Inter 400 | 16 px | 16 px | --text-base |
| Small / nav | Poppins / Inter | 14 px | 14 px | --text-sm |
| Eyebrow | Poppins 600 | 14 px | 11.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)--container-width--container-narrowclamp(1.25rem,4vw,3rem)confirmed override06 / Components
The building blocks that create rhythm and make the language recognizable.
radius 999pxPrimary: violet + white. Secondary: transparent + light border. Poppins 600, 16 px, padding 0.85em × 1.8em.
radius 16px#1A1A1A panel, white border at 14%, 4:3 media, and elevation on hover.
tracking .14emWHAT I DO
A little about me.
2 px line, uppercase Poppins, and an editorial word in italic Playfair.
min-height 9remIdentity, typography, color and guidelines.
↘Green number, large title, description, and arrow. On hover: violet background and vertical shift.
07 / Applications
What is already proven—and what still needs to be observed.
- 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
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.
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.
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.
Two brand greens
#C1FF72 in the logo PNG versus #66D487 in the --color-green token. The difference is real and visible.
Near-duplicate violet
#6026EC is the official token, while CSS-generated covers use #632CFF.
Near-duplicate green
#66D487 is the official token, while one generated cover uses #62D385.
Teal and coral pairs vary
The duotone gradient uses #2EC5C5 / #FF7A59; specific covers use #45C4B5 / #FF5737.
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.
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.
Logo package
Dark, white, monochrome, horizontal, symbol, favicon, and vector files.
Green rule
Decide whether the logo moves to #66D487 or #C1FF72 becomes a distinct official token.
Feed screenshots, approved posts, Reels covers, Stories, and recurring formats.
Proposals
One or more PDFs/screenshots to measure cover, grid, hierarchy, tables, and signature.
Logo clear space
Define the protection unit, minimum width, and prohibited uses.
Photographic treatment
Validate exposure, temperature, saturation, crop, and overlay across a larger sample.
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