The Design Library

Ten screen patterns worth borrowing

From an Iconly post (10 September 2026) showing ten small app screens, each built around one idea. Written out here so they don't stay buried in Instagram. Useful as a checklist when reviewing any Coherence screen.

1. Clear empty states. When there's nothing yet, show one simple picture and one obvious next action. Their example: a "drop your video here" box with a single Upload button and a progress bar.
2. Personalised profiles. A photo, a greeting or status, and the three or four actions that matter (message, call, video), all within thumb reach.
3. The key fact at a glance. One big number first (their weather card leads with 28°), supporting details in small cards underneath.
4. Data cards with context. A number alongside its change and a simple ring or bar, so "$214,831" also says "up 14.5% this month".
5. Visualise the numbers. Turn a table into one calm line or bar chart with two headline figures above it.
6. Dark mode done properly. Depth, soft gradients and contrast, not just black with white text. Their sleep screen uses a dusk-coloured gradient.
7. Progress at a glance. Show where someone is on a journey as a picture: their flight card draws the plane partway along its route with "arriving in 1h 30 min".
8. Helpful empty space. Lots of room around the one thing that matters, like a code entry screen with nothing else competing.
9. Compact views. A balance, recent people and the latest activity on one small screen without feeling crowded.
10. Immersive visuals. Let a rich image or video fill the screen and float the controls on top of it.

How to design a chrome button

A Figma walkthrough from an Instagram post ("Chromify UI", 17 September 2026) for the soft metallic buttons that are everywhere right now. Every step and colour code is written out here so you can follow it without the post.

1. Make the outer shape. A frame 64px tall with a 1px outline and fully rounded ends.
2. Add the inner button. A rounded rectangle inside it with 4px of space all round. Centre the label (Plus Jakarta Sans, size 16, bold).
3. Shade the outline. A top-to-bottom gradient on the outline: #C9C9C9 at the top, #686A69 in the middle, #ABC9C4 at the bottom.
4. Shade the outer shape. A top-to-bottom gradient on the frame's fill: #F4F4F4, then #565656 in the middle, then #93B3AE.
5. Shade the inner button. A top-to-bottom gradient: #D5D8D8 to #818C8A.
6. Darken the label. A top-to-bottom gradient on the text for contrast: #252424 to #3C3C3C.
7. Start the glow. Copy the inner rectangle, send it to the back, and let about 30% of it show below the button.
8. Colour the glow. Give that copy a gradient from #5F837D to #ABC9C4 and set it to 50% see-through.
9. Soften it. Add a Layer Blur of 35 to the copy.

Then make it yours: swap the grey-green for another colour family (their example uses a soft pink glow), try the same recipe on round buttons, and build bigger pieces like a music player card with the same rules.

How the AI design tools fit together

From a guide shared with us (the "PIXELS Guide"), boiled down. This is the order a studio would work in, and it's how to combine the tools in sections 03 and 04 so they don't pull against each other.

1. Write a five-line brief. What Coherence is, who it's for, three words for the feeling, the one action a visitor should take, and one piece of proof.
2. Pick a look. Choose a design system from Refero Styles or getdesign.md, or capture a site you love with the DESIGN.md extractor.
3. Plan before building. UI UX Pro Max proposes the structure, colours, fonts and the mistakes to avoid. Approve or push back before anything is built.
4. Build with taste. Taste Skill builds it and checks its own work against the "generic AI look" before showing it.
5. Add motion last. Design Motion Principles adds a few purposeful movements, then audits them.
6. Review like a picky designer. Check at phone width and desktop, fix the five weakest things, run the Vercel guidelines check.

The rule that makes it work: tell Claude who wins when tools disagree. The chosen design system decides colours and fonts, UI UX Pro Max decides page structure, Taste Skill decides layout. And borrow a brand's feel, never its logo, name or words.

20 UX rules to hand the AI

From a post called "The UX Laws in My CLAUDE.md" (1 September 2026). We couldn't find where it was originally published, so the full text lives here. It's a ready-made instruction file: the builder pastes it into Claude Code's instructions and every screen gets built to these rules. It's also a good checklist for reviewing a screen yourself.

• Fewer choices per screen
• Big, easy targets
• Familiar patterns
• Group related things
• Break content into chunks
• Respond within 0.4 seconds
• One standout main button
• Key actions close by
• Essentials first
• End flows on a high
• Show progress
• Keep it simple
• Sensible defaults
• Prevent errors
• Make errors recoverable
• Consistent patterns
• Connect related elements
• Fewer steps
• Reveal complexity gradually
• Make the finish feel close