IHNYC RC Landing Design & QA

Design tokens, accessibility/QA notes, and required public assets.

Design tokens

Colors

• Primary: #2B67F6
• Ink: #0C1724
• Muted: #475569
• Card: #F7F9FC
• Border: #E6EEF9
• White: #FFFFFF
• Focus: #2B67F6 with 3px outline offset

Typography

• Font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
• Scale:
  • H1: 32px / 48px
  • H2: 24px / 36px
  • Body Large: 18px / 27px
  • Body: 16px / 24px
  • Small: 14px / 21px

Spacing

• Base unit: 8px
• Card padding: 24px (mobile), 32px (desktop)
• Section spacing: 48px (mobile), 64px (desktop)
• Grid gap: 24px (mobile), 32px (desktop)

Layout breakpoints

• Mobile: < 768px
• Tablet: 768px - 1023px
• Desktop: >= 1024px

Accessibility and QA checklist (summary)

• Semantic HTML landmarks and heading hierarchy
• ARIA labels on navigation and key UI elements
• Keyboard navigation and focus-visible outlines
• WCAG AA contrast for text and controls
• prefers-reduced-motion support
• Descriptive link text (no “click here”)

SEO checklist (summary)

• <title> and meta description set
• Open Graph image present
• Keywords and structured metadata where needed

Required public assets

favicon.ico

• Size: 32x32 (or 16x16) ICO
• Purpose: browser tab icon

og-image.jpg

• Size: 1200x630
• Purpose: social media preview image
• Use brand colors and “IHNYC Resident Council” text

Related

• ihnyc-rc-landing