elmonadi mourad

Generated Nov 2, 2026

DESIGN.md for maroc.ma

maroc.ma/fr16 colors6 componentsmontserrat Bold + Cairo Regular

Remix

12 screenshots captured· maroc.ma

1 / 12 · Portail officiel du Maroc - Institutions, e-services, patrimoine | Maroc.ma · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Maroc
description: |
  Maroc.ma's design system embodies official digital governance with cultural
  dignity. The visual identity balances formal authority with modern
  accessibility, grounding itself in Morocco's national palette of deep blues
  and burgundy while maintaining clean, minimal surfaces. The atmosphere is
  professional yet approachable—layered gradients and deep navy sections provide
  visual hierarchy and gravitas, while crisp white cards and generous whitespace
  ensure readability and trust. The system prioritizes clarity and institutional
  confidence, using colour blocking rather than shadows for depth, creating a
  sense of structured authority suitable for a national portal. Typography is
  confident and bold, with generous line heights supporting multilingual content
  (French, Arabic, and English readability).
source:
  url: "https://maroc.ma/fr"
  pagesAnalyzed: 6
  extractedAt: 2026-11-02
  tokensMeasured: true
colors:
  primary: "#3977E4"
  accent: "#335AB7"
  link: "#0D6EFD"
  canvas: "#FFFFFF"
  surface: "#072F75"
  surface-alt: "#0F1B5C"
  on-primary: "#FFFFFF"
  ink: "#111111"
  body: "#212529"
  muted: "#333333"
  faint: "#404040"
  accent-1: "#4A5464"
  accent-2: "#0051C3"
  accent-3: "#BB0A21"
  accent-4: "#D4DEF0"
  accent-5: "#1C2E55"
  neutral-1: "#000000"
typography:
  display:
    fontFamily: -apple-system
    fontSize: 60px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0px
  heading-xxl:
    fontFamily: "montserrat Bold"
    fontSize: 38px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: 0px
  heading-xl:
    fontFamily: "montserrat Bold"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-lg:
    fontFamily: "montserrat Bold"
    fontSize: 25px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-md:
    fontFamily: "montserrat Bold"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: 0px
  heading-sm:
    fontFamily: "montserrat Bold"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-xs:
    fontFamily: "montserrat Bold"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  body-xl:
    fontFamily: "manrope bold"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg:
    fontFamily: "manrope bold"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg-system-ui:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: Metrophobic
    fontSize: 15.2px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.2px
  body-sm:
    fontFamily: "manrope regular"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.79
    letterSpacing: 0px
  body-xs:
    fontFamily: system-ui
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  nav-xs:
    fontFamily: "manrope bold"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  nav-xs-cairo-regular:
    fontFamily: "Cairo Regular"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  button-xl:
    fontFamily: "montserrat Bold"
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  button-lg:
    fontFamily: "manrope bold"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  button-md:
    fontFamily: Metrophobic
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  button-sm:
    fontFamily: Metrophobic
    fontSize: 14.4px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.2px
  button-xs:
    fontFamily: Metrophobic
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0px
  button-xs-strong:
    fontFamily: "manrope bold"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  label-md:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  label-md-cairo-regular:
    fontFamily: "Cairo Regular"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  label-sm:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 10px
  lg: 12px
  xl: 17px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 40px
  band: 60px
borderWidths:
  thin: 1px
  medium: 2px
shadows:
  sm: "rgba(0, 0, 0, 0.8) 0px 10px 20px -20px inset"
  md: "rgba(0, 0, 0, 0.075) 0px 2px 4px 0px"
  lg: "rgba(0, 0, 0, 0.12) 0px 5px 12px 0px"
  xl: "rgba(0, 0, 0, 0.04) 0px 0.320247px 0.640494px 0.160124px"
elevationStrategy: progressive
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#072F75"
    surfaceRaised: "#072E71"
    text: "#111111"
    textMuted: "#212529"
    border: "#E2E2E2"
    accent: "#3977E4"
    accentFg: "#000000"
    focusRing: "#3977E4"
    elevation: shadow
  dark:
    bg: "#0B0D14"
    surface: "#1A1C22"
    surfaceRaised: "#26282E"
    text: "#F7FAFE"
    textMuted: "#9DA0A5"
    border: "#32343A"
    accent: "#3977E4"
    accentFg: "#0B0B0C"
    focusRing: "#3977E4"
    elevation: "border+surface"
  contrastFailures:
    - "light: text on surface = 1.5:1 (needs 4.5:1)"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))"
  - context: section
    kind: linear
    value: "linear-gradient(200deg, rgb(15, 27, 92) 60%, rgb(51, 90, 183) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(200deg, rgb(15, 27, 92) 60%, rgba(51, 90, 183, 0.58) 100%)"
