PROPOSAL No. MUD-2025-001

A National Proposal for the
Unification of All Pixels

Whereas the citizens of Moldova deserve consistent, accessible, and aesthetically pleasing digital government services; and whereas the current state of government UIs has been described as "creative but chaotic" — we hereby propose the adoption of MUD as the one design system to rule them all.

Read the Decree Inspect the Evidence

Decree v1.0.0 · Ratified upon Bootstrap 5.3.3 · Full legislative history

Approved

Article I

The Great Pixel Crisis

A thorough audit of government websites revealed 47 different shades of blue, 12 conflicting font families, and at least one site still using Comic Sans. This proposal mandates a single source of truth: MUD design tokens.

Examine the Evidence

official-tokens.css

/* MUD Design Tokens -- Approved by the Bureau of Pixels */
:root {
  /* The ONE True Blue (all 46 impostors are hereby retired) */
  --color-background-brand-default: #0058d2;
  --color-background-brand-default-hover: #0046a8;
  --color-text-brand-default: #0058d2;

  /* The Official Typeface (Comic Sans shall be forgotten) */
  --font-family-primary: "Onest", sans-serif;
  --font-family-mono: "JetBrains Mono", monospace;

  /* Spacing (standardized by the National Pixel Council) */
  --spacing-8: 0.5rem;
  --spacing-16: 1rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
}

compliance.html

<!-- Step 1: Replace your 17 CSS files with this one -->
<link href="mud.css" rel="stylesheet">

<!-- Step 2: There is no step 2. You're done. -->
<div class="container py-4">
  <div class="row g-3">
    <div class="col-md-6">
      <button class="btn btn-primary">
        Pay Taxes (Joyfully)
      </button>
    </div>
  </div>
</div>

Article II

Drop-in Compliance

MUD is a drop-in layer on top of Bootstrap 5. Every class, utility, and component you already know works out of the box. Migration difficulty: easier than getting a parking permit.

Browse the Registry

Article III

The Dark Mode Provision

Acknowledging that government employees work late into the night (voluntarily, of course), this decree guarantees every citizen the inalienable right to a dark theme. Toggle with a single HTML attribute.

Read the amendment

dark-mode-decree.html

<!-- Daytime mode (the default, for morning people) -->
<html data-theme="light">

<!-- Night shift mode (for the dedicated public servants) -->
<html data-theme="dark">

<!-- All 87 tokens adapt automatically. Magic? No. CSS. -->
[data-theme="dark"] {
  --color-background-base-default: #1e1e1e;
  --color-text-base-default: #ffffff;
  --color-border-base-default: #444444;
}

bureaucratic-pipeline.sh

# Official token pipeline: Figma → JSON → CSS
# (faster than any government approval process)

# 1. Extract tokens from the sacred Figma file
figma-tokens export --file mud-foundations.fig

# 2. Transform to CSS (no forms in triplicate needed)
style-dictionary build --config config.json

# 3. Behold the output
#    tokens/
#      colors.css      (42 tokens, 0 Comic Sans)
#      typography.css   (6 tokens, 100% Onest)
#      spacing.css      (14 tokens, mathematically perfect)
#      shadows.css      (4 tokens, tastefully subtle)

Article IV

The Official Pipeline

Design tokens flow directly from the Figma Foundations file into production CSS — no committees, no 6-month review cycles. What designers specify is exactly what developers ship, a miracle of modern governance.

Review the procedure

Appendix A

Official Installation Procedure

The Bureau of Consistent Pixels has approved the following methods of compliance. Choose your bureaucratic adventure.

Method A: The npm Way (Recommended for Obedient Citizens)
Open your terminal. Type the command. Don't ask questions. Trust the process.

terminal

# Step 1: Install with the confidence of a government decree
npm install mud-design-system

# Step 2: Import in your SCSS (or face an audit)
@import "mud-design-system/mud";

# Step 3: Marvel at your newly compliant website
# Step 4: There is no step 4. Go home early.

Method B: The CDN Way (For Those Who Fear Commitment)
One <link> tag. That's it. We've seen longer grocery lists.

your-page.html

<!-- Add this to your <head>. Your website will thank you. -->
<link href="https://cdn.mud.egov.md/v1.0.0/mud.css"
      rel="stylesheet">

<!-- That's it. No really. We're done here. -->
<!-- You can stop reading now. -->
<!-- Why are you still reading? -->

Method C: The Manual Download (For Vintage Enthusiasts)
Download the ZIP. Unzip it. Place the CSS file somewhere reasonable (not the Desktop, please). If you print it out and mail it to your server, that's on you.

Method D: Telepathy (Experimental)
Stare intensely at your screen and think about good design. Results may vary. Not officially supported. The Bureau accepts no liability for headaches.