Sunbeam
Sunbeam is how AstraFoundry looks: warm ink, one yellow, photographs for atmosphere and solid surfaces for focus.
What makes it Sunbeam
Six traits run through every product. Each tile shows one in a few moves; open it for the full rule.
Photographs, not gradients
Atmosphere comes from motion-blurred natural photos. One solid surface lands on top.
One solid focus
Exactly one surface is crisp. Its neighbors stay tinted and quiet.
Concentric corners
Inner radius is the outer radius minus the inset, so curves stay parallel.
Warm ink, one yellow
Neutrals are warm. Yellow marks the one primary action or the result.
Plays once, then rests
A scene runs when it is seen, shows action and result, and stops on the result.
Ready for agents
The specification ships as a skill, so generated UI starts on-brand.
Do and don't
Flip each example between the rule and the habit it replaces.
Backdrop
Set the card on a motion-blurred natural photograph from the backdrop library.
Focus
Make one surface solid and crisp. Quiet its neighbors with a translucent tint and let them run off the edge.
Text on photos
Set captions in muted light ink at the card inset, bottom-left, over the ink scrim.
Corners
Inner radius equals outer radius minus inset: 28 − 10 = 18.
Yellow
Spend yellow on the one primary action. Everything else stays in ink.
Motion
Play once when it is seen, with a short spring, and rest on the result.
Start building
Sites install the package; agents load the skill or read DESIGN.md.
Package
Tokens for Tailwind v4, backdrop photographs, the backdrop card and mock UI stages.
pnpm add @astrafoundry/designAgent skill
Gives Claude Code, Codex and other agents the same rules this site shows.
npx skills add https://github.com/AstraFoundry/astrafoundry.si/tree/main/packages/design/skills/sunbeamDESIGN.md
The tokens and rules in the open format other agents and design tools read.
curl -fsSL https://astrafoundry.si/design.md -o DESIGN.md