# Design Reference - Scale
> Midnight Command Center: An expanse of polished dark surfaces, illuminated by precise white text and the occasional shimmer of an iridescent, almost holographic, light.

## Source
- Original site: https://scale.com
- Captured: 2026-04-11T18:37:56.765Z

## Tags
- dark-mode
- high-contrast
- minimalist
- futuristic
- enterprise
- data
- abstract-graphics
- typographic-heavy
- sophisticated

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Deep Space | `#000000` | neutral | Primary page background, card backgrounds, creating a high-contrast canvas. |
| Ghost White | `#ffffff` | neutral | Primary text color for headlines and body text, accentuating information against the dark background. Also used for borders on interactive elements. |
| Iron Slate | `#a1a1a1` | neutral | Secondary text for less prominent information, active navigation links, and subtle borders. |
| Halo Pale | `#f4f0ff` | neutral | Subtle, near-white text for secondary links and body text in less prominent sections. This provides a very soft contrast against black. |
| Shadow Tint | `#020202` | neutral | Subtle shadows and background for elements that need a touch more depth than pure black. |
| Subtle Gray | `#e5e5e5` | neutral | Text and icon color, for details that require slightly less prominence than Ghost White. |
| Iridescent Glow | `#bbdef2` | brand | Backgrounds of geometric abstract shapes, providing a luminous, futuristic visual accent. |
| Spectrum Flare | `#d1aad7` | brand | Used for the lighter parts of the iridescent gradient, giving it a soft, ethereal quality. |
| Vivid Crimson | `#ff6467` | accent | Indicator or accent background, used sparingly to draw attention. |
| Goldenrod | `#ffd600` | accent | Indicator or accent background, used sparingly for specific highlight. |
| Emerald Green | `#72ce7b` | accent | Indicator or accent background, used sparingly for specific highlight. |
| Dark Rainbow Gradient | `#9a9a9a` | brand | Used for highly stylized, abstract background elements, providing a subtle shimmer that hints at dimension and data flow. |

## Typography
- role: Standard body text, navigation elements, buttons, and various UI labels. Its wide range of sizes and normal weight support the bulk of content, ensuring readability without distracting from the main brand typography.; sizes: 12px, 14px, 16px, 18px, 20px; family: Inter; weight: 400, 500; weights: 400, 500; lineHeight: 1.33, 1.43, 1.50, 1.56, 1.60, 1.65, 1.71; substitute: system-ui, sans-serif; letterSpacing: 0.10em at 12px, 0.286em at 14px, 0.333em at 16px
- role: Primary display font for headlines and sub-headlines. The signature weight 300 for large sizes creates a whisper-quiet yet authoritative tone, prioritizing understatement over visual shouting, which is distinctive for a high-tech brand.; sizes: 24px, 26px, 36px, 48px, 72px, 89px; family: aeonik; weight: 300, 400; weights: 300, 400; lineHeight: 1.00, 1.11, 1.13, 1.23, 1.25, 1.33, 1.67; substitute: Montserrat, sans-serif; letterSpacing: -0.01em
- role: Used for small, descriptive text, often for labels or details that require a slightly technical or precise feel. The wider letter-spacing at smaller sizes improves legibility.; sizes: 12px, 14px; family: geist; weight: 400; weights: 400; lineHeight: 1.43, 1.50, 2.00; substitute: Source Code Pro, monospace; letterSpacing: 0.071em at 14px, 0.083em at 12px

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "links": "16px",
      "lists": "4px",
      "default": "8px"
    },
    "elementGap": "8px",
    "sectionGap": "32px",
    "cardPadding": "24px"
  },
  "radius": {
    "links": "16px",
    "lists": "4px",
    "default": "8px"
  }
}
```

## Component Patterns
- name: Announcement Banner
- name: Button Group (Primary + Secondary CTA)
- name: Customer Testimonial Card
- name: Navigation Link; role: Primary navigation item
- name: Secondary Hero Button (Text Link); role: Secondary call to action
- name: Feature Card; role: Content container for features

## Do
- Prioritize Deep Space (#000000) for backgrounds and Ghost White (#ffffff) for primary text to maintain high contrast and sophistication.
- Use aeonik font with weight 300 for all large headlines (48px and above) to achieve an understated, authoritative tone.
- Apply Iron Slate (#a1a1a1) for secondary text and active navigation items to provide subtle differentiation without losing readability.
- Employ the Iridescent Glow (#bbdef2) and Spectrum Flare (#d1aad7) gradient only for abstract geometric elements or distinctive brand accents, not for interactive components.
- Maintain generous vertical spacing between sections, using multiples of 32px to provide breathing room on the dark canvas.
- Use 8px border radius as the default for most containers and images, with 16px for larger interactive links, and 4px for smaller list items.

## Don't
- Do not introduce highly saturated colors for general UI elements; reserve them for specific accent indicators if truly necessary.
- Avoid heavy drop shadows; the design relies on subtle background variations and text contrast for depth, with minimal inset shadows.
- Do not use aeonik font for body text; reserve it for headlines and maintain its distinctive impact.
- Avoid excessive use of Halo Pale (#f4f0ff) for primary content; its low contrast is intended for secondary or subtle elements.
- Do not use generic system borders; interactive elements should feature white or subtle gray borders for consistency.
- Avoid dense information blocks; use ample White Space, especially on dark backgrounds, to enhance clarity and visual weight.