# Design & Development Alignment

Nowadays, TailwindCSS has become an industry standard. Thousands of projects have been built with it and over the years a solid foundation has formed around configurations such as colors, spacings, breakpoints.

Instead of re-inventing the wheel and doing usability and accessability testing on these things (color contrast for example), we can get that knowledge and work for free by adhering to these default configurations.

### Here's how Optimism work with their designs

They use Shadcn UI as lego bricks to build their designs. They have made minor changes to the colors (for example the Optimism red).

The designs show exactly what the component is. There are insightful comments and questions about thought processes.


What makes this really powerful is that they just pull these primitives into Figma and compose them into larger components.

Something that would make it even better is if design and dev collaborate on the tailwind configuration file. That's what defines the colors, fonts, etc.

### What about our unique design language?

Sure, but that's not the first place to start. These details are better added later when a good foundation is set.

Start with the broad strokes, the outlines, the shapes.

### What does this looks like for Allo Starter Kit?

The goal with the starter kit is to enable developers to quickly build their own capital allocation platform.

Today's allocation platform share a lot of the components:
- **Disover Rounds** - usually a grid where users can explore the rounds usually by some filters (latest 24, filtered by strategy, for a specific project)

- **Round Details** - see details about the round. Often contains a banner/hero image, title, markdown description, grid or list of projects

- **Discover Projects** - similar to discover rounds but for projects

- **Project Details** - similar to project details and might contain the discover rounds component to see previous/upcoming rounds

- **Ballot / Checkout** - See projects (or metrics) in a list with the ability to edit the allocation for each of them. Optimism is exploring this space a lot currently in how to make is simple and fun to edit.

- **Connect Wallet** - this is something that's just tedious for devs to wire together, even with RainbowKit and Wagmi

##### New in Optimism Round 4
- Discover Metrics
- Metrics Details

How do we envision these components to look like? There are many components not listed here such as creating rounds, projects, applications, and distributing tokens.

### Resources
Shadcn Figma - https://www.figma.com/community/file/1203061493325953101/shadcn-ui-design-system

React Components - https://ui.shadcn.com

Tailwind color configuration - https://tailwindcss.com/docs/customizing-colors