charlota's banner

charlota

@0xCharlota • 13,344 subscribers

Brand designer for tech startups. https://t.co/4TEDyYmdbn Niche: AI, creative tools, healthcare, kids' tech. @framer partner. prev @IDEO @we3co

Shorts

a lot of visual identities fall apart the moment you remove the logo. so here’s friendly advice I wish someone drilled into me earlier: run every visual identity through the Three-Post Test. What is it? Design three social media posts in the new visual identity. (btw, you can now easily design and export social media assets directly in Framer) Or, design three posters. (a tip that Jessica Strelioff’s also recently shared!) Then, the important step: remove the logo. Now, look at them like a stranger would. If you’re trying to get out of junior design mode — ask yourself: 1. without the logo, do these three posts still obviously belong together? Follow up with: 2. can I easily point to repeating rules (layout, type behavior, spacing, color logic, ...)? 3. could another designer easily continue this system without me in the room? If you answer 1. no 2. nope 3. uhmmm, not sure then you’re in trouble. If the logo disappears and the connection goes with it, that’s your signal: you don’t have a visual system yet, just three nice visual pieces. maybe a very nice logo, too. So, run this test early, save yourself time later.

37,198 Aufrufe

Save this for the next time your typography feels weird and you can’t explain why. Nine times out of ten, it’s line-height - the vertical space between lines of text that decides whether type feels confident or clumsy, readable or tiring. Headlines Compress them. ~1.05–1.25 is usually right. Headlines aren’t meant to be read carefully line by line. They’re meant to land as a shape. Tighter leading pulls words into a single visual block and makes the headline feel confident and intentional. One hard rule: ascenders and descenders should never touch. If your t’s and l’s are colliding with g’s and y’s, you’ve gone too far. Body text Do the opposite. Give it air. ~1.4–1.7, depending on the typeface, its x-height, and the line length. Body text is about endurance. Your reader shouldn’t notice the typography at all. If they’re aware of the type, something’s off. The goal is that they just keep going, paragraph after paragraph, without friction. In Framer, you can find the Line-height settings in the Text Panel > Line. And yes, this applies even if you’re using the same font for headlines and body text! Same font, same page, but they have completely different jobs - and different line height. Sometimes, choosing a good type isn’t enough - you need to know how much space to give letters so they can do their work.

Save this for the next time your typography feels weird and you can’t explain why. Nine times out of ten, it’s line-height - the vertical space between lines of text that decides whether type feels confident or clumsy, readable or tiring. Headlines Compress them. ~1.05–1.25 is usually right. Headlines aren’t meant to be read carefully line by line. They’re meant to land as a shape. Tighter leading pulls words into a single visual block and makes the headline feel confident and intentional. One hard rule: ascenders and descenders should never touch. If your t’s and l’s are colliding with g’s and y’s, you’ve gone too far. Body text Do the opposite. Give it air. ~1.4–1.7, depending on the typeface, its x-height, and the line length. Body text is about endurance. Your reader shouldn’t notice the typography at all. If they’re aware of the type, something’s off. The goal is that they just keep going, paragraph after paragraph, without friction. In Framer, you can find the Line-height settings in the Text Panel > Line. And yes, this applies even if you’re using the same font for headlines and body text! Same font, same page, but they have completely different jobs - and different line height. Sometimes, choosing a good type isn’t enough - you need to know how much space to give letters so they can do their work.

21,862 Aufrufe

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

I built a multiplayer embroidery sampler for the internet. It's called Common Thread. 🪡 Built the entire thing in Figma Make, first thing I've ever vibecoded with it. Every visitor gets a patch on a shared canvas. You pick a thread color, choose a stitch type, and craft your art. A sampler is a piece of fabric where you practice and collect different stitches — a reference guide and playground in one. They were meant to be passed between hands and added to over time. Common Thread is that, but the fabric is infinite, the UI is whimsical, and the hands are anonymous. The part I love most: you can snap any section with a draggable embroidery hoop and export it, framed. i love how Figma Make is a kind of tool that lets you focus on what something should feel like, not how to ship it. Made for the Contra x Figma Makethon #FigmaMakeathon Try it yourself! /link below/

