Design Glossary
Essential terms for understanding visual design — from alignment to whitespace.
- Alignment
- The placement of elements along a common edge or axis. Left, center, and right alignment each communicate differently — left is functional, center is ceremonial.
- Analogous Colors
- Colors that sit beside each other on the color wheel (e.g., green, teal, blue). They create natural harmony because they share underlying hues.
- Ascender
- The part of a lowercase letter that rises above the x-height (b, d, f, h, k, l). Tall ascenders create an airy, elegant feel.
- Balance
- The distribution of visual weight in a composition. Symmetric balance creates formality; asymmetric balance creates dynamism.
- Baseline
- The invisible line on which letters sit. Consistent baselines across columns create alignment and order.
- Blackletter
- A family of dense, angular typefaces derived from medieval manuscript writing. Also called Fraktur or Gothic script. Used in the Gothic style on this site.
- Border-radius
- The CSS property that rounds corners. 0px = sharp (Art Deco, Brutalism). 8px = friendly (Nordic). 20px = bubbly (Y2K Aero). The number carries personality.
- Clamp
- A CSS function — clamp(min, preferred, max) — that creates fluid values scaling between a minimum and maximum. Used for responsive typography and spacing.
- Complementary Colors
- Colors opposite each other on the wheel (e.g., red/cyan, blue/orange). They create maximum contrast and visual energy when placed together.
- Contrast
- Any difference between two elements — size, color, weight, texture. Without contrast, everything is equal and nothing communicates hierarchy.
- CSS Custom Property
- A variable defined in CSS (--color-accent: #5B7B6A). StyleShift uses ~60 custom properties to control every visual aspect of each style.
- Descender
- The part of a lowercase letter that drops below the baseline (g, j, p, q, y). Long descenders need adequate line-height to avoid collisions.
- Display Type
- Typefaces designed for large sizes — headings, posters, titles. Often decorative or extreme in weight. Not meant for body text.
- Easing
- How an animation accelerates or decelerates. Linear = mechanical. Ease-out = natural arrival. Overshoot = playful bounce. The curve is personality.
- Elevation
- In Material Design, the height of a surface above the background, measured in dp. Higher surfaces cast larger shadows and are more important.
- Figure/Ground
- The relationship between an object (figure) and its surrounding space (ground). Good design makes this relationship clear and intentional.
- Flat Design
- A style that removes shadows, gradients, and textures in favor of solid colors and simple shapes. iOS 7 (2013) popularized it. The ancestor of many current web styles.
- Fluid Typography
- Type that scales smoothly with viewport width using clamp() or viewport units, rather than jumping at breakpoints.
- Gestalt
- Principles of visual perception — proximity, similarity, closure, continuity. The brain groups elements that share properties into perceived wholes.
- Grid
- An invisible framework of columns and rows that organizes content. Creates consistency, alignment, and predictable rhythm across a page.
- Gutter
- The space between columns in a grid. Wider gutters feel more open; narrower gutters feel more dense.
- Hierarchy
- The order in which the eye encounters elements. Created through size, weight, color, position, and space. Every design needs it.
- Horror Vacui
- Latin: 'fear of empty space.' The Victorian tendency to fill every surface with pattern and ornament. The opposite of minimalism.
- Hue
- The pure color itself — red, blue, green — independent of how light or dark or saturated it is.
- Kerning
- The adjustment of space between two specific characters. Different from tracking (which affects all characters equally).
- Leading
- The vertical space between lines of text (line-height in CSS). Named after lead strips placed between lines in metal typesetting.
- Measure
- The width of a text column, ideally 45–75 characters per line. Too wide = eye loses its place. Too narrow = text feels cramped.
- Monochromatic
- A color scheme using one hue at different values and saturations. Creates sophisticated unity with minimal risk of discord.
- Negative Space
- The empty area around and between elements. Not 'nothing' — it is active design material that creates focus, breathing room, and hierarchy.
- Opacity
- How transparent an element is, from 0 (invisible) to 1 (solid). Used for layering, atmosphere, and depth without hard edges.
- Ornament
- Decorative elements that do not serve a functional purpose — borders, flourishes, dividers. Some styles embrace it (Victorian); others reject it (Bauhaus).
- Rhythm
- The repetition of elements at intervals — creating tempo, predictability, and flow. Fast rhythm = energetic. Slow rhythm = ceremonial.
- Sans-serif
- A typeface without serifs (the small strokes at letter endings). Communicates modernity, clarity, efficiency. Helvetica, Inter, Roboto.
- Saturation
- The intensity of a color. Fully saturated = vivid. Desaturated = muted/gray. Controls the energy level of a palette.
- Serif
- The small strokes at the ends of letters. Serif typefaces carry warmth, tradition, and authority. Garamond, Playfair, Crimson.
- Skeuomorphism
- Design that mimics real-world materials — leather textures, paper shadows, metallic buttons. Dominated before flat design. Neomorphism is its spiritual descendant.
- Tracking
- The uniform spacing between all characters in a line (letter-spacing in CSS). Wide tracking = open, formal. Tight tracking = dense, efficient.
- Triadic Colors
- Three colors equally spaced on the wheel (e.g., red, yellow, blue). Creates vibrant balance. Bauhaus famously used the primary triad.
- Value
- How light or dark a color is, independent of hue. The foundation of readability — text must differ in value from its background.
- Viewport
- The visible area of a web page in the browser window. Responsive design adapts layout to the viewport size.
- Vignette
- A gradual darkening at the edges of the viewport, focusing attention toward the center. Used in Art Deco (dramatic), Victorian (warm), and Dark Luxury (isolating).
- Visual Weight
- How much attention an element demands. Dark, large, textured, or isolated elements feel 'heavier' than light, small, smooth, or grouped ones.
- WCAG
- Web Content Accessibility Guidelines. The international standard for web accessibility. Defines minimum contrast ratios (4.5:1 for text) and other requirements.
- Whitespace
- The space between and around elements — margins, padding, gaps. Not wasted space but active design material that creates clarity and hierarchy.
- Whiplash Curve
- The signature line of Art Nouveau — a long, sinuous, asymmetric curve that moves like a vine growing toward light. Named 'coup de fouet' in French.
- X-height
- The height of a lowercase 'x' in a typeface. Large x-height = more readable at small sizes. Varies dramatically between typefaces.
A
B
C
D
E
F
G
H
K
L
M
N
O
R
S
T
V
W
X