PERSONAL BRAND + DESIGN SYSTEM
Daniela Suaza™:
Case Study
[ROLE]
Solo Designer · Strategist · System Architect
[TOOLS]
Figma
[YEAR]
2026
[STATUS]
Active development
01
The Real Problem
There's a particular kind of discomfort that comes with being a DesignOps Lead who can't answer basic questions about her own brand.
The problem wasn't visual — it was structural. No documented decisions, no reusable logic, no system that could answer those questions without me in the room. Every asset I produced required starting from scratch. Every presentation, every LinkedIn post, every article cover was a small creative exercise I didn't have time for and shouldn't have needed to do.
More than that: I was asking clients to trust design systems I built for their products while running my own brand on instinct and goodwill. That gap had to close.
So I did what I do for enterprise teams — except this time, the client was me.
DIAGNOSTIC
What's your tone of voice?
Depends on the day.
What words do you use?
Whatever feels right.
Why those colors?
I liked them.
THAT'S NOT A BRAND.
THAT'S AN AESTHETIC WITH NO SPINE.
"I realized that ambiguity is the most expensive thing in tech. So I made it my mission to eliminate it."
02
Strategy Before System
Before opening Figma, I had to define what this brand actually was. Not what it looked like. What it stood for, how it talked, who it was talking to, and what it was trying to eliminate. That work became the Brand Book — a 40-page identity document covering everything from brand purpose to banned vocabulary.
Brand Book
PURPOSE
Design as Business Intelligence
Prove that design is not decoration, but high-level business intelligence that drives measurable outcomes.
MISSION
Eliminate Ambiguity
Transform complex, ambiguous requirements into scalable, fail-proof design ecosystems.
THE ENEMY
Zombie Design
Ambiguity, zombie design, and the legacy friction that slows teams down.
Brand Archetypes
PRIMARY
Primary Archetype
The Ruler
The standard setter who treats control as the prerequisite for speed, not a constraint on creativity. Precision over improvisation.
SECONDARY
Secondary Archetype
The Sage
The analyst who treats opinion as noise and data as signal. Together they define a voice that doesn't sound like a freelancer.
03
Visual Identity: Form Follows Function
With the strategy defined, the visual identity had one job: make the strategy visible.
The Logo
The logo is built around a custom illustration — a sticker-style portrait that carries the brand's personality: precise, distinctive, and unmistakably human. It's paired with Syne Extrabold in uppercase, creating a balance between character and authority. The system has two primary forms — Logotype and Isotype — each available in dark and light variants, with clear rules for backgrounds, clear space, and what is never allowed.
Color
Five colors. Each with a role, not a mood.
Slate Blue (#5B5BD6) anchors every touchpoint — the structural color that appears first and last. Chartreuse (#CDFF47) is the signal: reserved for emphasis, action, and the moments where precision demands attention. Onyx (#0A0A0A) grounds the system in depth. Parchment (#F2F0EB) gives it warmth without softness. Cotton Candy (#FF8FA3) lives quietly inside the illustration — a detail, not a decision.
Color here is never decorative. It is structural.
Typography
Two typefaces. Chosen for function.
Syne handles the big moments: headlines, names, declarations. DM Mono handles precision: labels, data, token references. One carries personality. The other carries clarity. Together they cover everything this brand needs to say.
Process Flow Shapes
Three shapes. One language.
The square defines. The diamond decides. The circle sustains. This is the brand's visual shorthand for how work moves — from ambiguity to structure, from intent to execution, from delivery to iteration. The shapes carry semantic weight and follow strict usage rules: they are never decorative, never mixed in the same list, never scattered without meaning.
Photography & Motion
All brand photography is black and white — no exceptions. The absence of color keeps the focus on what matters and creates consistency across formats. Motion follows the same logic: purposeful, never decorative. Every animation exists to communicate something the static frame can't.
04
Brand Language: The Other Half of the System
Most brands document how they look. Fewer document how they talk. This one does both.
The Lexicon is one of the most deliberate parts of the Brand Book. There are words I use at high frequency — architecture, ecosystem, friction, latency, scalability, deploy, validate, restructure — because they signal seniority and speak directly to the people who hire me: CTOs, Heads of Product, Engineering Managers. And there are words I've banned entirely — passion, vibe, rockstar, hustle, pretty, cute — because they signal the opposite. Every word is a signal. The wrong one costs credibility.
Four communication patterns define how I write and speak in any context: active voice always, if/then logic for decisions, quantified impact instead of vague claims, and confident ownership of high standards without apology.
Tone Matrix — Same Core Personality.
Different Volume.
The Tone Matrix defines how this voice adapts across three scenarios without ever breaking character:
Recruiter
The Proven Asset
Professional, accomplished, results-driven. Numbers and outcomes. No hedging.
- Active voice always.
- Quantified impact, not vague claims.
- Confident ownership of high standards.
Engineering team
The Collaborator
Technical, specific, helpful. I speak their language — tokens, configs, naming conventions — and position myself as a peer, not a bottleneck.
- Tokens, configs, naming conventions.
- Peer positioning, never bottleneck.
- If/then logic for decisions.
The Challenger
Opinionated, sharp, educational. I name industry failures and make claims that spark real conversation.
- Name industry failures directly.
- Claims that spark conversation.
- Worth following, not just liked.
05
Gradient: The Technical Infrastructure
With the brand fully defined — visually and linguistically — the next problem was operational: how do you make it run without you having to make the same decision twice?
That's Gradient.
Gradient is the design system that implements the Brand Book in Figma. Built entirely on Atomic Design principles, with a 4px base unit and a 12-column grid. Every token, every component, every layout rule is a direct translation of a brand decision that already exists in the documentation.
Design System
Token Architecture
Five collections, each with a distinct role:
Primitives
138 tokens
Raw values. Every color, spacing unit, and size. No meaning yet — just the palette. #5B5BD6, 4px, 1rem
Semantic
177 tokens
Where meaning is assigned. color.status.error · spacing.component.gap · typography.label.size
Theme
137 tokens
Brand-level and adaptive decisions. Light, dark, contextual variants — handled at the system level.
Responsive
29 tokens
Breakpoint logic. breakpoint.md · breakpoint.lg — the system knows what screen it's on.
Typography
7 tokens
The type scale, defined once, referenced everywhere. text.display through text.caption
The Hard Part
The most complex problem in the build was typographic responsiveness.
The goal: one type system that adapts to any screen size automatically — not through manual overrides, but through variables connected to breakpoints at the system level. Most designers build separate styles for mobile and desktop and switch manually. That introduces inconsistency and requires maintenance. I wanted one source of truth.
The solution was connecting typographic tokens to responsive variables in Figma. The type scale adjusts when the context changes. The component doesn't need to know what device it's on — the system already decided.
The first version broke at edge cases. The final version holds cleanly across all defined breakpoints.
06
The System Running
Gradient is already in production. Every deployment follows the same logic — no one-off values, no manual overrides, no decisions made twice.
LIVE
danielasuaza.com
Built entirely on Gradient. Responsive across all breakpoints. Every spacing and color decision driven by tokens.
Figma Sites
Tokens
Responsive
COMPLETE
Brand Book
40 pages of documentation that follow their own visual rules throughout. The brand documenting itself with its own system.
Figma
+40 pages
Self-Documenting
ACTIVE
Content Assets
Article covers, LinkedIn posts, case study headers, stationery, email signature. All from the same logic. All coherent.
Multi-format
No-one offs
Coherent
The System
Makes the
Call.
My Job is
Execution.
A brand is not a logo. A design system is not a Figma file. Both are sets of agreements — documented decisions that outlive the moment they were made and keep working when you're not in the room.
What I built here is proof of concept for the work I do professionally. I build systems that eliminate ambiguity for enterprise teams. Gradient proves I apply that same standard to myself — that I don't operate on instinct when I have the tools to operate on logic.
The brand no longer depends on me being present for every decision. The system makes the call. My job is execution.
That's exactly what I deliver to clients. It wouldn't make sense for my own house to run any differently.
PERSONAL BRAND + DESIGN SYSTEM
Daniela Suaza™:
Case Study
[ROLE]
Solo Designer · Strategist · System Architect
[TOOLS]
Figma
[YEAR]
2026
[STATUS]
Active development
01
The Real Problem
There's a particular kind of discomfort that comes with being a DesignOps Lead who can't answer basic questions about her own brand.
The problem wasn't visual — it was structural. No documented decisions, no reusable logic, no system that could answer those questions without me in the room. Every asset I produced required starting from scratch. Every presentation, every LinkedIn post, every article cover was a small creative exercise I didn't have time for and shouldn't have needed to do.
More than that: I was asking clients to trust design systems I built for their products while running my own brand on instinct and goodwill. That gap had to close.
So I did what I do for enterprise teams — except this time, the client was me.
DIAGNOSTIC
What's your tone of voice?
Depends on the day.
What words do you use?
Whatever feels right.
Why those colors?
I liked them.
THAT'S NOT A BRAND.
THAT'S AN AESTHETIC WITH NO SPINE.
"I realized that ambiguity is the most expensive thing in tech. So I made it my mission to eliminate it."
02
Strategy Before System
Before opening Figma, I had to define what this brand actually was. Not what it looked like. What it stood for, how it talked, who it was talking to, and what it was trying to eliminate. That work became the Brand Book — a 40-page identity document covering everything from brand purpose to banned vocabulary.
Brand Book
PURPOSE
Design as Business Intelligence
Prove that design is not decoration, but high-level business intelligence that drives measurable outcomes.
MISSION
Eliminate Ambiguity
Transform complex, ambiguous requirements into scalable, fail-proof design ecosystems.
THE ENEMY
Zombie Design
Ambiguity, zombie design, and the legacy friction that slows teams down.
Brand Archetypes
PRIMARY
Primary Archetype
The Ruler
The standard setter who treats control as the prerequisite for speed, not a constraint on creativity. Precision over improvisation.
SECONDARY
Secondary Archetype
The Sage
The analyst who treats opinion as noise and data as signal. Together they define a voice that doesn't sound like a freelancer.
03
Visual Identity: Form Follows Function
With the strategy defined, the visual identity had one job: make the strategy visible.
The Logo
The logo is built around a custom illustration — a sticker-style portrait that carries the brand's personality: precise, distinctive, and unmistakably human. It's paired with Syne Extrabold in uppercase, creating a balance between character and authority. The system has two primary forms — Logotype and Isotype — each available in dark and light variants, with clear rules for backgrounds, clear space, and what is never allowed.
Color
Five colors. Each with a role, not a mood.
Slate Blue (#5B5BD6) anchors every touchpoint — the structural color that appears first and last. Chartreuse (#CDFF47) is the signal: reserved for emphasis, action, and the moments where precision demands attention. Onyx (#0A0A0A) grounds the system in depth. Parchment (#F2F0EB) gives it warmth without softness. Cotton Candy (#FF8FA3) lives quietly inside the illustration — a detail, not a decision.
Color here is never decorative. It is structural.
Typography
Two typefaces. Chosen for function.
Syne handles the big moments: headlines, names, declarations. DM Mono handles precision: labels, data, token references. One carries personality. The other carries clarity. Together they cover everything this brand needs to say.
Process Flow Shapes
Three shapes. One language.
The square defines. The diamond decides. The circle sustains. This is the brand's visual shorthand for how work moves — from ambiguity to structure, from intent to execution, from delivery to iteration. The shapes carry semantic weight and follow strict usage rules: they are never decorative, never mixed in the same list, never scattered without meaning.
Photography & Motion
All brand photography is black and white — no exceptions. The absence of color keeps the focus on what matters and creates consistency across formats. Motion follows the same logic: purposeful, never decorative. Every animation exists to communicate something the static frame can't.
04
Brand Language: The Other Half of the System
Most brands document how they look. Fewer document how they talk. This one does both.
The Lexicon is one of the most deliberate parts of the Brand Book. There are words I use at high frequency — architecture, ecosystem, friction, latency, scalability, deploy, validate, restructure — because they signal seniority and speak directly to the people who hire me: CTOs, Heads of Product, Engineering Managers. And there are words I've banned entirely — passion, vibe, rockstar, hustle, pretty, cute — because they signal the opposite. Every word is a signal. The wrong one costs credibility.
Four communication patterns define how I write and speak in any context: active voice always, if/then logic for decisions, quantified impact instead of vague claims, and confident ownership of high standards without apology.
Tone Matrix — Same Core Personality.
Different Volume.
The Tone Matrix defines how this voice adapts across three scenarios without ever breaking character:
Recruiter
The Proven Asset
Professional, accomplished, results-driven. Numbers and outcomes. No hedging.
- Active voice always.
- Quantified impact, not vague claims.
- Confident ownership of high standards.
Engineering team
The Collaborator
Technical, specific, helpful. I speak their language — tokens, configs, naming conventions — and position myself as a peer, not a bottleneck.
- Tokens, configs, naming conventions.
- Peer positioning, never bottleneck.
- If/then logic for decisions.
The Challenger
Opinionated, sharp, educational. I name industry failures and make claims that spark real conversation.
- Name industry failures directly.
- Claims that spark conversation.
- Worth following, not just liked.
05
Gradient: The Technical Infrastructure
With the brand fully defined — visually and linguistically — the next problem was operational: how do you make it run without you having to make the same decision twice?
That's Gradient.
Gradient is the design system that implements the Brand Book in Figma. Built entirely on Atomic Design principles, with a 4px base unit and a 12-column grid. Every token, every component, every layout rule is a direct translation of a brand decision that already exists in the documentation.
Design System
Token Architecture
Five collections, each with a distinct role:
Primitives
138 tokens
Raw values. Every color, spacing unit, and size. No meaning yet — just the palette. #5B5BD6, 4px, 1rem
Semantic
177 tokens
Where meaning is assigned. color.status.error · spacing.component.gap · typography.label.size
Theme
137 tokens
Brand-level and adaptive decisions. Light, dark, contextual variants — handled at the system level.
Responsive
29 tokens
Breakpoint logic. breakpoint.md · breakpoint.lg — the system knows what screen it's on.
Typography
7 tokens
The type scale, defined once, referenced everywhere. text.display through text.caption
The Hard Part
The most complex problem in the build was typographic responsiveness.
The goal: one type system that adapts to any screen size automatically — not through manual overrides, but through variables connected to breakpoints at the system level. Most designers build separate styles for mobile and desktop and switch manually. That introduces inconsistency and requires maintenance. I wanted one source of truth.
The solution was connecting typographic tokens to responsive variables in Figma. The type scale adjusts when the context changes. The component doesn't need to know what device it's on — the system already decided.
The first version broke at edge cases. The final version holds cleanly across all defined breakpoints.
06
The System Running
Gradient is already in production. Every deployment follows the same logic — no one-off values, no manual overrides, no decisions made twice.
LIVE
danielasuaza.com
Built entirely on Gradient. Responsive across all breakpoints. Every spacing and color decision driven by tokens.
Figma Sites
Tokens
Responsive
COMPLETE
Brand Book
40 pages of documentation that follow their own visual rules throughout. The brand documenting itself with its own system.
Figma
+40 pages
Self-Documenting
ACTIVE
Content Assets
Article covers, LinkedIn posts, case study headers, stationery, email signature. All from the same logic. All coherent.
Multi-format
No-one offs
Coherent
The System
Makes the
Call.
My Job is
Execution.
A brand is not a logo. A design system is not a Figma file. Both are sets of agreements — documented decisions that outlive the moment they were made and keep working when you're not in the room.
What I built here is proof of concept for the work I do professionally. I build systems that eliminate ambiguity for enterprise teams. Gradient proves I apply that same standard to myself — that I don't operate on instinct when I have the tools to operate on logic.
The brand no longer depends on me being present for every decision. The system makes the call. My job is execution.
That's exactly what I deliver to clients. It wouldn't make sense for my own house to run any differently.
PERSONAL BRAND + DESIGN SYSTEM
Daniela Suaza™:
Case Study
[ROLE]
Solo Designer · Strategist · System Architect
[TOOLS]
Figma
[YEAR]
2026
[STATUS]
Active development
01
The Real Problem
There's a particular kind of discomfort that comes with being a DesignOps Lead who can't answer basic questions about her own brand.
The problem wasn't visual — it was structural. No documented decisions, no reusable logic, no system that could answer those questions without me in the room. Every asset I produced required starting from scratch. Every presentation, every LinkedIn post, every article cover was a small creative exercise I didn't have time for and shouldn't have needed to do.
More than that: I was asking clients to trust design systems I built for their products while running my own brand on instinct and goodwill. That gap had to close.
So I did what I do for enterprise teams — except this time, the client was me.
DIAGNOSTIC
What's your tone of voice?
Depends on the day.
What words do you use?
Whatever feels right.
Why those colors?
I liked them.
THAT'S NOT A BRAND.
THAT'S AN AESTHETIC WITH NO SPINE.
"I realized that ambiguity is the most expensive thing in tech. So I made it my mission to eliminate it."
02
Strategy Before System
Before opening Figma, I had to define what this brand actually was. Not what it looked like. What it stood for, how it talked, who it was talking to, and what it was trying to eliminate. That work became the Brand Book — a 40-page identity document covering everything from brand purpose to banned vocabulary.
Brand Book
PURPOSE
Design as Business Intelligence
Prove that design is not decoration, but high-level business intelligence that drives measurable outcomes.
MISSION
Eliminate Ambiguity
Transform complex, ambiguous requirements into scalable, fail-proof design ecosystems.
THE ENEMY
Zombie Design
Ambiguity, zombie design, and the legacy friction that slows teams down.
Brand Archetypes
PRIMARY
Primary Archetype
The Ruler
The standard setter who treats control as the prerequisite for speed, not a constraint on creativity. Precision over improvisation.
SECONDARY
Secondary Archetype
The Sage
The analyst who treats opinion as noise and data as signal. Together they define a voice that doesn't sound like a freelancer.
03
Visual Identity: Form Follows Function
With the strategy defined, the visual identity had one job: make the strategy visible.
The Logo
The logo is built around a custom illustration — a sticker-style portrait that carries the brand's personality: precise, distinctive, and unmistakably human. It's paired with Syne Extrabold in uppercase, creating a balance between character and authority. The system has two primary forms — Logotype and Isotype — each available in dark and light variants, with clear rules for backgrounds, clear space, and what is never allowed.
Color
Five colors. Each with a role, not a mood.
Slate Blue (#5B5BD6) anchors every touchpoint — the structural color that appears first and last. Chartreuse (#CDFF47) is the signal: reserved for emphasis, action, and the moments where precision demands attention. Onyx (#0A0A0A) grounds the system in depth. Parchment (#F2F0EB) gives it warmth without softness. Cotton Candy (#FF8FA3) lives quietly inside the illustration — a detail, not a decision.
Color here is never decorative. It is structural.
Typography
Two typefaces. Chosen for function.
Syne handles the big moments: headlines, names, declarations. DM Mono handles precision: labels, data, token references. One carries personality. The other carries clarity. Together they cover everything this brand needs to say.
Process Flow Shapes
Three shapes. One language.
The square defines. The diamond decides. The circle sustains. This is the brand's visual shorthand for how work moves — from ambiguity to structure, from intent to execution, from delivery to iteration. The shapes carry semantic weight and follow strict usage rules: they are never decorative, never mixed in the same list, never scattered without meaning.
Photography & Motion
All brand photography is black and white — no exceptions. The absence of color keeps the focus on what matters and creates consistency across formats. Motion follows the same logic: purposeful, never decorative. Every animation exists to communicate something the static frame can't.
04
Brand Language: The Other Half of the System
Most brands document how they look. Fewer document how they talk. This one does both.
The Lexicon is one of the most deliberate parts of the Brand Book. There are words I use at high frequency — architecture, ecosystem, friction, latency, scalability, deploy, validate, restructure — because they signal seniority and speak directly to the people who hire me: CTOs, Heads of Product, Engineering Managers. And there are words I've banned entirely — passion, vibe, rockstar, hustle, pretty, cute — because they signal the opposite. Every word is a signal. The wrong one costs credibility.
Four communication patterns define how I write and speak in any context: active voice always, if/then logic for decisions, quantified impact instead of vague claims, and confident ownership of high standards without apology.
Tone Matrix — Same Core Personality.
Different Volume.
The Tone Matrix defines how this voice adapts across three scenarios without ever breaking character:
Recruiter
The Proven Asset
Professional, accomplished, results-driven. Numbers and outcomes. No hedging.
- Active voice always.
- Quantified impact, not vague claims.
- Confident ownership of high standards.
Engineering team
The Collaborator
Technical, specific, helpful. I speak their language — tokens, configs, naming conventions — and position myself as a peer, not a bottleneck.
- Tokens, configs, naming conventions.
- Peer positioning, never bottleneck.
- If/then logic for decisions.
The Challenger
Opinionated, sharp, educational. I name industry failures and make claims that spark real conversation.
- Name industry failures directly.
- Claims that spark conversation.
- Worth following, not just liked.
05
Gradient: The Technical Infrastructure
With the brand fully defined — visually and linguistically — the next problem was operational: how do you make it run without you having to make the same decision twice?
That's Gradient.
Gradient is the design system that implements the Brand Book in Figma. Built entirely on Atomic Design principles, with a 4px base unit and a 12-column grid. Every token, every component, every layout rule is a direct translation of a brand decision that already exists in the documentation.
Design System
Token Architecture
Five collections, each with a distinct role:
Primitives
138 tokens
Raw values. Every color, spacing unit, and size. No meaning yet — just the palette. #5B5BD6, 4px, 1rem
Semantic
177 tokens
Where meaning is assigned. color.status.error · spacing.component.gap · typography.label.size
Theme
137 tokens
Brand-level and adaptive decisions. Light, dark, contextual variants — handled at the system level.
Responsive
29 tokens
Breakpoint logic. breakpoint.md · breakpoint.lg — the system knows what screen it's on.
Typography
7 tokens
The type scale, defined once, referenced everywhere. text.display through text.caption
The Hard Part
The most complex problem in the build was typographic responsiveness.
The goal: one type system that adapts to any screen size automatically — not through manual overrides, but through variables connected to breakpoints at the system level. Most designers build separate styles for mobile and desktop and switch manually. That introduces inconsistency and requires maintenance. I wanted one source of truth.
The solution was connecting typographic tokens to responsive variables in Figma. The type scale adjusts when the context changes. The component doesn't need to know what device it's on — the system already decided.
The first version broke at edge cases. The final version holds cleanly across all defined breakpoints.
06
The System Running
Gradient is already in production. Every deployment follows the same logic — no one-off values, no manual overrides, no decisions made twice.
LIVE
danielasuaza.com
Built entirely on Gradient. Responsive across all breakpoints. Every spacing and color decision driven by tokens.
Figma Sites
Tokens
Responsive
COMPLETE
Brand Book
40 pages of documentation that follow their own visual rules throughout. The brand documenting itself with its own system.
Figma
+40 pages
Self-Documenting
ACTIVE
Content Assets
Article covers, LinkedIn posts, case study headers, stationery, email signature. All from the same logic. All coherent.
Multi-format
No-one offs
Coherent
The System
Makes the
Call.
My Job is
Execution.
A brand is not a logo. A design system is not a Figma file. Both are sets of agreements — documented decisions that outlive the moment they were made and keep working when you're not in the room.
What I built here is proof of concept for the work I do professionally. I build systems that eliminate ambiguity for enterprise teams. Gradient proves I apply that same standard to myself — that I don't operate on instinct when I have the tools to operate on logic.
The brand no longer depends on me being present for every decision. The system makes the call. My job is execution.
That's exactly what I deliver to clients. It wouldn't make sense for my own house to run any differently.
PERSONAL BRAND + DESIGN SYSTEM
Daniela Suaza™:
Case Study
[ROLE]
Solo Designer · Strategist · System Architect
[TOOLS]
Figma
[YEAR]
2026
[STATUS]
Active development
01
The Real Problem
There's a particular kind of discomfort that comes with being a DesignOps Lead who can't answer basic questions about her own brand.
The problem wasn't visual — it was structural. No documented decisions, no reusable logic, no system that could answer those questions without me in the room. Every asset I produced required starting from scratch. Every presentation, every LinkedIn post, every article cover was a small creative exercise I didn't have time for and shouldn't have needed to do.
More than that: I was asking clients to trust design systems I built for their products while running my own brand on instinct and goodwill. That gap had to close.
So I did what I do for enterprise teams — except this time, the client was me.
DIAGNOSTIC
What's your tone of voice?
Depends on the day.
What words do you use?
Whatever feels right.
Why those colors?
I liked them.
THAT'S NOT A BRAND.
THAT'S AN AESTHETIC WITH NO SPINE.
"I realized that ambiguity is the most expensive thing in tech. So I made it my mission to eliminate it."
02
Strategy Before System
Before opening Figma, I had to define what this brand actually was. Not what it looked like. What it stood for, how it talked, who it was talking to, and what it was trying to eliminate. That work became the Brand Book — a 40-page identity document covering everything from brand purpose to banned vocabulary.
Brand Book
PURPOSE
Design as Business Intelligence
Prove that design is not decoration, but high-level business intelligence that drives measurable outcomes.
MISSION
Eliminate Ambiguity
Transform complex, ambiguous requirements into scalable, fail-proof design ecosystems.
THE ENEMY
Zombie Design
Ambiguity, zombie design, and the legacy friction that slows teams down.
Brand Archetypes
PRIMARY
Primary Archetype
The Ruler
The standard setter who treats control as the prerequisite for speed, not a constraint on creativity. Precision over improvisation.
SECONDARY
Secondary Archetype
The Sage
The analyst who treats opinion as noise and data as signal. Together they define a voice that doesn't sound like a freelancer.
03
Visual Identity: Form Follows Function
With the strategy defined, the visual identity had one job: make the strategy visible.
The Logo
The logo is built around a custom illustration — a sticker-style portrait that carries the brand's personality: precise, distinctive, and unmistakably human. It's paired with Syne Extrabold in uppercase, creating a balance between character and authority. The system has two primary forms — Logotype and Isotype — each available in dark and light variants, with clear rules for backgrounds, clear space, and what is never allowed.
Color
Five colors. Each with a role, not a mood.
Slate Blue (#5B5BD6) anchors every touchpoint — the structural color that appears first and last. Chartreuse (#CDFF47) is the signal: reserved for emphasis, action, and the moments where precision demands attention. Onyx (#0A0A0A) grounds the system in depth. Parchment (#F2F0EB) gives it warmth without softness. Cotton Candy (#FF8FA3) lives quietly inside the illustration — a detail, not a decision.
Color here is never decorative. It is structural.
Typography
Two typefaces. Chosen for function.
Syne handles the big moments: headlines, names, declarations. DM Mono handles precision: labels, data, token references. One carries personality. The other carries clarity. Together they cover everything this brand needs to say.
Process Flow Shapes
Three shapes. One language.
The square defines. The diamond decides. The circle sustains. This is the brand's visual shorthand for how work moves — from ambiguity to structure, from intent to execution, from delivery to iteration. The shapes carry semantic weight and follow strict usage rules: they are never decorative, never mixed in the same list, never scattered without meaning.
Photography & Motion
All brand photography is black and white — no exceptions. The absence of color keeps the focus on what matters and creates consistency across formats. Motion follows the same logic: purposeful, never decorative. Every animation exists to communicate something the static frame can't.
04
Brand Language: The Other Half of the System
Most brands document how they look. Fewer document how they talk. This one does both.
The Lexicon is one of the most deliberate parts of the Brand Book. There are words I use at high frequency — architecture, ecosystem, friction, latency, scalability, deploy, validate, restructure — because they signal seniority and speak directly to the people who hire me: CTOs, Heads of Product, Engineering Managers. And there are words I've banned entirely — passion, vibe, rockstar, hustle, pretty, cute — because they signal the opposite. Every word is a signal. The wrong one costs credibility.
Four communication patterns define how I write and speak in any context: active voice always, if/then logic for decisions, quantified impact instead of vague claims, and confident ownership of high standards without apology.
Tone Matrix — Same Core Personality.
Different Volume.
The Tone Matrix defines how this voice adapts across three scenarios without ever breaking character:
Recruiter
The Proven Asset
Professional, accomplished, results-driven. Numbers and outcomes. No hedging.
- Active voice always.
- Quantified impact, not vague claims.
- Confident ownership of high standards.
Engineering team
The Collaborator
Technical, specific, helpful. I speak their language — tokens, configs, naming conventions — and position myself as a peer, not a bottleneck.
- Tokens, configs, naming conventions.
- Peer positioning, never bottleneck.
- If/then logic for decisions.
The Challenger
Opinionated, sharp, educational. I name industry failures and make claims that spark real conversation.
- Name industry failures directly.
- Claims that spark conversation.
- Worth following, not just liked.
05
Gradient: The Technical Infrastructure
With the brand fully defined — visually and linguistically — the next problem was operational: how do you make it run without you having to make the same decision twice?
That's Gradient.
Gradient is the design system that implements the Brand Book in Figma. Built entirely on Atomic Design principles, with a 4px base unit and a 12-column grid. Every token, every component, every layout rule is a direct translation of a brand decision that already exists in the documentation.
Design System
Token Architecture
Five collections, each with a distinct role:
Primitives
138 tokens
Raw values. Every color, spacing unit, and size. No meaning yet — just the palette. #5B5BD6, 4px, 1rem
Semantic
177 tokens
Where meaning is assigned. color.status.error · spacing.component.gap · typography.label.size
Theme
137 tokens
Brand-level and adaptive decisions. Light, dark, contextual variants — handled at the system level.
Responsive
29 tokens
Breakpoint logic. breakpoint.md · breakpoint.lg — the system knows what screen it's on.
Typography
7 tokens
The type scale, defined once, referenced everywhere. text.display through text.caption
The Hard Part
The most complex problem in the build was typographic responsiveness.
The goal: one type system that adapts to any screen size automatically — not through manual overrides, but through variables connected to breakpoints at the system level. Most designers build separate styles for mobile and desktop and switch manually. That introduces inconsistency and requires maintenance. I wanted one source of truth.
The solution was connecting typographic tokens to responsive variables in Figma. The type scale adjusts when the context changes. The component doesn't need to know what device it's on — the system already decided.
The first version broke at edge cases. The final version holds cleanly across all defined breakpoints.
06
The System Running
Gradient is already in production. Every deployment follows the same logic — no one-off values, no manual overrides, no decisions made twice.
LIVE
danielasuaza.com
Built entirely on Gradient. Responsive across all breakpoints. Every spacing and color decision driven by tokens.
Figma Sites
Tokens
Responsive
COMPLETE
Brand Book
40 pages of documentation that follow their own visual rules throughout. The brand documenting itself with its own system.
Figma
+40 pages
Self-Documenting
ACTIVE
Content Assets
Article covers, LinkedIn posts, case study headers, stationery, email signature. All from the same logic. All coherent.
Multi-format
No-one offs
Coherent
The System
Makes the
Call.
My Job is
Execution.
A brand is not a logo. A design system is not a Figma file. Both are sets of agreements — documented decisions that outlive the moment they were made and keep working when you're not in the room.
What I built here is proof of concept for the work I do professionally. I build systems that eliminate ambiguity for enterprise teams. Gradient proves I apply that same standard to myself — that I don't operate on instinct when I have the tools to operate on logic.
The brand no longer depends on me being present for every decision. The system makes the call. My job is execution.
That's exactly what I deliver to clients. It wouldn't make sense for my own house to run any differently.
PERSONAL BRAND + DESIGN SYSTEM
Daniela Suaza™:
Case Study
[ROLE]
Solo Designer · Strategist · System Architect
[TOOLS]
Figma
[YEAR]
2026
[STATUS]
Active development
01
The Real Problem
There's a particular kind of discomfort that comes with being a DesignOps Lead who can't answer basic questions about her own brand.
The problem wasn't visual — it was structural. No documented decisions, no reusable logic, no system that could answer those questions without me in the room. Every asset I produced required starting from scratch. Every presentation, every LinkedIn post, every article cover was a small creative exercise I didn't have time for and shouldn't have needed to do.
More than that: I was asking clients to trust design systems I built for their products while running my own brand on instinct and goodwill. That gap had to close.
So I did what I do for enterprise teams — except this time, the client was me.
DIAGNOSTIC
What's your tone of voice?
Depends on the day.
What words do you use?
Whatever feels right.
Why those colors?
I liked them.
THAT'S NOT A BRAND.
THAT'S AN AESTHETIC WITH NO SPINE.
"I realized that ambiguity is the most expensive thing in tech. So I made it my mission to eliminate it."
02
Strategy Before System
Before opening Figma, I had to define what this brand actually was. Not what it looked like. What it stood for, how it talked, who it was talking to, and what it was trying to eliminate. That work became the Brand Book — a 40-page identity document covering everything from brand purpose to banned vocabulary.
Brand Book
PURPOSE
Design as Business Intelligence
Prove that design is not decoration, but high-level business intelligence that drives measurable outcomes.
MISSION
Eliminate Ambiguity
Transform complex, ambiguous requirements into scalable, fail-proof design ecosystems.
THE ENEMY
Zombie Design
Ambiguity, zombie design, and the legacy friction that slows teams down.
Brand Archetypes
PRIMARY
Primary Archetype
The Ruler
The standard setter who treats control as the prerequisite for speed, not a constraint on creativity. Precision over improvisation.
SECONDARY
Secondary Archetype
The Sage
The analyst who treats opinion as noise and data as signal. Together they define a voice that doesn't sound like a freelancer.
03
Visual Identity: Form Follows Function
With the strategy defined, the visual identity had one job: make the strategy visible.
The Logo
The logo is built around a custom illustration — a sticker-style portrait that carries the brand's personality: precise, distinctive, and unmistakably human. It's paired with Syne Extrabold in uppercase, creating a balance between character and authority. The system has two primary forms — Logotype and Isotype — each available in dark and light variants, with clear rules for backgrounds, clear space, and what is never allowed.
Color
Five colors. Each with a role, not a mood.
Slate Blue (#5B5BD6) anchors every touchpoint — the structural color that appears first and last. Chartreuse (#CDFF47) is the signal: reserved for emphasis, action, and the moments where precision demands attention. Onyx (#0A0A0A) grounds the system in depth. Parchment (#F2F0EB) gives it warmth without softness. Cotton Candy (#FF8FA3) lives quietly inside the illustration — a detail, not a decision.
Color here is never decorative. It is structural.
Typography
Two typefaces. Chosen for function.
Syne handles the big moments: headlines, names, declarations. DM Mono handles precision: labels, data, token references. One carries personality. The other carries clarity. Together they cover everything this brand needs to say.
Process Flow Shapes
Three shapes. One language.
The square defines. The diamond decides. The circle sustains. This is the brand's visual shorthand for how work moves — from ambiguity to structure, from intent to execution, from delivery to iteration. The shapes carry semantic weight and follow strict usage rules: they are never decorative, never mixed in the same list, never scattered without meaning.
Photography & Motion
All brand photography is black and white — no exceptions. The absence of color keeps the focus on what matters and creates consistency across formats. Motion follows the same logic: purposeful, never decorative. Every animation exists to communicate something the static frame can't.
04
Brand Language: The Other Half of the System
Most brands document how they look. Fewer document how they talk. This one does both.
The Lexicon is one of the most deliberate parts of the Brand Book. There are words I use at high frequency — architecture, ecosystem, friction, latency, scalability, deploy, validate, restructure — because they signal seniority and speak directly to the people who hire me: CTOs, Heads of Product, Engineering Managers. And there are words I've banned entirely — passion, vibe, rockstar, hustle, pretty, cute — because they signal the opposite. Every word is a signal. The wrong one costs credibility.
Four communication patterns define how I write and speak in any context: active voice always, if/then logic for decisions, quantified impact instead of vague claims, and confident ownership of high standards without apology.
Tone Matrix — Same Core Personality.
Different Volume.
The Tone Matrix defines how this voice adapts across three scenarios without ever breaking character:
Recruiter
The Proven Asset
Professional, accomplished, results-driven. Numbers and outcomes. No hedging.
- Active voice always.
- Quantified impact, not vague claims.
- Confident ownership of high standards.
Engineering team
The Collaborator
Technical, specific, helpful. I speak their language — tokens, configs, naming conventions — and position myself as a peer, not a bottleneck.
- Tokens, configs, naming conventions.
- Peer positioning, never bottleneck.
- If/then logic for decisions.
The Challenger
Opinionated, sharp, educational. I name industry failures and make claims that spark real conversation.
- Name industry failures directly.
- Claims that spark conversation.
- Worth following, not just liked.
05
Gradient: The Technical Infrastructure
With the brand fully defined — visually and linguistically — the next problem was operational: how do you make it run without you having to make the same decision twice?
That's Gradient.
Gradient is the design system that implements the Brand Book in Figma. Built entirely on Atomic Design principles, with a 4px base unit and a 12-column grid. Every token, every component, every layout rule is a direct translation of a brand decision that already exists in the documentation.
Design System
Token Architecture
Five collections, each with a distinct role:
Primitives
138 tokens
Raw values. Every color, spacing unit, and size. No meaning yet — just the palette. #5B5BD6, 4px, 1rem
Semantic
177 tokens
Where meaning is assigned. color.status.error · spacing.component.gap · typography.label.size
Theme
137 tokens
Brand-level and adaptive decisions. Light, dark, contextual variants — handled at the system level.
Responsive
29 tokens
Breakpoint logic. breakpoint.md · breakpoint.lg — the system knows what screen it's on.
Typography
7 tokens
The type scale, defined once, referenced everywhere. text.display through text.caption
The Hard Part
The most complex problem in the build was typographic responsiveness.
The goal: one type system that adapts to any screen size automatically — not through manual overrides, but through variables connected to breakpoints at the system level. Most designers build separate styles for mobile and desktop and switch manually. That introduces inconsistency and requires maintenance. I wanted one source of truth.
The solution was connecting typographic tokens to responsive variables in Figma. The type scale adjusts when the context changes. The component doesn't need to know what device it's on — the system already decided.
The first version broke at edge cases. The final version holds cleanly across all defined breakpoints.
06
The System Running
Gradient is already in production. Every deployment follows the same logic — no one-off values, no manual overrides, no decisions made twice.
LIVE
danielasuaza.com
Built entirely on Gradient. Responsive across all breakpoints. Every spacing and color decision driven by tokens.
Figma Sites
Tokens
Responsive
COMPLETE
Brand Book
40 pages of documentation that follow their own visual rules throughout. The brand documenting itself with its own system.
Figma
+40 pages
Self-Documenting
ACTIVE
Content Assets
Article covers, LinkedIn posts, case study headers, stationery, email signature. All from the same logic. All coherent.
Multi-format
No-one offs
Coherent
The System
Makes the
Call.
My Job is
Execution.
A brand is not a logo. A design system is not a Figma file. Both are sets of agreements — documented decisions that outlive the moment they were made and keep working when you're not in the room.
What I built here is proof of concept for the work I do professionally. I build systems that eliminate ambiguity for enterprise teams. Gradient proves I apply that same standard to myself — that I don't operate on instinct when I have the tools to operate on logic.
The brand no longer depends on me being present for every decision. The system makes the call. My job is execution.
That's exactly what I deliver to clients. It wouldn't make sense for my own house to run any differently.
PERSONAL BRAND + DESIGN SYSTEM
Daniela Suaza™:
Case Study
[ROLE]
Solo Designer · Strategist · System Architect
[TOOLS]
Figma
[YEAR]
2026
[STATUS]
Active development
01
The Real Problem
There's a particular kind of discomfort that comes with being a DesignOps Lead who can't answer basic questions about her own brand.
The problem wasn't visual — it was structural. No documented decisions, no reusable logic, no system that could answer those questions without me in the room. Every asset I produced required starting from scratch. Every presentation, every LinkedIn post, every article cover was a small creative exercise I didn't have time for and shouldn't have needed to do.
More than that: I was asking clients to trust design systems I built for their products while running my own brand on instinct and goodwill. That gap had to close.
So I did what I do for enterprise teams — except this time, the client was me.
DIAGNOSTIC
What's your tone of voice?
Depends on the day.
What words do you use?
Whatever feels right.
Why those colors?
I liked them.
THAT'S NOT A BRAND.
THAT'S AN AESTHETIC WITH NO SPINE.
"I realized that ambiguity is the most expensive thing in tech. So I made it my mission to eliminate it."
02
Strategy Before System
Before opening Figma, I had to define what this brand actually was. Not what it looked like. What it stood for, how it talked, who it was talking to, and what it was trying to eliminate. That work became the Brand Book — a 40-page identity document covering everything from brand purpose to banned vocabulary.
Brand Book
PURPOSE
Design as Business Intelligence
Prove that design is not decoration, but high-level business intelligence that drives measurable outcomes.
MISSION
Eliminate Ambiguity
Transform complex, ambiguous requirements into scalable, fail-proof design ecosystems.
THE ENEMY
Zombie Design
Ambiguity, zombie design, and the legacy friction that slows teams down.
Brand Archetypes
PRIMARY
Primary Archetype
The Ruler
The standard setter who treats control as the prerequisite for speed, not a constraint on creativity. Precision over improvisation.
SECONDARY
Secondary Archetype
The Sage
The analyst who treats opinion as noise and data as signal. Together they define a voice that doesn't sound like a freelancer.
03
Visual Identity: Form Follows Function
With the strategy defined, the visual identity had one job: make the strategy visible.
The Logo
The logo is built around a custom illustration — a sticker-style portrait that carries the brand's personality: precise, distinctive, and unmistakably human. It's paired with Syne Extrabold in uppercase, creating a balance between character and authority. The system has two primary forms — Logotype and Isotype — each available in dark and light variants, with clear rules for backgrounds, clear space, and what is never allowed.
Color
Five colors. Each with a role, not a mood.
Slate Blue (#5B5BD6) anchors every touchpoint — the structural color that appears first and last. Chartreuse (#CDFF47) is the signal: reserved for emphasis, action, and the moments where precision demands attention. Onyx (#0A0A0A) grounds the system in depth. Parchment (#F2F0EB) gives it warmth without softness. Cotton Candy (#FF8FA3) lives quietly inside the illustration — a detail, not a decision.
Color here is never decorative. It is structural.
Typography
Two typefaces. Chosen for function.
Syne handles the big moments: headlines, names, declarations. DM Mono handles precision: labels, data, token references. One carries personality. The other carries clarity. Together they cover everything this brand needs to say.
Process Flow Shapes
Three shapes. One language.
The square defines. The diamond decides. The circle sustains. This is the brand's visual shorthand for how work moves — from ambiguity to structure, from intent to execution, from delivery to iteration. The shapes carry semantic weight and follow strict usage rules: they are never decorative, never mixed in the same list, never scattered without meaning.
Photography & Motion
All brand photography is black and white — no exceptions. The absence of color keeps the focus on what matters and creates consistency across formats. Motion follows the same logic: purposeful, never decorative. Every animation exists to communicate something the static frame can't.
04
Brand Language: The Other Half of the System
Most brands document how they look. Fewer document how they talk. This one does both.
The Lexicon is one of the most deliberate parts of the Brand Book. There are words I use at high frequency — architecture, ecosystem, friction, latency, scalability, deploy, validate, restructure — because they signal seniority and speak directly to the people who hire me: CTOs, Heads of Product, Engineering Managers. And there are words I've banned entirely — passion, vibe, rockstar, hustle, pretty, cute — because they signal the opposite. Every word is a signal. The wrong one costs credibility.
Four communication patterns define how I write and speak in any context: active voice always, if/then logic for decisions, quantified impact instead of vague claims, and confident ownership of high standards without apology.
Tone Matrix — Same Core Personality.
Different Volume.
The Tone Matrix defines how this voice adapts across three scenarios without ever breaking character:
Recruiter
The Proven Asset
Professional, accomplished, results-driven. Numbers and outcomes. No hedging.
- Active voice always.
- Quantified impact, not vague claims.
- Confident ownership of high standards.
Engineering team
The Collaborator
Technical, specific, helpful. I speak their language — tokens, configs, naming conventions — and position myself as a peer, not a bottleneck.
- Tokens, configs, naming conventions.
- Peer positioning, never bottleneck.
- If/then logic for decisions.
The Challenger
Opinionated, sharp, educational. I name industry failures and make claims that spark real conversation.
- Name industry failures directly.
- Claims that spark conversation.
- Worth following, not just liked.
05
Gradient: The Technical Infrastructure
With the brand fully defined — visually and linguistically — the next problem was operational: how do you make it run without you having to make the same decision twice?
That's Gradient.
Gradient is the design system that implements the Brand Book in Figma. Built entirely on Atomic Design principles, with a 4px base unit and a 12-column grid. Every token, every component, every layout rule is a direct translation of a brand decision that already exists in the documentation.
Design System
Token Architecture
Five collections, each with a distinct role:
Primitives
138 tokens
Raw values. Every color, spacing unit, and size. No meaning yet — just the palette. #5B5BD6, 4px, 1rem
Semantic
177 tokens
Where meaning is assigned. color.status.error · spacing.component.gap · typography.label.size
Theme
137 tokens
Brand-level and adaptive decisions. Light, dark, contextual variants — handled at the system level.
Responsive
29 tokens
Breakpoint logic. breakpoint.md · breakpoint.lg — the system knows what screen it's on.
Typography
7 tokens
The type scale, defined once, referenced everywhere. text.display through text.caption
The Hard Part
The most complex problem in the build was typographic responsiveness.
The goal: one type system that adapts to any screen size automatically — not through manual overrides, but through variables connected to breakpoints at the system level. Most designers build separate styles for mobile and desktop and switch manually. That introduces inconsistency and requires maintenance. I wanted one source of truth.
The solution was connecting typographic tokens to responsive variables in Figma. The type scale adjusts when the context changes. The component doesn't need to know what device it's on — the system already decided.
The first version broke at edge cases. The final version holds cleanly across all defined breakpoints.
06
The System Running
Gradient is already in production. Every deployment follows the same logic — no one-off values, no manual overrides, no decisions made twice.
LIVE
danielasuaza.com
Built entirely on Gradient. Responsive across all breakpoints. Every spacing and color decision driven by tokens.
Figma Sites
Tokens
Responsive
COMPLETE
Brand Book
40 pages of documentation that follow their own visual rules throughout. The brand documenting itself with its own system.
Figma
+40 pages
Self-Documenting
ACTIVE
Content Assets
Article covers, LinkedIn posts, case study headers, stationery, email signature. All from the same logic. All coherent.
Multi-format
No-one offs
Coherent
The System
Makes the
Call.
My Job is
Execution.
A brand is not a logo. A design system is not a Figma file. Both are sets of agreements — documented decisions that outlive the moment they were made and keep working when you're not in the room.
What I built here is proof of concept for the work I do professionally. I build systems that eliminate ambiguity for enterprise teams. Gradient proves I apply that same standard to myself — that I don't operate on instinct when I have the tools to operate on logic.
The brand no longer depends on me being present for every decision. The system makes the call. My job is execution.
That's exactly what I deliver to clients. It wouldn't make sense for my own house to run any differently.