Create a Warm-Themed Design System: From Figma to Code

Create a Warm-Themed Design System: From Figma to CodeCreate a Warm-Themed Design System: From Figma to Code

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Lívia Kiss

• Mar 25

I gave myself a brief: build a complete design system from scratch. Figma to code.

I started with the token layer — colours, typography, spacing, border radius. Change one value, everything that inherits from it updates. That's the point of a system.

For the palette I went warm instead of cool. Deep olive, burgundy, cream. I wanted to see what happens when you don't default to neutral.

Then components, all variants and states. Then interactions that feel physical rather than just switching a color.

It's all on GitHub if you want to look through it.

Oleksii Petukhov

• 2d

Ever saved a module in your email editor, dropped it into a different template, and… everything looks different? Fonts changed, colors off, spacing weird.

In Stripo, modules inherit CSS from the template they land in. That's by design. It means when you drop a module into a client's template, it automatically matches their brand styles. No manual tweaking.

But sometimes you don't want that. You've built something with specific colors, fonts, and padding, and you need it to look exactly the same everywhere.

That's where inline styles come in. By saving CSS directly inside the module's HTML, you lock in the look. General Settings won't override it.

For freelancers juggling multiple client brands, this gives you the best of both worlds: • Flexible modules that adapt to any template • Rigid modules that stay pixel-perfect across projects

We broke it all down with examples here:

Save your modules with all your style settings. Stripo presents the Keep Module Styles feature

Curious: do you usually want your modules to adapt or stay locked? How do you handle it?

Stripo emaildesign modulardesign

stripo.email

Stripo modules and CSS: Why they inherit template styles and how to keep your own — Stripo.email

Stripo modules and CSS logic are explained in our special article. Why are modules designed this way, and what are the benefits to the email design process? Find out in this overview.

Stephanie Asoegwu

pro

• 1d

Never even thought about this before — the inline styles tip alone just saved me from so many headaches!

Andreea Nep

• 1d

Hot sauce with something to say and ingredients you can actually pronounce.

I developed the brand identity and packaging from four keywords: bold, spicy, cheeky, fun. The goal was to balance expressive character with a considered, tactile feel.

The visual direction combines a playful tone with an apothecary-inspired structure. A central sun motif anchors the label system — warm, bold, and slightly mystical — creating a recognizable and flexible core element.

The bottle was modeled in Blender and rendered to produce a consistent set of base visuals. These renders were used as reference inputs for AI-generated mockups, enabling scalable exploration of brand applications while maintaining control over form, lighting, and materials.

Packaging Design Brand Design Visual Design Adobe Illustrator Adobe Suite Blender

Izabella Dudan

• 1d

Wow, this one is really hot 😍

Révolté

pro

• 1d

Spent two weeks building a brand that wasn't supposed to look good. Just functional. Turns out that's the hardest brief of all. VEKTRAL case study, full video.

Back to feed

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Challenges

View all

Vehicle HMI with Rive

$15K7h 25m left507 participants

CapCut Video Studio

$9.5K5d left696 participants

Omma by Spline Buildathon

$15K7d left523 participants

Trending

Notion

Notion isn’t just where you work, it’s starting to work for you. What agents are you building?

portfolioreview

The best portfolios tell a story, not just show a grid. Share yours for feedback.

brandguidelines

Brand guidelines are becoming living systems, not static documents. What are you building for your clients?

aivideo

AI video tools are moving at warp speed. Which ones are you experimenting with?

freelancerlife

Freelancer life is wins, pivots, and everything in between. What’s yours right now?

Oleksii Petukhov

• 2d

Ever saved a module in your email editor, dropped it into a different template, and… everything looks different? Fonts changed, colors off, spacing weird.

But sometimes you don't want that. You've built something with specific colors, fonts, and padding, and you need it to look exactly the same everywhere.

That's where inline styles come in. By saving CSS directly inside the module's HTML, you lock in the look. General Settings won't override it.

For freelancers juggling multiple client brands, this gives you the best of both worlds: • Flexible modules that adapt to any template • Rigid modules that stay pixel-perfect across projects

We broke it all down with examples here:

Save your modules with all your style settings. Stripo presents the Keep Module Styles feature

Curious: do you usually want your modules to adapt or stay locked? How do you handle it?

Stripo emaildesign modulardesign

stripo.email

Stripo modules and CSS: Why they inherit template styles and how to keep your own — Stripo.email

Stripo modules and CSS logic are explained in our special article. Why are modules designed this way, and what are the benefits to the email design process? Find out in this overview.

Stephanie Asoegwu

pro

• 1d

Never even thought about this before — the inline styles tip alone just saved me from so many headaches!

Andreea Nep

• 1d

Hot sauce with something to say and ingredients you can actually pronounce.

I developed the brand identity and packaging from four keywords: bold, spicy, cheeky, fun. The goal was to balance expressive character with a considered, tactile feel.

Packaging Design Brand Design Visual Design Adobe Illustrator Adobe Suite Blender

Izabella Dudan

• 1d

Wow, this one is really hot 😍

Révolté

pro

• 1d

Spent two weeks building a brand that wasn't supposed to look good. Just functional. Turns out that's the hardest brief of all. VEKTRAL case study, full video.