Netflix
$6.99 monthly, auto-renew on
Style guide
How Traqeet looks, moves and sounds. Built from the real design tokens, so it never drifts. Download logos and files from the brand kit.
Colours
Brand and status colours come from colors.json. Theme tokens below are read live from the page’s CSS, so switch the theme (top right) to see light and dark values.
Brand
Status
Green, amber and red mean healthy, soon and overdue. Never use them for decoration. Indigo is for brand and primary actions.
Theme tokens (live)
Gradients
Glass surfaces
Translucent fill, a 1px border, a soft shadow and, on small floating surfaces, a background blur. A solid fill is used when backdrop-filter is unsupported. Text on glass must meet WCAG AA (4.5:1).
Glass card
Netflix renews in 3 days.
Typography
Plus Jakarta Sans for headings, Inter for body.
Display, clamp(2.5rem, 7vw, 4.6rem), 800Never lose a service to a missed renewal.
Heading 2, clamp(1.9rem, 4.6vw, 3rem), 800Never lose a service to a missed renewal.
Heading 3, 1.4rem, 700Never lose a service to a missed renewal.
Lead, 1.2rem, 400Never lose a service to a missed renewal.
Body, 1rem, 400Never lose a service to a missed renewal.
Small, 0.85rem, 500Never lose a service to a missed renewal.
Spacing and radius
Spacing
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8Radius
--radius-md--radius-lg--radius-xlCards
Hosting
$12.00 monthly
Car insurance
$90.00 yearly
Form fields
Please enter a valid email address.
Toasts
Netflix renews in 3 days
Marked as renewed
Empty states
Nothing renewing soon
Add your first service and we will warn you before it renews.
Motion
- Purposeful and calm: 180 to 320 ms for most changes, springs for touch.
- Move things in from where they come from; fade, do not flash.
- Always respect reduced motion: replace movement with an instant or fade-only change.
- Nothing essential should depend on animation.
Press the buttons to replay.
Durations: 180, 240 and 320 ms (ease-out)
180 ms240 ms320 msSprings for touch (stiffness 420, damping 34)
Iconography
- 24px grid, 2px rounded stroke, drawn in
currentColor. - Pair icons with text. If an icon stands alone, give it an accessible name.
- Do not redraw or recolour the logo mark; use the files in the brand kit.
- Service logos identify a service only, always have an initials fallback, and are never altered.
Voice and tone
Warm, plain and calm. Talk like a helpful friend who is good with dates. No jargon, no scare tactics.
Netflix renews in 3 days
Say what happens and when
Cancel before you are charged
Use short verbs and everyday words
URGENT: payment obligation imminent!
Do not shout or pressure
Subscription lifecycle event triggered
Do not use jargon
Accessibility rules
- Text contrast of at least 4.5:1 (3:1 for large text and UI parts) in both themes, including on glass.
- Interactive targets at least 44 by 44px, or 24px with enough space around them.
- A visible focus ring on everything you can reach with a keyboard, and a logical tab order.
- Never use colour alone to carry meaning; add a word or icon.
- Respect
prefers-reduced-motionand never autoplay motion that cannot be paused. - Use real headings, landmarks, labels and descriptive link text.