Lofi web components
2025
Created to help streamline brainstorming and sketches, represent patterns in the design system and used through the app to provide live-updating lofi components. Built using React and Tailwind CSS.
I talk more about this in my blog post about design system strategies. I have also included more details here about the components specifically.
Using components in code
Lofi components can include <Avatar />, <Image />, <Sentence />, <Title /> and so on
These can also be used during ideation with sketches and wireframes, in the design system to reduce the reliance on static images which would need to be updated, or in the app to display information with dynamic colors that adjust to dark mode.
- Can be assembled with other functional components like <DropCap />
- Easier to add effects like transitions or other animations
Using it in the ideation process
Useful like how character sheets and storyboards can be used in animation to plan out ideas rapidly.
Sketches (like this one) can be done on index cards or on digital whiteboards without requiring hi-fidelity mockups which makes it easier to iterate quickly.
This also helps identify patterns that can be turned into components or need more research while referencing components in the design system.
At this point you can either build hi-fidelity mockups or go straight to development depending on the project using tools like Storybook to preview components in isolation and prototype interactions quickly.
This example is ogham stones on Love.irish that can be signed like guestbooks by carving a word into it using the old script.
Some events like Seachtain na Gaeilge (Irish Week) have their own ogham stone which can only be signed during the celebration. There is also one that can signed at any time.