Tile primitives

TileButton · sizes

Default 36px / 204px wide for full-row CTAs. Pill 26px for compact chips.

TileCheckbox · checked / unchecked

22×22 bordered square. Check glyph when checked.

TileRoundedIcon

42px cream-200 circle, icon slot. For accent indicators.

TileToggle · off / on

42×20 sliding pill. Visual state via on prop.

TileToggleIcons

Segmented icon toggle. Active segment via active prop.

TileAiOrb

72×72 brand-gradient orb. Journey's AI accent moment. Icon slot for the glyph.

TileDropdownArrow · closed / open

24×24 cream-200 circle with chevron. Open prop rotates 180deg.

TileCheckCircle · active / inactive

22×22 circle. Active = dark fill + white check. Inactive = empty white circle.

TileLogoBox · default

Colored square with logo slot. Accepts any hex; logo content sits at intrinsic size (42×42 with a 24px glyph). Matches Figma reference 22:178 — logomark-01 on blue.

TileLogoBox · small

Locked 36×36 with centered glyph. For tighter inline compositions like the credit-card entity tile.

TileCard · default surface

240×240 white card with md padding and the hairline border-default per the Card visibility rule. Surface variants: default (bg-card) / soft (bg-section-alt #F5F3F1) / inverse (ink-900).

TileCard · soft surface

Warm beige variant, borderless. The warmth layer between the white page and inner white cards. Pops on the page by hue, not by border.

TileCard · inverse surface

Dark variant, white text, borderless. For credit-card style or stat callouts.

TileInnerBox

Nested cream-100 cell inside a TileCard. Groups related content with a contrasting fill.

TileTitleCaption

Title (19px) + caption stacked vertically. Caption defaults to 14px (text-small); pass captionSize="title" to render at 19px (matches Planar tile references).

TileLabelValue

Distributed label/value row, body-small size.

TileAvatar · sizes

Square portrait, rounded-sm. Sizes sm 36 / md 42 / lg 60. Falls back to cream-200 placeholder when no src.

Entity 01 · Prospect Inc.

Auto-height row. TileLogoBox on the left (Prospect Inc. brand blue via the atom's color prop, white logomark inside); eyebrow ("New company") above the primary name on the right.

New company Prospect Inc.

Entity 02 · Jane / Manager

Auto-height row. TileAvatar on the left, name left-aligned, role right-aligned in muted text.

Jane Manager

Entity 03 · codebase_final

File row. Phosphor Paperclip on the left, filename left-aligned (truncating), filetype right-aligned in muted text.

Entity 04 · Message

Message row. TileAvatar at top-left; multi-line message body wraps across the remaining width.

Hey Jane, thanks for reaching out, I can definitely help.

Entity 05 · Payment · Signee

Single square tile, content distributed top-to-bottom via justify-between. Top: 3-line stat stack (small label, h4 value, secondary caption). Bottom: signee row (avatar + name on the left, role right-aligned).

Payment $37,000 Prospect Inc.

Jacob V.

Signee

Entity 06 · Invoice

Square tile. TileTitleCaption at top (Invoice / from Prospect Inc., caption matches title size). Bottom group: amount and CTA stacked together (12px gap), both pinned to the tile's bottom edge.

Entity 07 · New Supplier · Capstone

Square tile. TileTitleCaption at top (New Supplier / ID: TC938); inner section-alt pod at bottom containing Capstone branding (rust TileLogoBox, brand name and category). Inner pod is borderless; the outer white card carries the hairline border.

New Supplier

ID: TC938

Capstone Materials

Entity 08 · Capstone · Material supplier

Inverse of Entity 07: TileLogoBox (Capstone rust) at the top, TileTitleCaption (Capstone / Material supplier, caption matches title size) pinned to the bottom.

Capstone

Material supplier

Entity 09 · Cassy Price

Avatar at top (TileAvatar lg, 60×60). TileTitleCaption (Cassy Price / Cleveland, OH, caption matches title size) pinned to the bottom.

Cassy Price

Cleveland, OH

Entity 10 · Candidate found · Cassy

Same nesting pattern as Entity 07. TileTitleCaption at top (Candidate found / Accounts, caption matches title size); inner section-alt pod at bottom contains TileAvatar md (42×42) + name + city at 14px. Inner pod is borderless.

Candidate found

Accounts

Cassy Price Cleveland, OH

Entity 11 · Attachment

TileTitleCaption at top (Attachment / codebase_final.zip, caption matches title size); large Phosphor Paperclip (size 72, regular weight, primary color) pinned to the bottom-left.

Entity 12 · Attachments

TileTitleCaption at top (Attachments / 2 found, caption matches title size). Bottom: vertical stack (12px gap) of two file rows. Each row has a 24px Phosphor icon (Image, FileZip) at half opacity, filename left-aligned, filetype muted right.

Entity 13 · Message · Cassy

Bigger cousin of Entity 04: multi-line message at title size pinned to the top, signee row (avatar + name on the left, role muted right) pinned to the bottom.

Hey Jane, thanks for reaching out, I can definitely help.

Cassy

Support

Entity 14 · Debit card

First inverse Entity tile. Rectangular auto-height (240 wide × ~158 tall in Figma), reads like an actual card. Padding sm (12px); three sections stacked with 16px gaps. Top: small blue TileLogoBox left, "Debit" muted right. Middle: masked card number. Bottom: Valid/Use label-value columns (24px gap), labels at half opacity. Same credit-card composition Metric 12 stacks with a Balance row.

Debit

•••• •••• •••• 6738

Valid 10/29

Use Primary

Entity 15 · AI summary

Centered vertical stack. TileAiOrb (Journey brand gradient, Sparkle glyph at 32) on top, greeting at title size centered below. Journey substitutes its brand gradient for Planar's motif-05 bitmap on AI surfaces.

Event 01 · Jane shared a file

Compact row. TileAvatar on the left, single primary label on the right. No secondary value.

Jane shared a file

Event 02 · Kick-off call

The leanest event tile. Label left, time muted right. No icon, no avatar.

Event 03 · Payment due

Alert row. Phosphor WarningCircle on the left + label, due-in counter muted on the right.

Event 04 · LAX to SF

Flight leg. Phosphor AirplaneTilt + origin code + small arrow (12px, 50% opacity) + destination code, all left-aligned; departure time muted right.

Event 05 · Calendar

Square tile. "Calendar" title pinned to the top; section-alt pod at the bottom holding a 3-line stack (eyebrow date / title-size day / muted event name).

Event 06 · Upcoming · Kick-off call

Square tile. "Upcoming" title pinned to the top; section-alt pod at the bottom holding a time+title sub-stack and an avatar+name row.

Upcoming

9:45am

Kick-off call

Cassy B.

Event 07 · Shipped

Square tile. TileTitleCaption "Shipped" / "Arrives Wednesday" (caption matches title size) at top; Phosphor Path icon + city at body size pinned to the bottom.

Event 08 · Restock confirmed

Square tile. "Restock confirmed" title pinned to top. Bottom: section-alt pod (Capstone rust logo chip + brand name + reference ID muted), then two label-value rows (Time/9:30am, Location/Bay 2) with labels primary and values muted right.

Restock confirmed

Capstone #TI-298372

Time 9:30am

Location Bay 2

Event 09 · Capstone supplier

Square tile, no outer title. Top: Capstone TileLogoBox + 2-line text stack at body size (Capstone primary, Material supplier muted). Bottom: three label-value rows (Status, Time, Location), labels primary and values muted right.

Capstone Material supplier

Status Booked

Time 9:30am

Location Bay 2

Event 10 · Email scheduled

Square tile. "Email scheduled" title at top. Bottom: two stacked bento pods (4px gap), each section-alt pod containing a muted label above a primary value.

Event 11 · Reminder set

Centered success moment. TileRoundedIcon with a Planar-faithful lime via the atom's new color prop (same documented hex-escape pattern as TileLogoBox) holding a Phosphor Check (bold weight); TileTitleCaption center-aligned with title and matching-size caption below.

Event 12 · File analysed

Square tile. TileTitleCaption (File analysed / Found 37 insights, caption matches title size) at top. Bottom: section-alt pod with a horizontal-apart row — paperclip (50% opacity) + filename left, filetype muted right.

Control 01 · Plan meeting

Compact row. Label left, TileCheckbox (checked, check glyph inside) right.

Control 02 · Auto-reply

Compact row. Label left, TileToggle (off, nub on the left) right.

Control 03 · Mode

Compact row. Label left, TileToggleIcons (Sun active left, Moon dimmed right).

Control 04 · Attachment

Compact row. 2-line label stack ("Attachment" muted above "proposal_final.pdf" primary) left; TileRoundedIcon holding a Phosphor PaperPlaneTilt right.

Control 05 · Frequency

Compact row. 2-line label stack ("Frequency" muted above "Daily" primary) left; TileDropdownArrow (24px cream circle, caret) right.

Control 06 · Day / Week / Month

3-cell segmented control. Renders via the TileSegmented atom in padding="strip" mode (py-1.5 only, strip bleeds to tile edges).

Control 07 · Manual / Auto

2-cell segmented. Same TileSegmented atom, padding="all" mode (p-1.5 around the cells).

Control 08 · Cassy · checkbox

Compact row. TileAvatar md (42×42) + 2-line stack (Cassy primary / Finance muted, both 16px) left; TileCheckbox checked right.

Cassy Finance

Control 09 · Cassy · Invite

Same left side as Control 08 (avatar + 2-line stack at 16px). Right: TileButton size="pill" with "Invite" label (26px-tall compact pill button).

Cassy Finance

Invite

Control 10 · Restock · Confirm

Square tile. TileTitleCaption "Restock" / "Incoming delivery" (captionSize="title") at top. Bottom stack: section-alt pod with Capstone rust logo + "Capstone" / "9:30am, Bay 2" 14px (primary / muted), then full-row TileButton "Confirm".

Restock

Incoming delivery

Capstone 9:30am, Bay 2

Confirm

Control 11 · Low stock · Reorder

Square tile. Top: WarningCircle + "Low stock" (16px body) row. Bottom: TileTitleCaption "Aluminium frame" / "4 left" (captionSize="title") then full-row TileButton "Reorder".

Control 12 · Bookkeep.ai · permissions

Square tile. Top: section-alt pod with green TileLogoBox (Bookkeep.ai brand) + name/role at 14px. Bottom: Permissions eyebrow + 2 checkbox rows (Read checked, Write unchecked) with 19px labels.

Bookkeep.ai Integration

Permissions

Read

Write

Control 13 · Cassy Price · toggles

Square tile. Top: section-alt pod with TileAvatar md + Cassy Price / Accounting at 14px. Bottom: 3 toggle rows (Can publish off / Can edit on / Can invite off).

Cassy Price Accounting

Can publish

Can edit

Can invite

Control 14 · Preferences

Square tile. "Preferences" title at top (no caption). Bottom: 3 toggle rows (Cache results off / Auto-reply on / Require password off).

Control 15 · Loading bay door

Square tile. TileTitleCaption "Loading bay door" / "Open" (captionSize="title") at top; one-off physical-switch widget at bottom (96px wide, 2 vertical positions, top ON shows a white bar on dark, bottom OFF shows an outlined circle on section-alt).

Control 16 · Registration form

Square tile. TileTitleCaption "Registration form" / "Approvals" (captionSize="title") at top. Bottom: TileSegmented (Manual / Auto active) wrapped in a section-alt pod via the atom's class prop. Third use of the atom.

Control 17 · Subscription · player

Square tile. TileTitleCaption "Subscription" / "Active" at top. Bottom: pill-shaped media player strip (section-alt bg, 3 icon buttons at 48×48); first button is active with dark fill + inverse icon. One-off inline widget.

Control 18 · Add files

Square tile. Multi-line title "Add files to begin analysis" at 19px (wraps to 2 lines) at top. Bottom: TileRoundedIcon + Plus glyph + "Add new" muted (14px) horizontal row.

Control 19 · Assignees

Stacked trio of TileCards (4px gap, no outer card). Each row: TileAvatar md + name/role (16px) + TileCheckbox. Cassy and Janine checked, Ravi unchecked.

Cassy Finance

Ravi Operations

Janine HR

Control 20 · Less than · Automation

Stacked pair of TileCards (4px gap, no outer card). Card 1: compact row, "Less than" muted 14px left + "30 units" primary 19px right. Card 2: "Automation" eyebrow + 3 checkbox rows (Reorder ✓ / Email ✗ / SMS ✓) with 19px labels.

Control 21 · Reporting interval

Square tile. TileTitleCaption "Reporting" / "Set interval" (captionSize="title") at top. Bottom: TileSegmented inside a section-alt pod (Day / Week active / Month). Fourth use of the atom.

Control 22 · Properties · Visibility

Square tile. Top: "Properties" title (19px) + section-alt pod with paperclip + filename + filetype row (same shape as Entity 12 / Event 12). Bottom: "Visibility" label left + TileToggleIcons with Lock active and Globe dimmed.

Control 23 · Prospect Inc. · Contact found

Stacked pair (4px gap, no outer card). Card 1: Prospect Inc. brand row (same shape as Entity 01, blue TileLogoBox via color prop). Card 2: "Contact found" eyebrow + section-alt pod with Cassy avatar / role + full-row TileButton "Invite".

New company Prospect Inc.

Contact found

Cassy Price CEO

Invite

Control 24 · File analysed · Review

Stacked pair. Card 1: compact paperclip + filename + filetype row. Card 2: TileTitleCaption "File analysed" / "Found 37 insights" + full-row TileButton "Review".

Control 25 · Payout · Debit card

Stacked pair. Card 1: compact 2-line ("Payout account" muted / "Debit card" primary) + TileDropdownArrow. Card 2: inline duplicate of the Entity 14 credit-card layout (inverse surface, blue brand logo, masked card number, Valid/Use rows). Promote to a TileCreditCard atom on a 3rd use.

Payout account Debit card

Debit

•••• •••• •••• 6738

Valid 10/29

Use Primary

Metric 01 · Payment

Auto-height tile with a single justify-between row — small muted label on the left, value on the right.

Metric 02 · Phase B

Compact dark stat pill (157px wide) sitting in an unpadded white container. Label + value layout. Composes TileBatteryPill in label mode.

Metric 03 · Charge

Same dark stat pill as Metric 02, with a 24px lightning bolt icon instead of a label. Composes TileBatteryPill in icon mode.

Metric 04 · Redevelopment

Title + 4-segment phase bar. Each phase fills 0–100% independently. Canonical tile is auto-height (240×126), not 1:1. Composes TilePhaseBar.

Metric 05 · Budget

Title + horizontal progress bar with min/max range labels above the fill. Composes TileProgressBar.

Metric 06 · Performance

Title + 6-bar vertical bar chart with letter month labels. Active bar uses bg-bg-inverse for emphasis. Composes TileBarChart.

Metric 07 · Net Income

Title + 2-segment proportional bar with labels above each segment showing the source split. Inline composition (no atom) — segments are different widths, fully filled with different colors.

Metric 08 · Average order

Title-only header + big-number callout with a TrendUp icon and trend caption. Display value uses font-display + text-h1 (clamps to 45px).

Metric 09 · Capstone

Branded bar-chart variant of Metric 06 — TileLogoBox + 16px (tile-body) title at the top, six-bar TileBarChart at the bottom. Same logo treatment as Process 08 / Status 09.

Capstone

Order volume

J

A

S

O

N

D

Metric 10 · Sales volume

Title + 3 horizontal labeled bars with per-row width. Active row inverts colors. Composes TileBarHorizontal.

Metric 11 · Activity

Title + 4×8 seat-grid heatmap with mixed cell states (subtle / mid / accent / empty). Composes TileSeatGrid.

Metric 12 · Debit

Stacked tile pair (4px gap) — credit-card style entity tile on top (dark surface, blue logo, masked card number, valid + use rows), then a Balance row tile below. Same Balance row pattern as Metric 01.

Debit

••••  ••••  ••••  6738

Valid 10/29

Use Primary

Balance $13,568.00

Status 01 · Check passed

Auto-height tile with a 24px shield-tick icon on the left and a small confirmation label on the right. Composes ShieldCheck (Phosphor) inline.

Status 02 · Design consult

Auto-height tile with a small label on the left and an active TileCheckCircle (dark fill, white check) on the right. Composes TileCheckCircle.

Status 03 · Nagano

Title + analog clock with timestamp at bottom-right. Composes TileClock with a small text caption.

Status 04 · Motion detected

Title + 72px sensor-style icon at the bottom. Substituted Phosphor Vibrate for Lucide NFC — different visual but a closer semantic match for motion detection. Inline SVG can swap in later if exact parity is needed.

Status 05 · Connected

Title + percent / globe-icon row + 18-pip signal strength indicator. Composes TileSignalPips with a percent + icon header. Substituted Phosphor GlobeHemisphereWest for Lucide GlobeLock.

Status 06 · Website redesign

Title-only header + two stacked inner boxes, each with a label and a TileCheckCircle (active for done, inactive for pending). Composes TileInnerBox + TileCheckCircle.

Status 07 · Status / Charging

Stacked tile pair (4px gap) — main tile with title and a 3-icon row showing the state transition (sun → battery), then a TileBatteryPill below. Composes TileCard + TileBatteryPill. Substituted Phosphor BatteryMedium / ArrowRight for Lucide.

Status 08 · Seats

Title + 3×6 seat grid with three active cells (the "3 available"). Same atom as the Activity heatmap, different pattern. Composes TileSeatGrid.

Status 09 · Capstone

Stacked tile group (4px gap) — branded entity tile on top with a 42×42 logo box and title, then two confirmation row tiles below. Composes TileCard + TileLogoBox + TileCheckCircle. Uses Capstone logomark-14 from the brand asset library.

Capstone

Material supplier

Security check

Onboarding complete

Process 01 · Phase B

Inline label + 96×12 progress pill. Auto-height tile. Composes TileProgressBar.

Process 02 · Prospect re-design

Stacked offset gantt bars with Jan/Dec axis. Emphasis row uses bg-bg-inverse. Composes TileGantt.

Process 03 · Waybill

Horizontal dot timeline with the active stage marker offset by a flex-1 line on the left. Composes TileTimelineLine + TileTimelineDot.

Process 04 · Design phase

Same horizontal dot timeline as Process 03, with a Jan/Dec axis below instead of an inline label. Composes TileTimelineLine + TileTimelineDot.

Process 05 · Delivery (in progress)

Two-stage journey track with the bottom track left flat (truncated) — the active stage is current and the journey continues. Composes TileJourneyTrack with truncated.

Process 06 · Delivery (complete)

Three-stage journey track with both ends rounded — the journey is complete and the active stage is the final one. Composes TileJourneyTrack.

Process 07 · Onboarding

Stacked tile pair (4px gap, no outer card) — compact list-row tile on top, main tile with progress below. Composes TileCard + TileAvatar + TileProgressBar.

Jane

Active

Onboarding

Chapter 4

56%

Process 08 · Capstone

Horizontal connector timeline for cross-stage flows. Header uses 16px (tile-body) text. Composes TileLogoBox + TileTimelineLine + TileCheckCircle.

Capstone

Material supplier

Compliance