Brand Guidelines
The visual language of Modern Zen
Our brand embodies clarity, calm, and precision. These guidelines ensure consistency across all touchpoints, reflecting the thoughtful approach we bring to everything we do.
01 / Logo
Our Mark
The Modern Zen logo combines a distinctive geometric mark with a refined serif wordmark. The architectural symbol - a cross atop an arch - represents structure meeting openness, precision balanced with possibility.
Primary Lockup
Icon on Light
Icon on Dark
Logo on Dark
Clear Space
Maintain a minimum clear space around the logo equal to the height of the icon mark. This ensures the logo has room to breathe and maintains its visual impact.
Usage Guidelines
02 / Color
Color Palette
Our color system is built on teal and emerald tones, grounded by a warm stone neutral palette. Colors are used intentionally to guide attention and convey meaning.
Primary
The foundation of our visual identity
Teal 400
Hover states, accents
Teal 500
Primary actions, links
Teal 600
Section accents
Teal 700
Labels, emphasis text
Secondary
Supporting tones for depth and dimension
Emerald 400
Gradient accents
Emerald 500
Team imagery
Emerald 600
Hero gradients
Emerald 900
Dark sections
Neutral
Backgrounds, text, and structural elements
Stone 50
Page backgrounds
Stone 100
Subtle backgrounds
Stone 200
Borders, dividers
Stone 300
Footer text
Stone 600
Body text
Stone 800
Input backgrounds
Stone 900
Footer, dark sections
Accent
Sparingly used for differentiation
Blue 600
Systems Design icon
Amber 600
Venture Formation icon
Rose 600
Narrative icon
03 / Typography
Type System
Our typography pairs the warmth of Lora with the clarity of Inter. This combination reflects our blend of timeless expertise and modern precision.
Headings
Lora
Serif typeface for headlines and display text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Body
Inter
Sans-serif typeface for body text and UI
Large body text for introductions and emphasis. Used sparingly to draw attention to key messages.
Standard body text for paragraphs and general content. Optimized for readability at various screen sizes.
Small text for secondary information, captions, and metadata. Maintains legibility while reducing visual weight.
Typographic Details
Label Style
UPPERCASE WITH 0.2EM TRACKING
Used for section labels and categories
Line Height
Body text uses relaxed line height (1.625) for comfortable reading
Headings use tighter leading (1.1)
Font Weights
Regular / Medium / Semibold
Limited weights for consistency
04 / Principles
Design Principles
These principles guide every design decision. They ensure our visual language remains coherent and true to the Modern Zen philosophy.
Clarity
Every element serves a purpose. We remove the unnecessary to reveal the essential. Clean layouts and generous whitespace allow content to breathe.
Balance
Visual weight is distributed thoughtfully across compositions. Asymmetry is intentional, creating dynamic tension while maintaining harmony.
Subtlety
Refinement over flash. Soft gradients, gentle shadows, and understated transitions create sophistication without demanding attention.
Consistency
A unified visual language builds trust. Colors, typography, and spacing follow predictable patterns that users learn intuitively.
Intentionality
Nothing exists by accident. Every design decision—color, spacing, motion—is deliberate and serves the user experience.
Calm
The zen in Modern Zen. Our visual language promotes focus and reduces cognitive load. Complexity is managed, never overwhelming.
05 / Components
UI Elements
Core interface components follow consistent styling patterns. These examples demonstrate proper usage of color, spacing, and interaction states.
Buttons
Form Inputs
Cards
01
Card Title
Cards feature subtle borders that strengthen on hover. The teal accent color indicates interactivity.
Links & Text
Standard text with an inline link that uses teal.
SECTION HEADER STYLE
Italic text for subtitles and descriptions
06 / Visual Elements
Gradients & Imagery
Abstract gradients serve as placeholders and decorative elements. They reinforce our color palette while adding visual interest without distraction.
Hero Gradient
from-teal-200 via-teal-400 to-emerald-600
Team Imagery
from-emerald-400 via-teal-500 to-green-600
Dark Sections
from-emerald-900 via-teal-900 to-stone-900
Corner Radius System
Sharp corners
Logo mark
rounded-lg
Cards, inputs
rounded-2xl
Images
rounded-3xl
Hero elements
Consistency builds trust
These guidelines ensure that every touchpoint with Modern Zen feels cohesive and intentional. When in doubt, choose simplicity, clarity, and restraint.
Questions about brand usage? Contact us at [email protected]