# Magicorange Design System

> High-contrast enterprise clarity anchored by a vibrant citrus primary and deep oceanic navies.

**Source:** https://magicorange.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Magicorange utilizes a high-energy "Magic Orange" (`#f37021`) as its primary functional and brand signal, contrasted against a foundation of "Magic Navy" (`#0d1d42`) and pure white. The typography system is built on the **SS3** family, favoring a clean, sans-serif aesthetic with distinct weights for hierarchy—ranging from the heavy **SS3-Black** for hero displays to the lighter **SS3-L** for section headers. UI elements are characterized by soft geometric forms, specifically 6px to 8px radii for buttons and a more pronounced 13px radius for content cards. The layout is spacious, utilizing a 10px base spacing unit to maintain enterprise-grade legibility.

## Signature DNA
1. **The Orange/Navy Polarity:** The system relies on the high contrast between `#f37021` (action) and `#0d1d42` (structure). This is most visible in the "Schedule a Demo" vs "Contact Sales" button pairings.
2. **SS3 Type Hierarchy:** The use of specialized font sub-families (SS3-Black for 70px display, SS3-L for 42px headers) creates a sophisticated, custom-tailored typographic voice that avoids standard system font defaults.
3. **The "Magic" Glow:** Cards and interactive containers often feature a distinctive light blue outer glow (`rgba(208, 229, 255, 0.72)`) rather than traditional neutral drop shadows, reinforcing the "Magic" brand prefix.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, surface | 103 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Primary text, cookie banner background | 211 | 1.0 | `--wp--preset--color--black` |
| `{color.navy}` | `#0d1d42` | Accent background, secondary buttons | 5 | 1.0 | `--magicnavy` |
| `{color.off-white}`| `#f4f1ee` | Subtle section backgrounds | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#f37021` | Primary CTA background, brand highlights | 65 | 1.0 | `--magicorange` |
| `{color.light-orange}`| `#fed09e` | Secondary CTA background | 6 | 1.0 | `--lightorange` |
| `{color.soft-blue}` | `#c7dff4` | Decorative surfaces (decorative_only) | 2 | 1.0 | `--lightblue` |
| `{color.sky-blue}` | `#d9ebf8` | Tertiary pill buttons | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| SS3 | 400, 600, 700, 800, 900 | Body, UI Labels | Inter | Custom/Licensed |
| SS3-SB | 400, 600, 700, 800 | Sub-headings | Inter SemiBold | Custom/Licensed |
| SS3-L | 300, 400 | Section Headers | Inter Light | Custom/Licensed |
| SS3-Black | 400 | Hero Display | Inter ExtraBold | Custom/Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 70px | 70px | normal | 400 | Hero H1 | `span.head1` |
| `{type.h2}` | 42px | 42px | normal | 400 | Section Title | `h2` |
| `{type.h3}` | 32px | 32px | normal | 400 | Sub-section | `h3` |
| `{type.eyebrow}` | 22px | 22px | 5px | 600 | Section Label | `div.eyebrow-bldorg` |
| `{type.body-lg}` | 22px | 30.8px | normal | 400 | Intro text | `span.normtxt` |
| `{type.button}` | 18px | 14px | normal | 600 | CTA Labels | `a.button_ora` |
| `{type.body}` | 16px | 22.4px | normal | 400 | Standard Copy | `article#post-9610` |
| `{type.caption}` | 14px | 20px | normal | 400 | Small labels | Not captured in source |

### Principles
1. **Generous Eyebrows:** Section labels use 5px letter spacing to create a wide, architectural feel above headings.
2. **Tight Display:** Large hero text (70px) uses a 1:1 line-height ratio for maximum impact.
3. **Weight-Based Hierarchy:** The system switches between sub-families (SS3-L to SS3-SB) rather than just adjusting weight values on a single family.

