Skip to content

About Art of Styleframe

Art of Styleframe is an independent design publication. We write about UI design, layout systems, typography, motion for web, design tools, and creative direction. Every guide comes from real production work, Figma files we've shipped, CSS we've debugged, and design systems we've built for actual products.

We don't cover branding theory, print design, or illustration. Our focus is the web: how interfaces look, how they move, and how designers hand them off to developers without losing fidelity.

Who writes this

Portrait avatar of Mira Telos

Mira Telos Editor, UI & Layout

Mira covers the UI and layout side of the publication, design tokens, component variants, type scales, dashboards, and the unglamorous CSS work that makes a layout hold up at every breakpoint. She tends to argue for the small, boring decision: name your tokens before you draw the screen, write the component API before you place the props panel.

Her articles favour practical examples over abstract principles. If a property only works in two browsers, that goes in the first paragraph. If a Figma workflow saves an hour a week, it gets the screenshot.

Portrait avatar of Roan Vesper

Roan Vesper Editor, Motion & Visual

Roan writes about motion, web animation, brand systems, and the visual edges of a design, easing curves, scroll choreography, the moment between a click and a state change. His pieces lean on the idea that shipped animation beats perfect animation, and that motion should serve the content rather than draw a circle around itself.

Topics he keeps coming back to: timing functions that aren't ease-in-out, kinetic typography that actually reads, and the difference between a transition and a story.

Our editorial standards

  • Every technique we recommend has been used in production. We don't write about things we've only read about.
  • Code examples are tested in current browsers before publishing. No theoretical snippets.
  • Tool comparisons are based on real project work, not feature matrices copied from marketing pages.
  • We include version numbers, browser support data, and dates. Design advice ages fast, we want you to know when ours was written.
  • No sponsored articles. No paid reviews. No affiliate links on tool recommendations.

What we cover

  • UI Design, visual hierarchy, color theory, spacing, layout composition
  • Design Systems, Figma components, tokens, documentation, team workflows
  • Web Layouts, CSS Grid, Flexbox, dashboards, responsive patterns
  • Motion Design, web animation, transitions, scroll-driven effects, micro-interactions
  • Typography, font pairing, type scales, readability, web font performance
  • Tools, Figma, Sketch, Penpot, and the ecosystem around them

Contact

Questions, corrections, or collaboration proposals: [email protected]