charlota's banner

charlota

@0xCharlota • 13,609 subscribers

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

Shorts

i tried Framer Agent to build a brand guidelines website template, something i've meant to do for a while. a site i can swap a logo, nudge a colour, update the type, and send a link instead of re-exporting a pdf nobody opens. a few observations on the AI process: - i started with references. pulled together a handful of minimalist grid layouts and had Claude describe the visual style back to me. you can do the same inside Framer, feeding it the references directly. - from there i had it write a detailed prompt aimed at that exact style, then asked it to break it into a few smaller steps. then i fed those into the agent, one at a time. - the scaffolding stage is the satisfying part. for something this grid-driven (the columns, the spans, the whole underlying structure) watching it land in seconds is hard to look away from. - but then i still have to sweat the details: text alignment, line-heights, image sizes. i don't mind it at all; it's the part i like, making these design decisions. the strength of the agent is the mundane work. point it at the stuff that eats your time: cleaning up the build, adding responsiveness, dropping in small effects, checking text and colour styles stay consistent, writing alt text for every image. then i get the time back for the parts of web design that are actually fun. 🤝

34,421 görüntüleme

sometimes a vibecoded visual generator isn't a deliverable for clients; it's to help me think and explore faster. i wanted to try a graphic element today for a brand identity i'm designing: colored rays, with progressive blur. described it to Claude, pasted in some image references, had a minitool in a minute. then i just played with it: spacing, color, falloff, blur, grain... i could've made this manually, but it's a much faster way to explore and iterate early in the creative process — and honestly, sometimes stumble into a happy accident.

36,144 görüntüleme

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,345 görüntüleme

Another example of a quick, throwaway visual tool that I vibecoded to explore an idea (this time with Claude Fable). It exports video loops, and I can play around with colour, grain, direction... Took around 5 prompts and gave me a massive head start on a brand identity direction.

12,319 görüntüleme

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 görüntüleme

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/

519,974 görüntüleme • 5 ay önce

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,995 görüntüleme • 2 yıl önce

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 görüntüleme • 5 ay önce

I have 2-3 spots open in Jan-Feb for brand & web design sprints. Focused, high-end design work to accelerate your venture, delivered in just 7 days. Perfect for startups in web3, AI, femtech, or wellness (areas I enjoy and have experience with) Details👇

52,620 görüntüleme • 2 yıl önce

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 görüntüleme • 4 ay önce

Daha fazla içerik yok.