A vocabulary for shaping interfaces with AI https://icontemp.com/wiki/cssprimer/ 2026-07-23T23:00:28+00:00 https://icontemp.com/wiki/cssprimer/ https://icontemp.com/wiki/cssprimer/lib/exe/fetch.php?media=wiki:logo.png text/html 2026-04-25T14:34:36+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=visual_style:css_borders_and_radius&rev=1777127676&do=diff 05. Borders and Radius — Edges and Softness How edges define structure, separation, and emotional tone —Part of CSS Primer for the AI Era — Visual Style Borders and radius are the smallest visual elements in an interface — thin lines, subtle curves — text/html 2026-04-25T14:35:16+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=visual_style:css_color_contrast_palettes_and_meaning&rev=1777127716&do=diff 02. Color — Contrast, Palettes, and Meaning How color guides attention, tone, and accessibility —Part of CSS Primer for the AI Era — Visual Style Color is one of the strongest signals in an interface. It can calm or overwhelm, clarify or confuse, text/html 2026-04-25T14:35:26+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=visual_style:css_color_typography_rhythm&rev=1777127726&do=diff 01. Visual Style — Color, Typography, and Rhythm —Part of CSS Primer for the AI Era — Visual Style How do we shape 'the feel' of a page? Layout gives us structure. Visual style gives us tone. Where Foundations teaches how CSS thinks, and text/html 2026-04-25T14:34:01+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=visual_style:css_density_breathing_room_and_compression&rev=1777127641&do=diff 08. Density — Breathing Room and Compression How spacing choices shape comfort, efficiency, and emotional tone —Part of CSS Primer for the AI Era — Visual Style Density is the overall tightness or looseness of an interface. It is the sum of spacing, rhythm, typography, and layout — text/html 2026-04-25T14:34:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=visual_style:css_motion_subtle_transition_and_intent&rev=1777127654&do=diff 07. Motion — Subtle Transitions and Intent How movement guides attention, meaning, and emotional tone —Part of CSS Primer for the AI Era — Visual Style Motion is the quietest form of visual communication. It can clarify or distract, soothe or overwhelm, text/html 2026-04-25T14:34:51+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=visual_style:css_rhythm_margin_padding_and_the_flow_of_space&rev=1777127691&do=diff 04. Rhythm — Margin, Padding, and the Flow of Space How spacing creates breath, structure, and narrative flow —Part of CSS Primer for the AI Era — Visual Style Rhythm is the quiet force that makes a page feel calm, readable, and intentional. text/html 2026-04-25T14:34:24+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=visual_style:css_shadows_depth_and_atmosphere&rev=1777127664&do=diff 06. Shadows — Depth and Atmosphere How depth guides attention, hierarchy, and emotional tone —Part of CSS Primer for the AI Era — Visual Style Shadows are the softest structural tool in visual style. They don’t draw lines or define edges. text/html 2026-04-25T14:35:04+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=visual_style:css_typography_size_line%E2%80%91height_and_readability&rev=1777127704&do=diff 03. Typography — Size, Line‑Height, and Readability How text becomes comfortable, clear, and humane —Part of CSS Primer for the AI Era — Visual Style Typography is the part of visual style people 'feel before they notice'. It shapes the pace of reading, text/html 2026-04-25T14:33:49+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=visual_style:css_visual_style_summary&rev=1777127629&do=diff 09. Visual Style Summary — What It Can and Cannot Do What appearance can shape, what it cannot solve, and where judgment lives —Part of CSS Primer for the AI Era — Visual Style Visual Style is the emotional layer of an interface. It shapes how the structure is felt — the tone, the comfort, the clarity, the atmosphere. text/html 2026-05-20T14:22:07+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=visual_style:start&rev=1779286927&do=diff Visual Style Visual Style shapes how an interface feels — its tone, clarity, and atmosphere. It is the layer that turns structure into experience, using color, typography, rhythm, edges, shadows, motion, and density to guide the reader with comfort and intention. In the AI era, Visual Style becomes a shared language: