42 Abu Dhabi

Overview

42 Abu Dhabi is a tuition-free, peer-to-peer coding school that redefines tech education through a bold, innovation-first aesthetic. The brand embodies 'Tech-Forward Minimalism'—a design philosophy that pairs dark, austere surfaces (near-black backgrounds, charcoal headers) with electric cyan accents and vivid secondary colors (purple, orange) to create visual tension and energy. The UI evokes precision, disruption, and forward momentum: every interaction feels intentional, every color choice deliberate. The emotional response is one of empowerment and clarity—a student sees the cyan CTA button and knows: this is where I take action.

42 Abu Dhabi's voice is direct, code-literate, and unapologetically ambitious. The brand speaks in technical metaphors ("Do you have what it takes to be a <42 ABU DHABI CODER AND AI SPECIALIST/>"), uses angle brackets and forward slashes as visual punctuation, and avoids corporate softness. Tone: confident without arrogance, accessible without condescension. Example: "No teachers, just pure innovation—peer-to-peer learning that scales."

Colors

The color system is built on a dark-first foundation with high-contrast accent layers. **Primary (#00e5fc, vivid cyan)** is the signature brand color, deployed on all CTAs, focus states, and key interactive elements—it commands attention against the dark canvas and signals actionability. **Secondary (#764af6, deep purple)** supports the primary as a secondary accent for elevated actions (the fixed tour icon uses this at 70px diameter with 0.3 opacity shadow: box-shadow: 0 8px 24px rgba(118, 74, 246, 0.3)). **Tertiary (#ff6900, vivid orange)** provides warmth and urgency for alerts, badges, and supporting highlights. The surface stack anchors the design: **surface (#1a1a1a)** is the base neutral, **surface-container (#1f1f1f)** lifts cards and panels 1 step, **surface-container-high (#2d2d2

Typography

The type system uses FuturaPT as the primary typeface—a geometric, tech-forward sans-serif that reinforces the brand's precision and forward-thinking ethos. The hierarchy is built on weight contrast rather than size alone: **display (60px, 700 weight, -0.04em letter-spacing)** is reserved for hero statements and brand moments; **headline-lg (52px, 700 weight)** anchors major sections; **body-lg (20px, 400 weight, 28px line-height)** is the default body text, providing generous vertical rhythm for readability on dark backgrounds. **Label-md (14px, 600 weight, 0.01em letter-spacing)** is used for button text and UI labels, with tight tracking to reinforce technical precision. On small labels over busy backgrounds (e.g., badges on hero images), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on desktop. The spacing scale is semantic: **lg (40px)** separates major sections (hero to content, content to footer); **md (24px)** is the default padding inside cards and containers; **sm (12px)** is used for internal component spacing (button padding, input padding). The gutter is 24px on desktop, reducing to 12px on tablet and 8px on mobile. The hero section is full-width with a dark overlay (rgba(0, 0, 0, 0.5)) over a background image, ensuring text contrast. Cards and containers use 0px border-radius (sharp edges) to reinforce the tech-forward, architectural aesthetic—no soft corners. The announcement bar at the top uses 100% width with 10px vertical padding and 20px horizontal padding, creating a tight, urg

Elevation & Depth

Depth is achieved through layered surfaces and subtle shadows rather than dramatic drop-shadows. **Level 1 (Base)**: Dark background (#0f0f0f) with no shadow. **Level 2 (Standard Card)**: surface-container (#1f1f1f) with 1px border (outline-variant: #444444) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). **Level 3 (Elevated/Modal)**: surface-container-high (#2d2d2d) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25). The tour icon (fixed position, bottom-right) uses a larger shadow: box-shadow: 0 8px 24px rgba(118, 74, 246, 0.3), which shifts to 0 12px 32px rgba(118, 74, 246, 0.4) on hover. Shado

Shapes

The shape philosophy is **Architectural Sharpness**—a deliberate rejection of rounded corners in favor of sharp, 90-degree edges that evoke code, precision, and technical rigor. **Buttons** use border-radius: 9999px (full pill shape) to create a soft, clickable affordance that contrasts with the sharp environment—this makes CTAs unmissable. **Cards and containers** use 0px border-radius (sharp corners) to reinforce the grid-based, modular aesthetic. **Inputs** use border-radius: 0px (no rounding) with a 1px solid border (outline-variant). **Badges** use border-radius: 9999px (full circle or pi

Components

Action Elements **Button Primary** (#00e5fc on dark background, 48px height, 12px 24px padding, border-radius: 9999px, font-weight: 600, font-size: 14px) is the primary CTA. On hover, shift backgroundColor to {colors.primary-fixed-dim} (#00b3cc) with transition: all 200ms ease-out. **Button Secondary** (#764af6, same dimensions) is used for secondary actions. **Button Ghost** (transparent background, 2px solid cyan border, same height/padding) is used for tertiary actions or when space is constrained. All buttons use text-transform: uppercase and letter-spacing: 0.05em to reinforce technical precision.

Containers & Surfaces **Card** (background: {colors.surface-container}, border: 1px solid {colors.outline-variant}, padding: 24px, border-radius: 0px) is the default container. On h

Do's and Don'ts

**Do**

• Do use cyan (#00e5fc) exclusively for primary CTAs and focus states—it is the brand's signature and must never be diluted or overused on secondary elements.
• Do maintain sharp 90-degree corners (0px border-radius) on all cards, containers, and inputs to reinforce the technical, architectural aesthetic.
• Do apply generous line-height (1.4–1.5x) and letter-spacing (-0.02em to 0.01em) to support readability on dark backgrounds and accommodate Arabic script.
• Do use the full 12-column grid with 24px gutters on desktop; never center content without a max-width constraint.
• Do apply transition: all 200ms ease-out to all interactive elements (buttons, cards, inputs) to signal state changes without jarring the user.

**Don't**

• Don't use rounded corners (border-radius > 0px) on cards, containers, or inputs—this violates the Architectural Sharpness philosophy and dilutes the tech-forward brand.
• Don't apply cyan to non-interactive elements or backgrounds—primary is reserved for CTAs, focus states, and key accents only.
• Don't use shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12)—the design relies on surface contrast, not dramatic depth.
• Don't use system fonts or generic sans-serifs—FuturaPT is the brand typeface and must be loaded via @font-face or Google Fonts.
• Don't reduce line-height below 1.4x on body text or below 1.2x on headlines—the dark background demands generous vertical rhythm for legibility.