Launched this week
FrontAlign
ui-framework css-framework componnet-libray utility-first
8 followers
ui-framework css-framework componnet-libray utility-first
8 followers
I built Frontalign because I was tired of retrofitting dark mode and chasing WCAG contrast fails on every project. It's a lightweight CSS design system with OKLCH color tokens, AA-compliant contrast baked in, and light/dark themes that just work out of the box. Free core + premium UI blocks for teams who want more. Zero-config, SSR-safe, ready in minutes. Just not and CSS framework This is game-changer UI Engine for any enviroment.Built solo, shipped with care — would love your feedback! 🙌
🎯 FrontAlign
CSS frameworks are everywhere, so differentiation is tough.
What workflow do you think FrontAlign makes fundamentally simpler rather than just slightly faster?
Feels like that's where long-term adoption comes from.
@aryan787544 Hi Aryan! Great question! The core workflow FrontAlign fundamentally simplifies—rather than just speeding up—comes down to two major developer headaches: dynamic DOM updates and theming lifecycle management.
Here is where it changes the workflow:
Zero-reinit Dynamic UIs: In traditional setups, when dynamic content is injected via AJAX, SPAs, or HTMX, you usually have to write glue code to re-initialize components or bind JS listeners. With FrontAlign’s Smart Observer Runtime (MutationObserver), you simply drop elements like fa-component="modal" into the DOM, and they boot up automatically. No manual reInit() or lifecycle tracking required.
Flexible Runtime + Build-time Configuration: Most frameworks force a choice between pure build-time optimization or runtime flexibility. FrontAlign gives you both:
Build-time JIT: Purges unused CSS via frontalign.config.js for lightweight production builds.
Runtime Theming: Change themes instantly on the fly with new FrontAlign({ theme }) without re-compiling your CSS. Combined with our modern OKLCH color system, perceptually balanced contrast is preserved automatically during live theme swaps (great for multi-tenant SaaS or customizable dashboards).
Unified Stack: Instead of patching together Tailwind + JS plugins + Skeleton libraries + Form validation tools, FrontAlign provides a zero-dependency, unified engine that handles it all in one clean system.
So the long-term value isn't just writing CSS faster—it's eliminating the glue code and build pipeline hacks needed to handle modern dynamic interfaces.
@eyruz Really enjoyed this conversation. I have a feeling FrontAlign is one of those products whose positioning will evolve as you learn from users.
If you're open to it, what's the best email to reach you on? I'd love to stay in touch and follow your journey.
@aryan787544 Thank you! I really appreciate your thoughtful feedback. I agree that FrontAlign's positioning will evolve as more developers start using it and sharing their experiences.
The best way to reach me is eyruz@frontalign.dev. You can also connect with me on X (Twitter) or LinkedIn if you prefer. I'd be happy to stay in touch!
@eyruz Thanks! I’ve just sent it over.
Looking forward to hearing your thoughts whenever you have a chance.
honestly the OKLCH + WCAG combo sounds super useful, but would be huge if you could add a visual color picker where devs can tweak tokens and see the contrast scores update live. saves a lot of back-and-forth.
@bilalstnteuv6m Bilal, funny timing — your comment sent me down a rabbit hole and I already have a rough prototype working: sliders for L/C/H on both tokens, swatch preview, and the contrast ratio + AA/AAA badges updating live as you drag. Turned out simpler than I expected since it's all self-contained, no external libs needed. Going to polish it into a real playground page — will share it here once it's live.
Nice work shipping this solo, the OKLCH tokens with built-in AA contrast are a real time saver. One thing that would level it up for me — a Figma plugin that mirrors the token system so designers can preview light and dark variants before handoff. That would close the loop between design and code without anyone having to eyeball hex values.
@kucuksahal10675 Thank you Nehir, this genuinely made my day — thank you! The OKLCH + AA contrast setup took a lot of late nights, so hearing it's actually saving you time means a lot. And the Figma plugin idea is a really good one — filing it away as a strong next step. Appreciate you being here on day one 🙌
Love seeing a solo-built CSS system focused on real pain points like contrast and theming. One thing that would make this even more useful for me: a CLI or Figma plugin that syncs my OKLCH tokens both ways, so I can tweak colors in design and push directly to the codebase without manual copy-paste. Would save a ton of back-and-forth.
@sakar_gulh22939 Gülhan, thank you — that really means a lot, especially building this solo. Contrast and theming were the two things I cared about getting right, so I'm glad it shows. The CLI/two-way sync idea is great too, noting it down as a strong candidate for what's next. Thanks for showing up early 🙌