# Nobledesktop Design System

> Academic rigor meets digital utility: a structured, high-contrast educational interface anchored by deep blues and functional Freight Sans typography.

**Source:** [https://nobledesktop.com](https://nobledesktop.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Nobledesktop utilizes a high-contrast, information-dense layout that balances academic authority with modern SaaS usability. The palette is dominated by a primary electric blue `#0000ee` and a deep navy `#132683`, set against a clean white `#ffffff` canvas with subtle light blue `#eef8ff` sectioning. Typography is exclusively **Freight Sans Pro**, utilizing heavy weights (700) for headers to establish hierarchy and lighter weights (400) for long-form educational copy. Components favor sharp or slightly softened geometry (8px to 12px radii), with significant use of depth through large, soft shadows (`rgba(0, 0, 0, 0.1) 0px 10px 40px 0px`) to elevate course cards.

## Signature DNA
1. **The "Electric Link" Primary** (The use of `#0000ee` for primary text and interactive elements creates a direct visual connection to classic web hyperlinking, signaling "information" and "navigation" across all pages.)
2. **Elevated Course Cards** (White cards on light backgrounds using a 40px soft spread shadow to create a distinct physical layer for educational content.)
3. **Freight Sans Hierarchy** (The strict reliance on Freight Sans Pro across all weights, specifically the 35px bold headers, provides a consistent "professional school" voice.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surface | 22 | 0.8 | Computed Style |
| `{color.canvas.alt}` | `#eef8ff` | Subtle section background for contrast | 15 | 0.8 | Computed Style |
| `{color.canvas.muted}` | `#f6f7f9` | Tertiary background for utility areas | 4 | 0.6 | Computed Style |
| `{color.ink.primary}` | `#000000` | Primary body text and headings | 117 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.electric}` | `#0000ee` | Primary interactive text and link color | 35 | 0.8 | Computed Style |
| `{color.accent.navy}` | `#132683` | Brand headers and primary brand presence | 22 | 0.8 | Computed Style |
| `{color.accent.blue}` | `#336cff` | Secondary buttons and UI highlights | 15 | 0.8 | Computed Style |
| `{color.border.light}` | `#cfd9e9` | Default card and divider border | 15 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#555d6f` | De-emphasized metadata and captions | 6 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `freight-sans-pro` | 400, 500, 600, 700 | All headings, body, and UI | Montserrat | Adobe Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h2}` | 35px | 49.7px | normal | 700 | Primary section heads | `h2` |
| `{type.h3}` | 29px | 34.5px | normal | 700 | Sub-section headings | `h3` |
| `{type.h3.alt}` | 29px | 34.5px | normal | 600 | Card titles | `.careers-spread-item__heading` |
| `{type.body.lg}` | 24px | 36px | normal | 400 | Testimonial quotes | `p.testimonials-slider__quote` |
| `{type.body.md}` | 20px | 36px | normal | 400 | Default running text | `p` |
| `{type.label.md}` | 20px | 30px | normal | 400 | Card links/navigation | `a.card` |
| `{type.button}` | 20px | 24px | normal | 400 | Primary CTA text | `a.button` |
| `{type.strong}` | 20px | 36px | normal | 700 | Inline emphasis | `strong` |

### Principles
1. **High Contrast Readability:** Body text maintains a large 20px base size to ensure legibility for technical curriculum.
2. **Weight-Based Hierarchy:** Bold (700) is reserved for structural headings, while Medium (500) is used for attributions and secondary labels.
3. **Generous Leading:** Line heights for body text are set to 1.8x (36px on 20px font) to facilitate reading of dense educational descriptions.

## Spacing
**Base unit:** 10px (derived from common padding/gap patterns)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 7px | 22 |
| `{space.sm}` | 10px | 41 |
| `{space.md}` | 20px | 51 |
| `{space.lg}` | 30px | 8 |
| `{space.xl}` | 40px | 3 |
| `{space.section}` | 80px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Global layout containers | 171 occurrences |
| `{radius.md}` | 8px | Course cards and primary buttons | 18 occurrences |
| `{radius.lg}` | 12px | Secondary feature cards | 4 occurrences |
| `{radius.pill}` | 1000px | Search bars and decorative tags | 2 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 10px 40px 0px` | Main course and certificate cards | 15 occurrences |
| `{shadow.button}` | `rgb(37, 84, 227) 0px 8px 15px -10px` | Primary "Add to cart" buttons | 2 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary action (e.g., "Add to cart", "Sign Up")
**Pages observed:** [Homepage](https://nobledesktop.com)
**Spec:** Background: `#2554e3` / Text: `#ffffff` / Radius: `8px` / Padding: `10px 20px` / Typography: `20px` / Shadow: `{shadow.button}`
**States observed:** Default | Hover: captured | Active: not captured

#### Pill Button
**Role:** Secondary navigation or tag-style interaction
**Pages observed:** [Homepage](https://nobledesktop.com)
**Spec:** Background: `transparent` / Text: `#dddde6` / Border: `1px #dddde6` / Radius: `1000px` / Typography: `20px`
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Course Card
**Role:** Primary content container for class listings
**Pages observed:** [Homepage](https://nobledesktop.com)
**Spec:** Background: `#ffffff` / Text: `#0000ee` / Border: `1px #cfd9e9` / Radius: `8px` / Shadow: `{shadow.card}` / Typography: `20px`
**States observed:** Default | Hover: captured

#### Feature Card (Rounded)
**Role:** Highlighting career paths or special categories
**Pages observed:** [Homepage](https://nobledesktop.com)
**Spec:** Background: `#eef8ff` / Text: `#336cff` / Radius: `500px` / Padding: `7px` / Typography: `20px`
**States observed:** Default

### Tier 3: Surface-specific

#### Utility Card
**Role:** Secondary information blocks or testimonials
**Pages observed:** [Homepage](https://nobledesktop.com)
**Spec:** Background: `#f6f7f9` / Text: `#000000` / Radius: `12px` / Padding: `33px 53px` / Typography: `20px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Page Max-Width | 1170px (approximate based on container analysis) |
| Section Gap | 80px |
| Grid System | 3-column (desktop) / 1-column (mobile) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Cards stack vertically; padding reduces to 20px; text remains 20px for legibility. |
| Desktop | 1440px | 3-up grid for course cards; horizontal navigation visible. |

## Do's
- Use `#0000ee` for all primary text links to maintain the "educational utility" feel.
- Apply `{shadow.card}` to any container that represents a clickable course or certificate.
- Maintain 36px line height for body paragraphs to ensure readability.
- Use Freight Sans Pro Bold (700) for all `h2` and `h3` elements.
- Keep card borders at 1px using `#cfd9e9`.

## Don'ts
- **Wrong:** Using a sub-brand color like a bright orange for a primary button. **Right:** Use `#2554e3` for primary actions. **Reason:** The parent brand identity is strictly blue-dominant.
- Do not use border radii larger than 12px for content cards; keep them structured.
- Avoid using pure black `#000000` for interactive links; use `#0000ee`.
- Do not reduce body text below 20px in main content areas.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #0000ee;
  --color-navy: #132683;
  --color-canvas: #ffffff;
  --color-canvas-alt: #eef8ff;
  --font-main: "freight-sans-pro", sans-serif;
  --shadow-card: 0px 10px 40px 0px rgba(0, 0, 0, 0.1);
  --radius-md: 8px;
}
```

## Agent prompt examples
- "Generate a course enrollment card using a white background, an 8px border radius, and a soft 40px spread shadow. Use Freight Sans Pro for the title in `#0000ee`."
- "Create a primary action button with a `#2554e3` background, white text, and a subtle blue drop shadow."
- "Design a section header using Freight Sans Pro Bold at 35px with a line height of 50px."

## Known gaps
- Hover and Active states for secondary "Pill Buttons" were not captured in the source.
- Specific mobile-only typography tokens were not differentiated from desktop in the evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | [https://nobledesktop.com](https://nobledesktop.com) | 1440px | 2026-06-06 |
| About Page | [https://nobledesktop.com/about](https://nobledesktop.com/about) | 1440px | 2026-06-06 |
| Mobile Home | [https://nobledesktop.com](https://nobledesktop.com) | 390px | 2026-06-06 |