## 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/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106478-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106444891-full.webp
- Component on Kage: https://kage.design/component/typewise-nova-card-2

## Before you start
Ask me what my product does, who the cards are for, and what brand personality, colors, and typography it uses. Then apply the principles below to create an original version for my product—not a copy of the reference.

## Design goal
Build a dark, two-column comparison section that helps visitors quickly understand which audience or service tier is right for them. The cards should feel calm, premium, and highly scannable, with the action link anchored after the benefit list.

## Layout and alignment
- Place the section on a near-black page background, using a centered responsive container with a maximum width of approximately 1200–1280px.
- Use two equal-width cards in a horizontal grid with a 20–24px gap on desktop.
- Stack the cards vertically below approximately 760px, preserving consistent internal padding.
- Give each card generous padding, roughly 32–36px on desktop and 24px on mobile.
- Use a vertical flex layout so the eyebrow, title, benefits, and action maintain a predictable rhythm; keep the action near the bottom when card heights differ.
- Align all text and checkmarks to a clear left edge. Use a small check icon column followed by the benefit copy.

## Typography hierarchy
- Use a modern sans-serif with a clean, slightly humanist feel; use the product’s own font if available.
- Eyebrow: uppercase or small caps, 11–13px, medium weight, increased letter spacing around 0.16em.
- Card title: 24–27px, semibold, tight line-height around 1.15.
- Benefit text: 15–16px, regular weight, line-height around 1.5–1.6.
- Action link: 16px, semibold, with a right-pointing arrow; keep it visually prominent but not button-heavy.
- Maintain clear hierarchy through size, weight, and muted color rather than excessive decoration.

## Color and surface
- Page background: approximately #07070B or another deep charcoal-black.
- Card surface: subtly lighter black/navy, approximately #0D0D16 to #11111C.
- Primary text: soft white around #F3F3F7.
- Secondary text: cool gray around #B7B8C5.
- Eyebrow: muted periwinkle/blue around #AAB9F5.
- Use a distinct accent color for each audience only if it supports the product’s brand; for example, mint #46D7A0 for one card and periwinkle #91A8FF for the other.
- Action links should use a vivid but accessible blue, approximately #4F8DF7.

## Borders, radius, and depth
- Add a 1px low-contrast border around each card, approximately rgba(160,170,210,0.18).
- Use a 16–20px corner radius with no heavy shadow; the dark surface and fine border should provide the separation.
- Avoid gradients, glassmorphism, and strong elevation unless they are part of the user’s existing brand system.

## Benefit list and interaction
- Each benefit row begins with a compact checkmark, around 16px, colored with that card’s accent.
- Keep rows separated by approximately 12–14px of vertical spacing.
- Use short, outcome-focused copy with a maximum comfortable line length; allow wrapping on small screens without disrupting the checkmark alignment.
- Place the action link below the list with roughly 26–34px of top spacing.
- On hover, subtly brighten the card border and shift the action arrow a few pixels to the right. Keep transitions around 180–220ms and respect reduced-motion preferences.
- Make the entire action link keyboard accessible with a visible focus ring using the brand accent.

## Responsive and accessibility requirements
- Preserve a minimum 44px interaction area around the action link.
- Ensure text and links meet WCAG AA contrast requirements against the dark surfaces.
- Use semantic headings, lists, and links; do not encode checkmarks as inaccessible text decoration.
- Test long titles and translated benefit copy so cards do not clip or overlap.

## Never
- Never use logos, product names, exact copy, illustrations, or imagery from the reference.
- Never reproduce the reference card’s wording, branding, or visual assets.
- Never make the cards dependent on an image to communicate their meaning.
- Never use low-contrast gray text, decorative clutter, or arbitrary uneven card dimensions.