Visual skills
Color, contrast, depth, icons and imagery: how the interface looks at a glance.
147 skills, page 4 of 4
Skills
Ramsby rams
Real-time design feedback skill focused on accessibility, spacing, typography, contrast, and component quality.
VisualExternal
Siteplane Alertby UI Skillbook
An inline message that stays in the layout, styled by tone, with actions and a dismiss button if needed.
Siteplane UI
Siteplane Area Chartby UI Skillbook
Filled areas over time, overlaid or stacked, that show how big a measure is and how its parts add up.
Siteplane UI
Siteplane Avatarby UI Skillbook
A round image for a user or account, showing initials or an icon instead when no picture is available.
Siteplane UI
Siteplane Avatar Groupby UI Skillbook
A facepile: several avatars overlapped in a row with an optional count of the people not shown.
Siteplane UI
Siteplane Badgeby UI Skillbook
A compact label for a status, category, plan or count, with semantic colour variants and fixed sizes.
Siteplane UI
Siteplane Bar Chartby UI Skillbook
Columns or horizontal bars that compare values across categories, grouped or stacked, with keyboard tooltips.
Siteplane UI
Siteplane Bar Listby UI Skillbook
A ranked list of labels with a bar behind each, sized against the largest value.
Siteplane UI
Siteplane Bubbleby UI Skillbook
The surface for a chat message's text, with variants for sender, assistant replies and errors.
Siteplane UI
Siteplane Cardby UI Skillbook
A surface that groups related content and actions, with header, panel, footer and framed-section parts.
Siteplane UI
Siteplane Color Swatch Pickerby UI Skillbook
A row of color or image swatches for choosing one option from a palette your app defines.
Siteplane UI
Siteplane Empty Stateby UI Skillbook
A centred block, with optional media and actions, telling people why there is nothing here yet and how to proceed.
Siteplane UI
Siteplane File Type Iconby UI Skillbook
A document-sheet icon that shows a file's type and extension, picked from its name.
Siteplane UI
Siteplane Frameby UI Skillbook
A muted surface that groups raised panels with an optional header, descriptions and footer.
Siteplane UI
Siteplane Glassby UI Skillbook
Frosted, see-through takes on Card, Button, Menu, Context Menu, Popover and Tooltip, meant to sit on top of photos.
Siteplane UI
Siteplane Line Chartby UI Skillbook
Lines on a shared axis that show how one or more measures rise and fall over time or ordered steps.
Siteplane UI
Siteplane Markerby UI Skillbook
A low-key line between chat messages for things like status updates, system notes or date dividers.
Siteplane UI
Siteplane Meterby UI Skillbook
A bar for a value inside fixed bounds, like storage used, that can carry a status tone.
Siteplane UI
Siteplane Pie Chartby UI Skillbook
A donut or pie that shows how one total splits into a few shares, with an optional figure in the hole.
Siteplane UI
Siteplane Preview Cardby UI Skillbook
Hovering or focusing a link opens this card with a preview of where it goes, so people stay on the page.
Siteplane UI
Siteplane Progressby UI Skillbook
A bar or circle that reports how far a task has got, or that it is still under way.
Siteplane UI
Siteplane Separatorby UI Skillbook
A horizontal or vertical line that divides related sections or controls.
Siteplane UI
Siteplane Skeletonby UI Skillbook
Decorative shapes that stand in for content while it loads, keeping the layout steady.
Siteplane UI
Siteplane Sparklineby UI Skillbook
A tiny axis-free chart that shows the shape of a trend next to the number it belongs to.
Siteplane UI
Siteplane Spinnerby UI Skillbook
A looping animation that shows work is under way when its duration is unknown.
Siteplane UI
Siteplane Timelineby UI Skillbook
A vertical list of events in time order with coloured or icon markers and an optional now line.
Siteplane UI
Spacing That Doesn't Look AI-Generatedby UI Skillbook
Use a consistent spacing scale and grouping logic instead of arbitrary padding values.
Layout