malomatia

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/malomatia.com -->
<!-- Extracted: 2026-09-13T11:08:29.857Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "malomatia"
description: "A sophisticated, authoritative digital presence that blends national pride with cutting-edge technological expertise. The brand projects a sense of secure, forward-looking professionalism, balancing formal corporate gravity with accessible, modern design clarity."
colors:
  primary: "#bd0022"
  tertiary: "#7a00df"
  neutral: "#111111"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#111111"
  border: "#adadad"
  link: "#111111"
  on-surface-dark: "#111111"
typography:
  headline-lg:
    fontFamily: "Manrope"
    fontSize: "69px"
    fontWeight: "900"
    lineHeight: "86.25px"
  headline-sm:
    fontFamily: "Manrope"
    fontSize: "23px"
    fontWeight: "500"
    lineHeight: "26.8332px"
  body-md:
    fontFamily: "Manrope"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "30px"
rounded:
  sm: "15px"
  md: "40px"
  lg: "70px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#bd0022"
    textColor: "#ffffff"
    rounded: "70px"
    padding: "6px 20px 7px"
    fontSize: "14px"
    fontWeight: "700"
    borderColor: "#ffffff"
  button-outline:
    textColor: "#333333"
    rounded: "15px"
    padding: "0px"
    fontSize: "14px"
    fontWeight: "500"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#5091d9"
    rounded: "0px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "500"
    borderColor: "#5091d9"
---

# malomatia — Design System

## Overview

The design language for malomatia is defined by a rigorous synthesis of institutional authority and technological precision. Drawing from the archetypes of The Ruler and The Sage, the interface projects stability, expertise, and national pride without succumbing to traditional corporate stiffness. The aesthetic mirrors the structural clarity of SAP and the polished professionalism of Qatar Airways, establishing a digital environment that feels both secure and forward-looking. Every element serves a functional purpose, eliminating decorative noise in favor of clear, accessible information architecture. The atmosphere is calm yet commanding, ensuring users feel confident in the reliability of the services provided.

This system explicitly rejects chaotic layouts, overly playful interactions, and ambiguous visual cues. It does not rely on trendy micro-interactions for engagement but instead builds trust through consistency, precision, and high-contrast clarity. The design is modern and tech-forward, utilizing clean lines and ample whitespace to guide the user’s eye efficiently. It balances formal corporate gravity with the approachability of modern SaaS platforms, similar to Microsoft Azure’s enterprise-grade reliability. The result is a sophisticated digital presence that communicates competence and integrity, ensuring that the user experience is as robust and dependable as the brand itself. The visual tone is serious but not somber, professional but not cold, creating a space where complex technological expertise is presented with undeniable clarity and ease of use.

**Key characteristics:**

- Vibe — authoritative, secure, modern, professional, national, tech-forward
- Archetypes — The Ruler, The Sage
- Comparable to — Accenture, SAP, Microsoft Azure, Qatar Airways
- Design era — contemporary-corporate
- Emotional tone — trustworthy-premium
- Target audience — C-suite executives, government officials, and enterprise decision-makers in Qatar and the broader GCC region seeking reliable digital transformation and cybersecurity solutions.
- Visual energy — 7/10 (high-energy/bold)

## Colors

The palette centers on #bd0022, a bold crimson that conveys urgency, strength, and national identity, serving as the primary signal for critical actions and brand recognition. This is grounded by #ffffff surfaces, which provide a sterile, high-contrast canvas that enhances readability and projects clinical precision. The stark contrast between the deep red and pure white eliminates visual ambiguity, reinforcing a sense of security and decisive action. This minimalist approach ensures that color is used strategically to highlight importance rather than decorate, aligning with the authoritative and secure character of the brand.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#bd0022` | Firebrick |
| accent / tertiary | `#7a00df` | Dark Violet |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#111111` | Near-Black |
| border | `#adadad` | Dark Silver |
| link | `#111111` | Near-Black |
| muted | `#111111` | Near-Black |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| text | `#111111` | Near-Black |

## Typography

The type system relies exclusively on Manrope, a geometric sans-serif that offers exceptional legibility and a modern, tech-forward aesthetic. Its clean lines and neutral geometry support the brand’s authoritative yet accessible tone, ensuring that complex information is digestible at any scale. The hierarchy is established through weight and size variations rather than font changes, maintaining visual consistency and structural integrity. This mono-typographic approach reduces cognitive load and reinforces the brand’s commitment to clarity and precision, making it ideal for dense data presentations and professional interfaces.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Manrope | body | google-fonts | 500, 600, 700 |
| Manrope | heading | google-fonts | 500, 600, 900 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | Manrope | 69px | 900 | 86.25px | — |
| Heading 4 | Manrope | 23px | 500 | 26.8332px | — |
| Body | Manrope | 16px | 500 | 30px | — |

