Examples
Thoughtful
The Thoughtful example: seven App Store screenshots and an icon with a warm Tailwind v4 theme, glow orbs, decorative flourishes and an SVG icon wrapped in HTML.
Thoughtful helps you keep in touch with people. Its assets show a soft, warm brand applied consistently across a set.
| Collection | Source size | Templates | Locales | Exports |
|---|---|---|---|---|
App Icon icon | 1024×1024 | 1 | - | 1024px (1024×1024), 512px (512×512) |
App Store Screenshots screenshots | 440×956 | 7 | - | iPhone 6.9" (1320×2868), iPhone 6.7" (1290×2796), iPhone 6.5" (1284×2778), iPhone 6.1" (1179×2556) |
Source: examples/thoughtful on GitHub.
Techniques
- A brand system in the theme.
src/styles.cssdefines the palette and utilities (bg-tf-gradient,bg-tf-coral,glow-orb), so templates stay short. - Decorative flourishes. Small hearts, dots and sparkles are positioned absolutely with low opacity and a slight rotation, giving texture without competing with the headline.
- Per-template styles. A template can add a small
<style>block for one-off components (the contact card in02-send.html) on top of the shared theme. - An SVG icon in an HTML wrapper.
assets/icon/icon.htmlis a 1024x1024 page that showspublic/icon.svg. The SVG stays the single source, and the icon collection renders it at 1024 and 512. - English only. No
localizationskey: a simpler setup when you are not localizing yet.
Run it
cd examples/thoughtful
npm install
npm run dev
npm run renderWhat to copy
- The HTML wrapper around an SVG icon, so the icon renders through the same pipeline as everything else.
- The flourish pattern for adding texture to a plain gradient background.
Last updated on
Only Recipes
The Only Recipes example: eight iOS and eight Android screenshots built with CDN Tailwind, oversized headlines, highlighted keywords and real app captures.
Cat IQ Test
The Cat IQ Test example: App Store screenshots, a Product Hunt gallery at 1x and 2x, an app icon and an SVG logo exported with copy-source, all in one project.