ABOUT

To support scalable, consistent UI across various no-code tools (like Webflow, Framer, and Glide), I created an atomic design system that follows Brad Frost’s methodology: Atoms → Molecules → Organisms → Templates → Pages.

Atoms: Core building blocks such as buttons, inputs, icons, and color tokens. These are defined with strict naming conventions and tokenized styles for easy handoff.

Molecules: Reusable component groups like input + label, icon + text, card headers, and list items, optimized for drag-and-drop assembly in no-code environments.

Organisms: Complex UI blocks such as nav bars, hero sections, feature grids, and modals—built to remain modular across different screen sizes.

Templates: Layout scaffolds created using flexible auto-layout frames and grid systems that allow for dynamic content injection without breaking the design.

Pages: Final compositions demonstrating real use cases, structured to match how no-code tools structure content and logic visually.