Design System Audit

fit-green-mind.com
Visual Language

Complete design system extracted from fit-green-mind.com — every token, component, interaction pattern, and accessibility note, all from real values.

5Color tokens
7Type styles
5Breakpoints
EightiescomebackPrimary font
01 — Foundations

Color Palette

All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.

canvas-soft

#f8e3e9

Dominant — background, text

1.00:1 on page bg #f8e3e9 · fails AA

accent

#40806c

Dominant — text, background

3.79:1 on page bg #f8e3e9 · AA large text ✓

black

#000000

Major — text, background

17.16:1 on page bg #f8e3e9 · AAA ✓

canvas

#f7fcff

Accent — background

20.32:1 on black · AAA ✓

primary

#0b9ac5

Accent — text

2.66:1 on page bg #f8e3e9 · fails AA
02 — Foundations

Typography

Single font family: Eightiescomeback — used across all roles. Font files loaded by the site: Eightiescomeback (300, 400, 500, 600, 700) · Hello Kookycloud Webfont (400) · Hello Kookycloud Extrakooky Webfont (400) · Ptsans (400, 700).

RoleSpecsSampleUsed on
Body
Eightiescomeback
16px / 500
lh 1.50
The quick brown fox jumps over the lazy dog
DIV element · 20 uses
Body
Eightiescomeback
16px / 500
lh 1.50
The quick brown fox jumps over the lazy dog
BODY element · 16 uses
UI Label
Eightiescomeback
16px / 700
lh 1.50
The quick brown fox jumps over the lazy dog
LI element · 12 uses
UI Label
Eightiescomeback
16px / 700
lh 1.31
The quick brown fox jumps over the lazy dog
DIV element · 6 uses
Display
Eightiescomeback
32px / 700
lh 1.09
The quick brown fox jumps
DIV element · 2 uses
Micro
Eightiescomeback
12px / 500
lh 1.50
LABEL · TAG
A element · 2 uses
Body
Eightiescomeback
16px / 400
The quick brown fox jumps over the lazy dog
HTML element · 1 uses
03 — Components

Navigation

Nav demo using extracted colors, font, real link labels and the site's real logo.

nav · demo using extracted tokens & real links
fit-green-mind.com
Skip to main contentRecipes +All RecipesWinter RecipesBest of Tofu
© 2025 Fitgreenmind
Extracted nav tokens
Background#1a1a1a
Text color#ffffff
Font familyEightiescomeback
Links (extracted)Skip to main content · Recipes + · All Recipes · Winter Recipes · Best of Tofu
Copyright (extracted)© 2025 Fitgreenmind

Layout values (height, padding, link states) are demo styling — not extracted from the site.

04 — Components

Button Variants

Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 8px · fill type: solid · padding density: normal.

btn-primary · token demo

bg #0b9ac5 · color #ffffff · radius: 8px

btn-secondary · outlined demo

Demo variant — outlined treatment of the extracted primary color #0b9ac5.

btn-ghost · text-only demo

Demo variant — text-only treatment of the extracted primary color.

btn-disabled · demo state

Generic disabled-state demo — not extracted from the site.

05 — Components

Cards & Surfaces

Depth communicated through shadows and background contrast.

section surface

bg #f8e3e9 · text #000000

page canvas

bg #f8e3e9 · text #40806c

card surface

bg #f8e3e9 · text #f8e3e9

card surface

bg #40806c · text #f8e3e9

07 — Components

Form Elements

Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.

Contact form — site-styled demo

fit-green-mind.com
Get in Touch

Input states
input · default

radius: not detected · demo border/background styling

input · focus state demo

Demo focus treatment using extracted primary color #0b9ac5.

select · dropdown
08 — Foundations

Spacing Scale

Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.

24px
lg
09 — Foundations

Border Radius

Corner radius tokens observed across components. All values extracted from live stylesheet.

8px
sm
8px
32px
xl
32px
1366px
full
1366px

⚠️ 1366px exceeds any component size — likely from an oversized decorative element (effectively a pill shape), not a reusable radius token.

10 — Foundations

Elevation & Depth

Box-shadow tokens extracted from CSS variables. Shadow values represent real usage.

Observed element shadow

rgba(0, 0, 0, 0.25) 0px 0px 5px 0px

11 — Interactions

Motion

Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.

hover demo · using extracted tokens

Demo transitions use the fastest extracted duration (0.1s ease).

idle vs hover · frozen demo states

Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.

Motion tokens (extracted)
TokenValueOccurrences
duration-fast0.1s8× in stylesheet
duration-base0.2s57× in stylesheet
duration-slow0.3s43× in stylesheet
duration-slower0.4s27× in stylesheet
duration-slowest1s13× in stylesheet
easing-1ease70× in stylesheet
easing-2linear19× in stylesheet
easing-3ease-in-out5× in stylesheet
12 — Responsive

Responsive Behavior

Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.

BreakpointBoundaryUsage
Mobile480px7 @media rules
Mobile-2481px6 @media rules
Mobile-3571px2 @media rules
Tablet768px8 @media rules
Desktop927px5 @media rules
480px
481px
571px
768px
927px

Extracted from https://fit-green-mind.com/ stylesheets.

13 — Assets

Iconography & Brand Assets

Assets and links extracted from the scraped pages.

Brand mark — extracted (inline SVG)

Logo extracted as inline SVG from the page markup.

Brand asset — SoulSpice
SoulSpice

https://cdn.prod.website-files.com/686f8c8fe6ef2aa9a679c30b/686f8c8fe6ef2aa9a679c329_SoulSpice.svg

Brand asset — Gymondo
Gymondo

https://cdn.prod.website-files.com/686f8c8fe6ef2aa9a679c30b/686f8c8fe6ef2aa9a679c38f_Gymondo.svg

Social links found on site
YouTube ↗ LinkedIn ↗
Icon system

No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.