Remixes of nudeai.fun
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: Nudeai
description: |
NudeAI employs a dark, high-contrast aesthetic built around bold accents and
minimal surfaces. The interface prioritizes content with a near-black
background, punctuated by vivid rose-pink call-to-action elements and pure
white text. The mood is modern, direct, and energetic—emphasizing rapid
interaction and visual hierarchy through color blocking rather than shadow
depth. Typography is clean and sans-serif, reinforced by pill-shaped buttons
that soften the overall industrial feel. The design avoids decoration in favor
of functional clarity, with generous whitespace and a deliberate restraint in
visual ornamentation.
source:
url: "https://nudeai.fun/"
pagesAnalyzed: 1
extractedAt: 2026-11-05
tokensMeasured: true
colors:
primary: "#F43F5E"
on-primary: "#FFFFFF"
neutral-1: "#000000"
typography:
body:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
nav:
fontFamily: Inter
fontSize: 24px
fontWeight: 700
lineHeight: 1.33
letterSpacing: 0px
button-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
button-sm-strong:
fontFamily: Inter
fontSize: 14px
fontWeight: 600
lineHeight: 1.43
letterSpacing: 0px
button-xs:
fontFamily: Inter
fontSize: 13px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption:
fontFamily: Inter
fontSize: 10px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
rounded:
none: 0px
xs: 4px
sm: 6px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 24px
xl: 32px
xxl: 48px
xxxl: 64px
section: 144px
shadows:
sm: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px"
md: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
elevationStrategy: layered-micro
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F7F7F7"
surfaceRaised: "#EEEEEE"
text: "#111111"
textMuted: "#646464"
border: "#E2E2E2"
accent: "#F43F5E"
accentFg: "#000000"
focusRing: "#F43F5E"
elevation: shadow
dark:
bg: "#140B0D"
surface: "#221A1C"
surfaceRaised: "#2E2628"
text: "#FFF7F9"
textMuted: "#A69D9F"
border: "#3A3234"
accent: "#F43F5E"
accentFg: "#0B0B0C"
focusRing: "#F43F5E"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(to right, oklch(0.21 0.006 285.885) 0%, oklab(0.645039 0.206618 0.0609754 / 0.2) 50%, oklch(0.21 0.006 285.885) 100%)"
components:
button-text:
typography: "{typography.button-xs}"
textColor: "oklch(0.871 0.006 286.286)"
height: 35.5px
padding: "8px 12px 8px 12px"
rounded: "3.35544e+07px"
backgroundColor: "oklch(0.21 0.006 285.885)"
button-primary:
typography: "{typography.button-sm-strong}"
textColor: "{colors.on-primary}"
height: 36px
padding: "0px 12px 0px 12px"
rounded: "3.35544e+07px"
backgroundColor: "{colors.primary}"
button-primary-sm:
typography: "{typography.button-xs}"
textColor: "{colors.on-primary}"
height: 31.5px
padding: "6px 12px 6px 12px"
rounded: "3.35544e+07px"
backgroundColor: "{colors.primary}"
button-icon:
typography: "{typography.button-sm}"
textColor: "{colors.on-primary}"
height: 28px
rounded: "3.35544e+07px"
backgroundColor: "oklab(0 0 0 / 0.5)"
button-text-lg:
typography: "{typography.button-sm}"
textColor: "oklch(0.985 0 0)"
height: 36px
padding: "0px 12px 0px 12px"
rounded: "3.35544e+07px"
navigation:
textColor: "oklch(0.985 0 0)"
height: 61px
padding: "12px 16px 12px 16px"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.5
footer:
typography: "{typography.body}"
textColor: "oklch(0.705 0.015 286.067)"
border: "1px solid oklch(0.274 0.006 286.033)"
padding: "24px 16px 24px 16px"
backgroundColor: "oklch(0.141 0.005 285.823)"
link:
typography: "{typography.nav}"
textColor: "oklch(0.985 0 0)"
link-sm:
typography: "{typography.body}"
textColor: "oklch(0.705 0.015 286.067)"
states:
link-hover:
target: link
state: hover
textColor: "oklch(0.809 0.105 251.813)"
other-disabled:
target: other
state: disabled
opacity: 0.7
other-hover:
target: other
state: hover
borderColor: "rgba(149, 61, 0, 0.6)"
other-active:
target: other
state: active
backgroundColor: "rgba(24, 24, 27, 0.8)"
breakpoints:
- width: 375
containerWidth: 311
gridColumns: 2
navLinksVisible: 1
menuToggleVisible: true
headingPx: 0
bodyPx: 16
sectionPaddingX: 8
- width: 768
containerWidth: 704
gridColumns: 4
navLinksVisible: 1
menuToggleVisible: true
headingPx: 0
bodyPx: 16
sectionPaddingX: 16
- width: 1024
containerWidth: 928
gridColumns: 4
navLinksVisible: 1
menuToggleVisible: true
headingPx: 0
bodyPx: 16
sectionPaddingX: 16
- width: 1280
containerWidth: 1152
gridColumns: 4
navLinksVisible: 1
menuToggleVisible: true
headingPx: 0
bodyPx: 16
sectionPaddingX: 16
- width: 1440
containerWidth: 1152
gridColumns: 4
navLinksVisible: 1
menuToggleVisible: true
headingPx: 0
bodyPx: 16
sectionPaddingX: 16
coverage:
statesFound: 61
gradientsFound: 1
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
NudeAI employs a dark, high-contrast aesthetic built around bold accents and minimal surfaces. The interface prioritizes content with a near-black background, punctuated by vivid rose-pink call-to-action elements and pure white text. The mood is modern, direct, and energetic—emphasizing rapid interaction and visual hierarchy through color blocking rather than shadow depth. Typography is clean and sans-serif, reinforced by pill-shaped buttons that soften the overall industrial feel. The design avoids decoration in favor of functional clarity, with generous whitespace and a deliberate restraint in visual ornamentation.
Key Characteristics
#F43F5E) as the sole brand color for CTAs and highlights{colors.primary} — #F43F5E): Rose-pink accent used for primary CTAs, active states, and brand emphasis throughout the interface. Demands immediate visual attention.{colors.on-primary} — #FFFFFF): Pure white text and labels rendered on top of the primary brand color, ensuring maximum legibility.{colors.neutral-1} — #000000): Pure black foundation for all major surfaces, page backgrounds, and content containers. Establishes the dark-first visual foundation.Primary: Inter (https://fonts.googleapis.com/)
Fallback stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Navigation Link | Inter | 24px | 700 | 1.33 | 0px | Large, bold brand/section navigation |
| Button Small | Inter | 14px | 500 | 1.43 | 0px | Medium-weight CTA |
| Button Small Strong | Inter | 14px | 600 | 1.43 | 0px | Emphasized button variant |
| Button Extra Small | Inter | 13px | 400 | 1.5 | 0px | Compact button text |
| Body | Inter | 14px | 400 | 1.43 | 0px | Standard paragraph and UI text |
| Caption | Inter | 10px | 600 | 1.5 | 0px | Small, bold labels and metadata |
400) for readability; emphasis uses 600 weight.24px, 700 weight) to anchor the primary user orientation.Primary Button
{colors.primary} (#F43F5E){colors.on-primary} (#FFFFFF){typography.button-sm-strong} (14px, weight 600)0px 12px{rounded.full} (pill-shaped)Primary Button Small
{colors.primary} (#F43F5E){colors.on-primary} (#FFFFFF){typography.button-xs} (13px, weight 400)6px 12px{rounded.full} (pill-shaped)Icon Button
rgba(0, 0, 0, 0.5) (semi-transparent black){colors.on-primary} (#FFFFFF){typography.button-sm} (14px, weight 500)0px (icon-only, no text padding){rounded.full} (pill/circle)Text Button Large
oklch(0.985 0 0)){typography.button-sm} (14px, weight 500)0px 12px{rounded.full}Secondary Button (Text Variant)
oklch(0.21 0.006 285.885) (dark purple-gray){typography.button-xs} (13px, weight 400)8px 12px{rounded.full}Nav Bar
oklch(0.985 0 0)){typography.body} (14px, weight 400){spacing.sm} 16px (top/bottom/left/right){rounded.none} (full-width){typography.nav} (24px, weight 700) for primary menu itemsLink Default (Large)
oklch(0.985 0 0)){typography.nav} (24px, weight 700)oklch(0.809 0.105 251.813)) or near-white variantLink Small
oklch(0.705 0.015 286.067) (muted purple-gray){typography.body} (14px, weight 400)rgb(255, 166, 0))Footer Container
oklch(0.141 0.005 285.823) (very dark purple-gray, near-black)oklch(0.705 0.015 286.067) (muted purple-gray){typography.body} (14px, weight 400){spacing.lg} 16px (top/bottom/left/right: 24px)oklch(0.274 0.006 286.033) (subtle dark border){rounded.none}Card / Content Block
{colors.neutral-1} (#000000) or marginally lighter dark surface{rounded.none} to {rounded.sm} (6px) depending on component context{rounded.none} (flat, no elevation shadows){spacing.md} to {spacing.lg} (16px–24px){colors.on-primary} (#FFFFFF) for text on dark surfacesInput Field
{colors.neutral-1}){colors.on-primary} (#FFFFFF)var(--color-zinc-500) or similar neutral border{rounded.full} (pill-shaped inputs){spacing.sm} to {spacing.md} (12px–16px){typography.body} (14px, weight 400)var(--color-zinc-500); background may lighten or remain stable with ring highlight0.7The system uses an 8px base unit with a logarithmic scale:
{spacing.xxs} = 4px — Micro gaps between inline elements or tight groupings{spacing.xs} = 8px — Small padding within components, minimal space{spacing.sm} = 12px — Compact spacing between sibling sections{spacing.md} = 16px — Standard padding inside cards, buttons, and containers{spacing.lg} = 24px — Breathing room between major content blocks{spacing.xl} = 32px — Generous spacing between layout regions{spacing.xxl} = 48px — Large gaps between sections or grid items{spacing.xxxl} = 64px — Extra-large whitespace for visual hierarchy emphasis{spacing.section} = 144px — Full-section separation between major layout divisions1280px and above viewports; container constrains further on ultra-wide displays)768px and above; 2 columns at 375px (mobile){spacing.md} (16px) on left/right at all breakpointsWhitespace is aggressive and intentional. Large gaps between cards, sections, and major UI regions create visual rest and guide focus. The dark background makes whitespace feel like negative space rather than emptiness, enhancing readability. Padding inside components is consistent and measured (multiples of the spacing scale), never ad-hoc.
{rounded.none} = 0px — Sharp corners on navigation, footers, and full-width elements{rounded.xs} = 4px — Minimal rounding for subtle softness on secondary components{rounded.sm} = 6px — Moderate rounding on cards and smaller containers{rounded.full} = 9999px — Pill-shaped buttons, icon containers, and interactive elementsComponent Application:
{rounded.full} (pill-shaped){rounded.none} or {rounded.sm} (context-dependent){rounded.none} (sharp, full-width)| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow (box-shadow: none) | Default state for buttons, text, links, most surfaces |
| Micro Lift (sm) | rgba(0, 0, 0, 0.25) 0px 25px 50px -12px | Card hover states, subtle elevation on modal-like overlays |
| Subtle Depth (md) | rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px | Input focus, dropdown focus, light interactive feedback |
The NudeAI design prioritizes color blocking and surface distinction over shadow depth. Elevation is achieved through background color changes (lighter or darker surfaces) rather than shadows. Shadows, when used, are subtle and near-black, reinforcing the dark-first aesthetic. This creates a flat-yet-layered visual system where depth is psychological (via color and contrast) rather than physical.
{colors.primary} (#F43F5E) sparingly for primary actions, active states, and moments requiring immediate attention. It is the sole accent color and should never be over-deployed.{rounded.full}). The rounded aesthetic is core to the brand's modern feel.{spacing.md}, {spacing.lg}, etc.) for consistent, breathable layouts.375px) and desktop (1440px) breakpoints; the layout shifts between 2-column and 4-column grids.{rounded.none}) define those structural elements.{typography.caption} (10px). Legibility on mobile and accessibility suffer.{colors.primary} or high-contrast text to signal interactivity.| Breakpoint Name | Width | Content Column | Grid Columns | Key Changes |
|---|---|---|---|---|
| Mobile | 375px | 311px | 2 | Compact padding, single or dual-column grid, nav menu collapsed |
| Tablet | 768px | 704px | 4 | Expanded grid, increased padding, desktop-like layout begins |
| Desktop | 1024px | 928px | 4 | Full 4-column grid, standard padding maintained |
| Large Desktop | 1280px | 1152px | 4 | Max content width reached; container stops growing |
| Extra Large | 1440px | 1152px | 4 | Max width persists; empty space on sides; typography remains stable |
{spacing.xs} to {spacing.sm} (8px–12px) between adjacent interactive elementsMobile (< 768px):
{spacing.md} (16px) on sidesTablet (768px–1023px):
{spacing.md} (16px)Desktop (1024px+):
1152px becomes active#F43F5E) — Use for primary buttons, active states, and brand emphasis#FFFFFF) — White text on rose-pink backgrounds#000000) — Near-black for all major surfacesoklch(0.985 0 0)) — Default text color on dark backgroundsoklch(0.705 0.015 286.067)) — Secondary and footer text#000000) background for all full-page or section-level surfaces.#F43F5E only for primary interactive elements (buttons, active states, alerts requiring attention). This is the sole brand accent.border-radius: 9999px) unless they are secondary text variants.0px 12px (or 6px 12px for smaller variants); use {spacing.md} (16px) for internal container padding.#FFFFFF) text on dark backgrounds and ensure 7:1 contrast minimum for accessibility.8px, 12px, 16px, 24px, 32px) for margins and padding; never use arbitrary values.768px: Switch from 4-column to 2-column grid, reduce padding to 16px on sides.disabled, visited, active, and focus-visible rings may exist but were not fully measured.{colors.neutral-1} — #000000) was measured but serves primarily as a background; its role in borders, dividers, or accents was not fully determined.linear-gradient(to right, oklch(0.21 0.006 285.885) 0%, oklab(0.645039 0.206618 0.0609754 / 0.2) 50%, oklch(0.21 0.006 285.885) 100%)) but its exact use case and triggering conditions were not observed on the single measured page.oklch(), color-mix()); support for older browsers or CSS feature queries was not measured.