Extracted from https://www.wikipedia.org/ · theme: light

Design Preview

generic

CSS vars raw393

CSS vars unique393

Color hits1

Component hits0

Colors49

Complex6

Buttons0

Links0

Sections0

Colors

Primary

#000

Accent

#000

Background

new

Surface

#f5f5f5

Surface Alt

#f5f5f5

Border

#ddd

Text

#000

Muted

#999

Resolved Token Decisions

primary

#000

source: fallback
confidence: 30%
evidence: fallback
alternatives: none

secondary

#666

source: fallback
confidence: 20%
evidence: fallback
alternatives: none

background

new

source: fallback
confidence: 40%
evidence: fallback
alternatives: none

surface

#f5f5f5

source: fallback
confidence: 30%
evidence: fallback
alternatives: none

border

#ddd

source: fallback
confidence: 20%
evidence: fallback
alternatives: none

text-primary

#000

source: fallback
confidence: 30%
evidence: fallback
alternatives: none

text-secondary

#666

source: fallback
confidence: 20%
evidence: fallback
alternatives: none

text-muted

#999

source: fallback
confidence: 20%
evidence: fallback
alternatives: none

All Captured Colors

Brand / Accent

brand/accent · 7 hit(s)

#6485d1

css variable

brand/accent · 6 hit(s)

#36c

css variable

brand/accent · 5 hit(s)

#fd7865

css variable

brand/accent · 5 hit(s)

#233566

css variable

brand/accent · 4 hit(s)

#fea898

css variable

brand/accent · 4 hit(s)

#f54739

css variable

brand/accent · 3 hit(s)

#88a3e8

css variable

brand/accent · 3 hit(s)

#a6bbf5

css variable

brand/accent · 3 hit(s)

#9f3526

css variable

brand/accent · 3 hit(s)

#612419

css variable

brand/accent · 2 hit(s)

#b6d4fb

css variable

brand/accent · 2 hit(s)

#ffc8bd

css variable

brand/accent · 2 hit(s)

#ca982e

css variable

brand/accent · 2 hit(s)

#ab7f2a

css variable

brand/accent · 2 hit(s)

#099979

css variable

brand/accent · 2 hit(s)

#3056a9

css variable

brand/accent · 2 hit(s)

#bf3c2c

css variable

brand/accent · 2 hit(s)

#3c1a13

css variable

brand/accent · 1 hit(s)

#a799cd

css variable

brand/accent · 1 hit(s)

#c5b9dd

css variable

brand/accent · 1 hit(s)

#d9d0e9

css variable

brand/accent · 1 hit(s)

#c99391

css variable

brand/accent · 1 hit(s)

#dcb5b3

css variable

brand/accent · 1 hit(s)

#e8cecd

css variable

brand/accent · 1 hit(s)

#2cb491

css variable

brand/accent · 1 hit(s)

#80cdb3

css variable

brand/accent · 1 hit(s)

#1b223d

css variable

brand/accent · 1 hit(s)

#d74032

css variable

brand/accent · 1 hit(s)

#2d2212

css variable

brand/accent · 1 hit(s)

#132821

css variable

brand/accent · 1 hit(s)

#453217

css variable

brand/accent · 1 hit(s)

#572c19

css variable

brand/accent · 1 hit(s)

rgba(0,24,73,0.027)

css variable

brand/accent · 1 hit(s)

rgba(0,24,73,0.082)

css variable

brand/accent · 1 hit(s)

#edb537

css variable

Neutral

neutral · 7 hit(s)

#72777d

css variable

neutral · 5 hit(s)

#a2a9b1

css variable

neutral · 5 hit(s)

#27292d

css variable

neutral · 4 hit(s)

#202122

css variable

neutral · 4 hit(s)

#54595d

css variable

neutral · 4 hit(s)

#404244

css variable

neutral · 3 hit(s)

#f8f9fa

css variable

neutral · 3 hit(s)

#101418

css variable

neutral · 3 hit(s)

#fff

css variable

neutral · 2 hit(s)

