05 • PROGRAMMING
ArchUI Design System v1.1
A React and Tailwind component library inspired by architectural blueprints. ArchUI is a flexible design system for prototyping and building web apps.
Overview
ArchUI is a unique and modern React 19+ and Tailwind component library inspired by classical architecture. It provides flexible, themeable UI tokens based on three main architectural orders: Doric, Ionic, and Corinthian. Each order can be easily customizable thanks to their shared design tokens that were meticulously made in Figma, offering your app and web pages visual consistency and design flexibility.
This is not the usual architectural project found in portfolios. Rather, it is a software development project focused on parametric design.
Challenges
All ArchUI components are organized within three modular themes. Each theme uses the same set of variables, property names, and a tokenized design system.
Objectives
The causa finis of this open-source library is to offer a new robust and rigorous approach when building new apps, following three core principles: (1) granularity (2) functionality (3) elegance
Approach
The design methodology draws inspiration from architectural blueprints, emphasizing structural proportion and uniqueness. Every component has been crafted with special care and attention to detail, so your interfaces feel deliberate and cohesive.
Floor Plans
Results
A robust, flexible, and modular design system made in React and Tailwind offering a new approach to web development through the use of architecture-inspired UI components.
Learnings
• NPM Library publishing and maintenance • How to write, structure, and set up the project's documentation using Storybook and Chromatic • Performed highly-specific Figma components following a robust, shape-shifting design system crafted by hand
Next steps
• Scale up the design system by adding new UI components such as Cards, Photos, Boxes, Forms, Navbar, Footer, etc • Implement new AI-oriented solutions such as sketch-to-code generation and component mapping • Make the project collaborative
Gallery
1 / 8
Image 1 of 8. cover.png