CRAFT Design

Design Specification — CRAFT Design

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 (#FF5500). All type is set in "Inter". Detected font weights: 300, 400, 500, 600, 700, 900.

Logo asset(s): https://framerusercontent.com/images/YzVxphFHzLyBx5aGPf3zjUH1JA.svg

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"
• "Satoshi"
• var(--framer-code-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif))
• var(--font-family)
• var(--framer-font-family)
• "Satoshi Variable"
• "DT Nightingale"
• "Inter Placeholder"
• "Satoshi Placeholder"
• "Satoshi Variable Placeholder"

Derived type scale

Font sizes (by frequency)

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

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 1200px

Breakpoints

• 809.98px
• 1199.98px
• 1200px

Source Design Tokens (CSS custom properties)

:root {
  --token-b89a80f1-2ec0-4636-8dc8-dd7334920811: #0a0a0a;
  --token-5ddbe2fe-277d-462e-a9c2-70d940e235d4: #f50;
  --token-da035a75-e082-4c6d-b880-451caee29f55: #000;
  --token-241731fe-e33d-43ab-8766-8b6d2dba26de: #f2f1e9;
  --token-3bbaf76b-b5cc-44fd-83c8-5bb71dde8e29: #faf7f2;
  --token-9fd40509-2f08-4ea0-8c41-e0796c4e38b8: #b4b4b4;
  --token-20608b9f-0145-4a1e-b971-ee948ebbb015: #fff;
  --token-13d99070-eb26-4f4a-bbab-17e76ff74dc5: #d4d4d4;
  --token-52581657-809c-41e6-9b0c-8fd3ca4aa41c: #000;
  --token-17798721-41ef-432c-a3bd-be9d4718194d: #fff;
  --token-eb64fafc-4f8e-498d-b27a-2a57f7823e01: #404040;
  --token-bf966309-2582-4df8-98f4-f091ce81e703: #212121;
  --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;
  --framer-aspect-ratio-supported: auto;
  --selection-background-color: #ff550026;
  --selection-color: var(--token-5ddbe2fe-277d-462e-a9c2-70d940e235d4,#f50);
  --list-style-type: decimal;
  --framer-link-text-color: #09f;
  --framer-link-text-decoration: underline;
  --framer-text-wrap: balance;
}

Do's and Don'ts

Do

• Do reserve the accent #FF5500 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, 900.
• 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.
• 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: #0099FF;
  --color-accent: #FF5500;
  --color-background: #FFFFFF;
  --color-surface: #F2F1E9;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #B4B4B4;
  --color-border: #D4D4D4;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F2F1E9;
  --color-surface-container: #D4D4D4;
  --font-sans: "Inter";
  --font-size-label-sm: 12px;
  --radius-sm: 1px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 60px;
  --container-max: 1200px;
}