#c8ccd1

css variable

neutral · 1 hit(s)

#000

css variable

neutral · 1 hit(s)

rgba(0,0,0,0.87)

css variable

neutral · 1 hit(s)

rgba(0,0,0,0.65)

css variable

neutral · 1 hit(s)

#eaecf0

css variable

Complex Color Values

Shadow / Complex

Value	Usage	Occurrences	Weight
hsla(0,0%,100%,0.65)	css variable	2	4
new	background/surface	1	4
hsla(0,0%,100%,0.3)	css variable	1	2
#987027}}:root{--color-print--visited:#520	css variable	1	2
0 20px 48px 0 rgba(0,0,0,0.2)	css variable	1	2
var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base),var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base)}@media only screen and (prefers-color-scheme:dark){:root{--color-base:#eaecf0	css variable	1	2

Typography

Heading One

Heading Two

Heading Three

Body text uses the extracted font, rhythm, color, and line height. This sample helps validate whether the hierarchy feels close to the original site.

Example link style

Captured Buttons

No buttons captured

No button-like elements were detected.

Captured Links

No links captured

No anchors were detected in the sampled page.

Background Images

No image backgrounds detected

The extracted design appears to use flat color backgrounds for the sampled elements.

Cards and Inputs

No confident card detected

Large sections were treated as layout, not reusable cards.

Input Pattern

Use this as a quick sanity check for forms.

CSS Variables

Variable	Value	Category	Occurrences
--accent-color-base	#36c	unknown	1
--animation-delay-medium	-160ms	unknown	1
--animation-delay-none	0ms	unknown	1
--animation-delay-slow	-320ms	unknown	1
--animation-duration-fast	1000ms	unknown	1
--animation-duration-medium	1600ms	unknown	1
--animation-duration-slow	2000ms	unknown	1
--animation-iteration-count-base	infinite	unknown	1
--animation-timing-function-base	linear	unknown	1
--animation-timing-function-bouncing	ease-in-out	unknown	1
--background-color-backdrop-dark	hsla(0,0%,100%,0.65)	unknown	1
--background-color-backdrop-light	rgba(0,0,0,0.65)	unknown	1
--background-color-base	#101418	unknown	1
--background-color-base-fixed	#fff	unknown	1
--background-color-button-quiet--active	rgba(0,24,73,0.082)	unknown	1
--background-color-button-quiet--hover	rgba(0,24,73,0.027)	unknown	1
--background-color-content-added	#233566	unknown	1
--background-color-content-removed	#453217	unknown	1
--background-color-destructive	#bf3c2c	unknown	1
--background-color-destructive--active	#612419	unknown	1
--background-color-destructive--focus	#6485d1	unknown	1
--background-color-destructive--hover	#9f3526	unknown	1
--background-color-destructive-subtle	#3c1a13	unknown	1
--background-color-destructive-subtle--active	#9f3526	unknown	1
--background-color-destructive-subtle--hover	#612419	unknown	1
--background-color-disabled	#404244	unknown	1
--background-color-disabled-subtle	#27292d	unknown	1
--background-color-error	#f54739	unknown	1
--background-color-error--active	#bf3c2c	unknown	1
--background-color-error--hover	#d74032	unknown	1
--background-color-error-subtle	#3c1a13	unknown	1
--background-color-error-subtle--active	#9f3526	unknown	1
--background-color-error-subtle--hover	#612419	unknown	1
--background-color-input-binary--checked	#36c	unknown	1
--background-color-interactive	#27292d	unknown	1
--background-color-interactive--active	#54595d	unknown	1
--background-color-interactive--hover	#404244	unknown	1
--background-color-interactive-subtle	#202122	unknown	1
--background-color-interactive-subtle--active	#404244	unknown	1
--background-color-interactive-subtle--hover	#27292d	unknown	1
--background-color-inverted	#f8f9fa	unknown	1
--background-color-neutral	#27292d	unknown	1
--background-color-neutral-subtle	#202122	unknown	1
--background-color-notice-subtle	#27292d	unknown	1
--background-color-progressive	#36c	unknown	1
--background-color-progressive--active	#233566	unknown	1
--background-color-progressive--focus	#6485d1	unknown	1
--background-color-progressive--hover	#3056a9	unknown	1
--background-color-progressive-subtle	#1b223d	unknown	1
--background-color-progressive-subtle--active	#3056a9	unknown	1
--background-color-progressive-subtle--hover	#233566	unknown	1
--background-color-success-subtle	#132821	unknown	1
--background-color-tab-list-item-framed--active	hsla(0,0%,100%,0.65)	unknown	1
--background-color-tab-list-item-framed--hover	hsla(0,0%,100%,0.3)	unknown	1
--background-color-target-text	#572c19	unknown	1
--background-color-transparent	transparent	unknown	1
--background-color-warning-subtle	#2d2212	unknown	1
--background-position-base	center	unknown	1
--background-size-search-figure	cover	unknown	1
--border-base	var(--border-width-base) var(--border-style-base) var(--border-color-base)	unknown	1
--border-color-base	#72777d	unknown	1
--border-color-content-added	#233566	unknown	1
--border-color-content-removed	#987027}}:root{--color-print--visited:#520	unknown	1
--border-color-destructive	#f54739	unknown	1
--border-color-destructive--active	#fea898	unknown	1
--border-color-destructive--focus	#6485d1	unknown	1
--border-color-destructive--hover	#fd7865	unknown	1
--border-color-disabled	#54595d	unknown	1
--border-color-divider	#a2a9b1	unknown	1
--border-color-emphasized	#eaecf0	unknown	1
--border-color-error	#f54739	unknown	1
--border-color-error--active	#fea898	unknown	1
--border-color-error--hover	#fd7865	unknown	1
--border-color-input--hover	var(--border-color-interactive)	unknown	1
--border-color-input-binary	var(--border-color-interactive)	unknown	1
--border-color-input-binary--active	var(--border-color-progressive--active)	unknown	1
--border-color-input-binary--checked	var(--border-color-progressive)	unknown	1
--border-color-input-binary--focus	var(--border-color-progressive--focus)	unknown	1
--border-color-input-binary--hover	var(--border-color-progressive--hover)	unknown	1
--border-color-interactive	#72777d	unknown	1
--border-color-interactive--active	#c8ccd1	unknown	1
--border-color-interactive--hover	#a2a9b1	unknown	1
--border-color-inverted	#101418	unknown	1
--border-color-inverted-fixed	#fff	unknown	1
--border-color-muted	#404244	unknown	1
--border-color-notice	#72777d	unknown	1
--border-color-progressive	#6485d1	unknown	1
--border-color-progressive--active	#a6bbf5	unknown	1
--border-color-progressive--focus	#6485d1	unknown	1
--border-color-progressive--hover	#88a3e8	unknown	1
--border-color-subtle	#54595d	unknown	1
--border-color-success	#099979	unknown	1
--border-color-transparent	transparent	unknown	1
--border-color-warning	#ab7f2a	unknown	1
--border-color-warning--active	#edb537	unknown	1
--border-color-warning--hover	#ca982e	unknown	1
--border-destructive	var(--border-width-base) var(--border-style-base) var(--border-color-destructive)	unknown	1
--border-progressive	var(--border-width-base) var(--border-style-base) var(--border-color-progressive)	unknown	1
--border-radius-base	2px	unknown	1
--border-radius-circle	50%	unknown	1
--border-radius-pill	9999px	unknown	1
--border-radius-sharp	0	unknown	1
--border-style-base	solid	unknown	1
--border-style-dashed	dashed	unknown	1
--border-subtle	var(--border-width-base) var(--border-style-base) var(--border-color-subtle)	unknown	1
--border-transparent	var(--border-width-base) var(--border-style-base) var(--border-color-transparent)	unknown	1
--border-width-base	1px	unknown	1
--border-width-input-radio--checked	6px	unknown	1
--border-width-thick	2px	unknown	1
--box-shadow-color-alpha-base	rgba(0,0,0,0.87)	unknown	1
--box-shadow-color-base	#72777d	unknown	1
--box-shadow-color-destructive--focus	#6485d1	unknown	1
--box-shadow-color-inverted	#000	unknown	1
--box-shadow-color-progressive--active	#233566	unknown	1
--box-shadow-color-progressive--focus	#6485d1	unknown	1
--box-shadow-color-progressive-selected	#88a3e8	unknown	1
--box-shadow-color-progressive-selected--active	#b6d4fb	unknown	1
--box-shadow-color-progressive-selected--hover	#a6bbf5	unknown	1
--box-shadow-color-transparent	transparent	unknown	1
--box-shadow-drop-medium	var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base),var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base)}@media only screen and (prefers-color-scheme:dark){:root{--color-base:#eaecf0	unknown	1
--box-shadow-drop-small	var(--box-shadow-outset-small) var(--box-shadow-color-base)	unknown	1
--box-shadow-drop-xx-large	0 20px 48px 0 rgba(0,0,0,0.2)	unknown	1
--box-shadow-inset-medium	inset 0 0 0 2px	unknown	1
--box-shadow-inset-medium-vertical	inset 0 -2px 0 0	unknown	1
--box-shadow-inset-small	inset 0 0 0 1px	unknown	1
--box-shadow-large	var(--box-shadow-outset-large-below) var(--box-shadow-color-alpha-base),var(--box-shadow-outset-large-around) var(--box-shadow-color-alpha-base)	unknown	1
--box-shadow-medium	var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base),var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base)	unknown	1
--box-shadow-outset-large-around	0 0 16px 0	unknown	1
--box-shadow-outset-large-below	0 4px 8px 0	unknown	1
--box-shadow-outset-medium-around	0 0 8px 0	unknown	1
--box-shadow-outset-medium-below	0 4px 4px 0	unknown	1
--box-shadow-outset-small	0 0 0 1px	unknown	1
--box-shadow-outset-small-bottom	0 1px 0 0	unknown	1
--box-shadow-outset-small-start	-1px 0 0 0	unknown	1
--box-shadow-outset-small-top	0 -1px 0 0	unknown	1
--box-shadow-small	var(--box-shadow-outset-small) var(--box-shadow-color-base)	unknown	1
--box-shadow-small-bottom	var(--box-shadow-outset-small-bottom) var(--box-shadow-color-base)	unknown	1
--box-shadow-small-top	var(--box-shadow-outset-small-top) var(--box-shadow-color-base)	unknown	1
--box-sizing-base	border-box	unknown	1
--color-base	#202122	unknown	1
--color-base--hover	#f8f9fa	unknown	1
--color-base--subtle	#a2a9b1	unknown	1
--color-base-fixed	#202122	unknown	1
--color-content-added	#80cdb3	unknown	1
--color-content-removed	#fd7865	unknown	1
--color-destructive	#fd7865	unknown	1
--color-destructive--active	#ffc8bd	unknown	1
--color-destructive--focus	#36c	unknown	1
--color-destructive--hover	#fea898	unknown	1
--color-destructive--visited	#c99391	unknown	1
--color-destructive--visited--active	#e8cecd	unknown	1
--color-destructive--visited--hover	#dcb5b3	unknown	1
--color-disabled	#54595d	unknown	1
--color-disabled-emphasized	#72777d	unknown	1
--color-emphasized	#f8f9fa	unknown	1
--color-error	#fd7865	unknown	1
--color-error--active	#ffc8bd	unknown	1
--color-error--hover	#fea898	unknown	1
--color-icon-error	#f54739	unknown	1
--color-icon-notice	#72777d	unknown	1
--color-icon-success	#099979	unknown	1
--color-icon-warning	#ab7f2a	unknown	1
--color-inverted	#101418	unknown	1
--color-inverted-fixed	#fff	unknown	1
--color-link	var(--color-progressive)	unknown	1
--color-link--active	var(--color-progressive--active)	unknown	1
--color-link--focus	var(--color-progressive--focus)	unknown	1
--color-link--hover	var(--color-progressive--hover)	unknown	1
--color-link--visited	var(--color-visited)	unknown	1
--color-link--visited--active	var(--color-visited--active)	unknown	1
--color-link--visited--hover	var(--color-visited--hover)	unknown	1
--color-link-red	var(--color-destructive)	unknown	1
--color-link-red--active	var(--color-destructive--active)	unknown	1
--color-link-red--focus	var(--color-destructive--focus)	unknown	1
--color-link-red--hover	var(--color-destructive--hover)	unknown	1
--color-link-red--visited	var(--color-destructive--visited)	unknown	1
--color-link-red--visited--active	var(--color-destructive--visited--active)	unknown	1
--color-link-red--visited--hover	var(--color-destructive--visited--hover)	unknown	1
--color-neutral	#c8ccd1	unknown	1
--color-notice	#a2a9b1	unknown	1
--color-placeholder	#72777d	unknown	1
--color-progressive	#88a3e8	unknown	1
--color-progressive--active	#b6d4fb	unknown	1
--color-progressive--focus	#36c	unknown	1
--color-progressive--hover	#a6bbf5	unknown	1
--color-subtle	#a2a9b1	unknown	1
--color-success	#2cb491	unknown	1
--color-visited	#a799cd	unknown	1
--color-visited--active	#d9d0e9	unknown	1
--color-visited--hover	#c5b9dd	unknown	1
--color-warning	#ca982e	unknown	1
--cursor-base	default	unknown	1
--cursor-base--disabled	default	unknown	1
--cursor-base--hover	pointer	unknown	1
--cursor-grab	grab	unknown	1
--cursor-grabbing	grabbing	unknown	1
--cursor-help	help	unknown	1
--cursor-move	move	unknown	1
--cursor-not-allowed	not-allowed	unknown	1
--cursor-resize-nesw	nesw-resize	unknown	1
--cursor-resize-nwse	nwse-resize	unknown	1
--cursor-text	text	unknown	1
--cursor-zoom-in	zoom-in	unknown	1
--cursor-zoom-out	zoom-out	unknown	1
--filter-invert-icon	0	unknown	1
--filter-invert-primary-button-icon	1	unknown	1
--font-family-base	sans-serif	unknown	1
--font-family-heading-main	"Linux Libertine","Georgia","Times","Source Serif 4",serif	unknown	1
--font-family-monospace	"Menlo","Consolas","Liberation Mono","Fira Code","Courier New",monospace	unknown	1
--font-family-monospace--fallback	monospace,monospace	unknown	1
--font-family-sans	"Helvetica Neue","Helvetica","Liberation Sans","Arial",sans-serif	unknown	1
--font-family-sans--fallback	sans-serif	unknown	1
--font-family-serif	"Linux Libertine","Georgia","Times","Source Serif 4",serif	unknown	1
--font-family-serif--fallback	serif	unknown	1
--font-family-system-sans	-apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Inter","Helvetica","Arial",sans-serif	unknown	1
--font-size-large	1.125rem	unknown	1
--font-size-medium	1rem	unknown	1
--font-size-small	0.875rem	unknown	1
--font-size-x-large	1.25rem	unknown	1
--font-size-x-small	0.75rem	unknown	1
--font-size-xx-large	1.5rem	unknown	1
--font-size-xxx-large	1.75rem	unknown	1
--font-weight-bold	700	unknown	1
--font-weight-hairline	100	unknown	1
--font-weight-light	300	unknown	1
--font-weight-normal	400	unknown	1
--font-weight-semi-bold	600	unknown	1
--height-toggle-switch	calc(var(--font-size-medium)*2)	unknown	1
--line-height-content	1.625	unknown	1
--line-height-large	1.75rem	unknown	1
--line-height-medium	1.625rem	unknown	1
--line-height-small	1.375rem	unknown	1
--line-height-x-large	1.875rem	unknown	1
--line-height-x-small	1.25rem	unknown	1
--line-height-xx-large	2.125rem	unknown	1
--line-height-xx-small	1.5714285rem	unknown	1
--line-height-xxx-large	2.375rem	unknown	1
--line-height-xxx-small	1.4285714rem	unknown	1
--max-height-chip	1.375rem	unknown	1
--max-width-base	none	unknown	1
--max-width-breakpoint-desktop	calc(1680px - var(--size-absolute-1))	unknown	1
--max-width-breakpoint-mobile	calc(640px - var(--size-absolute-1))	unknown	1
--max-width-breakpoint-tablet	calc(1120px - var(--size-absolute-1))	unknown	1
--max-width-button	28rem	unknown	1
--min-height-table-footer	40px	unknown	1
--min-height-table-header	40px	unknown	1
--min-height-text-area	64px	unknown	1
--min-height-toggle-switch	28px	unknown	1
--min-size-icon-medium	18px	unknown	1
--min-size-icon-small	14px	unknown	1
--min-size-icon-x-small	10px	unknown	1
--min-size-input-binary	20px	unknown	1
--min-size-input-chip-clear-button	20px	unknown	1
--min-size-interactive-pointer	32px	unknown	1
--min-size-interactive-touch	44px	unknown	1
--min-size-search-figure	40px	unknown	1
--min-size-toggle-switch-grip	18px	unknown	1
--min-width-breakpoint-desktop	1120px	unknown	1
--min-width-breakpoint-desktop-wide	1680px	unknown	1
--min-width-breakpoint-mobile	320px	unknown	1
--min-width-breakpoint-tablet	640px	unknown	1
--min-width-medium	256px	unknown	1
--min-width-toggle-switch	42px	unknown	1
--mix-blend-mode-base	normal	unknown	1
--mix-blend-mode-blend	screen	unknown	1
--moz-device-pixel-ratio	2),(min-resolution:2dppx),(min-resolution:192dpi){hr{border-bottom-width:.5px}}@supports (-webkit-marquee-style:slide){hr{border-bottom-width:1px}}.js-enabled .central-featured,.js-enabled .jsl10n{opacity:0}.jsl10n-visible .central-featured,.jsl10n-visible .jsl10n{opacity:1}@media print{body{background-color:transparent}a{color:#000!important	unknown	1
--opacity-base	1	unknown	1
--opacity-icon-base	0.87	unknown	1
--opacity-icon-base--disabled	0.51	unknown	1
--opacity-icon-base--hover	0.74	unknown	1
--opacity-icon-base--selected	1	unknown	1
--opacity-icon-placeholder	0.51	unknown	1
--opacity-icon-subtle	0.67	unknown	1
--opacity-low	0.3	unknown	1
--opacity-medium	0.65	unknown	1
--opacity-transparent	0	unknown	1
--outline-base--focus	var(--border-width-base) solid transparent	unknown	1
--outline-color-progressive--focus	#36c	unknown	1
--position-offset-border-width-base	-var(--border-width-base)	unknown	1
--size-0	0	unknown	1
--size-100	1rem	unknown	1
--size-12	0.125rem	unknown	1
--size-1200	12rem	unknown	1
--size-125	1.25rem	unknown	1
--size-150	1.5rem	unknown	1
--size-1600	16rem	unknown	1
--size-200	2rem	unknown	1
--size-2400	24rem	unknown	1
--size-25	0.25rem	unknown	1
--size-250	2.5rem	unknown	1
--size-275	2.75rem	unknown	1
--size-2800	28rem	unknown	1
--size-300	3rem	unknown	1
--size-3200	32rem	unknown	1
--size-400	4rem	unknown	1
--size-4000	40rem	unknown	1
--size-50	0.5rem	unknown	1
--size-5600	56rem	unknown	1
--size-6	0.0625rem	unknown	1
--size-75	0.75rem	unknown	1

Showing 300 of 393 variables. Full inventory is preserved in tokens.json.

Layout Sections

No data captured.