Patterns

Marketing

Full-page templates designed to convert. Use these patterns as starting points for landing pages, feature grids, pricing tables, and calls-to-action.

Hero Section

Full-width hero with badge, headline, subheading, and a primary + secondary CTA pair.

Now in beta

Design systems that ship.

Comitor gives you components, patterns, and tokens so you ship faster.

Features Grid

Three-column grid showcasing key benefits. Each card has an icon, title, and description.

Ship faster

Pre-built components accelerate development without sacrificing quality.

Stay consistent

Unified tokens across web, mobile, and beyond.

Scale easily

From MVP to enterprise. Grows with your product.

Pricing Table

Three pricing tiers with feature checklists. Highlight the recommended plan with a ring and badge.

Starter

Free

  • All components
  • Design tokens
  • Docs
Most popular

Pro

$29

  • Everything in Starter
  • Priority support
  • Team sync

Enterprise

Custom

  • Everything in Pro
  • Custom tokens
  • SLA

Call-to-Action

High-contrast banner using the brand dark background and gold type to drive final action.

Ready to ship faster?

Join teams building with clarity and shipping with confidence.

Best Practices

Do

  • Use a single primary CTA per section — one clear action wins.
  • Keep headlines short, punchy, and benefit-focused.
  • Use the badge component to create recency ("New", "Beta").
  • Highlight the recommended pricing tier with a ring.

Don't

  • Do not use more than two font sizes in a hero section.
  • Do not stack more than two CTA buttons side-by-side.
  • Do not use gradient backgrounds unless explicitly required.
  • Do not mix pricing units (e.g., monthly vs yearly) without a toggle.

Accessibility

  • Use <section> and <h1> for landmark regions and page titles.
  • Ensure all CTAs have discernible text — avoid "Click here".
  • Test color contrast at WCAG AA (4.5:1) for all text on brand backgrounds.
  • Include aria-label on icon-only interactive elements.
  • Test keyboard navigation: Tab order should follow visual reading order.