IV. The Sight — Visual Expression
How things look, breathe, and focus under this philosophy.
The Sight governs visual expression — layout, space, motion, and attention.
The philosophy lives in The Guide. The invariants live in The Codex.
This document is operational: how things look, how they breathe, how they focus.
These rules apply to any intelligence producing or evaluating visual work —
human or otherwise. The standards are the same. The restraint is the same.
1. Visual Discipline
Five laws. The visual equivalents of Writing Discipline.
Space is syntax.
Empty space is not absence — it is structure.
A margin is a breath. A gap is a pause. Crowding is noise.
One thing shines.
Every view has a single dominant element — the thing the eye finds first.
If everything demands attention, nothing receives it.
Reduce, then reduce again.
Remove what can be removed without losing meaning.
If an element exists only for decoration, it does not belong.
Stillness is default.
Motion is earned, not given. A static screen is not broken — it is calm.
Only move what needs to move. Everything else rests.
Consistency trains the eye.
Repeating patterns reduce cognitive effort.
The reader should never wonder where to look. The layout tells them.
2. Visual Identity
This is what YounndAI looks like. Not generic design advice — the specific aesthetic.
The Mantra
Quiet by default. Intentional by design.
Most of the interface is neutral and soft. Content is the loudest thing.
Color, motion, and emphasis are instruments — played sparingly, with purpose.
Emphasis Budget
- One loud element per region. One primary action, one solid accent. No more.
- Two non-neutral colors per dense cluster. Beyond that is visual noise.
- Soft is the default texture. Most surfaces are muted, low-contrast, calm.
- Solid is earned. Reserved for the single action that matters most.
Temperature
- Cool-neutral base. Warm only through accent.
- Dark mode and light mode equally considered — neither is an afterthought.
- Frosted, subtle surfaces. Glass effects only where context overlays demand it.
The Test
If you muted every color and softened every contrast, would the interface feel complete?
If yes, the quiet default is working. Now add back only what's earned.
3. Visual Context
The first decision: what are you designing? The context determines density, emphasis level, and motion budget.
General
| Context | Density | One Thing Shines | Motion Budget |
|---|---|---|---|
| Landing page | Sparse | The hero statement | Generous |
| Marketing page | Sparse | The primary CTA | Moderate |
| Article / blog | Balanced | The headline | Minimal |
| Onboarding / wizard | Sparse | The current step | Moderate |
| Email / newsletter | Balanced | The key message | None |
Product
| Context | Density | One Thing Shines | Motion Budget |
|---|---|---|---|
| App shell | Balanced | The content area | Minimal |
| Dashboard | Dense | The primary metric | Minimal |
| Data table | Dense | The selected row | Minimal |
| Form / settings | Balanced | The submit action | Minimal |
| Profile / detail | Balanced | The primary information | Minimal |
States
| Context | Density | One Thing Shines | Motion Budget |
|---|---|---|---|
| Empty state | Sparse | The action to start | Moderate |
| Error state | Sparse | The recovery action | Minimal |
| Loading | Sparse | The progress indicator | Moderate |
| Success / confirm | Sparse | The confirmation message | Brief |
| Modal / dialog | Sparse | The decision | Brief entry/exit |
4. Space
Space is the most powerful visual tool.
Rules
- Generous margins. Content never touches the edge of its container.
- Vertical rhythm. Consistent spacing between sections. Every gap is deliberate.
- Group by proximity. Related items close. Unrelated items far. Proximity is meaning.
- Empty is intentional. Whitespace is design, not leftover.
Spacing Scale
Use a consistent scale. Every value a multiple of a base unit.
| Size | Use |
|---|---|
| xs | Tightly related items (icon + label) |
| sm | List items, form fields |
| md | Content blocks, card padding |
| lg | Between sections, major groupings |
| xl | Page margins, hero breathing room |
| 2xl | Between major page areas |
The Test
Squint at the layout. Can you see structure from spacing alone?
If everything blurs together, there isn't enough space.
5. Focus & Hierarchy
Every view answers one question: what should I look at first?
Three Levels
| Level | Role | How |
|---|---|---|
| 1 | Primary focus | Largest, boldest, most contrast |
| 2 | Supporting | Smaller, lighter, secondary position |
| 3 | Details | Smallest, muted, peripheral |
No more than three levels on a single view. More than three creates noise.
Contrast for Attention
| Use Contrast When | Don't When |
|---|---|
| Guiding the eye to the primary | Every element demands attention |
| Separating interactive from static | Decoration without function |
| Highlighting state changes | Drawing attention for its own sake |
The Test
Cover everything except one element. Does the layout still communicate its purpose?
The element you'd keep is primary focus. Build the hierarchy around it.
6. Typography
Type serves reading. Every choice lowers effort.
Hierarchy
| Level | Purpose | Characteristics |
|---|---|---|
| Display | Page titles, heroes | Large, bold, minimal words |
| Heading | Section divisions | Clear weight contrast from body |
| Body | Content, descriptions | Optimized for sustained reading |
| Caption | Labels, metadata | Smaller, muted, never essential |
Rules
- One typeface family. Variety comes from weight, not font.
- Readable line length. 50–75 characters. Wider loses the eye.
- Generous line height. Body text: 1.5–1.7×.
- Weight for hierarchy, not emphasis. Bold is structure, not decoration.
- Left-align body text. Center only for short, isolated elements.
The Test
Read a full paragraph at intended size. Did your eyes flow without effort?
If you lost your place, adjust line height or width.
7. Color
Color communicates. Use it with purpose and restraint.
Palette Structure
| Role | Purpose | Usage |
|---|---|---|
| Surface | Background, containers | Most of the interface |
| Muted | Secondary text, borders | Supporting elements |
| Foreground | Primary text, icons | Content |
| Accent | The one earned color | CTAs, active states, highlights |
| Semantic | Status communication | Error/warning/success — always consistent |
Rules
- Accent is earned. One accent color, used sparingly — for the thing that shines.
- Muted is default. Most of the interface is neutral. Color is signal, not wallpaper.
- Semantic is sacred. Red means error. Amber means warning. Green means success. Never decorative.
- Dark and light. Both modes equally considered. Test both. Ship both.
The Test
Remove all color (grayscale). Does the hierarchy survive?
If yes, color is additive. If the layout falls apart, you depend on it too much.
8. Iconography & Illustration
Icons and illustrations follow the same discipline as type and color.
Rules
- Consistent stroke weight. One weight across the interface. Mixing thin and bold icons breaks cohesion.
- Match corner radius to the system. If the interface uses rounded corners, icons follow. Sharp UI, sharp icons.
- Outline by default. Filled to indicate state. Outline is neutral. Filled means active, selected, or toggled.
- Icons support, never replace. An icon next to a label is clarity. An icon alone is a guess.
- Illustration is earned. Use it for empty states, onboarding, and celebration — not decoration.
- One illustration style. Don't mix 3D with line art, or flat with hand-drawn. Pick one, commit.
The Test
Place all your icons side by side. Do they look like a family?
If not, the set needs consolidation.
9. Layout
Layout is invisible. The reader notices content, not the grid.
Rules
- Alignment creates trust. Same axis = related. Misalignment = broken.
- Grids are guardrails. Use them. Breaking the grid is intentional, never accidental.
- Predictable regions. Navigation, content, and context in the same place across every view.
- Progressive disclosure. Simple first. Complexity on demand.
- Responsive is not optional. Every size or it doesn't ship.
Content Density
| Density | When | Character |
|---|---|---|
| Sparse | Landing pages, onboarding, decisions | Maximum breathing room |
| Balanced | Content, documentation, settings | Comfortable reading |
| Dense | Data tables, dashboards, power tools | Efficiency over comfort |
Don't mix densities within the same region. Pick one dominant density per view.
Dense does not mean loud. Even in a data-heavy view, one thing leads.
10. Motion
Motion is communication, not decoration.
Stillness is the default. Motion is earned through purpose.
When to Move
| Move | Don't Move |
|---|---|
| Showing a state transition | Decorating a static element |
| Guiding attention to a new element | Entertaining the user |
| Providing feedback for an action | Filling empty space |
| Revealing content progressively | Looping without purpose |
Frequency Determines Animation
| How often the user sees it | Animation level |
|---|---|
| Once per session | Full, purposeful animation |
| Multiple times per day | Subtle or no animation |
| Hundreds of times per day | No animation at all |
Duration
| Interaction type | Duration |
|---|---|
| Micro-interactions (hover, tap) | 100–150ms |
| Dropdowns, tooltips, modals | 150–250ms |
| Page transitions | 200–400ms |
| Hero / marketing (exception) | 400–800ms |
Physics
- Spring over duration. Physics-based motion feels natural. Linear easing feels robotic.
- Ease-out for entrances. Elements arrive fast and settle.
- Ease-in for exits. Elements accelerate away.
- Never animate from zero. Start from 95% scale, not 0%. Things don't appear from nothing.
- Origin-aware. Animate from the trigger point. Set correct transform-origin.
Reduced Motion
Reduced motion is not optional. It is an accessibility requirement.
When the user requests less motion, honor it completely. No exceptions.
The Test
Remove all animation. Does the interface still make sense?
If yes, motion is additive. If something becomes confusing, animation is doing too much work.
11. Reading Flow
How the eye moves through content.
- Top-left is the anchor. Most important element starts there.
- Left-to-right, top-to-bottom. Follow natural order. Don't fight it.
- Scannable structure. Headers, bold text, whitespace create entry points.
- One column for reading. Multi-column for comparison, not prose.
- Visual landmarks. Every scroll-length needs a structural marker.
The Test
Track your eye across the page. Did it move smoothly start to end?
If it jumped, stalled, or circled — restructure.
12. Viewing Flow
How screens connect to each other.
- Transitions orient. Moving between views feels like turning a page, not teleporting.
- Context carries forward. The next screen references what the user just did.
- Back is always safe. Every forward action has a clear return.
- State is visible. The user always knows where they are, where they came from, where they can go.
The Test
Navigate three screens in sequence. At any point, are you lost?
If yes, add a breadcrumb, a title, or a transition that connects the views.
13. Format Guide
How to design each context. Do/Don't for quick reference.
Landing Pages
| Do | Don't |
|---|---|
| One hero statement, maximum contrast | Multiple competing headlines |
| Single primary CTA above the fold | Three CTAs fighting for attention |
| Sparse density, generous spacing | Packed layout with dense content |
| Progressive disclosure for details | Everything visible at once |
Dashboards
| Do | Don't |
|---|---|
| Primary metric is visually dominant | All metrics at equal weight |
| Dense but organized — clear groups | Dense and chaotic |
| Consistent card sizes within groups | Ad-hoc sizing |
| Muted by default, accent for alerts | Colorful by default |
Forms & Settings
| Do | Don't |
|---|---|
| One submit action, clearly primary | Multiple equally styled buttons |
| Group related fields with spacing | Flat list of unrelated fields |
| Labels above fields, left-aligned | Labels beside fields at narrow widths |
| Progressive disclosure for advanced | All options visible immediately |
Data Tables
| Do | Don't |
|---|---|
| Selected/active row highlighted | Everything at equal visual weight |
| Alternating subtle backgrounds | Dense grid with no differentiation |
| Sortable columns clearly indicated | Hidden sort functionality |
| Actions visible on hover or selection | Persistent action buttons per row |
Onboarding & Wizards
| Do | Don't |
|---|---|
| One step visible at a time | All steps visible simultaneously |
| Current step visually dominant | Step indicator more prominent than content |
| Clear forward progression | Ambiguous navigation |
| Celebrate completion briefly | No feedback on completion |
Empty States
| Do | Don't |
|---|---|
| Clear action to remedy the emptiness | Just say "nothing here" |
| Explain what will appear and how | Leave the user guessing |
| Use illustration sparingly | Large decorative illustration |
| Sparse, calm, inviting | Busy or frantic |
Error States
| Do | Don't |
|---|---|
| State what went wrong, plainly | Show raw error codes |
| Suggest the next action | Leave the user stranded |
| Use semantic color (red) sparingly | Paint the whole screen red |
| Keep surrounding UI stable | Flash or shake elements |
Modals & Dialogs
| Do | Don't |
|---|---|
| One decision per modal | Multiple unrelated actions |
| Brief entry animation, calm | Dramatic entrance effects |
| Backdrop dims but remains visible | Opaque backdrop hiding context |
| Clear dismiss path (X, escape, click outside) | Trapped modal with no obvious exit |
App Shells & Navigation
| Do | Don't |
|---|---|
| Navigation is predictable and stable | Navigation changes between views |
| Active state clearly indicated | No visual feedback on current page |
| Content area is the dominant region | Navigation as prominent as content |
| Collapse secondary nav when not needed | All navigation always expanded |
14. Accessibility
Accessibility is not a feature. It is a constraint — like gravity.
Rules
- Color is never the only signal. Pair color with shape, text, or icon. A colorblind user sees the same meaning.
- Contrast meets WCAG AA. 4.5:1 for body text, 3:1 for large text and UI elements. Test both modes.
- Focus is always visible. Every interactive element has a visible focus indicator. Keyboard users navigate without guessing.
- Touch targets are generous. Minimum 44×44px. Smaller is hostile.
- Screen readers see structure. Semantic HTML, meaningful alt text, ARIA only when HTML can't express it.
- Motion respects the user.
prefers-reduced-motionhonored completely. No exceptions. - Reading order matches visual order. Tab order follows layout. DOM order matches what the eye sees.
The Test
Navigate the entire interface with only a keyboard. Can you reach everything?
If not, something is inaccessible.
15. Quality Checklist
| Check | Question |
|---|---|
| Context | Did I identify what I'm designing? |
| One Thing Shines | What is the single dominant element? |
| Quiet Default | Is the interface quiet by default? |
| Space | Is there enough breathing room? |
| Hierarchy | Can I identify three clear levels? |
| Typography | Is text comfortable to read at length? |
| Color | Does it survive in grayscale? |
| Layout | Is everything aligned? Is density consistent? |
| Motion | Does it work without animation? |
| Reading Flow | Does the eye move smoothly start to end? |
| Viewing Flow | Does the user always know where they are? |
| Reduced Motion | Is reduced motion respected? |
| Responsive | Does it work at every size? |
| Accessibility | Can a keyboard-only user navigate everything? |
| Dark / Light | Are both modes equally considered? |
16. Quick Reference
Five Laws
- Space is syntax
- One thing shines
- Reduce, then reduce again
- Stillness is default
- Consistency trains the eye
The Mantra
Quiet by default. Intentional by design.
Emphasis Budget
One loud element per region. Two non-neutral colors per cluster. Soft is default. Solid is earned.
Tests
- Space: Squint. Can you see structure from spacing alone?
- Focus: Cover everything but one element. Is the purpose clear?
- Typography: Read a paragraph. Did your eyes flow?
- Color: Remove color. Does the hierarchy survive?
- Motion: Remove animation. Does the interface make sense?
- Reading: Track your eye. Did it move smoothly?
- Viewing: Navigate three screens. Do you know where you are?
The Guide declares. The Codex translates. The Words speak. The Sight shows.
Version 1.0 · February 2026
Author: Alexandru Mareș · allemaar.com
The YounndAI philosophy and The Sight are the personal and intellectual work of Alexandru Mareș.