Remixes of makeover.studio
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest 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: Makeover
description: |
Makeover's design system radiates modern minimalism paired with purposeful
energy. The visual identity embraces a bold, high-contrast aesthetic—clean
sans-serif typography at generous scales, expansive whitespace, and strategic
splashes of vibrant accent color. The palette is intentionally restrained,
allowing typography and composition to dominate the spatial experience. This
is a system designed for clarity and confidence: every element earns its
place, and the design philosophy prioritizes directness over decoration. The
mood is aspirational yet approachable—speaking to founders and creative teams
with a sense of possibility and forward momentum.
source:
url: "https://makeover.studio"
pagesAnalyzed: 3
extractedAt: 2026-11-01
tokensMeasured: true
colors:
primary: "#FFFFFF"
link: "#0000EE"
ink: "#031426"
body: "#4D5A69"
muted: "#677687"
faint: "#8A8F94"
accent-1: "#2060DF"
neutral-1: "#000000"
neutral-2: "#999999"
typography:
display-lg:
fontFamily: "Inter Display"
fontSize: 48px
fontWeight: 600
lineHeight: 1.1
letterSpacing: -1.15px
display-lg-tight:
fontFamily: Inter
fontSize: 48px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -2.11px
display-md:
fontFamily: "Inter Variable"
fontSize: 40px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -1.36px
heading-xl:
fontFamily: "Inter Display"
fontSize: 32px
fontWeight: 600
lineHeight: 1.1
letterSpacing: -0.77px
heading-lg:
fontFamily: Inter
fontSize: 28px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -0.95px
heading-md:
fontFamily: Inter
fontSize: 24px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -0.58px
heading-md-2:
fontFamily: Inter
fontSize: 24px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -0.48px
heading-sm:
fontFamily: "Inter Variable"
fontSize: 20px
fontWeight: 400
lineHeight: 1.3
letterSpacing: -0.36px
heading-xs:
fontFamily: "Inter Variable"
fontSize: 16px
fontWeight: 400
lineHeight: 1.4
letterSpacing: -0.32px
body-xl:
fontFamily: "Inter Display"
fontSize: 24px
fontWeight: 600
lineHeight: 1
letterSpacing: -0.58px
body-lg:
fontFamily: Inter
fontSize: 20px
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.4px
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.32px
body-md-strong:
fontFamily: Inter
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: -0.32px
body-sm:
fontFamily: Inter
fontSize: 14.08px
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.14px
body-xs:
fontFamily: "Inter Display"
fontSize: 12px
fontWeight: 500
lineHeight: 1.4
letterSpacing: -0.07px
rounded:
xs: 12px
sm: 24px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 64px
band: 80px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F7F7F7"
surfaceRaised: "#EDEEEF"
text: "#031426"
textMuted: "#4D5A69"
border: "#E1E3E5"
accent: "#0000EE"
accentFg: "#FFFFFF"
focusRing: "#0000EE"
elevation: shadow
dark:
bg: "#090916"
surface: "#181824"
surfaceRaised: "#242430"
text: "#F5F5FE"
textMuted: "#9B9BA6"
border: "#30303B"
accent: "#6969FF"
accentFg: "#090916"
focusRing: "#4141FF"
elevation: "border+surface"
components:
link:
textColor: "{colors.link}"
padding: "16px 32px 16px 32px"
fontSize: 12px
boxShadow: "rgba(33, 96, 223, 0.06) 0px 0.482901px 1.25554px 0px, rgba(33, 96, 223, 0.48) 0px 4px 10.4px 0px"
fontFamily: sans-serif
fontWeight: 400
rounded: 999px
backgroundColor: "{colors.accent-1}"
link-2:
typography: "{typography.body-xl}"
textColor: "{colors.accent-1}"
states:
breakpoints:
- width: 375
containerWidth: 360
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 48
bodyPx: 12
sectionPaddingX: 0
- width: 768
containerWidth: 360
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 48
bodyPx: 12
sectionPaddingX: 0
- width: 1024
containerWidth: 640
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 48
bodyPx: 12
sectionPaddingX: 0
- width: 1280
containerWidth: 780
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 48
bodyPx: 12
sectionPaddingX: 0
- width: 1440
containerWidth: 780
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 48
bodyPx: 12
sectionPaddingX: 0
coverage:
statesFound: 11
gradientsFound: 0
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Makeover's design system radiates modern minimalism paired with purposeful energy. The visual identity embraces a bold, high-contrast aesthetic—clean sans-serif typography at generous scales, expansive whitespace, and strategic splashes of vibrant accent color. The palette is intentionally restrained, allowing typography and composition to dominate the spatial experience. This is a system designed for clarity and confidence: every element earns its place, and the design philosophy prioritizes directness over decoration. The mood is aspirational yet approachable—speaking to founders and creative teams with a sense of possibility and forward momentum.
Key Characteristics
{rounded.full}){colors.primary} — #FFFFFF): Used as the dominant CTA fill, brand accent in hero sections, and active state indicator. Creates high-contrast interactive surfaces against neutral backgrounds.{colors.link} — #0000EE): Inline hyperlinks and link-colored text throughout the interface.{colors.accent-1} — #2060DF): No measured semantic role; used decoratively in hero imagery and branded elements. Treat as a secondary accent for visual interest only.{colors.ink} — #031426): Primary heading and text color; the darkest neutral establishing hierarchy and readability.{colors.body} — #4D5A69): Body copy and secondary text; provides sufficient contrast for readability while stepping back from {colors.ink}.{colors.muted} — #677687): Captions, secondary metadata, and supporting copy; lighter than body text.{colors.faint} — #8A8F94): Tertiary text, placeholder copy, and diminished UI elements.{colors.neutral-1} — #000000): Pure black; used where maximum contrast is required.{colors.neutral-2} — #999999): Mid-range neutral; auxiliary UI and decorative elements.Primary: Inter Display (display sizes, high-impact headings)
Secondary: Inter / Inter Variable (body copy, smaller headings, form text)
Fallback stack: sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | Inter Display | 48px | 600 | 1.1 | −1.15px | Hero headlines; aggressive tracking |
| Display Large Tight | Inter | 48px | 600 | 1.2 | −2.11px | Maximum impact; tight setting |
| Display Medium | Inter Variable | 40px | 400 | 1.2 | −1.36px | Secondary headlines |
| Heading Large | Inter | 28px | 600 | 1.2 | −0.95px | Section headings |
| Heading Medium | Inter | 24px | 600 | 1.2 | −0.58px | Subsection heads; also measured as Inter Display variant |
| Heading Small | Inter Variable | 20px | 400 | 1.3 | −0.36px | Tertiary headings |
| Heading XS | Inter Variable | 16px | 400 | 1.4 | −0.32px | Minor headings; form labels |
| Body Large | Inter | 20px | 400 | 1.5 | −0.4px | Feature copy; intro text |
| Body Medium Strong | Inter | 16px | 500 | 1.5 | −0.32px | Emphasized body; button text |
| Body Medium | Inter | 16px | 400 | 1.5 | −0.32px | Default body copy |
| Body Small | Inter | 14.08px | 400 | 1.5 | −0.14px | Secondary copy; captions |
| Body XS | Inter Display | 12px | 500 | 1.4 | −0.07px | Metadata; fine print |
Primary CTA (Pill-shaped)
{colors.accent-1} (#2060DF){colors.primary} (#FFFFFF)16px 32px{rounded.full} (9999px)12px400normalsans-serifrgba(33, 96, 223, 0.06) 0px 0.482901px 1.25554px 0px, rgba(33, 96, 223, 0.48) 0px 4px 10.4px 0px560px (measured width; adjust responsively as needed)auto (derived from padding and font size)Inline Link (Default)
{colors.link} (#0000EE)24px600Inter Display24px0px (sharp corners for text links)text-decoration and border-radius respect Framer variables (see interaction data).Image Container
{rounded.sm} (24px){spacing.md} to {spacing.xl} as default)Tab / Filter Button (Observed in first screenshot)
{colors.primary} (#FFFFFF) for active state; transparent for inactive{colors.ink} (#031426) for active; {colors.muted} (#677687) for inactive{rounded.full} (9999px){spacing.md} (16px) horizontal and vertical (estimated from design)600 for active; 400 for inactive1px solid {colors.faint} (inferred visual divider; not explicitly measured)The system uses a base unit of 4px scaling in multiples and semantic band sizes for content breathing room.
{spacing.xxs} = 4px — micro-spacing (padding between tightly grouped elements){spacing.xs} = 8px — compact spacing{spacing.sm} = 12px — small intra-component spacing{spacing.md} = 16px — default component padding{spacing.lg} = 20px — medium spacing between sections{spacing.xl} = 24px — generous intra-section spacing{spacing.xxl} = 32px — large spacing blocks{spacing.xxxl} = 40px — extra-large spacing{spacing.section} = 64px — major section breaks{spacing.band} = 80px — hero and feature band padding (vertical)Usage Context:
{spacing.md} to {spacing.xl} for internal padding.{spacing.section} and {spacing.band} for visual breathing room.{spacing.sm} to {spacing.md} for item-level rhythm.Whitespace is a primary design tool. Large vertical spacing ({spacing.section} and {spacing.band}) separates major content blocks, creating visual rest and emphasizing hierarchy. Typography dominates foreground; negative space provides the counterbalance. Padding follows the scale consistently; no arbitrary gaps.
{rounded.xs} = 12px — sharp but not angular; used on images and smaller components{rounded.sm} = 24px — medium roundness; images, containers, and card corners{rounded.full} = 9999px — pill/circle shape; buttons, filter pills, and fully circular elementsNo explicit border-width data extracted from measured components. Visual dividers and hairlines likely use 1px; record the absence of explicit border-width tokens under Known Gaps.
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; solid background color | Base card surfaces, neutral UI elements |
| Lifted | rgba(33, 96, 223, 0.06) 0px 0.482901px 1.25554px 0px, rgba(33, 96, 223, 0.48) 0px 4px 10.4px 0px (dual-layer micro shadow) | Primary CTA buttons; interactive lift |
The design system employs color-blocking and minimal shadows for depth. Primary elevation comes from surface color contrast, not shadow layering. The single extracted shadow is a subtle, dual-layer effect on CTAs: a near-imperceptible baseline (0.482901px) plus a soft 4px blur—barely-there lift that signals interactivity without visual heaviness. This reflects a deliberate restraint: depth through color and typography, not shadow accumulation.
0.50): Hover states, disabled overlays, or secondary text emphasis0.40): Lighter overlay treatment or faint visual cues1): Standard document flow; default z-stacking for most elements2147483647): Notifications and alerts; highest stacking layer to ensure visibility above all content-2.11px on 48px display text is not an error—it is intentional visual density.{rounded.full}) radius on all interactive CTAs. This roundness is consistent across buttons and filter chips.{spacing.section} and {spacing.band} between major content blocks. Whitespace is active design.0 or positive values.{rounded.full} is non-negotiable.{spacing.xs} tier without strong justification; the system is built for generous breathing room.| Breakpoint | Viewport | Content Column | Heading Size | Body Size | Section Padding-X | Key Changes |
|---|---|---|---|---|---|---|
| Mobile | 375px | 360px | 48px | 12px | 0px | Single column; hero text at full display size |
| Tablet | 768px | 360px | 48px | 12px | 0px | Column width unchanged; layout remains stacked |
| Desktop (small) | 1024px | 640px | 48px | 12px | 0px | Content column expands to 640px |
| Desktop (large) | 1280px | 780px | 48px | 12px | 0px | Content column reaches 780px max; caps here |
| Desktop (XL) | 1440px | 780px | 48px | 12px | 0px | No further expansion; 780px cap maintained |
Derivation: Measured data shows the content column width changes once (at 1024px), then caps at 1280px. Display heading and body text remain constant across all breakpoints. No multi-column grid was observed; layout is fundamentally single-column with centering.
Extracted CTA button dimensions: 560px width × 60.7969px height (with 16px padding vertical and 32px horizontal). On touch devices, maintain minimum hit area of 48–56px for vertical tap targets; the system's generous padding (16px–24px) naturally exceeds this.
{colors.primary} — #FFFFFF)#2060DF ({colors.accent-1}){colors.link} — #0000EE){colors.ink} — #031426){colors.body} — #4D5A69){colors.muted} — #677687){colors.faint} — #8A8F94)−2.11px letter-spacing for main headlines. Match the scale and tracking exactly; negative tracking is a core brand signal.{colors.ink} → {colors.body} → {colors.muted} → {colors.faint}). Do not introduce new grays.{spacing.section} (64px) between major content blocks. Use {spacing.md} (16px) as default component padding.{rounded.full} (9999px) and apply the dual-layer shadow only on primary actions.rgba(33, 96, 223, ...) 0px 0.482901px 1.25554px 0px, ...).#0000EE at 24px, weight 600, Inter Display. Hover behavior uses CSS custom property fallbacks per extracted interaction rules; text-decoration and color may vary based on link context.:hover CSS variables and a fallback system (Framer-specific); specific final colors and background treatments for hover, active, focus, and disabled states are inferred from variable chains, not direct measurement. Use caution when implementing; some hover behavior may require override testing.{colors.accent-1} (#2060DF), {colors.neutral-1} (#000000), and {colors.neutral-2} (#999999) have no explicit role evidence and are treated as decorative or contextual only. Verify their intended use before deploying at scale.1px but not confirmed in token data. Borders on cards, inputs, or dividers may need empirical verification.