# EternaCloud design system

> EternaCloud design system measured from eternacloud.com: Mazzardh font, #1C4EFF primary, 11 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/eternacloud.com/

EternaCloud’s website (eternacloud.com) uses the Mazzardh font and #1C4EFF as its main color on a #13101C background. Measured by Sitepeel on November 6, 2026.

## What font does EternaCloud use?

EternaCloud uses Mazzardh (weights 400 and 500) and Arial (weight 600) on eternacloud.com. Page titles are 58px at weight 500 (31px on phones) and body text is 14px. Measured on November 6, 2026.

- Mazzardh (weights 400, 500)
- Arial (weights 600)

## EternaCloud colors: palette and hex codes

EternaCloud’s main colors are #13101C (cool charcoal) for the background, #FFFFFF (white) for text and #1C4EFF (vivid blue) as the main accent, with #1A0B54 (deep violet) and #C86FFF (light violet) as other accents. Measured on November 6, 2026.

- #13101C: cool charcoal
- #FFFFFF: white
- #170D27: deep violet
- #170F22: deep violet
- #000000: near black
- #1C4EFF: vivid blue
- #1A0B54: deep violet
- #C86FFF: light violet

## What is EternaCloud built with?

EternaCloud’s website (eternacloud.com) is built with Finsweet Attributes, Webflow, jQuery, Preact and Swiper. Measured on November 6, 2026.

- JavaScript framework: jQuery 3.5.1, Preact
- Animation & 3D: GSAP 3.12.2, GSAP CustomEase 3.10.4, GSAP Observer 3.12.2, GSAP ScrollTrigger 3.12.2
- Hosting & CDN: Cloudflare
- Site builder & CMS: Finsweet Attributes, Webflow
- Analytics: Microsoft Clarity, Google Analytics
- UI & CSS: Swiper

## Questions and answers

### What font does EternaCloud use?

EternaCloud’s website uses Mazzardh (weights 400 and 500) and Arial (weight 600). Page titles are 58px at weight 500 (31px on phones) and body text is 14px. Measured on November 6, 2026.

### What are the EternaCloud colors and hex codes?

On eternacloud.com: #13101C (cool charcoal) for the background, #FFFFFF (white) for text and #1C4EFF (vivid blue) as the main accent, with #1A0B54 (deep violet) and #C86FFF (light violet) as other accents. The color palette above lists all 11 colors with their hex codes and where each one is used.

### What is the EternaCloud design system?

The design system on this page is eternacloud.com’s, as measured on November 6, 2026: Mazzardh type, #1C4EFF as the main color and 9.94px corners, written down as a DESIGN.md. It is not EternaCloud’s own documentation.

### What is EternaCloud built with?

EternaCloud’s website (eternacloud.com) is built with Finsweet Attributes, Webflow, jQuery, Preact and Swiper. The full tech stack Sitepeel found: jQuery, GSAP, GSAP CustomEase, GSAP Observer, GSAP ScrollTrigger, Lenis, SplitType, Unicorn Studio, Cloudflare and Finsweet Attributes. Measured on November 6, 2026.

### What is the EternaCloud DESIGN.md?

A plain-text file with EternaCloud’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this EternaCloud’s official design system?

No. Sitepeel measured it from eternacloud.com’s public page on November 6, 2026. It is an independent analysis, not made or approved by EternaCloud.

### Can I use EternaCloud’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy EternaCloud’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/eternacloud.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with EternaCloud.

## The DESIGN.md file

