Styles

One style for every screen: color, type, shape and motion.

Shuffle

Moods: Editorial, Playful, Brutalist, Minimal, Luxe, Tech, Warm, Retro, Soft

LookSwiftPieces, Studio, Editorial, Graphic, Neon, Candy, Ember, Press, Velvet, Frost, Sol, Prism

Character

SpacingCompact, Regular, Roomy, Airy
WeightLight, Regular, Medium, Bold, Heavy
MotionSmooth, Snappy, Bouncy

Color

GreysNeutral, Warm, Cool
BackgroundPreset, Tinted, Plain
AppearanceSystem, Light, Dark
ContrastSoft, Standard, High
Dark modePreset, Black, Graphite

Typography

SizeDefault, Large, XL, XXL
TitlesFlat, Balanced, Dramatic
HeadersTwo-weight, Bold, Centered
NumbersDefault, Tabular

Shape

CornersSquare, Tight, Standard, Soft, Round
CardsFlat, Raised, Outlined, Glass, Bold
ButtonsSolid, Tinted, Outline, Glass
Button sizeCompact, Regular, Large
ListsApp's, Cards, Grouped, Plain

Feel

SymbolsOutline, Filled, Two-tone
Icon sizeSmall, Medium, Large
Tab barApp's, Dock, Glass, System
BackdropNone, Glow, Wash, Mesh, Dots, Paper
EntranceNone, Fade, Rise
WidthNarrow, Condensed, Normal, Wide
LettersTight, Normal, Loose
MascotShown, Hidden
SP2-000100002000000000000000000000000
Open in the Playground

Your style, everywhere.

One code carries it into the Playground, and out of it into your own app. These follow the style you're making above.

  • Keep the code

    The whole style in one line. Click the card to copy it, then paste it into any app's Style tab, or back here.

  • Open it in the Playground

    Every screen of a free app, restyled and ready to tune. Pick an app to open it wearing your style.

  • Bring it to your app

    Click the window to copy a prompt for your coding agent, with the color scheme and how to apply it.