elayadesign/ai-design-skills

Before Not checked yet → After Instructions only

First observation → 456d9e0d3e2d

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

ded7efc9d5c0 → 456d9e0d3e2d

- 194 ### Button type
- 195 
- 196 - Main buttons: `text-base` (16px), semibold.
- 197 - Smaller header buttons: `text-sm` (14px), semibold.
+ 194 ### Text styles
+ 195 
+ 196 Every piece of text uses one of these named styles. Never style text with a loose size and weight. Use the names exactly as written, including capitalization.
+ 197 
+ 198 | Style | Scale step | Size / line height | Weight |
+ 199 |---|---|---|---|
+ 200 | Heading 1 | `text-6xl` | 60 / 60 | Semibold |
+ 201 | Heading 2 | `text-5xl` | 48 / 48 | Semibold |
+ 202 | Heading 3 | `text-4xl` | 36 / 40 | Semibold |
+ 203 | Heading 4 | `text-3xl` | 30 / 36 | Semibold |
+ 204 | Heading 5 | `text-2xl` | 24 / 32 | Semibold |
+ 205 | Heading 6 | `text-xl` | 20 / 28 | Semibold |
+ 206 | Title 1 | `text-xl` | 20 / 28 | Medium |
+ 207 | Title 2 | `text-lg` | 18 / 28 | Medium |
+ 208 | Title 3 | `text-base` | 16 / 24 | Medium |
+ 209 | Title 4 | `text-sm` | 14 / 20 | Medium |
+ 210 | Title 5 | `text-xs` | 12 / 16 | Medium |
+ 211 | Body 1 | `text-base` | 16 / 24 | Semibold |
+ 212 | Body 2 | `text-base` | 16 / 24 | Medium |
+ 213 | Body 3 | `text-base` | 16 / 24 | Regular |
+ 214 | Body 4 | `text-sm` | 14 / 20 | Semibold |
+ 215 | Body 5 | `text-sm` | 14 / 20 | Medium |
+ 216 | Body 6 | `text-sm` | 14 / 20 | Regular |
+ 217 | Button-lg | `text-lg` | 18 / 28 | Semibold |
+ 218 | Button-md | `text-base` | 16 / 24 | Semibold |
+ 219 | Button-sm | `text-sm` | 14 / 20 | Semibold |
+ 220 | Button-Xsm | `text-xs` | 12 / 16 | Semibold |
+ 221 | Caption 1 | `text-sm` | 14 / 20 | Medium |
+ 222 | Caption 2 | `text-sm` | 14 / 20 | Regular |
+ 223 | Caption 3 | `text-xs` | 12 / 16 | Semibold |
+ 224 | Caption 4 | `text-xs` | 12 / 16 | Medium |
+ 225 | Caption 5 | `text-xs` | 12 / 16 | Regular |
+ 226 
+ 227 How the groups work:
+ 228 
+ 229 - **Heading** for page and section headings, largest to smallest. Heading 1 is the hero.
+ 230 - **Title** for card titles, list item titles, labels that lead a block, and nav items.
+ 231 - **Body** for running text. Within each size, 1 is the strongest weight and the last is regular.
+ 232 - **Button** for text inside buttons only. Main buttons use Button-md, small header buttons use Button-sm.
+ 233 - **Caption** for metadata, helper text, badges, timestamps, and fine print.
+ 234 
+ 235 The sizes come from the type scale above, so a style never introduces an off scale value. If a project needs a new style, add the next number in its group (for example Body 7) built from a scale step, rather than inventing a new name.
+ 236 
+ 237 In code, define each style once as a reusable class or token with the same name in kebab case (`heading-1`, `body-4`, `button-md`, `caption-2`) and apply that, instead of repeating size and weight utilities on every element.
- 302 - **Numbers.** Avoid suspiciously round figures. Pricing should look like real pricing, metrics should carry a decimal or an odd final digit, and dates across a list should vary.
+ 342 - **Never invent facts.** On a real product's page, prices, guarantees, statistics, customer counts, testimonials, and logos must come from the user or a real source. When a fact is missing, use a clearly marked placeholder such as `{{price}}` or `{{testimonial}}` instead of making one up.
+ 343 - **Sample numbers.** In fictional demos and prototypes (where the invented names and brands above are fine), avoid suspiciously round figures. Pricing should look like real pricing, metrics should carry a decimal or an odd final digit, and dates across a list should vary.
+ 375 - A check at 390px wide: no horizontal overflow, buttons keep their text inside, and the primary action is visible in the first screen
- 344 - Size `text-4xl` to `text-6xl` depending on line count, following the B1 type scale.
+ 386 - Use Heading 3 to Heading 1 from the B1 text styles, depending on line count.
+ 394 - Under `prefers-reduced-motion`, show the final text at full color right away, with no word by word animation.
+ 428 - [ ] Every text element uses a named text style (Heading, Title, Body, Button, Caption)
+ 436 - [ ] No invented prices, stats, or testimonials; missing facts use marked placeholders
+ 437 - [ ] Checked at 390px with no overflow
+ 448 
+ 449 The no invented facts rule and reduced motion support for the tagline reveal were suggested by [@allen-baler](https://github.com/allen-baler) in [#1](https://github.com/elayadesign/ai-design-skills/pull/1).

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → ded7efc9d5c0

No earlier version was observed for comparison.

Compare on GitHub