Icons

Icons are Lucide, through one wrapper, @tempio/ui/icons: <Icon name="Settings" />, or the named export SettingsIcon, so moving a file off lucide-react is an import swap. A glyph with a file in packages/ui/icons/animated/, copied from the lucide-animated package (npm, 1.0.5, MIT), can play; every other glyph renders lucide-react in the same box.

Under neutral, the theme this page opens on, an animated glyph draws its resting frame and never plays, and every Lucide glyph draws at stroke 1.5 from the theme’s --icon-stroke. Under tempio an animated glyph plays on hover and on a state change, at Lucide’s stroke of 2. Pick tempio above, then hover each glyph and press Approve.

When an icon plays

Under tempio, and never under neutral:

• When the pointer enters its control: the nearest button, link, menu item, tab or option, or the icon itself when it has none.
• When its state prop changes: a sync finishing, an approval landing, a nav item becoming active.

Each play runs 200 ms per element on the package ease-out, from ICON_MOTION in @tempio/ui/icons/motion; a staggered glyph finishes within 1.2 s. An icon never plays on mount and never loops. Under reduced motion it renders the static glyph. The sync icon is the one exception to the loop rule: it turns while a sync runs and becomes a check when the sync ends.

Coloured tiles

Each object in the app and the console wears a tile: a square at 16, 20, 24 or 32 px at a 30% corner radius, filled with the object’s colour inside a 1px ring, with a solid white glyph. Attio’s tile glyphs are silhouettes, so a tile draws from Phosphor’s fill weight (@phosphor-icons/react 2.1.10, MIT, through @tempio/ui/icons/tile) while every other icon stays on Lucide. A tile is still given the Lucide name. This draws the campaign tile:

<IconTile icon="Megaphone" tone="campaign" />

The fill reads --object-campaign, which every theme sets. This page opens on Neutral, the look the tiles were measured for.

• Sizes. 16 in the sidebar, the breadcrumb, record chips and the view picker; 24 for the workspace avatar and the ⌘K options; 32 in record headers. The glyph is 10, 12, 14 or 18 px, and keeps that size inside a button, a menu item or a sidebar row.
• Stand-ins. Where Phosphor has no glyph of the Lucide name, its nearest one draws: the Planner’s Gantt bars as ChartBarHorizontal, Review’s clipboard as ClipboardText, the swipe file as Bookmarks, Tracking’s radar as Target. Every tile in the app is solid. A name the set does not know falls back to its Lucide outline, as a safety net.
• Chips. ObjectChip names a record’s object on --object-<name>-tint inside --object-<name>-tint-ring, with its name in --object-<name>-tint-foreground. The token build holds that ink at 4.5:1 on the tint. It is 20 px tall at radius 6 for a ⌘K result, and 22 px at radius 7 for a tag in a table (size={22}).
• Platforms. A platform’s tile is its own logo. <ProviderMark logo="meta" tile={16} /> draws the mark at 12 px inside a 16 px tile, or 24 inside a 32, on the page’s ground at a 30% corner radius, inside the tile ring, and shows the on-dark file in dark mode. Its name goes in text beside the tile, or in label where nothing beside it names the platform.
• Labels. A tile never stands alone as the only name of a thing. White on the green, amber and orange fills reads under 3:1, so the object’s name is always in text beside it and the tile is decorative. Give it a label only where the text beside it names something else.
• Tone names are hues too. An avatar wears campaign for its blue. In the view picker a table or a list wears plan for green, a board review for orange, and a timeline campaign for blue.
• Avatars. With initial in place of icon, the tile draws the first letter. toneFor(id) picks one of the seven hues from the workspace’s id, so a rename keeps the colour.
• The neutral tile is the grey one in ⌘K and toasts. It keeps Lucide outlines in the label ink, because Attio’s tiles there are outlines.
• The fallback tile is a record with no logo: tone="fallback" draws the object’s solid silhouette (a building, a dollar, a person) in grey on --tile-fallback. A board card wears it unless it is given a tone.