## Spacing
**Base unit:** 10px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xxs}` | 5px | 14 |
| `{space.xs}` | 8px | 56 |
| `{space.sm}` | 10px | 170 |
| `{space.md}` | 20px | 16 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 242 occurrences |
| `{radius.sm}` | 6px | Primary/Secondary Buttons | `button_ora` |
| `{radius.md}` | 8px | Interactive controls | 15 occurrences |
| `{radius.lg}` | 13px | Content Cards | 56 occurrences |
| `{radius.pill}` | 999px | Tertiary Tags/Pills | 7 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.magic}` | `rgba(208, 229, 255, 0.72) 0px 0px 8px 3px` | Featured content cards | 56 occurrences |
| `{shadow.subtle}` | `rgba(13, 23, 66, 0.12) 0px 1px 3px 0px` | Navigation/Floating UI | 2 occurrences |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., Schedule a Demo)
**Pages observed:** Homepage, About
**Spec:** Background: `#f37021` | Text: `#ffffff` | Border: 2px solid `#f37021` | Radius: 6px | Padding: 20px 15px | Typography: 18px/600
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Secondary Button
**Role:** Alternative action (e.g., Contact Sales)
**Pages observed:** Homepage, About
**Spec:** Background: `#fed09e` | Text: `#0d1d42` | Border: 2px solid `#fed09e` | Radius: 6px | Padding: 20px 15px | Typography: 18px/600
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting platform capabilities
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Text: `#000000` | Radius: 13px | Padding: 8px 10px | Shadow: `{shadow.magic}`
**States observed:** Default

#### Tertiary Pill
**Role:** Categorization or low-emphasis actions
**Pages observed:** Homepage
**Spec:** Background: `#d9ebf8` | Text: `#000000` | Radius: 999px | Typography: 18px
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Surface Card
**Role:** High-contrast information blocks on dark backgrounds
**Pages observed:** Homepage
**Spec:** Background: `#121c48` | Text: `#ffffff` | Border: 2px solid `#2f75a7` | Radius: 8px
**States observed:** Default

#### Cookie Consent Banner
**Role:** Privacy compliance
**Pages observed:** Homepage, About
**Spec:** Background: `#000000` | Text: `#ffffff` | Radius: 0px | Padding: 5px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1200px |
| Section Padding | 35px - 50px (observed) |
| Grid Gutter | 20px |

## Imagery & decoration
- **Citrus Photography:** Uses high-resolution imagery of sliced oranges to reinforce the brand name literally.
- **Dotted Dividers:** Orange dotted lines (`#f37021`) with square terminal points used as section separators.
- **Device Mockups:** Laptops and tablets are used to showcase the platform UI, often with a slight "floating" effect.

## Do's
- Use `#f37021` for the primary path to conversion.
- Pair SS3-Black with 70px sizing for page-level headlines.
- Apply the light blue glow (`#d0e5ff`) to cards to signify "Magic" interactivity.
- Maintain 5px letter spacing on all uppercase eyebrows.
- Use 6px border radius for all functional buttons.

## Don'ts
- **Wrong:** Using `#fed09e` for primary text. **Right:** Use `#000000` or `#0d1d42`. **Reason:** Accessibility and contrast.
- **Wrong:** Applying pill radii (999px) to primary buttons. **Right:** Use 6px. **Reason:** Pill radii are reserved for tertiary tags.
- **Wrong:** Using standard drop shadows. **Right:** Use the brand-specific blue glow. **Reason:** Brand consistency.

## Similar brands
- **Logi Analytics** (Enterprise data focus with orange accents)
- **Apptio** (TBM/FinOps category peer)
- **Cloudability** (Cloud cost management aesthetic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --magicorange: #f37021;
  --lightorange: #fed09e;
  --magicnavy: #0d1d42;
  --white: #ffffff;
  --black: #000000;
  --radius-button: 6px;
  --radius-card: 13px;
  --shadow-magic: 0px 0px 8px 3px rgba(208, 229, 255, 0.72);
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific navigation transitions (hamburger menu behavior) were not detailed in the source.
- Error and Success semantic colors were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://magicorange.com | Desktop 1440 | 2026-06-06 |
| About Us | https://magicorange.com/about | Desktop 1440 | 2026-06-06 |
| Homepage (Mobile) | https://magicorange.com | Mobile 390 | 2026-06-06 |