```markdown
---
version: alpha
name: EternaCloud
description: "Dark interface measured from eternacloud.com: Mazzardh type with Arial, vivid blue accents, tonal surfaces and 9.94px corners."
colors:
  background: "#13101C"
  surface: "#13101C"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  surface-container-low: "#170D27"
  surface-container: "#170F22"
  surface-container-high: "#000000"
  overlay: "#0A05148C"
  outline: "#000000"
  primary: "#1C4EFF"
  on-primary: "#FFFFFF"
  secondary: "#1A0B54"
  tertiary: "#C86FFF"
typography:
  headline-display:
    fontFamily: Mazzardh
    fontSize: 58px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Mazzardh
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Mazzardh
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.03em
  body-md:
    fontFamily: Mazzardh
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  body-sm:
    fontFamily: Mazzardh
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
  label-md:
    fontFamily: Arial
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Mazzardh
    fontSize: 31px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-lg-mobile:
    fontFamily: Mazzardh
    fontSize: 25.5px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.023em
rounded:
  sm: 9.94px
  md: 31.97px
  full: 9999px
spacing:
  xs: 2.02px
  sm: 7.2px
  md: 11.52px
  lg: 22.03px
  xl: 40.03px
  gutter: 11.52px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.sm}"
    padding: 1px
    height: 49px
  button-ghost:
    textColor: "{colors.surface-container-high}"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 0px 16px
  card:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.md}"
    padding: 27.94px 33.98px 0px 33.98px
---

# EternaCloud Design System

## Overview

EternaCloud describes itself as: “EternaCloud helps data center owner, provider and supplier teams execute global design standards across groups, regions and builds for critical equipment.” The interface is dark, built on **Cool Charcoal (#13101C)** with **White (#FFFFFF)** text, and **Vivid Blue (#1C4EFF)** as the main accent.

Type is set in **Mazzardh** and **Arial**. Headlines run large with tight negative tracking; body text is 14px. The surface language is flat. Corners are mostly 9.94px.

Measured from [eternacloud.com](https://www.eternacloud.com/) on November 6, 2026 at 1440×900 and 390×844 from 140 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 11 roles, plus gradient stops #FE881B, #AC24FF, #1C4EFF, #2BA7FF.

- **Cool Charcoal (#13101C):** Page background, seen 2 times. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 7 times. Token `on-surface`, CSS `--k-consentGate-header-background`.
- **Deep Violet (#170D27):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Deep Violet (#170F22):** Cards and panels, seen 1 time. Token `surface-container`.
- **Near Black (#000000):** Hover and pressed fills, seen 1 time. Token `surface-container-high`, CSS `--k-preference-tabs-purposes-header-link-color`.
- **Cool Charcoal 55% (#0A05148C):** Translucent fill for cards and controls, seen 4 times. Token `overlay`.
- **Near Black (#000000):** Borders and dividers, seen 2 times. Token `outline`, CSS `--k-preference-tabs-purposes-header-link-color`.
- **Vivid Blue (#1C4EFF):** Primary buttons and calls to action, seen 15 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Deep Violet (#1A0B54):** Accent in the logo, seen 18 times. Token `secondary`.
- **Light Violet (#C86FFF):** Accent, seen 14 times. Token `tertiary`.

## Typography

**Mazzardh** and **Arial** share the interface. Fallback stack: `Mazzardh, Arial, sans-serif`.

- **headline-display:** Mazzardh 58px at weight 500, line height 1.1, tracking -0.03em (31px on mobile). Page title (h1).
- **headline-lg:** Mazzardh 46px at weight 500, line height 1.1, tracking -0.035em (25.5px on mobile). Section headings (h2).
- **headline-md:** Mazzardh 20px at weight 400, line height 1.25, tracking -0.03em. Sub-section headings.
- **body-md:** Mazzardh 14px at weight 400, line height 1, tracking -0.03em. Body text.
- **body-sm:** Mazzardh 12px at weight 400, line height 1.2. Secondary and small text.
- **label-md:** Arial 14px at weight 600, line height 1.5. Buttons, navigation and labels.

## Layout

Spacing does not follow a strict grid: 11% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2.02px, sm 7.2px, md 11.52px, lg 22.03px, xl 40.03px.
- **Gaps:** 11.52px is the most common gap in flex and grid layouts.
- **Breakpoints:** 1px, 420px, 479px, 480px, 767px, 768px, 769px, 991px, 992px, 1024px, 1280px, 1440px, 1920px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from tonal surface steps (#170D27 → #170F22 → #000000) and #000000 borders.

## Shapes

Most elements use 9.94px corners. Measured radii, most used first:

- **sm (9.94px):** 36 elements.
- **md (31.97px):** 16 elements.
- **full (9999px):** 8 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Contact”):** #1C4EFF fill, #FFFFFF text, 20.0016px/400, 9.936px radius, padding 1px.
- **button-ghost (“Reject All”):** transparent fill, #000000 text, 14px/600, padding 0px 16px, border 1px solid #000000, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`.
- **card:** #0A05148C fill, #FFFFFF text, 20.0016px/400, 31.968px radius, padding 27.94px 33.98px 0px 33.98px.

## Do's and Don'ts

- Do use #13101C for the page and lift surfaces in small steps: #170D27, #170F22, #000000.
- Do reserve #1C4EFF for primary actions and key highlights.
- Do set headlines in Mazzardh with tight tracking (-0.03em).
- Do reuse the measured spacing steps (7.2px, 11.52px, 22.03px).
- Do use 9.94px corners on most elements; larger surfaces also use 31.97px.
- Don't add drop shadows for depth; use tonal surfaces.
- Don't introduce new font families beyond Mazzardh and Arial.
- Don't use #1C4EFF for large backgrounds or body text.
- Don't make interface transitions slower than 0.4s.

## Motion

Interface transitions are quick: 0.3s, 0.4s. Longer ambient animations run 1s.

- **Easing:** `ease`, `cubic-bezier(0.4, 0, 0.2, 1)`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/eternacloud.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```