Visual Language
This document defines the visual identity of MHMD Studio beyond design tokens and components. It establishes the artistic direction, compositional rules, imagery, visual storytelling, and overall aesthetic philosophy that give the brand its distinctive appearance.
Document Metadata
| Property | Value |
|---|---|
| Document | Visual Language |
| Version | 1.0 |
| Status | Active |
| Owner | Mohammed El Maachi |
| Last Updated | July 2026 |
Purpose
The Design System defines how interfaces are built.
This document defines how they should feel.
Every visual decision should reinforce a cohesive identity that remains recognizable across products, platforms, and future expansions.
Visual Identity Statement
MHMD Studio should feel like the intersection of:
- An editorial publication
- A premium product company
- A design atelier
- A software engineering firm
- An AI research laboratory
The interface should communicate intelligence through restraint rather than spectacle.
Users should experience confidence, precision, and craftsmanship from the first interaction.
Core Aesthetic
The visual language can be summarized with the following attributes:
- Editorial
- Timeless
- Architectural
- Quiet
- Technical
- Human
- Sophisticated
- Spacious
- Intentional
- Premium
The interface should never feel playful without purpose or minimal to the point of sterility.
Emotional Objectives
Visitors should perceive MHMD Studio as:
- Trustworthy
- Highly competent
- Thoughtful
- Modern
- Calm
- Detail-oriented
- Innovative without appearing experimental
- Premium without appearing exclusive
The emotional response should emerge from execution rather than decorative effects.
Visual Narrative
Every page should communicate a progression.
A visitor should naturally move through:
- Curiosity
- Understanding
- Confidence
- Interest
- Action
Visual hierarchy should support this journey without relying on aggressive calls to action.
Editorial Influence
Editorial design is a primary source of inspiration.
Characteristics include:
- Strong typographic hierarchy
- Generous margins
- Structured reading rhythm
- Clear content sections
- Carefully balanced whitespace
- Elegant proportions
Content should feel authored rather than assembled.
Architectural Influence
Architecture inspires structure rather than appearance.
Apply architectural thinking through:
- Modular layouts
- Consistent proportions
- Repetition with variation
- Structural clarity
- Balanced visual weight
Every section should feel intentionally constructed.
Minimalism
Minimalism should be functional.
Do not remove useful information simply to create empty space.
Instead:
- Remove unnecessary decoration.
- Remove duplicate actions.
- Remove visual noise.
- Remove redundant explanations.
Minimalism is achieved through refinement rather than subtraction alone.
Visual Hierarchy
Hierarchy should always emerge in this order:
- Typography
- Scale
- Position
- Spacing
- Contrast
- Color
- Motion
If hierarchy depends primarily on color or animation, redesign the layout.
Layout Rhythm
Every page should establish a predictable visual rhythm.
Alternate between:
- Dense content
- Breathing space
- Rich visual sections
- Quiet reading areas
Avoid long sequences of visually identical sections.
Variation should feel deliberate.
Section Composition
Each section should have one dominant purpose.
Possible compositions include:
- Text + Illustration
- Text + Diagram
- Text + Card Grid
- Full-width Hero
- Feature Columns
- Editorial Article
- Testimonial Block
- Call to Action
Avoid mixing unrelated patterns within a single section.
Grid Philosophy
The grid provides consistency without limiting creativity.
Layouts should align to the underlying grid while allowing asymmetry where it improves emphasis.
Perfect symmetry is not required.
Intentional balance is.
White Space
Whitespace communicates confidence.
It improves:
- Readability
- Focus
- Hierarchy
- Perceived quality
Never reduce spacing solely to display more content.
Negative space is an active design element.
Scale
Scale communicates importance.
Large typography should introduce ideas.
Medium typography should organize ideas.
Small typography should support ideas.
Avoid large decorative elements that compete with content.
Visual Balance
Balance visual weight across every viewport.
Consider:
- Typography
- Images
- Empty space
- Color
- Interaction points
No section should feel unintentionally heavier than the next.
Contrast
Contrast should be achieved primarily through:
- Size
- Weight
- Spacing
- Position
Use color contrast only where necessary.
Avoid interfaces that rely on high saturation to attract attention.
Surface Philosophy
The interface consists of distinct layers:
Level 0
Canvas
Level 1
Content
Level 2
Interactive surfaces
Level 3
Temporary overlays
Every layer should remain visually distinct without excessive shadows.
Depth
Depth should feel subtle.
Use:
- Layer separation
- Blur
- Soft shadows
- Contrast
- Elevation
Avoid exaggerated depth effects.
The interface should remain visually calm.
Visual Consistency
Consistency should exist across:
- Cards
- Buttons
- Forms
- Typography
- Icons
- Layouts
- Motion
- Imagery
A visitor should immediately recognize a MHMD Studio interface regardless of the specific product.
Deliberate Restraint
Whenever uncertain, remove rather than add.
Ask:
Does this improve communication?
If not, remove it.
Every additional visual element introduces maintenance, cognitive load, and inconsistency risk.
Relationship To Other Documents
This document establishes the artistic direction.
Implementation details are defined in:
10_design_system.md12_motion_language.md13_content_guidelines.md
Related Documents
END OF PART 1
The next part will define:
- Illustration language
- Photography direction
- Iconography
- Texture and material language
- Glassmorphism usage
- Lighting
- Color psychology
- Imagery composition
- Portfolio presentation
- Case study visuals
- Do/Don't examples
- AI implementation rules
Illustration Language
Illustration is not decoration.
Illustrations establish atmosphere, emotion, and identity while the interface communicates functionality.
Every illustration should support the editorial nature of MHMD Studio.
Illustration Style
Preferred characteristics:
- Painterly
- Atmospheric
- Cinematic
- Editorial
- Organic
- Hand-crafted
- Textured
- Softly lit
Illustrations should feel like scenes from a thoughtfully designed publication rather than marketing assets.
Subject Matter
Preferred subjects include:
- Natural landscapes
- Architectural spaces
- Urban skylines
- Botanical elements
- Abstract environments
- Light and shadow
- Quiet interiors
- Minimal geometric forms
Illustrations should evoke reflection rather than excitement.
Color Palette
Illustrations may contain richer colors than the interface itself.
However:
- Colors should remain harmonious.
- Saturation should be controlled.
- Strong color should occupy limited visual area.
- Palette should complement the neutral interface.
Composition
Illustrations should:
- Guide the eye naturally.
- Leave room for typography.
- Avoid excessive visual noise.
- Support asymmetrical layouts.
- Maintain clear focal points.
Typography should never fight the illustration.
Cropping
Avoid placing important visual elements against image edges.
Allow generous negative space.
Illustrations should adapt gracefully to multiple screen sizes.
Texture
Visible brush texture is encouraged.
Avoid:
- Plastic rendering
- Hyper-realistic CGI
- Glossy effects
- Artificial perfection
Texture should communicate craftsmanship.
Photography
Photography should be used only when it communicates genuine information.
Preferred subjects:
- Products
- Interfaces
- Workspaces
- Sketches
- Physical prototypes
- Devices
- Creative process
Avoid decorative photography.
Photography Style
Images should appear:
- Natural
- Softly lit
- Balanced
- Authentic
- Editorial
Avoid:
- Heavy filters
- HDR processing
- Oversaturation
- Artificial poses
Lighting
Preferred lighting:
- Natural daylight
- Soft directional light
- Window light
- Gentle shadows
Avoid:
- Harsh flash
- Neon lighting
- High contrast commercial lighting
Lighting should reinforce calmness.
Iconography
Icons support comprehension.
They never replace language.
Preferred characteristics:
- Thin strokes
- Rounded joins
- Geometric consistency
- Minimal detail
Primary library:
Lucide
Custom icons should visually match Lucide.
Icon Usage
Icons should accompany:
- Navigation
- Buttons
- Status
- Metadata
- Empty states
- Alerts
Avoid decorating headings with icons.
Material Language
The interface should feel composed of:
- Paper
- Glass
- Air
- Light
Not:
- Plastic
- Chrome
- Liquid
- Metallic gradients
Material perception should remain subtle.
Glassmorphism
Glass effects should communicate elevation.
Allowed:
- Navigation
- Floating overlays
- Hero cards
- Temporary panels
Avoid:
- Glass buttons
- Glass forms
- Glass cards throughout the interface
Glass should remain an accent.
Shadows
Shadows communicate depth.
They should remain:
- Soft
- Diffuse
- Minimal
Avoid:
- Hard shadows
- Long shadows
- Colored shadows
Elevation should primarily come from spacing rather than darkness.
Borders
Borders should define structure.
Preferred:
- Thin
- Neutral
- Consistent
Avoid decorative borders.
Color Psychology
Neutral colors communicate:
- Confidence
- Precision
- Professionalism
Blue communicates:
- Trust
- Intelligence
- Interaction
Green communicates:
- Success
- Completion
Orange communicates:
- Caution
Red communicates:
- Error
- Destructive actions
Use emotional colors intentionally.
Portfolio Presentation
Projects should be presented as editorial stories rather than galleries.
Every project should communicate:
- Context
- Problem
- Thinking
- Process
- Outcome
- Reflection
The interface should encourage reading rather than scanning.
Case Study Visuals
Every case study should include:
- Hero image
- Overview
- Design process
- Visual system
- Components
- Results
- Lessons learned
Avoid image-only portfolios.
Visual Storytelling
Every page should communicate a beginning, middle, and conclusion.
Visitors should naturally progress without feeling directed.
Visual hierarchy should create momentum.
Empty Space
Allow important sections to breathe.
Do not fill every gap with decorative graphics.
Silence is part of the visual language.
Decorative Elements
Decorative elements should be rare.
When used, they should reinforce:
- Hierarchy
- Identity
- Atmosphere
Never decoration for decoration's sake.
Gradients
Gradients should remain subtle.
Preferred:
- Atmospheric
- Soft
- Low saturation
Avoid:
- Rainbow gradients
- Neon gradients
- Trend-driven backgrounds
Patterns
Patterns should be:
- Minimal
- Low contrast
- Structural
Avoid distracting backgrounds.
Visual Rhythm
Alternate between:
- Large visuals
- Quiet reading
- Rich storytelling
- Minimal sections
This creates pacing throughout the experience.
Brand Recognition
A visitor should recognize MHMD Studio without seeing the logo.
Recognition should come from:
- Typography
- Composition
- Spacing
- Illustration style
- Motion
- Editorial structure
Identity should emerge from the complete system.
Visual QA Checklist
Before approving a page verify:
- Illustration supports content.
- Typography dominates hierarchy.
- Whitespace feels intentional.
- Visual balance is maintained.
- Images are high quality.
- Icons remain consistent.
- Motion supports understanding.
- Colors remain restrained.
- Decorative elements have purpose.
AI Implementation Rules
AI systems generating visuals must:
- Follow the established illustration style.
- Respect the restrained color palette.
- Preserve editorial composition.
- Avoid stock imagery when possible.
- Prefer custom illustrations.
- Use icons consistently.
- Maintain generous whitespace.
- Keep visual hierarchy typography-first.
Never prioritize novelty over consistency.
Final Principle
The visual language should not seek attention.
It should earn attention through thoughtful execution.
Visitors should remember the experience rather than individual visual effects.