🎨 Color Palette

MonDesa uses a soft, nature-inspired color palette that evokes trust, safety, and environmental consciousness.

Primary Colors

Primary Blue

#A3C6D4

rgb(163, 198, 212)

Primary Green

#B4C9A9

rgb(180, 201, 169)

Primary Beige

#D9BBA0

rgb(217, 187, 160)

Accent Blue

#9FC1E0

rgb(159, 193, 224)

Neutral Colors

Text Primary

#1a1a1a

Text Secondary

#666666

Background

#f5f5f5

White

White/Paper

#ffffff

Gradient Examples

Primary Gradient (45deg)

Header Gradient (135deg)

                /* Primary Gradient */
                background: linear-gradient(45deg, #A3C6D4, #B4C9A9);

                /* Header Gradient */
                background: linear-gradient(135deg, #A3C6D4 0%, #B4C9A9 100%);

                /* Text Gradient */
                background: linear-gradient(45deg, #A3C6D4, #B4C9A9);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            

📝 Typography

MonDesa uses two primary font families for a modern, professional look.

Font Families

Poppins (Headings)

Used for headings, titles, and emphasis. Weights: 400, 500, 600, 700

IBM Plex Sans (Body)

Used for body text, descriptions, and UI elements. Weights: 400, 500, 600

Type Scale

Heading 1 - 3rem

Heading 2 - 2rem

Heading 3 - 1.5rem

Heading 4 - 1.2rem

Body Large - 1.1rem

Body Regular - 1rem

                /* Import Fonts */
                @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Poppins:wght@400;500;600;700&display=swap');

                /* Typography Usage */
                h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; }
                body, p, span { font-family: 'IBM Plex Sans', sans-serif; }
            

🎯 Brand Assets

All brand assets are hosted at mondesa.org and available for use in applications.

Logos

Main Logo (SVG)

mondesa.org/logo-mondesa.svg

Extended Logo

mondesa.org/extended_logo.svg

Logo PNG

mondesa.org/logo-mondesa.png

Logo Black

mondesa.org/logo-mondesa-black.png

Project Images

e-NOE Project

mondesa.org/enoe.jpg

Team Members

Arthur Rocha

mondesa.org/arthur-rocha.jpg

Giovane Moretto

mondesa.org/giovane-moretto.jpg

Pedro Teodoro

mondesa.org/pedro-teodoro.jpg

Samuel Rubens

mondesa.org/samuel-rubens.png

Saulo Matos

mondesa.org/saulo-matos.jpg

🧩 Component Patterns

Buttons

                /* Primary Button */
                .btn-primary {
                background: linear-gradient(45deg, #A3C6D4, #B4C9A9);
                color: white;
                padding: 12px 32px;
                border-radius: 8px;
                transition: all 0.3s ease;
                }

                .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(163, 198, 212, 0.4);
                }
            

Cards

Project Card

Cards use subtle shadows and smooth hover transitions for a modern feel.

                /* Card Style */
                .card {
                background: white;
                border-radius: 16px;
                padding: 24px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                transition: all 0.3s ease;
                }

                .card:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
                }
            

Spacing System

xs: 12px

sm: 16px

md: 24px

lg: 32px

xl: 48px

Token	Value	Usage
`xs`	12px	Tight spacing, mobile padding
`sm`	16px	Component internal spacing
`md`	24px	Section spacing, card padding
`lg`	32px	Large component gaps
`xl`	48px	Section separators

Border Radius

Small: 4px

Medium: 8px

Large: 12px

XL: 16px

🎨 Icons

MonDesa uses Lucide React icons with consistent styling.

Icon Library

ArrowRight

Code

Mountain

Radio

Wifi

Zap

Activity

Users

                // Import from lucide-react
                import { ArrowRight, Mountain, Radio, Code } from 'lucide-react';

                // Usage
                <ArrowRight size={24} color="#A3C6D4" />
                <Mountain size={32} strokeWidth={1.5} />
            

📱 Responsive Breakpoints

Breakpoint	Value	Usage
`xs`	0px	Mobile devices
`sm`	600px	Small tablets
`md`	960px	Tablets, small laptops
`lg`	1280px	Desktops
`xl`	1920px	Large screens

                // Material-UI Breakpoint Usage
                sx={{
                py: { xs: 12, md: 16 }, // padding-y: 12px on mobile, 16px on desktop
                fontSize: { xs: '1rem', md: '1.2rem' }
                }}
            

💡 Design Principles

1. Nature-Inspired & Trustworthy

Use soft, earthy tones that evoke environmental consciousness and safety. Avoid harsh colors or aggressive contrasts.

2. Clean & Modern

Maintain generous white space, use subtle shadows, and prefer rounded corners (12-16px) for a contemporary feel.

3. Smooth Interactions

All interactive elements should have smooth transitions (0.3s ease). Hover states should include subtle lifts (translateY) and shadow changes.

4. Accessibility First

Ensure sufficient color contrast (4.5:1 minimum for text). Use clear visual hierarchies and semantic HTML.

5. Consistent Spacing

Use the spacing system consistently. Mobile layouts (xs) use tighter spacing, desktop (md+) uses more generous padding.

                /* Example: Hover State Pattern */
                .interactive-element {
                transition: all 0.3s ease;
                }

                .interactive-element:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
                }
            