### Conventions

- Heading case — title-case
- Body line-height — 30px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgba(0, 0, 0, 0.07) 0px 3px 49px 0px` |
| dropdown | `rgba(255, 255, 255, 0.3) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.08) 0px 10px 30px 0px` |
| button | `rgba(191, 151, 255, 0.24) 0px 0px 12px 0px inset` |

## Shapes

Border-radius scale:

- `sm` — 15px
- `md` — 40px
- `lg` — 70px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#bd0022`
- Text — `#ffffff`
- Radius — `70px`
- Padding — `6px 20px 7px`
- Font size — `14px`
- Font weight — `700`
- Border — ` solid #ffffff`
- Sample copy — "HomeHome"

**Outline**

- Text — `#333333`
- Radius — `15px`
- Padding — `0px`
- Font size — `14px`
- Font weight — `500`

**Secondary**

- Background — `#ffffff`
- Text — `#5091d9`
- Radius — `0px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `500`
- Border — ` solid #5091d9`
- Sample copy — "About Us"

## Do's and Don'ts

### Do

- Use Manrope font exclusively: weight 900 for H1/H2 headings, 700 for H3/H4, and 500/600 for body text.
- Apply title-case capitalization to all headings; use sentence case for body copy.
- Set body text line-height to exactly 30px for optimal readability.
- Primary Call-to-Action buttons must use #bd0022 background, #ffffff text, 70px border-radius (pill shape), and 6px 20px 7px vertical padding.
- Secondary buttons should use #ffffff background, #5091d9 text, 0px border-radius (sharp corners), and a 1px solid #5091d9 border.
- Outline buttons should use transparent background, #333333 text, 15px border-radius, and 0px padding.
- Apply subtle multi-layer shadows to dropdowns and floating elements: rgba(0,0,0,0.07) 0px 3px 49px 0px and inset highlights rgba(255,255,255,0.3) 0px 1px 1px 0px.
- Maintain a clean, flat aesthetic with no gradients; use #bd0022 (Primary Red) and #7a00df (Accent Purple) sparingly as highlights against a #ffffff background.
- Keep copy formal and serious (9/10 scale), avoiding emojis and rare exclamations; use parallelism and juxtaposition in headlines.

### Don't

- Do not use gradients anywhere in the interface; the design is strictly flat.
- Do not use serif fonts; stick exclusively to Manrope.
- Do not use sentence case for headings; the brand strictly uses title-case.
- Do not apply shadows to primary buttons; shadows are reserved for dropdowns and cards.
- Do not use playful or casual language; maintain a formal, matter-of-fact tone.
- Do not use emoji in any marketing copy or UI elements.
- Do not use sharp corners (0px radius) on primary CTAs; they must be fully rounded (70px).
- Do not use dark mode text color #111111 on light mode backgrounds; reserve dark mode text for dark backgrounds only.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 8/10 | casual |
| Playful ↔ Serious | 9/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 1/10 | respectful |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 14 words
- Vocabulary — advanced
- Jargon — heavy
- CTA style — simple directive verbs
- Rhetorical devices — parallelism, repetition, juxtaposition

### Sample copy

> Digital Transformation Built for Qatar's Future

> We help public and private sector clients improve performance with trusted technology services.

> National Trusted. World-Class Cybersecurity

> We drive Qatar’s digital transformation with secure, scalable digital solutions.

> We are Qatar’s only IDC‑recognized MSSP, delivering resilient 24/7 cybersecurity

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/malomatia.com) | 100% |
| favicon | — | png | [link](brands/malomatia.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/malomatia.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/malomatia.com/logo-2.png) | 95% |
| primary | — | svg | [link](brands/malomatia.com/logo-3.svg) | 85% |
| primary | — | svg | [link](brands/malomatia.com/logo-4.svg) | 85% |
| secondary | — | svg | [link](brands/malomatia.com/logo-5.svg) | 85% |

## Sources

- Live brand page — https://extractvibe.com/brand/malomatia.com
- Raw JSON — https://extractvibe.com/api/brand/malomatia.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/malomatia.com/design.md
- Extracted — 2026-09-13T11:08:29.857Z
- Generator — ExtractVibe vv1
- Quality score — 90/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md