100xEngineers | Build Real AI Products. Become Industry Ready.

Design Specification — 100xEngineers | Build Real AI Products. Become Industry Ready.

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#FF6343). All type is set in "Inter". Detected font weights: 100, 200, 300, 400, 500, 600, 700, 800, 900. Detected style signatures: technical / mono accents.

Logo asset(s): https://framerusercontent.com/images/2aA136RofiLGHqJ1MhZGb7suE.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)

Typography

Primary typeface: Inter — stack: "Inter"

Font stacks (most used first)

• "Inter"
• "Inter Display"
• 'JetBrains Mono'
• 'Manrope'
• "Inter Variable"
• 'Space Grotesk'
• 'Poppins'
• 'DM Sans'
• 'Plus Jakarta Sans'
• 'Fragment Mono'

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 200, 300, 400, 500, 600, 700, 800, 900

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 1512px

Breakpoints

• 809.98px
• 1199.98px
• 1511.98px
• 1512px

Source Design Tokens (CSS custom properties)

:root {
  --token-fc7724c4-fdc8-4095-ade9-6431dbc77be2: #fff;
  --token-7414a84b-43f1-40b8-9ad6-51bff6c585fa: #f0ffd1;
  --token-e8d387a1-d629-4e48-843b-0df2e2da1283: #1d1f13;
  --token-fc780e24-7214-4c2c-833b-1c1bc01811c3: #eaf0dd;
  --token-9f108006-d418-4251-94ad-6ec7d5566a6d: #f7f8f5;
  --token-40f0e93d-a2ec-48cf-ba03-91478635966b: #1d1f130d;
  --token-6091065b-dd66-4513-bc7d-88f5938b7a13: #fff6;
  --token-bb68556b-f9b5-4a0c-a0fa-3fb2c0f6f5a1: #f8f8f8;
  --token-92b12ffc-c8ca-46c2-8c66-d2a864a5a17f: #111;
  --token-d6e963a8-5bba-4bd0-abc1-3d53de66e5ec: #fff;
  --token-fbf70782-f742-4c0e-96b4-838fcd2bc0fd: #8cff2e;
  --token-e5d7c390-4f51-4a40-b7fa-c8f448abf215: #2f2f2f;
  --token-f7f44b24-b0df-48e4-8af5-1eea42e34868: #10131c;
  --token-d6228ca7-f0d9-408c-b83c-9d6f38232b70: #8cff2e;
  --token-c6269af8-0cf3-4b97-8397-614f685e17c9: #2f2f2f;
  --token-c52f33fe-9663-47f1-849e-6ebb742bbb33: #111;
  --token-480048d6-dbca-4e9e-b3d0-260261cd06d1: #8cff2e;
  --token-7a2a42d9-62b4-4b1d-8c84-b2fd52666dc3: #fff;
  --token-7e5f2518-983d-4285-ba21-fc6192c7ad89: #8cff2e;
  --token-c81a63b7-757b-41b0-8ad1-85d598c0fd18: #2f2f2f;
  --token-8ac6a2e8-226f-4fdd-999b-bbfb5f8029de: #fff;
  --token-98f85a0e-7763-49ad-9044-cebf656a70b4: #f8f8f8;
  --token-2731f347-1e4d-4f6d-aa66-9343c3afead3: #8cff2e;
  --token-3f694ea3-c64d-476e-9042-a4a959504d8f: #2f2f2f;
  --token-217db23b-6c6f-4ca2-9443-3b58d4d9b691: #000;
  --token-e50a5437-0aca-4b29-8f41-137380112366: #d8d8d8;
  --token-8375e3a2-d148-4d0f-a0a5-b5a563e1d71b: #ee593b;
  --token-27991317-6b0d-4985-a2a5-e9d68f277934: #f9f9f8;
  --token-15e2173f-e6b5-4756-b856-0676b1a8d68d: #151515;
  --token-31ac618e-2676-4a39-9320-7a3775f1f04b: #fff;
  --token-8303387e-d4c2-4989-af33-54d2c870c7ac: #2f2f2f;
  --token-ce60a7ff-3891-4ece-b45b-e0048ffc12d7: #f7f7f7;
  --token-721cab15-5298-4887-bb35-8ceaf5e3f28d: #ff6343;
  --token-3800f364-55f1-4b78-a085-82e50733f436: #1e1e1e;
  --token-83039d1c-700e-43ee-a6f9-6f1502b0d5e3: #626262;
  --framer-will-change-override: none;
  --framer-will-change-filter-override: filter;
  --text-decoration: var(--framer-text-decoration-style,solid)var(--framer-text-decoration,none)var(--framer-text-decoration-color,currentcolor)var(--framer-text-decoration-thickness,auto);
  --text-decoration-skip-ink: var(--framer-text-decoration-skip-ink);
  --text-underline-offset: var(--framer-text-decoration-offset);
  --font-family: var(--framer-font-family);
  --font-style: var(--framer-font-style);
  --font-weight: var(--framer-font-weight);
  --text-color: var(--framer-text-color);
  --letter-spacing: var(--framer-letter-spacing);
  --font-size: var(--framer-font-size);
  --text-transform: var(--framer-text-transform);
  --line-height: var(--framer-line-height);
  --overflow-clip-fallback: hidden;
  --one-if-corner-shape-supported: 1;
  --border-bottom-width: 0px;
  --border-color: #e7e7e7;
  --border-left-width: 1px;
  --border-right-width: 1px;
  --border-style: solid;
  --border-top-width: 0px;
  --framer-paragraph-spacing: 0px;
  --framer-link-text-color: #09f;
  --framer-link-text-decoration: underline;
  --list-style-type: decimal;
}

Do's and Don'ts

Do

• Do reserve the accent #FF6343 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): 100, 200, 300, 400, 500, 600, 700, 800, 900.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #8CFF2E;
  --color-accent: #FF6343;
  --color-background: #FFFFFF;
  --color-surface: #F7F7F7;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #D9D9D9;
  --color-border: #E7E7E7;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F9F9F8;
  --color-surface-container: #F8F8F8;
  --color-surface-container-high: #F7F8F5;
  --color-surface-container-highest: #F7F7F7;
  --font-sans: "Inter";
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 60px;
  --container-max: 1512px;
}