components:
  button-primary:
    typography: "{typography.button-md}"
    textColor: "{colors.on-primary}"
    border: "2px solid {colors.primary}"
    height: 48px
    padding: "14px 10px 14px 10px"
    rounded: "{rounded.md}"
    backgroundColor: "{colors.primary}"
  button-filled:
    typography: "{typography.body-lg}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.accent}"
    height: 46px
    padding: "10px 20px 10px 20px"
    rounded: "{rounded.md}"
    backgroundColor: "{colors.accent}"
  button-filled-sm:
    textColor: "{colors.on-primary}"
    height: 36px
    padding: "6px 10px 6px 10px"
    fontSize: 14px
    fontFamily: system-ui
    fontWeight: 700
    lineHeight: 1.5
    rounded: "{rounded.xl}"
    backgroundColor: "{colors.accent-3}"
  button-icon:
    typography: "{typography.body-lg-system-ui}"
    textColor: "{colors.neutral-1}"
    height: 60px
    padding: "1px 6px 1px 6px"
    rounded: 30px
    backgroundColor: "{colors.surface-alt}"
  card:
    typography: "{typography.body-lg-system-ui}"
    textColor: "{colors.body}"
    border: "1px solid rgba(0, 0, 0, 0.176)"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.canvas}"
  card-sm:
    typography: "{typography.body-lg}"
    textColor: "{colors.link}"
    rounded: "5px 5px 0px 0px"
    backgroundColor: "rgba(255, 255, 255, 0.05)"
  badge-icon:
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.canvas}"
    height: 37px
    fontSize: 16px
    fontFamily: "Font Awesome 6 Brands"
    fontWeight: 400
    lineHeight: 1
    rounded: 30px
  badge-icon-sm:
    textColor: "{colors.on-primary}"
    height: 30px
    fontSize: 16px
    fontFamily: "Font Awesome 6 Brands"
    fontWeight: 400
    lineHeight: 1
    rounded: 30px
  navigation:
    typography: "{typography.body-lg-system-ui}"
    textColor: "{colors.body}"
    height: 44px
    padding: "0px 40px 0px 40px"
  navigation-lg:
    typography: "{typography.body-lg-system-ui}"
    textColor: "{colors.body}"
    height: 79px
    padding: "0px 40px 0px 40px"
  footer:
    typography: "{typography.body-lg-system-ui}"
    textColor: "{colors.body}"
  footer-2:
    textColor: "{colors.body}"
    fontSize: 16px
    fontFamily: "Cairo Regular"
    fontWeight: 400
    lineHeight: 1.5
  link:
    typography: "{typography.body-xl}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.surface-alt}"
    padding: "10px 0px 10px 0px"
    rounded: "{rounded.md}"
    backgroundColor: "{colors.surface-alt}"
  link-lg:
    textColor: "{colors.body}"
    fontSize: 16px
    fontFamily: "manrope bold"
    fontWeight: 400
states:
  link-hover:
    target: link
    state: hover
    textDecoration: none
  input-disabled:
    target: input
    state: disabled
    opacity: 1
  input-focus:
    target: input
    state: focus
    boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
    borderColor: "rgb(134, 183, 254)"
  input-active:
    target: input
    state: active
    filter: "brightness(90%)"
  other-disabled:
    target: other
    state: disabled
    textColor: "rgb(108, 117, 125)"
  other-active:
    target: other
    state: active
    textDecoration: none
  nav-focus-visible:
    target: nav
    state: focus-visible
    boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
  nav-disabled:
    target: nav
    state: disabled
    borderColor: transparent
    backgroundColor: transparent
  other-hover:
    target: other
    state: hover
    textDecoration: none
  other-focus:
    target: other
    state: focus
    textDecoration: none
  button-hover:
    target: button
    state: hover
    textDecoration: none
  button-active:
    target: button
    state: active
    borderColor: "{colors.accent}"
    backgroundColor: "{colors.accent}"
  nav-hover:
    target: nav
    state: hover
    opacity: 1
  link-focus:
    target: link
    state: focus
    textColor: "rgb(98, 161, 216)"
    borderColor: currentcolor
  link-active:
    target: link
    state: active
    textColor: "rgb(193, 101, 8)"
    borderColor: currentcolor
  button-focus:
    target: button
    state: focus
    boxShadow: "rgba(0, 0, 0, 0.3) 0px 0px 4px inset"
  input-hover:
    target: input
    state: hover
    borderColor: gray
breakpoints:
  - width: 375
    containerWidth: 359
    gridColumns: 4
    navLinksVisible: 15
    menuToggleVisible: true
    headingPx: 25
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 720
    gridColumns: 4
    navLinksVisible: 15
    menuToggleVisible: true
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 960
    gridColumns: 5
    navLinksVisible: 8
    menuToggleVisible: true
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1200
    gridColumns: 8
    navLinksVisible: 8
    menuToggleVisible: true
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1360
    gridColumns: 8
    navLinksVisible: 8
    menuToggleVisible: true
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 78
  gradientsFound: 3
  rolesUnassigned: 6
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Maroc.ma

1. Visual Theme & Atmosphere

Maroc.ma's design system embodies official digital governance with cultural dignity. The visual identity balances formal authority with modern accessibility, grounding itself in Morocco's national palette of deep blues and burgundy while maintaining clean, minimal surfaces. The atmosphere is professional yet approachable—layered gradients and deep navy sections provide visual hierarchy and gravitas, while crisp white cards and generous whitespace ensure readability and trust. The system prioritizes clarity and institutional confidence, using colour blocking rather than shadows for depth, creating a sense of structured authority suitable for a national portal. Typography is confident and bold, with generous line heights supporting multilingual content (French, Arabic, and English readability).

