Landing-page design rules

Design intent

• Three adjectives:
• Reference sites and the specific quality borrowed from each:
• Qualities to avoid:

Brand tokens

• Display typeface:
• Body typeface:
• Fallbacks:
• Corner/radius rule:
• Shadow rule:
• Spacing rhythm:

Page system

• Maximum content width:
• Header behavior:
• Hero hierarchy:
• Section rhythm:
• Card rule:
• Footer contents:
• Image treatment:

Responsive rules

Describe the intended result, not a device brand.

• Narrow viewport:
• Medium viewport:
• Wide viewport:
• Long headings:
• Navigation overflow:
• Image cropping:

Interaction and accessibility

• Visible keyboard focus:
• Reduced-motion behavior:
• Link and button distinction:
• Minimum useful target size:
• Heading order:
• Form labels and errors:
• Alt-text rule:
• Color-contrast result:

Approval

• ☐ The rules follow real source material rather than invented brand details.
• ☐ The mobile hierarchy is explicit.
• ☐ Accessibility is a design input, not a final patch.
• ☐ The owner approves this direction before implementation.