v3.4.2
Squircle

The superellipse container — an avatar, category icon, or text badge inside composite components. Five locked square sizes, three content types, five design-time states; never a control of its own.

3.4 -- -- 3.4.2

Overview

  • 1
    Icon
  • 2
    Text
  • 3
    Img
1
2
3

States

Squircle is non-interactive — Standard is the only rest form; the State axis is a design-time choice, five values with fixed token trios. The border token in each block is consumed only while the squircle--border modifier is present (see the Border block); interactivity belongs to the coming SquircleButton, never to this container.

Standard

1
2
  • 1
    Fill --surface-on-white — the neutral container.
  • 2
    Content --text-and-icon-primary — glyph and text, via currentColor.The text style is the size's own — see Typography under Layout.
  • Border --border-default — only with squircle--border.

Inverse

1
2
  • 1
    Fill --background-inverse-primary — a dark tile on the light theme, a light tile on the dark.
  • 2
    Content --text-and-icon-inverse-primary — the counter-phase content. Icon and Text types only — an image never inverts.

Color

1
2
  • 1
    Fill --pastel-blue1 — the staged default; any --pastel-* is allowed.
  • 2
    Content --accent-blue1 — always the matching --accent-* from the same colour group as the pastel fill. Icon and Text types only.

Disabled

1
2
  • 1
    Content --text-and-icon-disabled — the fill stays --surface-on-white; only the content dims.
  • 2
    Image desaturates and dims The Figma Img treatment: the picture carries the luminosity blend (mix-blend-mode: luminosity) and drops to opacity 0.3 — image content has no token to re-point, so this is the one sanctioned opacity use. Implementation trap: the blend works against the backdrop within the nearest stacking context — a transformed, opacity- or z-indexed ancestor isolates it and the desaturation silently disappears.
  • Visual only Squircle owns no interaction to disable — the style dims the look, nothing else changes.

Skeleton

1
  • 1
    Fill --skeleton-on-white — the loading placeholder; the content hides entirely.
  • Sweep The DS shimmer — documented under Animation.

Img across the states

Standard
Inverse
Color
Disabled
Skeleton
1
  • 1
    The picture is the surface The documented Img contract is three states — Standard, Disabled, Skeleton. The set technically carries Inverse and Color variants too, but on Img the fill never shows, so they render identically to Standard — shown here for completeness.
  • Disabled and Skeleton The two states that do read on an image: Disabled desaturates the picture through the luminosity blend and dims it to 0.3, Skeleton replaces the box entirely.
  • The placeholder The Figma Img slot ships the indrive-money-color illustration as its default — captured to illu/placeholder/indrive-money-color.png so the web demos show the same picture.

Border

1
  • 1
    Off by default The border is a hidden layer in every size set; squircle--border shows it — an inset 1dp stroke in --squircle-border (--border-default), no layout shift. Only the Custom-Squircle set defaults it ON in Figma.

Custom

1
  • 1
    Re-point the trio --squircle-fill — the Figma Custom default is --background-secondary, with the border ON.--squircle-content — the content colour.--squircle-border — the ring, consumed only with squircle--border.
  • Geometry too The bare .squircle IS the Custom geometry (the M box); box, radius and padding open to any SP token.The spec's staged example: --sp-s12 paddings · --sp-s28 radius · --sp-s2 border.

Anatomy

A fixed square with one slot that fills it and centres the content, plus a hidden border layer. The root passes its content colour to the slot via currentColor.

1
2
  • 1
    Container --sp-s48 — the M box; every size is a locked square.--sp-s16 — the M radius; overflow: hidden clips the content to it.
  • 2
    slotContainer squircle__slot — fills the box and centres whatever it hosts: an IconContainer glyph, a short text, or an object-fit: cover image.
  • Border layer An inset 1dp stroke, hidden by default — squircle--border shows it. Drawn inside the box: no layout shift.
  • Superellipse Figma draws the corners at 60% smoothing and iOS uses continuous corners; the web approximates with the plain radius — a recorded platform deviation.

Layout

Five locked squares. The container padding is --sp-s0 — the slot fills the box and the content centres; the Text part brings its own padding. Values carry the Figma spec's own coefficient notation: (max ×150%) or (max ×130%) grows with the SP mode up to that cap, and a value with no coefficient never scales.

Sizes

