185 terms · 6 categories
Glossary
Every term comes with a plain-English definition, a wireframe, and a prompt you can copy straight into your AI.
Look-alike terms
23 sets of look-alike terms that are easy to mix up, side by side.
Styling & CSS
Common words for typography, color, spacing, and CSS, sorted A–Z.
A terms
B terms
- Border RadiusA CSS effect that turns an element's square corners into curves. Bigger values mean rounder corners, and it's one of the key things that makes an interface feel sharp or soft.
- Box ModelThe browser treats every element as a rectangular box with four layers. From the inside out, they are content, padding, border, and margin.
- Box ShadowA blurry dark layer under an element that makes it look like it's floating above the page. The bigger and softer the shadow, the higher the element looks.
- BreakpointThe screen width at which a responsive layout switches styles, for example going from two columns to one when the width is below 768px.
C terms
- Color ContrastThe difference in lightness between text and background colors. If it's too small, text is hard to read. Accessibility standards require at least 4.5:1 for body text.
- Color PaletteThe full set of colors an interface uses and the rules for using them, including the brand's primary color, black, white, and gray neutrals, and semantic colors for success, warning, and error.
- CSS Custom PropertiesGive a value a name in CSS, store it, and reuse it everywhere. Change it in one place and it updates across the site. Commonly used for colors, spacing, and themes.
- CSS GridDivides an area into a grid of rows and columns, then places elements into the cells. Good for two-dimensional layouts where both rows and columns need to line up.
- CSS PositionThe position property takes an element out of the normal order and places it by set offsets. Common for badges, floating buttons, and fixed navbars.
- CSS UnitsUnits for length. Common ones are fixed pixels (px), rem and em that follow font size, vw and vh that scale with the window, and percentages.
D terms
- Dark ModeA color scheme with a dark background and light text. It can switch automatically with the system setting, or let users choose it manually.
- Design TokenDesign decisions like colors, font sizes, spacing, corner radius, and shadows pulled out into named variables, so design files and code on every platform share one spec.
F terms
- FlexboxA CSS layout method that lines up a group of elements in one direction (a row or a column) and makes it easy to control their alignment, spacing, and how they grow or shrink.
- Font WeightHow thick the strokes of text are, written as a number from 100 to 900. 400 is regular and 700 is bold. It's used to separate more important info from less important info.
I terms
L terms
M terms
- Margin & PaddingPadding is the space inside the border, around the content. Margin is the space outside the border, between this element and others.
- Media QueryStyle rules in CSS that only apply under certain conditions, like when the screen is narrower than 768px or the system has dark mode turned on.
O terms
R terms
T terms
- Tailwind CSSA utility-first CSS framework. You style things by writing short class names like flex, p-4, and text-lg right in the class attribute.
- TypographyPlanning the font, size, weight, line height, spacing, and color of text as a whole, so content is clear, easy to read, and has an obvious order of importance.