📋 Usage Guidelines

Logo Usage

Always use the SVG version when possible for crisp rendering at any size
Maintain minimum clear space of 20px around the logo
Don't stretch, distort, or alter logo colors
Use the black version only on light backgrounds

Color Application

Primary gradient should be used for hero sections and key CTAs
Individual project colors (#A3C6D4, #B4C9A9, #D9BBA0, #9FC1E0) can be used for project cards and feature highlights
Use 15% opacity versions for subtle backgrounds: rgba(163, 198, 212, 0.15)
Text should always be readable against backgrounds (use contrast checkers)

Component Composition

Cards should have borderRadius: 16px and elevation on hover
Buttons use borderRadius: 8px with gradient backgrounds
Form inputs should have borderRadius: 8px and clear focus states
Section padding: py: { xs: 12, md: 16 } (vertical spacing)

⚡ Quick Reference

Essential Code Snippets

Theme Configuration (Material-UI)

                const theme = createTheme({
                palette: {
                primary: {
                main: '#A3C6D4',
                light: '#B4E3F4',
                dark: '#7FA8B8',
                },
                secondary: {
                main: '#B4C9A9',
                },
                text: {
                primary: '#1a1a1a',
                secondary: '#666666',
                },
                background: {
                default: '#f5f5f5',
                paper: '#ffffff',
                },
                },
                typography: {
                fontFamily: "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
                h1: { fontFamily: "'Poppins', sans-serif" },
                h2: { fontFamily: "'Poppins', sans-serif" },
                h3: { fontFamily: "'Poppins', sans-serif" },
                h4: { fontFamily: "'Poppins', sans-serif" },
                },
                shape: {
                borderRadius: 8,
                },
                });
            

Common Card Pattern

                <Card
                elevation={0}
                sx={{
                borderRadius: 4,
                bgcolor: 'background.paper',
                transition: 'all 0.3s ease',
                '&:hover': {
                transform: 'translateY(-5px)',
                boxShadow: '0 8px 20px rgba(0,0,0,0.1)',
                }
                }}
                >
                <CardContent>
                {/* Content */}
                </CardContent>
                </Card>
            

Gradient Text

                <Typography
                variant="h2"
                sx={{
                background: 'linear-gradient(45deg, #A3C6D4, #B4C9A9)',
                backgroundClip: 'text',
                WebkitBackgroundClip: 'text',
                color: 'transparent',
                }}
                >
                Gradient Heading
                </Typography>
            

Ready to Build with MonDesa?

Use this design system to maintain brand consistency across all MonDesa projects.

For questions or clarifications, reach out to the development team.