Styleframe

- the Design Systems Engine for serious TypeScript applications.

Enjoy type-checked tokens, themes, utilities, recipes and selectors.

[Styleframe @styleframe_dev]

Styleframe v3.8.0 is out! 🚀
Smaller output, smarter scanning, and a tighter Figma workflow.

• Build-time class name shortening
• Dynamic utilities for unmatched CSS properties
• Figma specific export/import via CLI
• Recipe-level tree-shaking
• Now on Vite 8 w/ Rolldown + oxc

[Styleframe @styleframe_dev]

Should we tree-shake recipes next? 🚀

[Alex Grozav @alexgrozav]

Shipped another huge DX win for @styleframe_dev! Utility classes are now minified automatically at build time.

_color:primary -> _c:p

Write utility classes in natural CSS-like syntax during development. Ship smaller HTML and CSS than Tailwind (-15% gzipped), zero loss of DX.

[Styleframe @styleframe_dev]

We've just released [email protected]! 🎉

What's new:
· Variable and utility usage detection and purging for much leaner outputs
· Unified fluid and static font size design tokens
· Named Props types exported from the virtual module
· Rewritten 15min guide, new Elements docs, and a framework switcher

[Styleframe @styleframe_dev]

Our documentation now features a select menu to choose from @reactjs, @vuejs and vanilla @typescript in the code examples.

Which framework would you like to see next?

#opensource #foss #webdev

[Styleframe @styleframe_dev]

We're welcoming contributions from all of our community! 💚

We've added a complete CONTRIBUTING.md guide to help you get started: https://t.co/lS2Hajf8c0

#opensource #foss

[Styleframe @styleframe_dev]

Styleframe now has a playground! Write type-safe CSS in your browser and see it render instantly.

No install, no config. Just try it live: https://t.co/YZcGpi8PRK

#typescript #css #webdev

[Styleframe @styleframe_dev]

Your design tokens shouldn't live in two places.

The `pnpx styleframe dtcg export` command emits spec-conformant W3C DTCG JSON. Figma reads it. Style Dictionary reads it. Tokens Studio reads it.

Bidirectional. Free. No limits.

[Alex Grozav @alexgrozav]

Designers, how are you handling design token updates from your dev team right now? Manual edits? A plugin? Pretending it's not a problem?

Tokens should live in code and land in @figma without anyone retyping a hex value.

Forever free → https://t.co/8zBK05nRIy

[Styleframe @styleframe_dev]

Tailwind JIT scans your templates. So does Styleframe, except every utility is a factory function you registered.

Don't like .bg-primary? Swap functions and you've got ._background:primary.

Same transpiler, your naming. Complete control.

#webdev #tailwindcss #typescript #css

[Styleframe @styleframe_dev]

The Styleframe recipe runtime is ~1.4KB ESM, dependency-free, and only ships if you actually define a recipe.

No recipes = static CSS, zero JS in the bundle. ⚡

#webdev #css #typescript

[Styleframe @styleframe_dev]

@heyblake https://t.co/myXoHJaVA4

[Zain Shah @zan2434]

Imagine every pixel on your screen, streamed live directly from a model. No HTML, no layout engine, no code. Just exactly what you want to see.

@eddiejiao_obj, @drewocarr and I built a prototype to see how this could actually work, and set out to make it real. We're calling it Flipbook. (1/5)

[Styleframe @styleframe_dev]

We're working on an update to allow DESIGN.md to be used to generate a styleframe configuration.

It'll be the best of both worlds: a design system with the look and feel you want to reproduce, but with the constraints and high quality you're used to from us.

#PutAStopToTheSlop #ui #ux #dx #typescript

[David East @_davideast]

What DESIGN.md is and isn't.

ISN'T
- A rendering syntax
- A replacement for CSS
- An opinionated design system format
- A component library

IS
- Describes design intent
- Captures descions "why we use this grid"
- Reasoning of design concepts, "minimalist layouts" or "editorial headings"
- Establishes an aesthetic with latent associations, "cream stationary" surfaces and "ink" text
- Documents positive and negative constraints. "Use all caps for headings" or "Never use pure white #fff for surfaces"

This creates a documented visual identity for humans to read and persistent contextual memory to ground agents.

[Styleframe @styleframe_dev]

@_davideast We're working on an update to allow DESIGN.md to be used to generate a styleframe configuration.

It'll be the best of both worlds: a design system with the look and feel you want to reproduce, but with the constraints and high quality you're used to from us.

#PutAStopToTheSlop

[Styleframe @styleframe_dev]

We’re one step closer to building high quality Design Systems in a matter of minutes.

And no, you don’t even need AI to do it. 🚫🤖

We shipped 12 hand-tuned, highly configurable Styleframe recipes for components in the past two weeks.

#css #typescript #designsystem #ui #ux

[Styleframe @styleframe_dev]

We just shipped Styleframe v3.3.0 🎉

Introducing the first recipes for our default theme: a big step toward a fully composable design system.

- Badge & Button components with beautiful defaults
- Scalable theming

https://t.co/qmP42yesgq

#TypeScript #CSS #DesignSystems

[Styleframe @styleframe_dev]

Styleframe v3.2.0 is live! 🎉

The `@variablename` syntax is now widely supported for safely referencing variables in other variables, refs, selectors, utilities and recipes.

#TypeScript #CSS #DesignSystems

[Styleframe @styleframe_dev]

Styleframe v3.1.0 is live! 🎉

✅ 68 utility modifier composables (hover, focus, aria-*, dark, rtl, open & more)
✅ Deterministic hashing for arbitrary CSS values
✅ 8 new e2e test specs

Type-safe. Production-ready.

#WebDev #TypeScript #CSS #DesignSystems