To maintain a consistent and professional visual style across projects, we follow specific design standards when selecting fonts, colors, and layout styles. These choices are based on the business type, client needs, accessibility, and platform compatibility.

1. Font Selection by Business Type

Below is a guideline for choosing fonts based on industry and brand tone. These fonts are chosen for their readability, brand personality, and compatibility with Wix, Framer, and Figma.

Business Type Font Style Preference Common Fonts Used Notes
Photography / Creative Elegant, Script Playfair Display,Dancing Script,Lora Use soft curves, strong image focus
Corporate / Consulting Professional, Sans-serif Poppins,Lato,Roboto,Inter Clean, clear, and trustworthy
Fashion / Lifestyle Modern, Thin Serif Cormorant,Bodoni Moda,Libre Baskerville Add luxury and trendiness
Fitness / Health Bold, Energetic Bebas Neue,Montserrat,Anton Strong emphasis, attention grabbing
Beauty / Skincare Minimal, Soft Serif Quicksand,Jost,Playfair Display Use pastel colors with soft rounded fonts
Restaurant / Food Playful, Rounded Pacifico,Baloo,Comfortaa Pairs well with colorful, warm palettes
Education / Courses Serious, Clear Open Sans,Merriweather,PT Sans Legible, neutral, professional
Technology / SaaS Clean, Modern Inter,Space Grotesk,DM Sans Prioritize readability and UI clarity
Real Estate Elegant, Serif/Sans-serif DM Serif Text,Nunito,Poppins Balance of professionalism & elegance

Tips : ⭐ Always test font weights (light/regular/bold) across screen sizes to ensure readability.

2. Color Palette Strategy – The 1:6:9 Method

We use a 1:6:9 color ratio strategy for creating modern, well-balanced UIs. This helps in building a visually engaging layout without overwhelming the user.

Role Count Purpose Example Colors
Primary Color 1 Main brand color, used in CTAs & highlights #CD1B17, #0A66C2, #FF5722
Secondary Colors 6 Accent colors used for variety and depth #F2F2F2, #333333, #999999, #FFD700, #F5F5F5, #404040
Neutral Shades 9 Backgrounds, text, dividers, card fills #FFFFFF, #F8F8F8, #E5E5E5, #CCCCCC, #B3B3B3, #808080, #666666, #444444, #000000

3. Grid & Layout System

We use a 12-column grid (for web) and 4/8 spacing system for consistency across projects.

Device Breakpoint Grid Columns Notes
Desktop ≥ 1440px 12 columns 32px outer margins
Tablet 768px–1024px 8 columns Adaptive layout
Mobile ≤ 768px 4 columns Stacked components

4. Typography Scale

All projects should follow this consistent typography scale:

Text Style Size Line Height Usage
Heading 1 48px 1.2 (120%) Main headlines
Heading 2 36px 1.25 (125%) Section headers
Heading 3 24px 1.3 (130%) Sub-sections
Body 16px 1.5 (150%) Main content
Caption 12px 1.4 (140%) Auxiliary text

5. Component Naming & File Structure

For better organization and collaboration:

6. Accessibility Standards