|
/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
|
Type
|
|
|
/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
|
Space
|
|
|
/grid/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
|
Grid
|
|
|
/clamp/calculator?a=360,1240
|
Clamp
|
|
|
/blog
|
Blog
|
|
|
/showcase
|
Showcase
|
|
|
/blog/utopian-typography-is-easy
|
<p class="u-style-label card__split">
A designer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Fluid responsive typography: easy when you know how</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by James Gilyead</strong>
|
|
|
/blog/utopia-in-figma
|
<p class="u-style-label card__split">
A designer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Utopian project kickstarter: designing a fluid responsive website in a static tool like Figma</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by James Gilyead</strong>
|
|
|
/blog/generate-all-pairs
|
<p class="u-style-label card__split">
A developer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Generate all pair permutations in Utopia SCSS</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by Trys Mudford</strong>
|
|
|
/blog/graph
|
<p class="u-style-label card__split">
A designer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Type scale graphs</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by Trys Mudford</strong>
|
|
|
/blog/figma-plugin-v2
|
<p class="u-style-label card__split">
A designer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Figma plugin and kickstarter V2</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by James & Trys</strong>
|
|
|
/blog/postcss-utopia
|
<p class="u-style-label card__split">
A developer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Readable clamp() with PostCSS Utopia</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by Trys Mudford</strong>
|
|
|
/blog/utopia-core-scss
|
<p class="u-style-label card__split">
A developer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Utopia SCSS library</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by Trys Mudford</strong>
|
|
|
/blog/clamp-calculator
|
<p class="u-style-label card__split">
A developer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Clamp calculator</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by Trys Mudford</strong>
|
|
|
/blog/figma-variables
|
<p class="u-style-label card__split">
A designer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Utopia Fluid Type + Space Calculator now supports Figma variables</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by James & Trys</strong>
|
|
|
/blog/designing-a-utopian-layout-grid
|
<p class="u-style-label card__split">
A designer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Designing a Utopian layout grid: Working with fluid responsive values in a static design tool.</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by James Gilyead</strong>
|
|
|
/blog/get-started-with-utopia-figma-plugins
|
<p class="u-style-label card__split">
A designer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Getting started with Utopia Figma Plugins</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by James & Trys</strong>
|
|
|
/blog/an-introduction-video
|
<p class="u-style-label card__split">
An end-to-end perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">A video introduction to Utopia</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by James & Trys</strong>
|
|
|
/blog/painting-with-a-fluid-space-palette
|
<p class="u-style-label card__split">
A developer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Painting with a fluid space palette</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by Trys Mudford</strong>
|
|
|
/blog/designing-with-a-fluid-space-palette
|
<p class="u-style-label card__split">
A designer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Designing with a fluid space palette</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by James Gilyead</strong>
|
|
|
/blog/clamp
|
<p class="u-style-label card__split">
A developer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Clamp</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by Trys Mudford</strong>
|
|
|
/blog/a-second-generator
|
<p class="u-style-label card__split">
A developer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Utopian CSS generator, an iteration</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by Trys Mudford</strong>
|
|
|
/blog/dealing-with-negativity-in-fluid-type-scales
|
<p class="u-style-label card__split">
A designer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Dealing with negativity in fluid type scales</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by James Gilyead</strong>
|
|
|
/blog/fluid-custom-properties
|
<p class="u-style-label card__split">
A developer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Fluid custom properties</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by Trys Mudford</strong>
|
|
|
/blog/css-modular-scales
|
<p class="u-style-label card__split">
A developer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">CSS-only fluid modular type scales</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by Trys Mudford</strong>
|
|
|
/blog/designing-with-fluid-type-scales
|
<p class="u-style-label card__split">
A designer's perspective
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></p> <h2 class="u-style-serif">Designing with fluid type scales</h2> <strong class="u-step--1 u-font-serif u-color-dark-grey">by James Gilyead</strong>
|
|