Design

A tiny label stuck on top of something bigger, like "New" on a product or a red number on a bell icon. It adds one short fact without taking space.

A box that groups one thing: usually a picture, a title, a short text and an action. Many cards together make a grid or a list.

A picture, video or section that runs to the very edges of the screen, with no margin around it, while the text stays in a narrow column. The word comes from printing, where an image "bleeds" off the page.

A row of well-known customer logos, usually under the hero, that says "people you know already use us". The logos are often all one gray so they don't fight the page.

One pill-shaped bar split into a few options, where exactly one is picked. It looks like the switch in iPhone settings, but with two to five choices.

A few important numbers shown very large, each with a short caption under it. It impresses at a glance, where the same numbers in a sentence would be missed.

Feature sections where the picture swaps sides on every row: text left and picture right, then picture left and text right. Your eye moves down the page in a Z.

The dark, see-through layer behind a pop-up. It dims (and often blurs) the page, so the pop-up stands out and the page can't be clicked.

A small menu of actions for one thing, opened with a right-click (or a long press on a phone). It appears right where you clicked.

A list of choices that drops down from a button when you click it, and closes when you pick one or click away.

A small label that appears when you point at or focus something, to explain what it does. It disappears when you move away.

Content rises a short distance while it fades in. It's the most common way for sections to appear as you scroll.

A card rises a few pixels and its shadow grows when you point at it, as if it lifts off the page. It says "you can click this whole card".

Something appears by growing from small to full size while it fades in. It draws the eye to new things.

Scrolling that always stops neatly on an item or section, instead of anywhere in between.

How a control looks when you can't use it yet: grayed out, not clickable. Good ones also say why.

How something changes when the mouse is over it, like a button getting brighter. It tells you "you can click this". Phones have no hover.

How a button looks while you are pushing it down. A good one feels like a real key being pressed.

A switch that changes every color on the page between a light and a dark theme, and often a "System" option that follows the device. A good one remembers your choice.

Lots of empty space around and between things, so each part has room to breathe. It feels calm and expensive.

Strong contrast: big heavy headings, saturated colors and clear dark lines. It grabs attention fast.

Gentle contrast: muted colors, medium-weight headings and nothing shouting for attention.

A button with a solid, darker strip under it (a shadow with no blur), so it looks like a real key you can push. When pressed, it moves down and the strip disappears.

Colors lean toward blue and gray. It feels clean, calm and professional.

Near-black backgrounds, hairline borders, soft glows and fading gradient text. Common on developer tools.

Things sit close together with little space between them, so more fits on one screen. Good for tools and data; tiring for reading.

A row, list or picture that fades to transparent at its edges, so it melts into the background instead of being cut off with a hard line. It is made with a gradient mask.

Big serif headlines, thin lines between sections and layouts built for reading, like a magazine or newspaper.

See-through panels that blur whatever is behind them, with a thin light edge. It looks like frosted glass.

Lots of white space, few colors and quiet thin text. Only what is needed stays.

Thick black outlines, hard shadows with no blur and loud flat colors. It looks raw on purpose.

Bright saturated colors, very round corners, chunky buttons and bouncy motion. Think learning apps.

Square corners with no rounding. It feels precise, serious and a little technical.

Round corners on cards and buttons, often with pill-shaped buttons. It feels friendly and gentle.

Colors lean toward red, orange and yellow: sand, cream and amber. It feels cozy and human.

Text written only in capital letters. It feels loud and strong, so it is used for short labels, buttons and big headlines, usually with a little extra space between the letters.

A very large first letter at the start of a story, sitting down into the first few lines. It marks where the story begins.

A small line of text above a headline that names the topic, often in capitals and in the accent color. It lets the headline itself stay short and bold.

Text whose size grows and shrinks smoothly with the screen width, between a smallest and a biggest size. It replaces fixed sizes that jump at breakpoints.

The space between every letter in a word. Big headlines often look better slightly tighter; small all-caps labels look better slightly wider.

A font where every letter takes the same width, so an i is as wide as an M, like on an old typewriter. It is used for code and for a technical, precise look.

A font whose letters have no little "feet" at the ends of their strokes (sans means "without" in French). It feels clean, modern and easy to read on screens.

A font whose letters have small "feet" at the ends of their strokes. It feels classic, bookish and trustworthy; sans-serif fonts have no feet and feel modern.

Digits that all have the same width, so a changing number doesn't wiggle and columns of numbers line up.

The one strong color used sparingly, on the most important button or word, while everything else stays neutral. It shows your eye where to look.

The one color a company owns and uses everywhere, from the logo to the main button, so you know whose app it is at a glance. Many companies even give it a name.

A soft, blurry light behind or around something, usually a radial gradient that fades to nothing. On a dark background it adds depth and draws the eye.

One color blending smoothly into another. A linear gradient blends along a line; a radial gradient spreads out from a point like light.

Only black, white and grays (or shades of one color). It looks serious, calm and modern, and lets photos or content stand out.

A very bright, very saturated color that almost seems to glow, like acid lime or hot pink. It is strongest on a dark background and is best used on a few things only.