Style Tokens

Token Resolver

BUNDLE·framer-styles.css

47 KB

.framer-1ujxwsf {

background-color: var(--token-1ujxwsf-bg);

color: var(--token-h3lo3p-fg);

border-radius: var(--token-prx7n3-radius);

padding: var(--token-9zk2mx-pad);

font-size: var(--token-87b2ne-fz);

}

.framer-x9zr7e {

background-color: var(--token-x9zr7e-bg);

font-size: var(--token-q0p4ms-fz);

}

:root {

--token-1ujxwsf-bg: #0a81ff;

--token-h3lo3p-fg: #fafafa;

--token-prx7n3-radius: 12px;

--token-9zk2mx-pad: 24px;

--token-87b2ne-fz: 17px;

--token-q0p4ms-fz: 17px;/* dup */

--token-x9zr7e-bg: #0a81ff;/* dup */

--framer-color-text-default: #1d1d1f;

--framer-color-text-secondary: #86868b;

}

47 tokens · 9 selectors⚠ 24 duplicates

evidence

usage analysis

--token-1ujxwsf-bg0.97

#0a81ffseen in 12 · 3 sel

--accent-blue

--token-h3lo3p-fg0.94

#fafafaseen in 8 · 2 sel

--surface

--token-prx7n3-radius0.99

12pxseen in 23 · 6 sel

--radius-md

--token-9zk2mx-pad0.92

24pxseen in 18 · 5 sel

--space-6

--token-87b2ne-fz0.96

17pxseen in 31 · 9 sel

--text-body

dedupe → infer → rename

RECOVERED·tokens.css

✓ semantic

:root {

/* Brand */

--accent-blue: #0a81ff;

--accent-blue-hover: #066ee0;

/* Surface */

--surface: #fafafa;

--surface-elevated: #ffffff;

/* Text */

--text-default: #1d1d1f;

--text-secondary: #86868b;

/* Radius */

--radius-sm: 6px;

--radius-md: 12px;

--radius-lg: 20px;

}

47 tokens → 23 tokens · −51%23 KB

Style Tokens

Framer mangles CSS custom properties into hashes like --token-1ujxwsf-bg. yank reads computed styles across the DOM, deduplicates same-valued tokens, infers semantic names from usage, and emits a clean tokens.css half the size.