Style Guide / UI Acceptance
Single page to verify: layout width, typography, buttons, inquiry modal form, tables, cards, and new-tab links.
1) Buttons
All buttons must be: 5px radius, 1px border, brand blue background (#0B70D6), and hover invert (white bg + blue text).
2) Typography
Bold, italic, normal paragraph. Link example:
Open homepage in new tab.
Heading Level 3
This paragraph checks line-height, spacing, and readability. Industrial sites should look clean, structured, and not too “bloggy”.
Heading Level 4
- Bullet item one
- Bullet item two with a link
- Bullet item three
This blockquote checks the left border, background, and readable spacing.
3) Grid + Cards
Cards are used for products, solutions, documents. Grid must respond: 3 columns desktop → 2 tablet → 1 mobile.
4) Specs Table
Table style check for industrial specifications.
| Item | Value | Notes |
|---|---|---|
| CAS | 21324-40-3 | Example only |
| Purity | ≥ 99.9% | Example only |
| Packaging | 25kg drum | Example only |
5) Inquiry Modal Form Test
Validation rules:
- Name required
- Email required
- Message required
- Phone optional
- Submission includes Source URL + Source IP
Final Checklist
- Content width looks good even with no sidebar (not full-screen stretched) ✅
- Headings sizes + spacing are balanced ✅
- Buttons: 5px radius, 1px border, hover invert ✅
- Inquiry modal opens/closes (backdrop / X / ESC) ✅
- Form submission redirects to /thanks/ ✅
- External buttons open new tab ✅