CompileFuture - Lets Compile the Future

Design Specification — CompileFuture - Lets Compile the Future

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#222222), a vivid accent (#9895FF). All type is set in 'DM Sans'. Detected font weights: 300, 400, 500, 600, 700, 800. Detected style signatures: glassmorphism; gradient-rich / aurora; rounded / pill-heavy; technical / mono accents; dark-mode aware.

Logo asset(s): https://compilefuture.com/wp-content/uploads/2025/03/compilefuture.com-logo-light.png · https://compilefuture.com/wp-content/uploads/2025/03/compilefuture.com-logo-dark.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(180deg, #FDFDFF 0%, #F8F7FF 100%)
• linear-gradient(180deg, #9895FF 0%, #514DCC 100%)
• linear-gradient(180deg, #8E8BFF 0%, #4440B4 100%)
• linear-gradient(180deg, #1C1C1C 0%, #1C1C1C 100%)
• linear-gradient(180deg, #434343 0%, #0F0F0F 100%)
• linear-gradient(180deg, #383838 0%, #010101 100%)
• linear-gradient(180deg, #FFFFFF 0%, #DEDDFF 100%)
• linear-gradient(to right, currentColor 0%, currentColor 98%)

> 2 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: DM Sans — stack: 'DM Sans'

Font stacks (most used first)

• 'DM Sans'
• var(--cs-font-primary-family), sans-serif
• "cs-icons"
• var(--cs-font-secondary-family), sans-serif
• var(--cs-font-post-meta-family), sans-serif
• var(--cs-font-headings-family), sans-serif
• var(--cs-font-entry-title-family), sans-serif
• var(--cs-font-input-family), sans-serif
• "cs-icons" !important
• sans-serif

Web font sources

• fonts.googleapis.com/css?family=DM+Sans:400,400i,500i,500,700,700i,800,600&subset=latin,latin-ext,cyrillic,cyrillic-ext,vietnamese&display=swap&ver=1.0.4

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700, 800

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0px 5px 20px 0px rgba(, 0.15)
• 0px 5px 20px 0px rgba(, 0.4)
• 0 5px 20px 0 rgba(, 0.5)
• 0 5px 20px 0 rgba(, 0.6)
• unset
• 0 5px 25px 0 rgba(, 0.12)
• none
• 0 5px 25px 0 rgba(, 0.2)
• 0px 5px 25px 0px rgba(, 0.15)
• 0px 5px 25px 0px rgba(, 0.4)

Layout

Container max-width: 768px

Breakpoints

• 575.98px
• 576px
• 600px
• 767.98px
• 768px
• 991.98px
• 992px
• 1248px

Animation & Motion

Transitions

• 0.25s
• opacity 0.25s ease
• all 0.3s linear
• min-height 0.3s linear, border-bottom-color 0.3s linear
• none
• transform 0.4s
• opacity 300ms ease-in-out, visibility 300ms ease-in-out
• 0.25s -webkit-filter linear
• 0.25s -moz-filter linear
• 0.25s filter linear
• 0.25s -ms-filter linear

Keyframes

@keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hero-slide-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
@keyframes loader-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Animations

• fade 0.5s
• loader-rotate 1s linear infinite

CTA labels found on page

• Youtube Channel

Effects

• backdrop-filter: blur(10px)

Source Design Tokens (CSS custom properties)

:root {
  --wp-block-synced-color: #7a00df;
  --wp-block-synced-color--rgb: 122,0,223;
  --wp-bound-block-color: var(--wp-block-synced-color);
  --wp-editor-canvas-background: #ddd;
  --wp-admin-theme-color: #007cba;
  --wp-admin-theme-color--rgb: 0,124,186;
  --wp-admin-theme-color-darker-10: #006ba1;
  --wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
  --wp-admin-theme-color-darker-20: #005a87;
  --wp-admin-theme-color-darker-20--rgb: 0,90,135;
  --wp-admin-border-width-focus: 2px;
  --wp--preset--font-size--normal: 16px;
  --wp--preset--font-size--huge: 42px;
  --wp--style--global--content-size: 824px;
  --wp--style--global--wide-size: 1248px;
  --wp--style--block-gap: 24px;
  --cs-font-base-family: DM Sans;
  --cs-font-base-size: 1rem;
  --cs-font-base-weight: 400;
  --cs-font-base-style: normal;
  --cs-font-base-letter-spacing: normal;
  --cs-font-base-line-height: 1.55;
  --cs-font-primary-family: DM Sans;
  --cs-font-primary-size: 1rem;
  --cs-font-primary-weight: 800;
  --cs-font-primary-style: normal;
  --cs-font-primary-letter-spacing: -0.03em;
  --cs-font-primary-text-transform: none;
  --cs-font-primary-line-height: 1.2;
  --cs-font-secondary-family: DM Sans;
  --cs-font-secondary-size: 0.875rem;
  --cs-font-secondary-weight: 400;
  --cs-font-secondary-style: normal;
  --cs-font-secondary-letter-spacing: normal;
  --cs-font-secondary-text-transform: none;
  --cs-font-secondary-line-height: 1.55;
  --cs-font-section-headings-family: DM Sans;
  --cs-font-section-headings-size: 0.75rem;
  --cs-font-section-headings-weight: 800;
  --cs-font-section-headings-style: normal;
  --cs-font-section-headings-letter-spacing: 0.1em;
  --cs-font-section-headings-text-transform: uppercase;
  --cs-font-section-headings-line-height: 1.2;
  --cs-font-post-title-family: DM Sans;
  --cs-font-post-title-weight: 700;
  --cs-font-post-title-size: 3.25rem;
  --cs-font-post-title-letter-spacing: -0.05em;
  --cs-font-post-title-line-height: 1.2;
  --cs-font-post-subtitle-family: DM Sans;
  --cs-font-post-subtitle-weight: 400;
  --cs-font-post-subtitle-size: 1.125rem;
  --cs-font-post-subtitle-letter-spacing: normal;
  --cs-font-post-subtitle-line-height: 1.55;
  --cs-font-category-family: DM Sans;
  --cs-font-category-size: 0.6875rem;
  --cs-font-category-weight: 800;
  --cs-font-category-style: normal;
  --cs-font-category-letter-spacing: 0.1em;
  --cs-font-category-text-transform: uppercase;
  --cs-font-category-line-height: 1.2;
}

Do's and Don'ts

Do

• Do reserve the accent #9895FF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 600, 700, 800.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #5955D1;
  --color-accent: #9895FF;
  --color-background: #FFFFFF;
  --color-surface: #F8F9FA;
  --color-text-primary: #222222;
  --color-secondary: #222222;
  --color-text-secondary: #E1E1E8;
  --color-border: #2E2E2E;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #222222;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F8F9FA;
  --color-surface-container: #F2F2F6;
  --color-surface-container-high: #E9E9E9;
  --color-surface-container-highest: #E1E1E8;
  --font-sans: 'DM Sans';
  --font-size-display: 52px;
  --font-size-headline-lg: 42px;
  --font-size-headline-md: 24px;
  --font-size-title-lg: 21px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-sm: 12px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 30px;
  --radius-pill: 50%;
  --shadow-sm: 0 5px 20px 0 rgba(, 0.5);
  --shadow-md: 0 5px 25px 0 rgba(, 0.2);
  --shadow-lg: 0px 5px 25px 0px rgba(, 0.4);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-display: -0.03em;
  --tracking-label: 0.1em;
  --container-max: 768px;
}