Shape Language

Every square and rectangle in the Champion AI system follows one rule: three rounded corners, one fully pointed corner. The pointed corner sits at bottom-right by default — this consistent placement creates a quiet visual rhythm across cards, banners, hero panels, and accent blocks.

Two radii in the system: 10px for everything by default, 16px for hero-scale moments (large gradient callouts, full-width photography cards, signature feature panels). The 16px isn't a license to scale further — it's a deliberate second register that still reads as part of the same family.

The same rule scales to anything that needs a box: a small badge, a square thumbnail, a horizontal banner, a vertical sidebar, a portrait card. The pointed corner stays at bottom-right.

The two registers are close enough to read as the same shape family, distinct enough that hero-scale moments don't look stiff. Below is the same block rendered at each radius for reference.

• Cards (content blocks, profile cards, feature tiles, holographic UI overlays)
• Banners (email, social, web hero strips)
• Image frames (photography crops, asset thumbnails)
• Sections of a layout where a contained surface is needed
• Badges and accent labels — at small sizes the pointed corner still reads

An accent shape built on the same logic — predominantly curved, with one pointed corner. Geometrically, it's a quarter-circle attached to the midpoints of a square: three sides curve smoothly, and the bottom-right meets at a 90° point.

In CSS: border-radius: 50% 50% 0 50%; on a square element. Rotate freely with transform: rotate() — the shape reads at any angle.

• Accent shapes in layouts — a single teardrop adds visual rhythm without competing with rectangles.
• Map pins and location markers (small filled teardrop, oriented so the point indicates the location).
• Decorative badges for special moments — verified outcomes, milestone callouts.
• Background motif in a single hero composition (oversized, low opacity) — not as repeating pattern.

One per layout. The teardrop is an accent. More than one on a page competes with itself and dilutes the rectangle's role as the dominant shape. Default to rectangles; reach for the teardrop when a single shape needs to break rhythm.

Buttons are the one shape that doesn't follow the three-rounded rule. They are fully pill-shaped — both ends fully rounded — and always shorter vertically than horizontally. Horizontal padding is consistently larger than vertical, which gives buttons a confident, settled stance instead of feeling tall or cramped.

Two variants — one for each background context. The pill shape stays constant; only the fill flips.

Small is for dense UI (inline actions, table rows). Default is the workhorse. Large is for hero CTAs. The vertical-to-horizontal ratio holds at every size.

• Don't use square or 4px-radius rectangle buttons — pills only.
• Don't equalize vertical and horizontal padding — buttons should always feel wider than tall.
• Don't use all-caps button labels except for very small UI labels under 10px.
• Don't combine label + leading icon + trailing chevron + drop shadow — pick one supporting element.
• Don't color buttons green, gray, or anything outside the sanctioned palette (Champion Blue, white, or outlined).