Refactoring UI

Good UI design isn't about talent or artistic ability — it's about making deliberate, systematic choices. Every visual decision (spacing, color, typography, depth) has a small set of correct answers that you can learn and apply consistently. This skill gives you those answers.

Core Philosophy

• Start with content, not chrome. Begin with the actual feature and data. Don't start with a navbar and sidebar — start with the content that matters and build outward.
• Work in cycles. Get the structure right first with plain text and basic layout. Then layer in hierarchy, typography, color, depth, and polish — in that order.
• Constrain your choices. Pre-define scales for spacing, font sizes, colors, and shadows. Choosing from a system is faster and more consistent than picking arbitrary values.
• Design every detail deliberately. If you haven't consciously decided on a value, it's probably wrong. Every pixel of spacing, every shade of grey, every font weight should be intentional.

Building New UI

When creating an interface from scratch, follow this sequence:

1. Start with the feature, not the layout. Build a single component with real content. Don't think about navigation, sidebars, or page structure yet.
2. Establish hierarchy. Decide what information is primary (large, dark, bold), secondary (smaller, medium grey), and tertiary (small, light). Not everything can be important.
3. Apply your design system. Use the scales below for spacing, typography, and color. Pick values from the system — never invent new ones mid-design.
4. Add depth and polish. Apply shadows for elevation, accent borders for flair, and finishing touches that elevate the design from functional to professional.