Style tile
A one-page sample showing the chosen type, color, imagery, and mark working together before full designs are built.
See it
What it is
A style tile is a one-page sample where references become actual design decisions: chosen typefaces, color swatches, buttons or graphic elements, imagery treatment, and the mark shown together. Designer Samantha Warren introduced Style Tiles as a way to discuss a web project's visual direction without pretending a full page had already been designed.
Reach for one after a moodboard and before detailed layouts. It is specific enough for someone to react to the real type, color, and shape relationships, but cheap enough to revise without unpicking a whole website or identity system.
Gotcha: a style tile is evidence of a direction, not a miniature brand guide and not a finished interface. Use real sample content and show hierarchy, but do not fill the board with polished mockups that smuggle layout approval into a style decision.
Ask AI for it
Build a one-page style tile for [BRAND] in Figma Auto Layout. Include the primary and secondary typefaces with real heading, body, and caption copy; five named color swatches with HEX values; the approved mark on light and dark backgrounds; one image crop treatment; one button; and one graphic motif. Use an 8px spacing grid and group every section with clear labels. Keep it to one 1440px-wide frame, show relationships rather than full page mockups, and add three short notes explaining the direction.