## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/speechmark/77b904ee-7a59-4d24-b7d4-3e274188b21e-1789106592-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/speechmark/77b904ee-7a59-4d24-b7d4-3e274188b21e-1789106544280-full.webp
- Component on Kage: https://kage.design/component/speechmark-table

## Before you start
Ask me what my product does, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create an original comparison table for my product—not a copy of the reference.

## Goal
Build a comparison section that explains why the product is a stronger alternative to established options. It should feel editorial, calm, private, and evidence-led rather than aggressive or sales-heavy. Use realistic placeholder feature names and competitor labels until I provide final content.

## Design language

### Layout and alignment
- Place the section inside a very light tinted background with a centered content container, approximately 660–900px wide depending on the viewport.
- Use a small eyebrow label above a large, left-aligned statement headline. The eyebrow can begin with a short horizontal rule followed by uppercase tracking.
- Keep the table aligned to the same left and right edges as the headline.
- Structure the table as one wide feature-label column followed by two or three narrow comparison columns.
- Align feature names to the left and comparison headings and status marks to the center of their columns.
- Put the preferred product in the final column and give that entire column a subtle tinted emphasis, especially behind positive status cells.
- Add a short explanatory note below the table, followed by one line of related comparison links or supporting resources.
- On small screens, preserve readability: allow horizontal scrolling, reduce column widths carefully, or convert each row into a stacked comparison pattern. Do not let text become microscopic.

### Typography hierarchy
- Use a distinctive serif or humanist display face for the main headline and feature labels if that fits the brand; otherwise use the product’s established type system.
- Make the headline large and compact, around 42–60px desktop with a 0.95–1.05 line-height, and scale it down responsively.
- Set the eyebrow in a small uppercase sans-serif style with generous letter spacing and a muted brand colour.
- Use medium-sized serif or expressive text for feature names, approximately 15–18px.
- Use compact sans-serif text for column headings, notes, and links, approximately 12–15px.
- Establish a clear hierarchy through size, weight, colour, and spacing—not excessive decoration.

### Colour
- Use a soft blue-grey or warm neutral section background, approximately `#F1F7FC` or an equivalent colour derived from the product brand.
- Use a deep navy or charcoal for primary text, approximately `#18365B`.
- Use a muted slate for secondary text, approximately `#718092`.
- Use a medium blue accent for rules, links, and positive marks, approximately `#347AB5`.
- Highlight the preferred column with a barely-there blue tint, approximately `#E4F0FB`; keep the contrast subtle and accessible.
- Do not rely on colour alone to communicate status: use clear checkmarks, dashes, or accessible text labels as appropriate.

### Borders, radius, and surfaces
- Separate table rows with 1px low-contrast horizontal rules, approximately `rgba(24,54,91,0.14)`.
- Avoid heavy outer borders and avoid a boxed card aesthetic unless the product brand requires it.
- Give positive status cells a soft filled pill or rounded rectangle with a small radius, approximately 6–8px, and enough horizontal padding to create a quiet highlight.
- Keep the rest of the table mostly flat and open so the preferred column is the only visual emphasis.

### Interaction and accessibility
- Make comparison links visibly underlined or otherwise clearly identifiable, with a stronger accent on hover and keyboard focus.
- Add hover and focus states to rows without causing layout shifts; a very subtle background change is sufficient.
- Use semantic table markup where the content is genuinely tabular, including a caption or accessible label and proper row/column headers.
- Ensure keyboard focus is visible and colour contrast meets WCAG AA.
- If the table scrolls horizontally on mobile, provide an unobtrusive scroll affordance and keep the feature-label column visible when practical.
- Use meaningful accessible labels for checkmarks and unavailable states instead of exposing ambiguous symbols to screen readers.

## Content guidance
- Write a concise, opinionated headline that frames the product as a thoughtful alternative.
- Compare a small set of meaningful capabilities—roughly five to seven rows. Prefer specific user benefits over generic feature jargon.
- Keep competitor labels short and neutral.
- Add a factual caveat below the table when competitor capabilities may vary by plan or configuration.
- Include a few relevant text links beneath the note, but avoid turning the section into a dense SEO block.

## Never
- Never use the reference’s logo, product names, competitor names, exact copy, or exact comparison claims.
- Never reuse the reference’s illustrations, imagery, icons, or decorative shapes.
- Never reproduce the exact row labels, link labels, typography, spacing measurements, or colour palette; adapt the system to my product and brand.
- Never make unsupported claims about competitors or imply that a checkmark is proof without defining what it means.
- Never create a dense spreadsheet, a conventional pricing table, or a visually noisy card grid when a calm editorial matrix will communicate better.