Huy Phan - Award-winning designer

Design Specification — Huy Phan - Award-winning designer

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#ECECEC), ink text (#000000), a vivid accent (#0099FF). All type is set in "Inter". Detected font weights: 400, 500, 700.

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

Gradients

• linear-gradient(#ecececc4 0%,#ececec00 100%)
• linear-gradient(#ededed00 .726703%,#edededc4 100%)

Typography

Primary typeface: Inter — stack: "Inter"

Font stacks (most used first)

• "Inter"
• var(--framer-code-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif))
• var(--font-family)
• var(--framer-font-family)
• "BT Grotesk Medium"
• "BT Grotesk Regular"
• "F37 Bolton Trial Regular"
• "BT Glyphius Regular"
• "BT Grotesk Bold Italic"
• "BT Glyphius Bold"

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 700

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 1100px

Grid columns (largest detected grid): 16

Breakpoints

• 800px
• 1099.98px
• 1199.98px
• 1799.98px
• 1920px
• 2360px
• 2399.98px
• 2400px

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --token-0c68c7e4-90a1-4b80-b1f5-21051c127250: #fff;
  --token-e93f529c-01a4-4879-a2e7-182bd1a3d9fa: #ffffff80;
  --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-paragraph-spacing: 0px;
  --framer-link-text-color: #09f;
  --framer-link-text-decoration: underline;
  --8cjvy6: var(--18igjwn);
  --fqepva: var(--140q303);
  --o8mxkf: var(--1fjvn7h);
  --list-style-type: decimal;
  --bt-grotesk-responsive-font-size: 12px;
}

Do's and Don'ts

Do

• Do reserve the accent #0099FF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #ECECEC; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 500, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• 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: #0099FF;
  --color-background: #ECECEC;
  --color-surface: #EDEDED;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-border: #EDEDED;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #EDEDED;
  --color-surface-container: #ECECEC;
  --font-sans: "Inter";
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-md: 8px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 63px;
  --container-max: 1100px;
}