Back to DesignMD
samad anoosheh
Generated Oct 20, 2026
DESIGN.md for fitness-studio-copy-e8f0923a.base44.app
Remixes of fitness-studio-copy-e8f0923a.base44.app
Latest remixes
No public remixes yet. Be the first to make one.
Remix itsamad anoosheh
Generated Oct 20, 2026
Latest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Fitness-studio-copy-e8f0923a
description: |
AURA's design system embodies an aspirational, luxury wellness aesthetic
grounded in calm and empowerment. The palette centers on cool, meditative
tones—deep ocean blues paired with soft sky greys—evoking water, serenity, and
strength. Generous whitespace, elegant serif typography for display, and clean
sans-serif for body text create a modern, premium feel. The visual atmosphere
is serene yet confident: imagery of swimmers and athletes conveys capability
and transformation, while soft gradients and layered colour blocks suggest
depth without visual noise. Every interaction feels intentional and unrushed,
reflecting a sanctuary mindset. The brand avoids aggressive contrast; instead,
it layers sophisticated neutrals and subtle accent accents to guide the eye
without overwhelming it.
source:
url: "https://fitness-studio-copy-e8f0923a.base44.app/"
pagesAnalyzed: 1
extractedAt: 2026-10-15
tokensMeasured: true
colors:
primary: "#0A4275"
canvas: "#BED9E9"
surface-alt: "#000000"
ink: "#FFFFFF"
hairline: "#001D39"
accent-1: "#6FA2B3"
typography:
display-xxl:
fontFamily: Taviraj
fontSize: 115.2px
fontWeight: 200
lineHeight: 1
letterSpacing: -1.15px
display-xl:
fontFamily: Taviraj
fontSize: 110px
fontWeight: 100
lineHeight: 1.5
letterSpacing: 0px
display-lg:
fontFamily: Taviraj
fontSize: 60px
fontWeight: 300
lineHeight: 1
letterSpacing: -1.5px
display-md:
fontFamily: Taviraj
fontSize: 48px
fontWeight: 100
lineHeight: 1
letterSpacing: -1.2px
display-md-strong:
fontFamily: Taviraj
fontSize: 48px
fontWeight: 300
lineHeight: 1
letterSpacing: -1.2px
heading:
fontFamily: Taviraj
fontSize: 30px
fontWeight: 300
lineHeight: 1.2
letterSpacing: 0px
body-lg:
fontFamily: Taviraj
fontSize: 18px
fontWeight: 100
lineHeight: 1.56
letterSpacing: 11.55px
body-lg-strong:
fontFamily: Taviraj
fontSize: 18px
fontWeight: 200
lineHeight: 1.56
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
body-sm-2:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0.35px
body-xs:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 1.2px
textTransform: uppercase
button-xl:
fontFamily: Taviraj
fontSize: 28px
fontWeight: 300
lineHeight: 1.25
letterSpacing: 0px
button-lg:
fontFamily: Inter
fontSize: 12px
fontWeight: 300
lineHeight: 1.33
letterSpacing: 0px
button-lg-strong:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0.96px
button-lg-uppercase:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 1.2px
textTransform: uppercase
button-lg-2:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 0px
caption-xs:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0.3px
caption-xs-tight:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
caption-xs-uppercase:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 3.6px
textTransform: uppercase
caption-xs-strong:
fontFamily: Inter
fontSize: 12px
fontWeight: 600
lineHeight: 1.33
letterSpacing: 2.4px
rounded:
none: 0px
xs: 6px
sm: 16px
full: 9999px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 40px
section: 48px
band: 64px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#BED9E9"
surface: "#000000"
surfaceRaised: "#0A0A0A"
text: "#FFFFFF"
textMuted: "#E8F2F7"
border: "#001D39"
accent: "#0A4275"
accentFg: "#FFFFFF"
focusRing: "#0A4275"
elevation: shadow
dark:
bg: "#0C0F13"
surface: "#1B1D21"
surfaceRaised: "#27292D"
text: "#F5F7F9"
textMuted: "#9C9FA2"
border: "#333539"
accent: "#1482E6"
accentFg: "#0B0B0C"
focusRing: "#0F62AD"
elevation: "border+surface"
contrastFailures:
- "light: text on bg = 1.47:1 (needs 4.5:1)"
- "light: muted on bg = 1.29:1 (needs 4.5:1)"
gradients:
- context: hero
kind: linear
value: "linear-gradient(to top, rgba(10, 66, 117, 0.8), rgba(10, 66, 117, 0.3), rgba(0, 0, 0, 0))"
- context: section
kind: linear
value: "linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0))"
- context: section
kind: linear
value: "linear-gradient(rgb(110, 162, 179), rgb(189, 216, 233))"
- context: section
kind: linear
value: "linear-gradient(to top, rgb(110, 162, 179), rgb(123, 189, 232))"
filter: "blur(60px)"
- context: section
kind: linear
value: "linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0))"
- context: section
kind: linear
value: "linear-gradient(rgb(190, 217, 233), rgb(123, 189, 232))"
components:
button-filled:
typography: "{typography.body-xs}"
textColor: "rgb(189, 216, 233)"
height: 36px
padding: "10px 24px 10px 24px"
rounded: 4px
backgroundColor: "{colors.hairline}"
button-primary:
typography: "{typography.body-xs}"
textColor: "{colors.canvas}"
height: 36px
padding: "10px 24px 10px 24px"
rounded: 4px
backgroundColor: "{colors.primary}"
button-secondary:
typography: "{typography.body-xs}"
textColor: "{colors.primary}"
height: 32px
padding: "8px 16px 8px 16px"
rounded: 4px
backgroundColor: "{colors.ink}"
button-icon:
typography: "{typography.body-md}"
textColor: "{colors.primary}"
height: 32px
padding: "8px 8px 8px 8px"
button-text:
typography: "{typography.button-lg}"
textColor: "{colors.primary}"
height: 16px
button-text-2:
typography: "{typography.body-xs}"
textColor: "{colors.primary}"
height: 16px
badge-icon:
typography: "{typography.body-sm}"
textColor: "rgb(189, 216, 233)"
height: 16px
footer:
typography: "{typography.body-md}"
textColor: "rgb(189, 216, 233)"
link:
typography: "{typography.body-xs}"
textColor: "{colors.primary}"
padding: "10px 24px 10px 24px"
rounded: 4px
backgroundColor: "{colors.canvas}"
link-sm:
typography: "{typography.body-lg}"
textColor: "{colors.primary}"
states:
other-hover:
target: other
state: hover
opacity: 1
other-focus:
target: other
state: focus
opacity: 1
other-focus-visible:
target: other
state: focus-visible
outline: "transparent solid 2px"
outlineColor: transparent
outlineWidth: 2px
other-disabled:
target: other
state: disabled
opacity: 0.3
nav-hover:
target: nav
state: hover
opacity: 1
breakpoints:
- width: 375
containerWidth: 327
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: true
headingPx: 48
bodyPx: 16
sectionPaddingX: 24
- width: 768
containerWidth: 645
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: true
headingPx: 77
bodyPx: 16
sectionPaddingX: 61
- width: 1024
containerWidth: 860
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: true
headingPx: 82
bodyPx: 16
sectionPaddingX: 82
- width: 1280
containerWidth: 1075
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: true
headingPx: 102
bodyPx: 16
sectionPaddingX: 102
- width: 1440
containerWidth: 1400
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: true
headingPx: 115
bodyPx: 16
sectionPaddingX: 115
coverage:
statesFound: 47
gradientsFound: 8
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
AURA's design system embodies an aspirational, luxury wellness aesthetic grounded in calm and empowerment. The palette centers on cool, meditative tones—deep ocean blues paired with soft sky greys—evoking water, serenity, and strength. Generous whitespace, elegant serif typography for display, and clean sans-serif for body text create a modern, premium feel. The visual atmosphere is serene yet confident: imagery of swimmers and athletes conveys capability and transformation, while soft gradients and layered colour blocks suggest depth without visual noise. Every interaction feels intentional and unrushed, reflecting a sanctuary mindset. The brand avoids aggressive contrast; instead, it layers sophisticated neutrals and subtle accent accents to guide the eye without overwhelming it.
Key Characteristics
{colors.primary} — #0A4275): Deep ocean blue used for primary CTAs, active states, brand accents, and key interactive elements. This is the core brand colour, commanding attention while maintaining the serene aesthetic.{colors.accent-1} — #6FA2B3): Muted slate-grey-blue with no explicit role in the site's UI patterns. Used as decorative fill or secondary emphasis; treat as supplementary rather than load-bearing in the hierarchy.{colors.canvas} — #BED9E9): Soft sky blue serving as the default page background. Creates a serene, elevated backdrop that feels neither white nor grey—distinctly part of AURA's calming aesthetic.{colors.ink} — #FFFFFF): Pure white for headings, primary text, and high-contrast readable layers. Used over dark and coloured backgrounds for maximum legibility.{colors.hairline} — #001D39): Near-black, deeply saturated navy reserved for 1px borders, dividers, and subtle structural lines. Maintains visual coherence without pure black harshness.{colors.surface-alt} — #000000): Absolute black for alternating section bands and overlay backgrounds. Creates high-contrast visual breaks and deep shadow layers in gradient overlays.Primary: Taviraj (Serif, elegant display face) Fallback: Georgia, serif
Secondary: Inter (Sans-serif, modern body face) Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Taviraj | 115px | 200 | 1 | -1.15px | Hero heading; hero banner scale at 1440px |
| Display XL | Taviraj | 110px | 100 | 1.5 | 0px | Oversized display text with open spacing |
| Display LG | Taviraj | 60px | 300 | 1 | -1.5px | Large section heading; negative tracking |
| Display MD Strong | Taviraj | 48px | 300 | 1 | -1.2px | Prominent mid-size heading with negative tracking |
| Display MD | Taviraj | 48px | 100 | 1 | -1.2px | Mid-size display with lighter weight |
| Heading | Taviraj | 30px | 300 | 1.2 | 0px | Section subheading |
| Body LG Strong | Taviraj | 18px | 200 | 1.56 | 0px | Emphasis copy; serif elegance |
| Body LG | Taviraj | 18px | 100 | 1.56 | 11.55px | Large body text with extreme letter-spacing |
| Button XL | Taviraj | 28px | 300 | 1.25 | 0px | Large serif buttons |
| Body MD | Inter | 16px | 400 | 1.5 | 0px | Primary body text; standard readability |
| Body SM | Inter | 14px | 400 | 1.43 | 0px | Secondary body; smaller context |
| Body SM 2 | Inter | 14px | 400 | 1.43 | 0.35px | Variant with subtle tracking |
| Button LG | Inter | 12px | 300 | 1.33 | 0px | Standard button label |
| Button LG Strong | Inter | 12px | 400 | 1.33 | 0.96px | Emphasis button text |
| Button LG Uppercase | Inter | 12px | 400 | 1.33 | 1.2px | Uppercase button with tracking; text-transform: uppercase |
| Button LG 2 | Inter | 12px | 500 | 1.33 | 0px | Semi-bold button variant |
| Body XS | Inter | 12px | 500 | 1.33 | 1.2px | Small emphasis; text-transform: uppercase |
| Caption XS | Inter | 12px | 400 | 1.33 | 0.3px | Captions and fine print |
| Caption XS Tight | Inter | 12px | 400 | 1.33 | 0px | Dense caption with no tracking |
| Caption XS Strong | Inter | 12px | 600 | 1.33 | 2.4px | Bold uppercase caption; text-transform: uppercase |
| Caption XS Uppercase | Inter | 12px | 400 | 1.33 | 3.6px | Highly tracked uppercase label; text-transform: uppercase |
-1.15px to -1.5px) for confidence and compression. Buttons and captions vary tracking (0px to 3.6px) to emphasize hierarchy and context.Primary Button
{colors.primary} (#0A4275){colors.canvas} (#BED9E9){rounded.none} (0px) — sharp cornersSecondary Button
{colors.ink} (#FFFFFF){colors.primary} (#0A4275){rounded.none} (0px)Filled Button
#001D39 (hairline-adjacent dark){colors.canvas} (#BED9E9){rounded.none} (0px)Icon Button
{colors.primary} (#0A4275){rounded.none} (0px)Text Button
{colors.primary} (#0A4275){rounded.none} (0px)Button Hover States (from stylesheet evidence)
#0A4275)hsl(var(--primary)) on hover (brand blue)General Card
{colors.canvas} (#BED9E9) or {colors.ink} (#FFFFFF) depending on section{rounded.none} (0px) for sharp, modern aesthetic{spacing.md} to {spacing.lg} (20px–24px)Image Container
{rounded.none} (0px) — sharp image corners throughoutlinear-gradient(to top, rgba(10, 66, 117, 0.8), rgba(10, 66, 117, 0.3), rgba(0, 0, 0, 0))) for hero sectionsText Input / Field
{colors.ink} (#FFFFFF){colors.hairline} (#001D39){colors.hairline} (#001D39){rounded.xs} (6px){spacing.xs} to {spacing.sm} (12px–16px)Input Focus State (from stylesheet)
Disabled Input
{colors.canvas} (#BED9E9)Navigation Link (Header)
{colors.ink} (#FFFFFF) on dark/hero background, {colors.primary} (#0A4275) on light background{spacing.xs} to {spacing.sm} (12px–16px){rounded.none} (0px)Navigation Hover
Mobile Menu Toggle
{colors.ink} (#FFFFFF) on dark, {colors.primary} on light{rounded.none} (0px)Icon Badge
{colors.canvas} (#BED9E9){rounded.none} (0px)Base unit: 8px
Scale:
{spacing.xxs} = 8px (tight micro-spacing, margins between adjacent elements){spacing.xs} = 12px (small padding, button internal spacing){spacing.sm} = 16px (body margin, card padding){spacing.md} = 20px (section padding, medium gaps){spacing.lg} = 24px (large padding, prominent section spacing){spacing.xl} = 28px (extra-large gaps){spacing.xxl} = 32px (hero spacing, major section padding){spacing.xxxl} = 40px (prominent hero sections){spacing.section} = 48px (major section vertical padding){spacing.band} = 64px (full-width band padding, largest sections)Usage Context:
{spacing.xs} to {spacing.sm} (12px–16px){spacing.md} to {spacing.lg} (20px–24px){spacing.section} to {spacing.band} (48px–64px){spacing.xxs} to {spacing.md} (8px–20px){spacing.lg} (24px)AURA embraces generous negative space as a design principle. Sections are spaced {spacing.section} to {spacing.band} apart vertically (48px–64px), creating rhythm and preventing visual clutter. Horizontal padding grows with viewport size to ensure content never feels cramped or crowded. Elements breathe; there is no dense packing. This reflects the sanctuary aesthetic: space itself is part of the luxury. Images are full-width with breathing room around text overlays. Gradients and colour blocks provide visual depth without crowding.
{rounded.none} = 0px (images, buttons, cards, inputs—sharp, modern aesthetic){rounded.xs} = 6px (6px elements observed; applied to some form fields for subtle softness){rounded.sm} = 16px (larger, more pronounced roundness for specific containers){rounded.full} = 9999px (pill-shaped buttons and elements; observed but not primary in this system—most buttons are sharp)Component-Level Radius:
{rounded.none} (0px){rounded.none} (0px){rounded.none} (0px){rounded.none} (0px){rounded.xs} (6px) or {rounded.none} (0px)Observed Stroke Widths:
{colors.hairline} — #001D39)Borders are minimal in this system; visual separation comes primarily through colour blocking, shadows, and whitespace rather than explicit stroke.
AURA employs a colour-blocking approach to depth rather than a layered shadow system. Visual hierarchy comes from surface colour changes, opacity shifts, and gradient overlays. No measured box-shadows exist on interactive elements; instead, depth is implied through layering of tonal surfaces and overlays.
| Level | Treatment | Use |
|---|---|---|
| Flat / Base | Solid colour, no shadow | Cards, buttons, background surfaces |
| Overlay | Semi-transparent gradient or colour | Hero sections, image tints, depth layers |
| Floating | Opacity shift, no shadow | Hover states increase opacity to 1.0 from baseline 0.6–0.8 |
Shadow Philosophy: The system avoids traditional drop shadows. Instead, gradients and transparency create depth:
linear-gradient(to top, rgba(10, 66, 117, 0.8), rgba(10, 66, 117, 0.3), rgba(0, 0, 0, 0)) — dark overlay fading to transparentlinear-gradient(rgb(110, 162, 179), rgb(189, 216, 233)) — soft colour transitionsfilter: blur(60px) for atmospheric depthrgba(0, 0, 0, 0.5) to rgba(0, 0, 0, 0.8) for darking overlaysInteraction Opacity:
| Layer | Z-Index | Use |
|---|---|---|
| Base | 7–9 | Page content, default sections, cards |
| Dropdown / Overlay | 10–50 | Modals, popovers, dropdown menus |
| Sticky / Fixed | 100 | Fixed headers, sticky navigation, persistent elements |
Stacking Strategy: Sticky navigation (header) sits at z-index 100 to remain above all scrolling content. Dropdowns and modals layer at 10–50 to float above base content without competing with fixed elements. No elements exceed z-index 100.
{colors.primary} — #0A4275) for all CTAs and actionable UI. It commands attention while maintaining the calm aesthetic.{rounded.none} — 0px). This is the modern signature of the system.-1.15px to -1.5px) on large display text (Taviraj, 48px+) for refined elegance and brand recognition.{spacing.section} to {spacing.band} (48px–64px) between major sections to preserve the sanctuary feel.{colors.ink}) text on dark backgrounds and {colors.primary} on light backgrounds for maximum contrast and readability.#000000) as a text colour on light backgrounds. Reserve {colors.hairline} (#001D39) for borders and {colors.primary} for interactive text.{rounded.none} (0px). Pill shapes ({rounded.full}) are decorative outliers, not system standards.{colors.hairline} border if defining form inputs.{spacing.xs} (12px) on buttons or interactive elements. Minimum is 10px (tight) for small buttons.{colors.primary}, {colors.accent-1}, {colors.canvas}, {colors.surface-alt}, {colors.ink}, {colors.hairline}). No invented status colours (error red, success green) without explicit data.| Viewport Width | Content Column | Grid Columns | Largest Heading | Body Font Size | Section Padding X | Key Changes |
|---|---|---|---|---|---|---|
| 375px (Mobile) | 327px | 3 | 48px | 16px | 24px | Nav menu toggle visible; nav links hidden; compact padding |
| 768px (Tablet) | 645px | 3 | 77px | 16px | 61px | Increased heading scale; expanded content column; larger padding |
| 1024px (Desktop) | 860px | 3 | 82px | 16px | 82px | Further heading growth; standard desktop spacing |
| 1280px (Large Desktop) | 1075px | 3 | 102px | 16px | 102px | Hero text continues to scale; generous horizontal padding |
| 1440px (XL Desktop) | 1400px | 3 | 115px | 16px | 102px+ | Full-size display headings (115px); maximum padding applied |
Breakpoint Derivation: Breakpoints are derived from where measured values actually change. At 375px, largest heading is 48px; at 768px it jumps to 77px. The menu toggle appears consistently across all measured viewports (375px–1440px), indicating no desktop-only navigation expansion. Content column and padding scale incrementally at each step.
{spacing.xs}) between interactive elements to prevent thumb-overlap on mobileAll buttons measured are 32px–36px in height, meeting touch target standards. Icon buttons are exactly 32px × 32px.
Mobile (< 768px):
32px × 32px) visible in header{spacing.lg} (24px) horizontalTablet (768px–1024px):
Desktop (1024px+):
Key Insight: Navigation is always a toggle menu across all breakpoints (375px–1440px); it never expands to a horizontal navbar. This is a mobile-first design that maintains compact navigation even on desktop.
Use this mapping to make immediate color decisions:
{colors.primary} (#0A4275) — all interactive buttons, links, active states{colors.ink} (#FFFFFF) — alternate button fill on dark backgrounds{colors.canvas} (#BED9E9) — default page background, soft sky blue{colors.ink} (#FFFFFF) — on dark/primary backgrounds; {colors.primary} on light backgrounds{colors.hairline} (#001D39) — 1px structural lines and form borders{colors.surface-alt} (#000000) — gradient overlay tints, dark section bands{colors.accent-1} (#6FA2B3) — supplementary, non-load-bearing UI accentFont Pairing is Fixed: Always use Taviraj (serif, 200–300 weight) for display/headings and Inter (sans-serif, 300–600 weight) for body. Do not swap or substitute.
Negative Letter-Spacing on Display: Apply -1.15px to -1.5px tracking on Taviraj at 48px and above. This is the refined brand signature; omit it and the system loses character.
Buttons are Sharp: Border radius is 0px (not 6px or 16px). Modern, angular corners are non-negotiable.
Colour-Block, Don't Shadow: Depth comes from opacity, gradients, and surface colour changes. No drop shadows on standard UI. Exception: interactive hover states increase opacity from 0.6–0.8 to 1.0.
Mobile Navigation is Always a Toggle: Even at 1440px, the nav is a hamburger menu. No responsive expansion to a horizontal navbar.
Spacing Scales with Viewport: Horizontal padding grows from 24px (mobile) to 102px (desktop). This is intentional, not accidental.
Grid is 3-Column Everywhere: Maintain 3 columns from mobile to desktop. No column restructuring needed across breakpoints.
Opacity is Interaction Feedback: Disabled states drop to 0.3–0.7; hover states jump to 1.0. This is the primary affordance; don't add focus rings or underlines unless explicit.
Heading Sizes Scale Non-Linearly: 48px (mobile) → 77px (tablet) → 115px (desktop). Use the measured hierarchy; don't guess intermediate sizes.
No Semantic Status Colors: The site provides no error, success, or warning palette. If you need to add status feedback, propose it as a gap—don't invent colours outside the 6-colour system.
No Semantic Status Ramp: The site does not expose error, success, warning, or info colour states. A status palette (if needed) would be an addition, not an extraction.
1 Unassigned Accent Colour: {colors.accent-1} (#6FA2B3) has no measurable role in the UI patterns captured. It appears decorative only; do not assume a functional purpose for it.
No Measured Shadows: The system uses colour-blocking and opacity for depth. No box-shadow values were extracted from interactive components; verify shadow absence before implementation.
Interaction States Inferred from Stylesheet: Hover, focus, and active states are read from CSS variables (e.g., hsl(var(--primary))) rather than measured on live elements. The exact appearance of focus rings and active states on form inputs is not visually confirmed.
No Light/Dark Theme: Extraction covers the single theme presented. Dark-mode, high-contrast, or reduced-motion variants are not included.
Navigation Expansion Never Observed: Across all measured breakpoints (375px–1440px), the nav menu remained collapsed with a toggle. No horizontal navbar was encountered; assume this is intentional, but desktop navigation redesigns may warrant re-evaluation.
One Page Analysed: The extraction captures the homepage and landing sections only. Surfaces behind authentication, account dashboards, checkout flows, or other template types were not visited and may have different styling.
Limited Gradient Precision: Gradient overlays are recorded verbatim, but some use filter: blur() or nested url() backgrounds. These may require visual verification in context.
Z-Index Scale Incomplete: Only 3 tiers (7–9, 10–50, 100) were extracted. If the site uses more granular layering (e.g., z-index 11, 12, etc.), full list is not available.
Opacity on Disabled States Ranges 0.3–0.7: The exact mapping (which elements use 0.3 vs. 0.7) is not itemized. Both values exist in the stylesheet; apply contextually (buttons → 0.5–0.7, form fields → 0.3–0.5).
Border Radius on Form Inputs Varies: Some inputs measure 0px, others 6px. Component-level data is not fully itemized; verify by element type during implementation.