1
2
3
4
5
  • 1
    Mini --sp-s24 (max ×150%) — box · --sp-s8 (max ×150%) — radius · 16 glyph.Body/Compact Body — the text style; text pads --sp-s4 ver / --sp-s2 hor.
  • 2
    XS --sp-s32 (max ×150%) — box · --sp-s12 (max ×150%) — radius · 16 glyph.Body/Compact Body — the text style; text pads --sp-s4 ver / --sp-s2 hor.
  • 3
    S --sp-s40 (max ×130%) — box · --sp-s16 (max ×130%) — radius · 24 glyph.Body/Main Body — the text style; text pads --sp-s4 ver / --sp-s2 hor.
  • 4
    M --sp-s48 (max ×130%) — box · --sp-s16 (max ×130%) — radius · 24 glyph.Body/Promo Body — the text style; text pads --sp-s4 ver / --sp-s2 hor.
  • 5
    L --sp-s56 — box · --sp-s20 — radius · 24 glyph. No coefficient — L never scales.Heading/Heading 2 — the text style; text pads --sp-s4 all round (the one size with equal text padding).
  • Border The Figma spec names it s1, with no coefficient — it never scales. The web SP scale carries no s1 token yet, so the build draws 1dp inside the box (owner flag: add s1 to the scale or keep the exception).
  • Img inner box --sp-s0 — the picture's own paddings and corner radius; both open to any SP value per design.A fill may back a transparent picture — any DS colour, per design.
  • RTL The symmetric container does not mirror; directional glyphs inside mirror per the icon's own RTL variant.

Animation

Squircle itself is static — it declares no motion tokens and plays nothing of its own. Press feedback, enter/exit and every other move belong to the host (Cell, DecorateContainer) or to the coming SquircleButton.

Skeleton sweep

Live — the DS shimmer sweep; the container carries aria-busy
  • Shimmer var(--pattern-shimmer) — the DS loop: 1200 ms, linear, infinite.--skeleton-wave — the gradient band over --skeleton-on-white.
  • Reduced motion Handled at the token: motion.css zeroes --pattern-shimmer inside prefers-reduced-motion: reduce — the box stays static, with no component override.

Usage

Use it for the visual identity of a nearby thing: a driver avatar or category image in a Cell start slot, an info icon on cards and lists, initials as a text badge, the host tile of a DecorateContainer composition.

  • 1
    A container, never a control Nothing on a Squircle is tappable — the host (a Cell, a card) owns the interaction. The tappable form is the coming [SquircleButton] 3.0; until it ships, a prototype wraps the container in its own <button>.
  • 2
    One thing inside One glyph, one short string, or one picture — a count is an Indicator, a text label in the content flow is a Tag.
  • 3
    No near-preset customs The spec prohibits a Custom-Squircle whose visuals deviate only slightly from a preset (a touch more radius, a touch more padding) — take the ready preset instead.
Delivery
✓ A category image beside the row it illustrates — the host owns the tap
Confirm order
✕ A tappable control dressed as a container — that is SquircleButton's job

Accessibility

Meaning-bearing: role="img" aria-label="Delivery category"
Delivery · 20 min Redundant with the host: aria-hidden — the row speaks
1
2
  • 1
    An Image When It Means Something An avatar or category icon takes role="img" + aria-label with the meaning ("Delivery category", never "Grey square with a box"); the inner glyph is aria-hidden="true" and an <img> carries an empty alt — the root's label is the one name.
  • 2
    Invisible When Redundant Inside a labelled host (a Cell, a named row) the container is aria-hidden="true" — the host speaks. A text Squircle whose string is the meaning reads as plain text, no role at all.
  • Disabled Stays Silent No aria-disabled: disabled is a visual style on a non-interactive container — announcing it would promise something to enable. TalkBack and VoiceOver read nothing new, so the luminosity + 0.3 dim is the only signal the state differs — keep the blend alive in the real host (the stacking-context trap under States).
  • Skeleton Is Hidden aria-hidden="true" on the box; the loading container, not the Squircle, carries aria-busy="true".
  • Color Fill Is Decorative In Day --accent-blue1 on --pastel-blue1 measures ≈ 2.5:1 in the Day theme (Night ≈ 6.9:1) — under the 3:1 non-text floor, so a meaning-bearing icon does not rely on the Color fill in Day: keep Color decorative, or the label and the host carry the meaning.
  • Never Focusable No tabindex, no touch target — a prototype's ad-hoc tappable Squircle is a real <button> around the container, named for the action, padded to the 44×44 floor at the small sizes.