Key Characteristics

Formal yet accessible; national institutional identity with contemporary usability
Colour-blocked depth using strategic navy, blue, and white surfaces rather than drop shadows
Multilingual-ready typography with generous line heights and clear hierarchies
Gradient hero sections with opacity overlays for readable text over imagery
Clean, sharp corners on cards and containers; pill-shaped interactive elements
Confident button treatments with bold typography and clear contrast
Dual-font system (display serif/system sans for content; Montserrat for headings)

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #3977E4): Primary CTA buttons, brand accent, active interactive states, and system foundation
Link ({colors.link} — #0D6EFD): Inline hyperlinks, secondary CTAs

Accent Colors

Accent (Secondary) ({colors.accent} — #335AB7): Hero bands, navigation hover states, secondary active states
Accent (Decorative – no measured role) ({colors.accent-2} — #0051C3): Observed on site but not assigned a specific semantic function; use as tertiary accent only
Alert / Danger (Decorative – no measured role) ({colors.accent-3} — #BB0A21): Burgundy tone observed in button hovers; no error/success state was declared

Interactive

Accent (Decorative – no measured role) ({colors.accent-1} — #4A5464): Muted blue-grey; no specific role evidence
Accent (Decorative – no measured role) ({colors.accent-5} — #1C2E55): Deep navy; decorative use only

Neutral Scale

Canvas / On Primary ({colors.canvas} — #FFFFFF): Default page background; label and text on primary-coloured surfaces
Ink ({colors.ink} — #111111): Primary headings and high-contrast text
Body ({colors.body} — #212529): Body copy and standard text
Muted ({colors.muted} — #333333): Captions, secondary text, de-emphasized content
Faint ({colors.faint} — #404040): Tertiary text, placeholder text

Surface & Borders

Surface ({colors.surface} — #072F75): Card and panel background; deep navy base
Surface Alt ({colors.surface-alt} — #0F1B5C): Alternating section band; slightly lighter navy
Light Accent (Decorative – no measured role) ({colors.accent-4} — #D4DEF0): Pale blue; no assigned semantic function
Neutral Black ({colors.neutral-1} — #000000): Fallback; observed but not assigned primary role

3. Typography Rules

Font Family

Primary Display Font (Headings)

Font: Montserrat Bold
Fallback stack: montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Usage: All heading levels (h1–h4) and large display text

Secondary Fonts (Body & Interface)

Font: Manrope (regular and bold weights)
Fallback: manrope, system-ui, -apple-system, sans-serif
Usage: Body copy, links, button text, navigation
Font: System-UI (Metrophobic as rendered)
Fallback: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Usage: Form labels, secondary UI text, captions
Font: Cairo Regular (for Arabic content support)
Fallback: 'Cairo', system-ui, sans-serif
Usage: Arabic rendering in multilingual contexts

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	-apple-system	60px	300	1.2	0px	Hero display; h1 equivalent
Heading XXL	Montserrat Bold	38px	500	1.05	0px	Section headline; h4 equivalent
Heading XL	Montserrat Bold	32px	500	1.2	0px	Page section heading; h2 equivalent
Heading LG	Montserrat Bold	25px	500	1.2	0px	Card/subsection title; h3 equivalent
Heading MD	Montserrat Bold	22px	500	1.14	0px	Module heading; secondary h3
Heading SM	Montserrat Bold	20px	500	1.2	0px	Minor heading; h3/h4 variant
Heading XS	Montserrat Bold	18px	700	1.2	0px	Label heading; bold caption
Button XL	Montserrat Bold	26px	700	1.2	0px	Large/primary CTA text
Button LG	Manrope	20px	700	1.5	0px	Secondary button; call-to-action
Button MD	Metrophobic	16px	400	1	0px	Standard button text
Button SM	Metrophobic	14.4px	600	1	0.2px	Small button; compact CTA
Button XS	System-UI	14px	600	1	0px	Minimal button; icon + text
Button XS Strong	Manrope	14px	700	1.5	0px	Emphasized small button
Body XL	Manrope	18px	400	1.5	0px	Large body copy; intro text
Body LG	Manrope	16px	400	1.5	0px	Standard body copy
Body LG (system-ui)	System-UI	16px	400	1.5	0px	Body copy (system font variant)
Body MD	Metrophobic	15.2px	600	1	0.2px	Emphasized body; strong text
Body SM	Manrope	14px	400	1.79	0px	Small body; tertiary content
Body XS	System-UI	13px	400	1.7	0px	Caption/footnote text
Nav XS	Manrope	13px	700	1.5	0px	Navigation link text
Nav XS (Cairo)	Cairo	13px	700	1.5	0px	Navigation link (Arabic variant)
Label MD	System-UI	16px	400	1.7	0px	Form label; input text
Label MD (Cairo)	Cairo	16px	400	1.7	0px	Form label (Arabic variant)
Label SM	System-UI	14px	400	1.5	0px	Small form label; input hint

Principles

Generous line heights support readability: Body copy uses 1.5–1.79 line height to accommodate multilingual rendering and improve legibility
Heading hierarchy uses weight, not just size: Montserrat Bold dominates large scales (display, headings); system fonts handle interface text
Button typography is decisive: Bold weights (600–700) with clear size progression ensure CTAs are unmistakable
Letter spacing is micro-tuned: Only applied where measured (e.g., button SM at 0.2px); no letter spacing on headings maintains compactness
System supports RTL (Arabic): Cairo font is used for Arabic contexts; line heights accommodate Arabic baseline differences
Fallback stack preserves intent: -apple-system and system-ui ensure native rendering when web fonts fail to load

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#3977E4)
Text color: {colors.canvas} (#FFFFFF)
Typography: {typography.button-md} (16px, 400 weight, Metrophobic)
Padding: 14px 10px
Height: 48px
Border: 2px solid {colors.primary} (#3977E4)
Border radius: {rounded.md} (10px)
Width: 380px (full-width in context)
Box shadow: none
Hover: Background {colors.accent} (#335AB7), text {colors.canvas}
Active: Background {colors.accent}, border {colors.accent}
Focus: No outline; relies on color change
Disabled: Opacity reduced; background {colors.muted}

Secondary Button (Filled)

Background: {colors.accent} (#335AB7)
Text color: {colors.canvas} (#FFFFFF)
Typography: {typography.button-lg} (20px, 700 weight, Manrope)
Padding: 10px 20px
Height: 46px
Border: 1px solid {colors.accent} (#335AB7)
Border radius: {rounded.md} (10px)
Width: 185px
Box shadow: none
Hover: Background {colors.primary} (#3977E4)
Active: Background {colors.primary}, border {colors.primary}
Disabled: Opacity reduced

Small Button (Alert variant)

Background: {colors.accent-3} (#BB0A21)
Text color: {colors.canvas} (#FFFFFF)
Typography: {typography.button-xs} (14px, 600 weight, System-UI)
Padding: 6px 10px
Height: 36px
Border: none
Border radius: {rounded.xl} (17px — pill shape)
Width: 198px
Box shadow: none
Hover: Background #840A1B (darkened), box shadow rgba(0, 0, 0, 0.12) 0px 2px 10px

Icon Button

Background: {colors.surface} (#072F75)
Text color: {colors.body} (#212529)
Padding: 1px 6px
Height: 60px
Width: 60px
Border: none
Border radius: {rounded.full} (30px — circular)
Box shadow: none

Cards & Containers

Default Card

Background: {colors.canvas} (#FFFFFF)
Text color: {colors.body} (#212529)
Border: 1px solid rgba(0, 0, 0, 0.176)
Border radius: {rounded.sm} (6px)
Padding: none (0px)
Width: 306px
Height: 460px
Box shadow: none
Typography: {typography.body-lg} (16px, 400 weight, System-UI)

Small Card Variant

Background: rgba(255, 255, 255, 0.05) (translucent)
Text color: {colors.link} (#0D6EFD)
Border: none
Border radius: 5px 5px 0px 0px (rounded top only)
Padding: none (0px)
Width: 304px
Height: 224px
Box shadow: none
Typography: {typography.body-lg} (16px, 400 weight, Manrope)

Inputs & Forms

Text Input (Focus State)

Background: {colors.canvas} (#FFFFFF)
Border color (default): implicit light grey
Border color (focus): rgb(134, 183, 254) (light blue)
Box shadow (focus): rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem
Text color: {colors.body} (#212529)
Typography: {typography.label-md} (16px, 400 weight, System-UI)
Outline: 0px (none)
Hover: Border color gray
Disabled: Opacity 0.5, background var(--bs-secondary-bg)
Active: Filter brightness(90%)

Form Label

Typography: {typography.label-md} (16px, 400 weight, System-UI) or {typography.label-md-cairo-regular} (Arabic)
Line height: 1.7
Color: {colors.body} (#212529)

Navigation

Primary Navigation

Background: transparent
Text color: {colors.body} (#212529)
Typography: {typography.nav-xs} (13px, 700 weight, Manrope)
Height: 44px (default) or 79px (lg variant)
Padding: 0px 40px
Border: none
Border radius: 0px (sharp)
Hover: Color {colors.link} (#0D6EFD), opacity 1
Focus-visible: Box shadow rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem, outline 0px
Disabled: Color {colors.muted} (#333333), background transparent

Navigation (Arabic variant)

Typography: {typography.nav-xs-cairo-regular} (13px, 700 weight, Cairo)

Footer

Default Footer

Background: transparent
Text color: {colors.body} (#212529)
Width: 1440px
Height: 324.141px
Padding: none (0px)
Border: none
Border radius: 0px (sharp)
Typography: {typography.body-lg-system-ui} (16px, 400 weight, System-UI)
Arabic variant: Typography {typography.body-lg-system-ui} using Cairo font

5. Layout Principles

Spacing System

Base Unit: {spacing.xxs} = 4px

Scale:

{spacing.xxs} = 4px — micro spacing; internal padding within tight components
{spacing.xs} = 8px — small padding; input fields, small buttons
{spacing.sm} = 12px — compact spacing; card internal padding
{spacing.md} = 16px — standard spacing; section padding, default gap
{spacing.lg} = 20px — generous spacing; heading underscore, link gaps
{spacing.xl} = 24px — large spacing; container padding, module separation
{spacing.xxl} = 28px — extra large; block spacing
{spacing.xxxl} = 32px — section margins
{spacing.section} = 40px — horizontal padding on full-width sections
{spacing.band} = 60px — vertical spacing between major sections; hero/band height

Usage Context:

Horizontal padding on body/content: {spacing.section} (40px) to {spacing.band} (60px) at large viewports; reduces to {spacing.md} (16px) on mobile
Card internal spacing: {spacing.md} to {spacing.lg} (16–20px)
Button padding: {spacing.xs} to {spacing.md} (8–16px) horizontally; {spacing.xs} to {spacing.lg} (8–20px) vertically
Gap between grid items: {spacing.lg} to {spacing.xl} (20–24px)

Grid & Container

Max width: 1360–1440px (measured at largest viewport)
Container width at 1440px: 1360px (80px margin/padding total)
Column strategy: Fluid grid; 4–8 columns depending on viewport
- Mobile (375px): 4 columns, minimal margin
- Tablet (768px): 4 columns, 0px section padding
- Desktop (1024px): 5 columns, 0px section padding
- Large Desktop (1280px+): 8 columns, full width 1200–1360px
Section pattern: Hero band with gradient overlay, content cards in grid below, alternating surface colours (white/navy) for visual rhythm

Whitespace Philosophy

The system employs intentional colour blocking over whitespace relief. While generous line heights (1.5–1.79) ensure readable body copy, vertical spacing between sections comes from alternating background colours ({colors.canvas} white, {colors.surface} navy) rather than large gaps. This creates visual separation without requiring large blank areas, keeping the page compact and scannable. Horizontal whitespace is reserved for card/button breathing room and form field clarity.

Border Radius Scale

{rounded.none} = 0px — images, full-width sections, sharp edges
{rounded.xs} = 4px — minimal rounding; rare use
{rounded.sm} = 6px — card corners; default container radius
{rounded.md} = 10px — button standard; link containers
{rounded.lg} = 12px — button default on measured variants
{rounded.xl} = 17px — pill buttons (small alert variant); near-full rounding
{rounded.full} = 9999px — fully circular; icon buttons, social badges

Border Widths

Thin (1px): Card borders, subtle dividers, input focus ring borders
Medium (2px): Primary button borders; strong emphasis dividers

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow; color blocking	Buttons, cards, section backgrounds
Micro (sm)	`rgba(0, 0, 0, 0.8) 0px 10px 20px -20px inset`	Inset shadow on dropdowns; subtle depth
Light (md)	`rgba(0, 0, 0, 0.075) 0px 2px 4px 0px`	Custom elements; barely perceptible lift
Medium (lg)	`rgba(0, 0, 0, 0.12) 0px 5px 12px 0px`	Card elevation; modal backing depth
Thin (xl)	`rgba(0, 0, 0, 0.04) 0px 0.320247px 0.640494px 0.160124px`	Button subtle shadow; minimal layering

Shadow Philosophy: The system prioritizes colour-blocked depth over shadow layering. Navy and blue surfaces act as the primary depth signifier; shadows are used sparingly and with very low opacity. This approach suits institutional design—depth comes from intentional colour choices and surface placement rather than realistic drop shadows. Buttons and cards sit flat when at rest; shadows appear only on hover or active states to signal interaction.

Gradient Overlays (decorative depth):

Section overlay: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)) — fade to transparent overlay; text readability on hero images
Hero gradient: linear-gradient(200deg, rgb(15, 27, 92) 60%, rgb(51, 90, 183) 100%) — navy to blue angle; 200deg angle creates directional visual flow
Hero gradient (alt): linear-gradient(200deg, rgb(15, 27, 92) 60%, rgba(51, 90, 183, 0.58) 100%) — same angle, faded second colour; translucent effect

7. Do's and Don'ts

Do

Use colour blocking for depth: Alternate {colors.surface} navy sections with {colors.canvas} white sections; avoid relying on shadows alone
Apply generous line heights: Aim for 1.5–1.79 for body copy to support readability and multilingual (Arabic) rendering
Make buttons decisive: Use bold typography (600–700 weight) and clear colour contrast; primary buttons should dominate at 380px width or use full-width in mobile contexts
Maintain sharp corners on cards: Use {rounded.sm} (6px) or {rounded.none} (0px) for institutional confidence
Respect the pill-shaped navigation: Icon buttons and badges use {rounded.full} (9999px) for soft, modern interaction surfaces
Leverage the gradient overlay for hero text: Pair images with linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)) to ensure white/light text is readable
Support RTL rendering: Use Cairo font for Arabic; ensure label positioning works bidirectionally
Test button states on colour: Hover states shift hue (e.g., primary #3977E4 → accent #335AB7); ensure sufficient contrast

Don't

Avoid layered drop shadows: Do not stack multiple box-shadow values; the system uses flat, colour-based depth
Don't override line height for body copy: Never drop below 1.5 line height; this breaks Arabic rendering and legibility
Don't use decorative accent colours as semantic signals: Colours like {colors.accent-1}, {colors.accent-2}, and {colors.accent-4} have no assigned role; use only for decoration or as instructed by design specs
Don't add letter spacing to headings: Headings are measured at 0px letter spacing; increasing it breaks the compact, formal tone
Don't mix border radius across interactive elements: Buttons are {rounded.md} (10px) or {rounded.xl} (17px for pill); don't use intermediate values
Don't float buttons at full-width on desktop: Constrain primary buttons to 380px width; allow wrapping on small screens but don't stretch indefinitely
Don't omit focus rings on forms: Input focus must include box shadow rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem and border colour shift for keyboard accessibility
Don't reduce opacity for disabled states alone: Use opacity and desaturated background colour for clear disabled signalling

8. Responsive Behavior

Breakpoints

Viewport	Width	Content Width	Grid	Nav Visible Links	Key Changes
Mobile	375px	359px	4	15	Menu toggle active; single-column grid; `{typography.heading-lg}` (25px) displayed; padding-x `{spacing.md}` (16px)
Tablet	768px	720px	4	15	Menu toggle remains; content column expands; nav remains compressed; body text `{typography.body-lg}` (16px)
Small Desktop	1024px	960px	5	8	Nav begins to unwrap; 5-column grid; heading size holds at 32px
Desktop	1280px	1200px	8	8	Full 8-column grid; max width constrained; section padding `{spacing.section}` (40px)
Large Desktop	1440px	1360px	8	8	Max width 1360px; full spacing; all nav links visible

Touch Targets

Minimum interactive size: 44px × 44px (buttons, icon buttons, nav links)
Button padding: {spacing.xs} to {spacing.md} horizontally; {spacing.xs} to {spacing.lg} vertically to meet 44px height
Icon buttons: Exactly 60px × 60px or 30px × 30px for badges
Form input height: 36px minimum (matches small button height)
Link/card clickable area: 46–49px height for text links

Collapsing Strategy

Hero section: Full-width image with gradient overlay; stays full-width from 375px to 1440px
Card grid: Reflows from 1-column (mobile) → 2-column (tablet 768px) → multi-column (desktop 1024px+); cards maintain fixed width (~306px) with gaps
Navigation: Dropdown menu toggle visible at all breakpoints; nav links count visible decreases (15 links at small viewports, 8 at desktop); horizontal scroll or stacking as needed
Buttons: Primary buttons remain fixed width (380px) at desktop; on mobile (375px), constrained to fit container width; allow text wrapping
Sections: Padding-x reduces from {spacing.section} (40px) at desktop to {spacing.md} (16px) on mobile; vertical spacing ({spacing.band} 60px) maintained for rhythm
Typography: Display (60px) holds; heading sizes remain consistent across breakpoints; body text holds at 16px
Grid columns: Explicit 4 columns mobile → 8 columns desktop; column count changes at documented breakpoints

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary (#3977E4) — all main call-to-action buttons
Secondary CTA: Accent (#335AB7) — secondary buttons, hover states
Link text: Link (#0D6EFD) — inline hyperlinks, tertiary CTAs
Background: Canvas (#FFFFFF) — default page background
Dark section: Surface (#072F75) — card backgrounds, hero bands
Heading text: Ink (#111111) — primary text hierarchy
Body text: Body (#212529) — standard copy
Secondary text: Muted (#333333) — captions, hints
Decorative accents: Accent-1 through Accent-5 — no assigned role; use as brand flourish only

Iteration Guide

All buttons use Montserrat Bold or Manrope: Button text is always 600–700 weight; pair with padding {spacing.xs} to {spacing.md} and height 36–48px
Cards sit on white ({colors.canvas}) with 6px radius and 1px border: Never shadow; rely on border and background colour contrast
Hero sections use colour gradient and text overlay: Apply linear-gradient(200deg, rgb(15, 27, 92) 60%, rgb(51, 90, 183) 100%) plus linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)) for text readability
Form inputs use focus state: Border shifts to light blue (rgb(134, 183, 254)), box shadow applies rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem, outline 0px
Navigation links are 13px, 700 weight (Manrope or Cairo): Hover shifts to link colour (#0D6EFD); maintain 1.5 line height for multilingual support
Icon buttons are perfectly circular: Use {rounded.full} (9999px) and square dimensions (60px, 30px)
Section spacing uses colour bands, not whitespace: Alternate navy ({colors.surface}) and white ({colors.canvas}) backgrounds; internal padding {spacing.md} to {spacing.xl} (16–24px)
Hover states shift hue rather than add shadow: Primary button #3977E4 → Accent #335AB7 on hover; avoid shadow scaling
Line heights are never below 1.2 for headings, 1.5 for body: Preserves Arabic rendering and accessibility
Fallback fonts are always system-ui or -apple-system: Ensure readability even when Google Fonts fail to load

10. Known Gaps

Interaction states not measured in stylesheet: The extraction captured hover, focus, active, and disabled states from CSS, but additional micro-interactions (transitions, animation timing, cursor changes) were not observed. Assume all state changes are instant colour shifts unless explicitly specified.
No semantic colour ramp: The site does not declare error, success, warning, or info states; therefore, no red/green/yellow/blue semantic palette exists. The decorative burgundy ({colors.accent-3} — #BB0A21) appears in button hover states but is not assigned an error role.
Six unassigned decorative colours: {colors.accent-1}, {colors.accent-2}, {colors.accent-4}, and {colors.accent-5} were observed in the markup but have no measured semantic function. Treat these as brand flourishes or design experiment colours only.
Cross-origin stylesheets not readable: Some CSS from third-party services (e.g., Font Awesome icon fonts, external analytics) was not extracted; custom CSS on those resources may define additional component states not documented here.
Surfaces behind authentication not visited: The extraction analysed public-facing pages only. Logged-in user interfaces, admin dashboards, or gated content may use different component styles or colour roles not represented here.
Typography font-loading strategy unknown: The site references Google Fonts and multiple font families, but no font-display, @font-face timing, or fallback behaviour was explicitly documented. Fallback stacks provided are educated guesses based on measured font names.
RTL (Arabic) layout specifics not exhaustively tested: Cairo font is identified for Arabic context, but full RTL layout behaviour (margins, text alignment, flex direction reversal) was not independently verified across all components.
Animation/transition timings not extracted: Hover and focus states show colour changes but no explicit duration or easing functions were measured from the stylesheets.
Opacity values for disabled/overlay states incomplete: While some opacity values were observed (e.g., 0.5 for disabled inputs, 0.05 for translucent card backgrounds), a complete disabled state opacity scale was not extracted; additional opacity tiers may exist in production.
Z-index full stacking context not validated: Z-index values (1, 2, 3, 9, 20, 99, 999, 9999) were recorded, but not all layering scenarios (nested modals, stacked dropdowns) were tested to confirm stacking order holds.

Machine-Readable Token Reference

colors:
  primary: "#3977E4"
  accent: "#335AB7"
  link: "#0D6EFD"
  accent-1: "#4A5464"
  accent-2: "#0051C3"
  accent-3: "#BB0A21"
  accent-4: "#D4DEF0"
  accent-5: "#1C2E55"
  canvas: "#FFFFFF"
  surface: "#072F75"
  surface-alt: "#0F1B5C"
  ink: "#111111"
  body: "#212529"
  muted: "#333333"
  faint: "#404040"
  neutral-1: "#000000"

typography:
  display:
    size: 60px
    weight: 300
    line-height: 1.2
    letter-spacing: 0px
    font-family: -apple-system
  heading-xxl:
    size: 38px
    weight: 500
    line-height: 1.05
    letter-spacing: 0px
    font-family: Montserrat Bold
  heading-xl:
    size: 32px
    weight: 500
    line-height: 1.2
    letter-spacing: 0px
    font-family: Montserrat Bold
  heading-lg:
    size: 25px
    weight: 500
    line-height: 1.2
    letter-spacing: 0px
    font-family: Montserrat Bold
  heading-md:
    size: 22px
    weight: 500
    line-height: 1.14
    letter-spacing: 0px
    font-family: Montserrat Bold
  heading-sm:
    size: 20px
    weight: 500
    line-height: 1.2
    letter-spacing: 0px
    font-family: Montserrat Bold
  heading-xs:
    size: 18px
    weight: 700
    line-height: 1.2
    letter-spacing: 0px
    font-family: Montserrat Bold
  button-xl:
    size: 26px
    weight: 700
    line-height: 1.2
    letter-spacing: 0px
    font-family: Montserrat Bold
  button-lg:
    size: 20px
    weight: 700
    line-height: 1.5
    letter-spacing: 0px
    font-family: Manrope
  button-md:
    size: 16px
    weight: 400
    line-height: 1
    letter-spacing: 0px
    font-family: Metrophobic
  button-sm:
    size: 14.4px
    weight: 600
    line-height: 1
    letter-spacing: 0.2px
    font-family: Metrophobic
  button-xs:
    size: 14px
    weight: 600
    line-height: 1
    letter-spacing: 0px
    font-family: System-UI
  button-xs-strong:
    size: 14px
    weight: 700
    line-height: 1.5
    letter-spacing: 0px
    font-family: Manrope
  body-xl:
    size: 18px
    weight: 400
    line-height: 1.5
    letter-spacing: 0px
    font-family: Manrope
  body-lg:
    size: 16px
    weight: 400
    line-height: 1.5
    letter-spacing: 0px
    font-family: Manrope
  body-lg-system-ui:
    size: 16px
    weight: 400
    line-height: 1.5
    letter-spacing: 0px
    font-family: System-UI
  body-md:
    size: 15.2px
    weight: 600
    line-height: 1
    letter-spacing: 0.2px
    font-family: Metrophobic
  body-sm:
    size: 14px
    weight: 400
    line-height: 1.79
    letter-spacing: 0px
    font-family: Manrope
  body-xs:
    size: 13px
    weight: 400
    line-height: 1.7
    letter-spacing: 0px
    font-family: System-UI
  nav-xs:
    size: 13px
    weight: 700
    line-height: 1.5
    letter-spacing: 0px
    font-family: Manrope
  nav-xs-cairo-regular:
    size: 13px
    weight: 700
    line-height: 1.5
    letter-spacing: 0px
    font-family: Cairo
  label-md:
    size: 16px
    weight: 400
    line-height: 1.7
    letter-spacing: 0px
    font-family: System-UI
  label-md-cairo-regular:
    size: 16px
    weight: 400
    line-height: 1.7
    letter-spacing: 0px
    font-family: Cairo
  label-sm:
    size: 14px
    weight: 400
    line-height: 1.5
    letter-spacing: 0px
    font-family: System-UI

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 40px
  band: 60px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 10px
  lg: 12px
  xl: 17px
  full: 9999px

shadows:
  sm: "rgba(0, 0, 0, 0.8) 0px 10px 20px -20px inset"
  md: "rgba(0, 0, 0, 0.075) 0px 2px 4px 0px"
  lg: "rgba(0, 0, 0, 0.12) 0px 5px 12px 0px"
  xl: "rgba(0, 0, 0, 0.04) 0px 0.320247px 0.640494px 0.160124px"

borders:
  thin: 1px
  medium: 2px

z-index:
  base: 1
  base-2: 2
  base-3: 3
  base-9: 9
  dropdown: 20
  dropdown-99: 99
  sticky: 999
  modal: 9999

gradients:
  overlay-dark: "linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))"
  hero: "linear-gradient(200deg, rgb(15, 27, 92) 60%, rgb(51, 90, 183) 100%)"
  hero-faded: "linear-gradient(200deg, rgb(15, 27, 92) 60%, rgba(51, 90, 183, 0.58) 100%)"

breakpoints:
  mobile: 375px
  tablet: 768px
  desktop-sm: 1024px
  desktop: 1280px
  desktop-lg: 1440px

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from maroc.ma/fr

Primary

#3977E4

Primary CTA, brand accent, active state

#335AB7

Secondary accent / hero band

#0D6EFD

Inline link colour

#4A5464

Accent / decorative

#0051C3

Accent / decorative

#BB0A21

Accent / decorative

#D4DEF0

Accent / decorative

#1C2E55

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#072F75

Card / panel background

#0F1B5C

Alternating section band

#111111

Headings / primary text

#212529

Body copy

#333333

Captions, secondary text

#404040

Tertiary / placeholder text

#000000

Neutral

Typography · montserrat BoldGoogle Fonts

h232px · 500 · 38.4px

heading20px · 500 · 24px

h325px · 500 · 30px

h438px · 500 · 40px

heading22px · 500 · 25px

button26px · 700 · 31.2px

heading18px · 700 · 21.6px

heading16px · 700 · 19.2px

h416px · 700 · 19.2px

heading18px · 500 · 21.6px

h320px · 500 · 24px

heading32px · 500 · 38.4px

heading32px · 700 · 38.4px

h135px · 700 · 42px

h328px · 500 · 33.6px

Typography · MetrophobicGoogle Fonts

h516px · 600 · 19.2px

button16px · 400 · 16px

body15.2px · 600 · 15.2px

button14.4px · 600 · 14.4px

button14px · 600 · 14px

Typography · manrope boldGoogle Fonts

link16px · 400 · 24px

nav-link13px · 700 · 19.5px

button14px · 700 · 21px

button20px · 700 · 30px

heading18px · 700 · 21.6px

body18px · 400 · 27px

heading18px · 500 · 21.6px

Typography · system-uiGoogle Fonts

list-item16px · 400 · 24px

button14px · 700 · 21px

input16px · 400 · 27.2px

body13px · 400 · 22.1px

input14px · 400 · 21px

Typography · manrope regularGoogle Fonts

body14px · 400 · 25px

body13px · 400 · 19.5px

body16px · 400 · 24px

body18px · 400 · 25px

Typography · nunito italicGoogle Fonts

body16px · 400 · 25px

Typography · nunito regularGoogle Fonts

body16px · 400 · 24px

Typography · Cairo RegularGoogle Fonts

body18px · 400 · 25px

body13px · 400 · 19.5px

button14px · 700 · 21px

h232px · 500 · 38.4px

h325px · 500 · 30px

h438px · 500 · 40px

link16px · 400 · 24px

button16px · 400 · 16px

input16px · 400 · 27.2px

nav-link13px · 700 · 19.5px

button20px · 700 · 30px

heading22px · 500 · 25px

body16px · 400 · 25px

heading20px · 500 · 24px

heading18px · 700 · 21.6px

button26px · 700 · 31.2px

heading18px · 500 · 21.6px

heading16px · 700 · 19.2px

body14px · 400 · 25px

button14px · 600 · 14px

Typography · -apple-systemGoogle Fonts

h160px · 300 · 72px

h230px · 300 · 39px

body15px · 400 · 22.5px

button13px · 400 · 19.5px

body15px · 600 · 22.5px

body13px · 600 · 19.5px

Typography · Noto Sans ArabicGoogle Fonts

h516px · 600 · 19.2px

button14.4px · 600 · 14.4px

body15.2px · 600 · 15.2px

Spacing

12px

16px

20px

40px

8px

32px

4px

60px

Elevation

rgba(0, 0, 0, 0.8) 0px 10px 20px -20px inset

rgba(0, 0, 0, 0.075) 0px 2px 4px 0px

rgba(0, 0, 0, 0.12) 0px 5px 12px 0px

rgba(0, 0, 0, 0.04) 0px 0.320247px 0.640494px 0.160124px

Components · 6

Remixes of maroc.ma

Latest remixes

No public remixes yet. Be the first to make one.

Remix it