A vocabulary for shaping interfaces with AI https://icontemp.com/wiki/cssprimer/ 2026-05-21T18:39:43+00:00 https://icontemp.com/wiki/cssprimer/ https://icontemp.com/wiki/cssprimer/lib/exe/fetch.php?media=wiki:logo.png text/html 2026-05-14T20:54:17+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:case-contrast&rev=1778792057&do=diff Typographic Case Contrast the difference between uppercase, lowercase, and small caps — shaping structure, tone, and emphasis Typographic case contrast is the contrast of letterform structure. It describes how text changes when its shape changes text/html 2026-05-16T02:24:07+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:color_contrast&rev=1778898247&do=diff Color Contrast the difference in lightness and hue that makes text and elements readable * Return to: Contrast subtopic list ← Color contrast is the strength of difference between two colors — usually foreground and background. It determines whether something is easy to read, text/html 2026-05-14T20:20:40+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:contrast&rev=1778790040&do=diff Styling Contrast —the strength of difference between elements Contrast is the difference in lightness, color, size, weight, or spacing that helps the eye understand what matters. Contrast is one of the most powerful tools in visual design text/html 2026-05-17T18:45:15+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:expressiveness_editorial&rev=1779043515&do=diff Editorial Expression an articulate, typographic, narrative personality — created through hierarchy, rhythm, and the quiet authority of crafted text * Return to: Visual Expression subtopic list ← Editorial expression is the voice of publishing translated into interface design. text/html 2026-05-17T17:53:04+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:expressiveness_minimal&rev=1779040384&do=diff Minimal Expression an essential, quiet, disciplined personality — created through reduction, clarity, and intentional absence * Return to: Visual Expression subtopic list ← Minimal expression is the quietest form of personality. It is not emptiness, nor austerity for its own sake text/html 2026-05-17T14:18:46+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:expressiveness_playful&rev=1779027526&do=diff Playful Expression an energetic, warm, lively personality — created through color, rhythm, softness, and small moments of delight * Return to: Visual Expression subtopic list ← “The warmest, most energetic personality in the system”. Playful expression is the liveliness of an interface. text/html 2026-05-17T18:21:32+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:expressiveness_technical&rev=1779042092&do=diff Technical Expression an engineered, precise, structured personality — created through clarity, geometry, and disciplined detail * Return to: Visual Expression subtopic list ← Technical expression is the engineer’s voice in visual form. It is not coldness, nor complexity — it is intentional precision, text/html 2026-05-17T18:09:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:expressiveness&rev=1779041360&do=diff Visual Expression the personality of an interface — how style, rhythm, and detail communicate character Subtopics * Playful Expression — lively, warm, energetic * Minimal Expression — quiet, essential, restrained * Technical Expression — precise, engineered, structured * Editorial Expression — typographic, crafted, narrative text/html 2026-05-14T21:20:00+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:font_contrast&rev=1778793600&do=diff Font Pairing Contrast the difference between typefaces — serif, sans-serif, monospace, humanist, geometric — that shapes voice and identity Font pairing contrast is the contrast of typographic personality. Where weight changes volume, size text/html 2026-05-16T02:25:47+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:hue_contrast&rev=1778898347&do=diff Hue Contrast — the difference between colors based on their position on the color wheel * Return to: Contrast subtopic list ← Hue contrast is the contrast of color family — blue vs. orange, red vs. green, yellow vs. purple. It is the most expressive form of contrast, text/html 2026-05-16T02:25:04+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:lightness_contrast&rev=1778898304&do=diff Lightness Contrast the difference in brightness between two colors * Return to: Contrast subtopic list ← Lightness contrast is the contrast of value — how light or dark one color is compared to another. It is the most fundamental form of contrast in design because the human eye perceives value differences text/html 2026-05-18T23:01:26+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:loudness&rev=1779145286&do=diff Loudness the intensity of color, contrast, or scale — how strongly an element calls for attention Loudness is the volume of the interface. It is not noise; it is intensity — the degree to which an element pushes forward. ---------- Loud elements feel: text/html 2026-05-18T23:11:57+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:restraint&rev=1779145917&do=diff Restraint the discipline of using only what is necessary — clarity through intentional limitation Restraint is the editorial discipline of design. It is not minimalism; it is purpose — the decision to remove anything that does not serve meaning. text/html 2026-05-16T02:26:26+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:saturation_contrast&rev=1778898386&do=diff Saturation Contrast the difference in color intensity — vivid vs. muted * Return to: Contrast subtopic list ← Saturation contrast is the contrast of intensity. It describes how vivid, dull, muted, or vibrant a color feels. Where hue is about which color, and lightness is about how bright or dark, text/html 2026-05-16T02:28:25+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:scale_contrast&rev=1778898505&do=diff Scale Contrast —the difference in size that shapes visual importance * Return to: Contrast subtopic list ← Scale contrast is the contrast of size — how large or small elements are relative to each other. It is one of the clearest signals in visual design because the eye instinctively notices size differences text/html 2026-05-14T20:34:41+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:size_contrast&rev=1778790881&do=diff Typographic Size Contrast the difference in text size that shapes hierarchy and pacing Typographic size contrast is the contrast of scale within typography — the step‑changes between headings, subheads, body text, and captions. It is one of the clearest signals in visual design because text/html 2026-05-16T02:36:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:softness_color&rev=1778898973&do=diff Color Softness the gentleness of color — muted palettes, low contrast, and desaturated tones that create calm, breathable surfaces * Return to: Visual Softness subtopic list ← Color softness is the softness of hue, saturation, and contrast. It is the difference between a palette that feels gentle text/html 2026-05-16T02:34:29+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:softness_edges&rev=1778898869&do=diff Edge Softness the gentleness of corners and outlines — shaping approachability, comfort, and visual pressure * Return to: Visual Softness subtopic list ← Edge softness is the softness of corners, outlines, and boundaries. It is the difference between a sharp, precise edge text/html 2026-05-16T02:35:43+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:softness_motion&rev=1778898943&do=diff Motion Softness the gentleness of movement — easing curves, timing, and transitions that reduce visual tension and create calm flow * Return to: Visual Softness subtopic list ← Motion softness is the softness of transitions and animations. It is the difference between a sudden, mechanical movement text/html 2026-05-16T02:35:03+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:softness_shadows&rev=1778898903&do=diff Shadow Softness the gentleness of depth — diffuse, low‑contrast shadows that create calm, breathable space * Return to: Visual Softness subtopic list ← Shadow softness is the softness of depth cues. It is the difference between a crisp, high‑contrast shadow and a diffuse, atmospheric one. text/html 2026-05-15T19:39:46+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:softness&rev=1778873986&do=diff Visual Softness the gentleness of edges, shadows, and transitions — shaping comfort, approachability, and visual ease Subtopics * Edge Softness — rounded vs. sharp edges * Shadow Softness — diffuse vs. crisp shadows * Motion Softness — easing curves and gentle transitions * Color Softness — muted palettes and low‑contrast surfaces text/html 2026-05-14T21:27:21+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:spacing_contrast&rev=1778794041&do=diff Typographic Spacing Contrast the difference in line-height, letter-spacing, and word-spacing that shapes texture and readability Typographic spacing contrast is the contrast of textual space — the micro‑spacing that determines how text breathes within itself. text/html 2026-05-16T02:27:48+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:spatial_contrast&rev=1778898468&do=diff Spatial Contrast — the difference in spacing, openness, and density between elements * Return to: Contrast subtopic list ← Spatial contrast is the contrast of space — how much room elements have around them, and how tightly or loosely they sit together. It is the difference between: text/html 2026-05-14T20:47:30+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:style_contrast&rev=1778791650&do=diff Typographic Style Contrast the difference in typographic style — italic, small caps, monospace — that shapes nuance and emphasis Typographic style contrast is the contrast of formality and voice. Where weight changes volume and size changes hierarchy, text/html 2026-05-16T02:27:03+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:typographic_contrast&rev=1778898423&do=diff Typographic Contrast the differences in weight, size, style, and spacing that shape how text speaks * Return to: Contrast subtopic list ← Typographic contrast is how typography creates hierarchy, emphasis, and tone through variation. It is the contrast of voice — how text whispers, speaks, or calls attention. text/html 2026-05-16T02:30:28+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:visual_tone_calm_energetic_tone&rev=1778898628&do=diff Calm vs. Energetic Tone the difference in visual pacing — calm for steadiness and openness, energetic for intensity and momentum * Return to: Tone subtopic list ← Calm vs. energetic tone is the contrast of visual pace. Where warm/cool tone sets → emotional temperature text/html 2026-05-16T02:31:01+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:visual_tone_formal_vs_informal_tone&rev=1778898661&do=diff Formal vs. Informal Tone the difference in visual posture — “formal” → for structure and restraint, “informal” → for warmth and approachability * Return to: Tone subtopic list ← Formal vs. informal tone is the contrast of visual posture. Where → warm/cool tone text/html 2026-05-16T02:31:39+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:visual_tone_neutral_tone&rev=1778898699&do=diff Neutral Tone the absence of strong emotional cues — a calm, balanced atmosphere created through restraint in color, contrast, and expression * Return to: Tone subtopic list ← Neutral tone is the tone of non‑insistence. * it avoids 'emotional temperature' → warm/cool text/html 2026-05-16T02:29:50+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:visual_tone_warm_cool_tone&rev=1778898590&do=diff Warm vs. Cool Tone the emotional temperature of an interface — warmth for approachability, coolness for calm neutrality * Return to: Tone subtopic list ← Warm vs. cool tone is the contrast of color temperature — how hues, lightness, and contrast create an emotional climate. text/html 2026-05-15T16:50:34+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:visual_tone&rev=1778863834&do=diff Visual Tone Visual tone is the emotional quality of an interface — the mood created by color, spacing, contrast, softness, and rhythm. Subtopics * Warm vs. Cool Tone * Calm vs. Energetic Tone * Formal vs. Informal Tone * Neutral Tone These four sub‑entries form the complete vocabulary of Tone. What is visual tone text/html 2026-05-14T20:25:37+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:weight_contrast&rev=1778790337&do=diff Typographic Weight Contrast the difference in boldness that shapes how text speaks Typographic weight contrast is the contrast of boldness — the difference between light, regular, medium, semibold, bold, and black weights. It is the simplest, most immediate way to change the voice of text. text/html 2026-05-17T13:55:34+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:weight_density&rev=1779026134&do=diff Visual Density the tightness or openness of layout — how spacing, grouping, and rhythm create perceived mass * Return to: Visual Weight subtopic list ← Visual density is the compactness of an interface. It is the difference between a layout that feels tight, information‑rich, and fast text/html 2026-05-17T13:39:50+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:weight_shadow&rev=1779025190&do=diff Shadow Weight the heaviness or lightness of shadows — how depth, opacity, and spread create visual mass * Return to: Visual Weight subtopic list ← Shadow weight is the gravity of elevation. Where shadow softness describes how gentle a shadow feels, shadow weight describes how heavy it feels. text/html 2026-05-17T13:19:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:weight_stroke&rev=1779023958&do=diff Stroke Weight the heaviness or lightness of lines — borders, dividers, outlines, and rules that shape structure and emphasis * Return to: Visual Weight subtopic list ← Stroke weight is the perceived mass of lines in an interface. A stroke can be as small as a 1‑pixel border or as large as a thick divider text/html 2026-05-16T02:33:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:weight_surface&rev=1778898800&do=diff Surface Weight the heaviness or lightness of surfaces — how filled shapes, backgrounds, and containers create visual mass * Return to: Visual Weight subtopic list ← Surface weight is the weight of filled areas: cards, buttons, panels, chips, tags, bars, and any surface that carries color or texture text/html 2026-05-15T21:23:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_visual_vocabulary:weight&rev=1778880194&do=diff Visual Weight the perceived heaviness or lightness of elements — shaping presence, hierarchy, and balance Subtopics * Surface Weight — heavy vs. light containers * Stroke Weight — thick vs. thin lines * Shadow Weight — deep vs. subtle elevation * Density Weight — compact vs. airy layouts