I built a multiplayer embroidery sampler for the internet. It's called Common Thread. 🪡 Built the entire thing in Figma Make, first thing I've ever vibecoded with it. Every visitor gets a patch on a shared canvas. You pick a thread color, choose a stitch type, and craft your art. A sampler is a piece of fabric where you practice and collect different stitches — a reference guide and playground in one. They were meant to be passed between hands and added to over time. Common Thread is that, but the fabric is infinite, the UI is whimsical, and the hands are anonymous. The part I love most: you can snap any section with a draggable embroidery hoop and export it, framed. i love how Figma Make is a kind of tool that lets you focus on what something should feel like, not how to ship it. Made for the Contra x Figma Makethon #FigmaMakeathon Try it yourself! /link below/

517,846 Aufrufe • vor 3 Monaten

A super simple letter-tracking cheatsheet for junior designers. Bookmark it now, escape junior design mode later. Rule 1: All-caps text needs to breathe. Caps-to-caps text is geometrically honest and optically brutal. When you remove ascenders and descenders, every letter becomes the same-height block. If you set labels like START NOW or SUBMIT on buttons — or eyebrow text (the small label above a headline) — with default tracking, they almost always look cramped and nervous. Rule of thumb: For any small all-caps text, loosen tracking by +5% to +10% ≈ +0.05em to +0.1em (or +50 to +100 in “tracking units”). Rule 2: The bigger the type, the looser it looks At large sizes, white space starts to dominate perception. Counters inflate. Gaps feel wider. Headlines and wordmarks start to look like they’re slowly dissolving. Rule of thumb: Above ~48pt, tighten tracking by –1% to –3% ≈ –0.01em to –0.03em (or –10 to –30 in “tracking units”) These numbers are not laws. Your eye is still the judge. But they’re very good starting coordinates. (btw, I built this whole layout in Framer — making Working Notes interactive is dangerously fun)

A super simple letter-tracking cheatsheet for junior designers. Bookmark it now, escape junior design mode later. Rule 1: All-caps text needs to breathe. Caps-to-caps text is geometrically honest and optically brutal. When you remove ascenders and descenders, every letter becomes the same-height block. If you set labels like START NOW or SUBMIT on buttons — or eyebrow text (the small label above a headline) — with default tracking, they almost always look cramped and nervous. Rule of thumb: For any small all-caps text, loosen tracking by +5% to +10% ≈ +0.05em to +0.1em (or +50 to +100 in “tracking units”). Rule 2: The bigger the type, the looser it looks At large sizes, white space starts to dominate perception. Counters inflate. Gaps feel wider. Headlines and wordmarks start to look like they’re slowly dissolving. Rule of thumb: Above ~48pt, tighten tracking by –1% to –3% ≈ –0.01em to –0.03em (or –10 to –30 in “tracking units”) These numbers are not laws. Your eye is still the judge. But they’re very good starting coordinates. (btw, I built this whole layout in Framer — making Working Notes interactive is dangerously fun)

17,334 Aufrufe • vor 4 Monaten

Alright—it's hard to ignore the new tool in the designer's toolkit. I added a new page on my website with my perspective on using AI-generated images in branding, along with some examples of client and personal work where I have done that. link below 👇

Alright—it's hard to ignore the new tool in the designer's toolkit. I added a new page on my website with my perspective on using AI-generated images in branding, along with some examples of client and personal work where I have done that. link below 👇

60,554 Aufrufe • vor 2 Jahren

in just a few hours, i vibecoded an AR mini app in Figma Make that watches you breathe in air, breathe out flowers. you know how every video call starts with 3 dead minutes where you just stare at yourself? what if you saw your breath instead — filling the screen with drifting, translucent flowers? camera tracks your breathing as you follow the box breathing guide. the longer you go, the more the frame fills with vibrant blooms. just you, mindfulness, and a garden that didn't exist 3 minutes ago. a grounding little experience before a video call — try it yourself (link below)! this is my second submission for Figma #FigmaMakeathon running on Contra

in just a few hours, i vibecoded an AR mini app in Figma Make that watches you breathe in air, breathe out flowers. you know how every video call starts with 3 dead minutes where you just stare at yourself? what if you saw your breath instead — filling the screen with drifting, translucent flowers? camera tracks your breathing as you follow the box breathing guide. the longer you go, the more the frame fills with vibrant blooms. just you, mindfulness, and a garden that didn't exist 3 minutes ago. a grounding little experience before a video call — try it yourself (link below)! this is my second submission for Figma #FigmaMakeathon running on Contra

11,652 Aufrufe • vor 3 Monaten

Keine weiteren Inhalte verfügbar