<!-- Generated by ExtractVibe — https://extractvibe.com/brand/msc.edu.sa -->
<!-- Extracted: 2026-08-17T09:13:44.923Z | Schema: v1 | Quality: 50/100 -->
---
version: alpha
name: "Attention Required! | Cloudflare"
description: "Attention Required! | Cloudflare presents a professional web presence."
colors:
  neutral: "#404040"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#404040"
  link: "#0051c3"
typography:
  display-lg:
    fontFamily: "-apple-system"
    fontSize: "60px"
    fontWeight: "300"
    lineHeight: "72px"
  headline-lg:
    fontFamily: "-apple-system"
    fontSize: "30px"
    fontWeight: "300"
    lineHeight: "39px"
  body-md:
    fontFamily: "Times New Roman"
    fontSize: "16px"
    fontWeight: "400"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
---

# Attention Required! | Cloudflare — Design System

## Overview

The visual identity of Attention Required! | Cloudflare is defined by a strict adherence to professional minimalism and institutional authority. The design atmosphere is sterile, precise, and utilitarian, prioritizing clarity and function over decorative flourish. It operates within the archetype of the Caregiver and the Sage, projecting reliability, security, and technical competence. The interface mirrors the aesthetic of enterprise-grade infrastructure providers, where trust is established through consistency and lack of ambiguity. The emotional register is calm and reassuring, designed to reduce cognitive load for users seeking immediate answers regarding security alerts or account status. There is no playfulness, no whimsy, and no experimental layout structures. The design IS NOT casual, trendy, or visually noisy. It avoids bright accent colors, complex gradients, or irregular typography. Instead, it relies on a stark, high-contrast presentation that signals seriousness and operational stability. The white space is abundant and intentional, guiding the eye directly to critical information without distraction. This approach ensures that the user perceives the brand as a robust, dependable entity capable of handling sensitive data and complex network threats. The overall experience is one of quiet efficiency, where every pixel serves a functional purpose in communicating security status and guiding user action.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The color strategy is intentionally monochromatic, utilizing a pure white surface (#ffffff) to create a clean, uncluttered canvas. The absence of a primary brand color reinforces the neutral, infrastructure-focused nature of the service. This lack of chromatic distraction ensures that attention remains fixed on the content and status indicators, which likely use standard semantic colors (red for errors, green for success) rather than brand-specific hues. The white background signals transparency and clarity, essential for a security-focused platform. It provides maximum contrast for text, ensuring readability and accessibility. This restrained palette conveys professionalism and neutrality, avoiding any emotional bias that colored branding might introduce. The design relies on structure and typography rather than color to create visual hierarchy and interest.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#404040` | Charcoal |
| link | `#0051c3` | Cobalt |
| muted | `#404040` | Charcoal |

## Typography

The typography system leverages the authoritative weight of Times New Roman, a serif typeface that conveys tradition, trust, and institutional seriousness. This choice contrasts with the modern, sans-serif trends of most tech startups, positioning the brand as an established, reliable entity. The inclusion of -apple-system as a fallback ensures optimal rendering on Apple devices, maintaining legibility and native feel. The hierarchy is likely strict and linear, using size and weight variations within the serif family to denote importance. This approach communicates that the information presented is official and verified. The serif font adds a layer of gravitas, suggesting that the content is formal and significant. It avoids the casualness of sans-serifs, reinforcing the professional and secure nature of the Attention Required! service. The type system is functional, prioritizing readability and clear information architecture over stylistic experimentation.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Times New Roman | body | system | 400 |
| -apple-system | heading | system | 300 |
| -apple-system | body | system | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | -apple-system | 60px | 300 | 72px | — |
| Heading 2 | -apple-system | 30px | 300 | 39px | — |
| Body | Times New Roman | 16px | 400 | — | — |

### Conventions

- Heading case — sentence-case

## Layout

- Base spacing unit — `2px`

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Sources

- Official brand guidelines — https://mymount.msj.edu/ICS/Info_and_Policies/Brand_Standards.jnz
- Live brand page — https://extractvibe.com/brand/msc.edu.sa
- Raw JSON — https://extractvibe.com/api/brand/msc.edu.sa
- DESIGN.md (this file) — https://extractvibe.com/api/brand/msc.edu.sa/design.md
- Extracted — 2026-08-17T09:13:44.923Z
- Generator — ExtractVibe vv1
- Quality score — 50/100