Jeton

Jeton's design system radiates a vibrant, energetic feel with a strong focus on a single, dominant red accent color. Typography is precise and impactful, preferring tightly tracked, strong headlines. Surfaces are primarily clean white, contrasted by gradients that inject warmth and dynamism. Components feature generous border-radii, often creating pill shapes, and subtle shadows or gradient overlays are used sparingly for depth and interaction feedback. Always use Sequel Sans for all text elements, prioritizing weights 400, 450, and 500 for clarity. Apply Jeton Red (#f73b20) as the primary accent, particularly for interactive elements, outlined actions, and key branding. Ensure all primary call-to-action buttons are ghost buttons with Jeton Red text and borders, following the Outline Primary Button component specification. Use 16px for card, button, and input border-radii, embracing the rounded aesthetic. Implement the Sunrise Gradient linear-gradient(rgba(122, 39, 57, 0) 15%, rgb(247, 59, 32) 69%) for hero sections and prominent visual backgrounds. Maintain a default letter-spacing of 0.0100em or 0.0300em, specially for headlines, to achieve a compact and impactful typographic appearance. Utilize Canvas White (#ffffff) for all main page backgrounds and component surfaces to provide a clean, expansive canvas. Do not introduce new color hues; strictly adhere to the defined brand, accent, and semantic palette. Avoid solid background fills for primary calls to action; always prefer the outlined Jeton Red style. Do not deviate from the established border-radii; avoid sharp corners or excessively small radii. Never use generic system fonts; always utilize Sequel Sans or its approved substitutes. Do not use heavy, opaque shadows unless specifically for card elevation (rgba(0, 0, 0, 0.05) 0px -4px 16px 0px). Avoid overly loose letter-spacing; maintain a tight, controlled textual presentation especially for headings. Do not overuse accent colors, ensure they serve a functional or brand-defining purpose.