Remixes of fundednext.com
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: Fundednext
description: |
FundedNext's design system projects a bold, forward-thinking aesthetic built
on confident contrast and technological precision. The dark canvas (#000000)
anchors a vibrant brand experience where vivid purple accents (#635BFF) and
bright electric greens create striking visual moments against deep neutrals.
The typography employs both the measured precision of Inter and the geometric
boldness of Plus Jakarta Sans, with dramatic negative letter-spacing on
display scales that communicate movement and ambition. Layered micro-shadows
and subtle glass-morphism surfaces (via low-opacity overlays) suggest depth
without visual weight, while gradient decorations add dimension to hero
sections. The system favors clarity and directness: buttons are prominent and
rounded-moderate, type hierarchies are steep, and colour plays a distinct
semantic role — every accent has purpose.
source:
url: "https://fundednext.com/"
pagesAnalyzed: 6
extractedAt: 2026-11-03
tokensMeasured: true
colors:
primary: "#D6DFFF"
accent: "#635BFF"
link: "#7355FF"
canvas: "#000000"
surface: "#FFF6F2"
ink: "#FFFFFF"
body: "#E9E9E9"
muted: "#61626A"
faint: "#595959"
hairline: "#FF4500"
accent-1: "#09E354"
accent-2: "#0DC04B"
accent-3: "#B4AEFF"
accent-4: "#36F4A4"
accent-5: "#242D76"
neutral-1: "#1A1A1A"
typography:
display-xxl:
fontFamily: "Plus Jakarta Sans"
fontSize: 96px
fontWeight: 800
lineHeight: 1.08
letterSpacing: -2px
display-xl:
fontFamily: Inter
fontSize: 72px
fontWeight: 700
lineHeight: 1.11
letterSpacing: -1px
display-xl-plus-jakarta-sans:
fontFamily: "Plus Jakarta Sans"
fontSize: 72px
fontWeight: 700
lineHeight: 1.11
letterSpacing: -1px
display-lg:
fontFamily: "Plus Jakarta Sans"
fontSize: 60px
fontWeight: 700
lineHeight: 1.1
letterSpacing: -1px
display-lg-tight:
fontFamily: "Plus Jakarta Sans"
fontSize: 60px
fontWeight: 700
lineHeight: 1.05
letterSpacing: -1px
display-md:
fontFamily: "Plus Jakarta Sans"
fontSize: 48px
fontWeight: 700
lineHeight: 1.13
letterSpacing: -2px
heading-md:
fontFamily: Inter
fontSize: 36px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -0.5px
heading-md-strong:
fontFamily: Inter
fontSize: 36px
fontWeight: 700
lineHeight: 1.33
letterSpacing: -2px
heading-sm:
fontFamily: Inter
fontSize: 24px
fontWeight: 700
lineHeight: 1.33
letterSpacing: -0.5px
heading-sm-tight:
fontFamily: Inter
fontSize: 24px
fontWeight: 700
lineHeight: 0.92
letterSpacing: 0px
heading-sm-strong:
fontFamily: Inter
fontSize: 24px
fontWeight: 800
lineHeight: 1.4
letterSpacing: 0px
heading-xs:
fontFamily: Inter
fontSize: 22px
fontWeight: 500
lineHeight: 1.27
letterSpacing: 0px
body-xl:
fontFamily: Inter
fontSize: 20px
fontWeight: 600
lineHeight: 1.4
letterSpacing: -0.24px
body-lg:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg-strong:
fontFamily: Inter
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
body-md-2:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0.25px
body-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
button-xl:
fontFamily: Inter
fontSize: 20px
fontWeight: 500
lineHeight: 1.4
letterSpacing: -0.24px
button-lg:
fontFamily: Inter
fontSize: 14px
fontWeight: 600
lineHeight: 1.43
letterSpacing: 0.25px
caption-xs:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.67
letterSpacing: 0px
caption-xs-uppercase:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 1px
textTransform: uppercase
caption-xs-strong:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.42
letterSpacing: 1px
textTransform: uppercase
caption-xs-2:
fontFamily: Inter
fontSize: 12px
fontWeight: 600
lineHeight: 1.67
letterSpacing: 0px
caption-xs-tight:
fontFamily: Inter
fontSize: 12px
fontWeight: 600
lineHeight: 1
letterSpacing: 0.1px
caption-xs-3:
fontFamily: Inter
fontSize: 12px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0.15px
rounded:
none: 0px
xs: 4px
sm: 6px
md: 8px
lg: 12px
xl: 16px
xxl: 20px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 48px
band: 64px
borderWidths:
thin: 1px
medium: 2px
shadows:
sm: "rgba(0, 0, 0, 0.25) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 2px 0px inset"
md: "rgba(0, 0, 0, 0.25) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.16) 0px 1px 1px 0px inset"
lg: "rgba(0, 0, 0, 0.25) 0px 3.655px 1.828px 0px"
elevationStrategy: layered-micro
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#F7F7FF"
surface: "#EDEDF5"
surfaceRaised: "#E6E6ED"
text: "#1B1B1D"
textMuted: "#6D6D72"
border: "#D4D4DB"
accent: "#3360FF"
accentFg: "#FFFFFF"
focusRing: "#5C7FFF"
elevation: shadow
dark:
bg: "#000000"
surface: "#FFF6F2"
surfaceRaised: "#FFF7F3"
text: "#FFFFFF"
textMuted: "#E9E9E9"
border: "#FF4500"
accent: "#D6DFFF"
accentFg: "#0B0B0C"
focusRing: "#D6DFFF"
elevation: "border+surface"
contrastFailures:
- "dark: text on surface = 1.07:1 (needs 4.5:1)"
gradients:
- context: hero
kind: linear
value: "linear-gradient(lab(100 0 0) 30%, oklab(0 0 0 / 0.4) 65%)"
- context: hero
kind: linear
value: "linear-gradient(lab(0 0 0) 35%, rgba(0, 0, 0, 0) 70%)"
- context: section
kind: linear
value: "linear-gradient(to right, rgba(0, 0, 0, 0) 0%, oklab(0.999998 -0.00000980496 0.0000234246 / 0.1) 50%, rgba(0, 0, 0, 0) 100%)"
- context: section
kind: linear
value: "linear-gradient(142.2deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%)"
- context: section
kind: linear
value: "linear-gradient(to right, oklab(0.999998 -0.00000980496 0.0000234246 / 0.9) 0%, oklab(0.999998 -0.00000980496 0.0000234246 / 0.9) 50%, oklab(0.999998 -0.00000980496 0.0000234246 / 0.9) 100%)"
filter: "blur(105px)"
- context: section
kind: linear
value: "linear-gradient(89deg, rgba(18, 19, 21, 0.4) 0%, rgb(18, 19, 21) 100%)"
components:
button-primary:
typography: "{typography.body-xl}"
textColor: "lab(100 0 0)"
height: 64px
padding: "0px 64px 0px 64px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.16) 0px 1px 1px 0px inset"
rounded: "{rounded.lg}"
backgroundColor: "rgba(214, 223, 255, 0.08)"
button-text:
typography: "{typography.body-xl}"
textColor: "lab(100 0 0)"
height: 64px
padding: "0px 64px 0px 64px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 2px 0px inset"
rounded: "{rounded.lg}"
backgroundColor: "lab(47.4008 40.3156 -82.4473)"
button-text-sm:
typography: "{typography.body-lg}"
textColor: "lab(100 0 0)"
height: 36px
padding: "6px 16px 6px 10px"
rounded: "30px 0px 0px 30px"
backgroundColor: "oklab(0.999998 -0.00000980496 0.0000234246 / 0.06)"
button-primary-sm:
typography: "{typography.body-lg-strong}"
textColor: "lab(100 0 0)"
height: 56px
padding: "0px 40px 0px 40px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.16) 0px 1px 1px 0px inset"
rounded: "{rounded.lg}"
backgroundColor: "rgba(214, 223, 255, 0.08)"
navigation:
typography: "{typography.body-lg}"
textColor: "lab(100 0 0)"
height: 90px
footer:
typography: "{typography.body-lg}"
textColor: "lab(100 0 0)"
padding: "48px 0px 48px 0px"
rounded: "24px 24px 0px 0px"
backgroundColor: "lab(0 0 0)"
link:
typography: "{typography.button-lg}"
textColor: "lab(100 0 0)"
padding: "0px 16px 0px 16px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 2px 0px inset"
rounded: "{rounded.lg}"
backgroundColor: "lab(47.4008 40.3156 -82.4473)"
link-lg:
typography: "{typography.button-lg}"
textColor: "lab(100 0 0)"
padding: "0px 24px 0px 24px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.16) 0px 1px 1px 0px inset"
rounded: "{rounded.lg}"
backgroundColor: "rgba(214, 223, 255, 0.08)"
card-featured:
typography: "{typography.body-lg}"
textColor: "lab(100 0 0)"
border: "1px solid oklab(0.999998 -0.00000980496 0.0000234246 / 0.1)"
padding: "25px 25px 25px 25px"
rounded: "{rounded.xl}"
backgroundColor: "rgba(214, 223, 255, 0.08)"
card:
typography: "{typography.body-lg}"
textColor: "lab(100 0 0)"
border: "1px solid rgba(214, 223, 255, 0.08)"
padding: "33px 33px 41px 33px"
rounded: "{rounded.xxl}"
backgroundColor: "lab(47.4008 40.3156 -82.4473)"
card-featured-sm:
typography: "{typography.body-lg}"
textColor: "lab(100 0 0)"
border: "1px solid rgba(214, 223, 255, 0.08)"
padding: "33px 33px 41px 33px"
rounded: "{rounded.xxl}"
backgroundColor: "rgba(214, 223, 255, 0.08)"
states:
other-hover:
target: other
state: hover
backgroundColor: "rgba(255, 255, 255, 0.28)"
other-disabled:
target: other
state: disabled
opacity: 0.6
other-focus:
target: other
state: focus
borderWidth: 1px
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 4
navLinksVisible: 35
menuToggleVisible: true
headingPx: 48
bodyPx: 16
sectionPaddingX: 16
- width: 768
containerWidth: 736
gridColumns: 5
navLinksVisible: 35
menuToggleVisible: true
headingPx: 60
bodyPx: 16
sectionPaddingX: 16
- width: 1024
containerWidth: 1004
gridColumns: 5
navLinksVisible: 35
menuToggleVisible: true
headingPx: 72
bodyPx: 16
sectionPaddingX: 10
- width: 1280
containerWidth: 1264
gridColumns: 5
navLinksVisible: 35
menuToggleVisible: true
headingPx: 96
bodyPx: 16
sectionPaddingX: 16
- width: 1440
containerWidth: 1408
gridColumns: 5
navLinksVisible: 35
menuToggleVisible: true
headingPx: 96
bodyPx: 16
sectionPaddingX: 16
coverage:
statesFound: 62
gradientsFound: 18
rolesUnassigned: 6
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
tokens:
colors:
primary: "#D6DFFF"
accent: "#635BFF"
link: "#7355FF"
accent-1: "#09E354"
accent-2: "#0DC04B"
accent-3: "#B4AEFF"
accent-4: "#36F4A4"
accent-5: "#242D76"
canvas: "#000000"
surface: "#FFF6F2"
ink: "#FFFFFF"
body: "#E9E9E9"
muted: "#61626A"
faint: "#595959"
hairline: "#FF4500"
neutral-1: "#1A1A1A"
typography:
caption-xs:
size: 12px
weight: 400
lineHeight: 1.67
letterSpacing: 0px
caption-xs-2:
size: 12px
weight: 600
lineHeight: 1.67
letterSpacing: 0px
caption-xs-uppercase:
size: 12px
weight: 400
lineHeight: 1.33
letterSpacing: 1px
textTransform: uppercase
caption-xs-strong:
size: 12px
weight: 500
lineHeight: 1.42
letterSpacing: 1px
textTransform: uppercase
caption-xs-tight:
size: 12px
weight: 600
lineHeight: 1
letterSpacing: 0.1px
caption-xs-3:
size: 12px
weight: 600
lineHeight: 1.5
letterSpacing: 0.15px
body-sm:
size: 12px
weight: 400
lineHeight: 1.4
letterSpacing: 0px
body-md:
size: 14px
weight: 400
lineHeight: 1.43
letterSpacing: 0px
body-md-2:
size: 14px
weight: 400
lineHeight: 1.43
letterSpacing: 0.25px
button-lg:
size: 14px
weight: 600
lineHeight: 1.43
letterSpacing: 0.25px
body-lg:
size: 16px
weight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg-strong:
size: 16px
weight: 600
lineHeight: 1.5
letterSpacing: 0px
body-xl:
size: 20px
weight: 600
lineHeight: 1.4
letterSpacing: -0.24px
heading-xs:
size: 22px
weight: 500
lineHeight: 1.27
letterSpacing: 0px
heading-sm:
size: 24px
weight: 700
lineHeight: 1.33
letterSpacing: -0.5px
heading-sm-strong:
size: 24px
weight: 800
lineHeight: 1.4
letterSpacing: 0px
heading-sm-tight:
size: 24px
weight: 700
lineHeight: 0.92
letterSpacing: 0px
heading-md:
size: 36px
weight: 600
lineHeight: 1.2
letterSpacing: -0.5px
heading-md-strong:
size: 36px
weight: 700
lineHeight: 1.33
letterSpacing: -2px
button-xl:
size: 20px
weight: 500
lineHeight: 1.4
letterSpacing: -0.24px
display-lg:
size: 60px
weight: 700
lineHeight: 1.1
letterSpacing: -1px
fontFamily: Plus Jakarta Sans
display-lg-tight:
size: 60px
weight: 700
lineHeight: 1.05
letterSpacing: -1px
fontFamily: Plus Jakarta Sans
display-md:
size: 48px
weight: 700
lineHeight: 1.13
letterSpacing: -2px
fontFamily: Plus Jakarta Sans
display-xl:
size: 72px
weight: 700
lineHeight: 1.11
letterSpacing: -1px
display-xl-plus-jakarta-sans:
size: 72px
weight: 700
lineHeight: 1.11
letterSpacing: -2px
fontFamily: Plus Jakarta Sans
display-xxl:
size: 96px
weight: 800
lineHeight: 1.08
letterSpacing: -2px
fontFamily: Plus Jakarta Sans
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 48px
band: 64px
rounded:
none: 0px
xs: 4px
sm: 6px
md: 8px
lg: 12px
xl: 16px
xxl: 20px
full: 9999px
shadows:
sm: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 2px 0px inset"
md: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.16) 0px 1px 1px 0px inset"
lg: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 3.655px 1.828px 0px"
zindex:
base: 1
baseTwo: 2
baseThree: 3
dropdown: 10
dropdownTwo: 20
dropdownThree: 50
dropdownFour: 70
modal: 9999
FundedNext's design system projects a bold, forward-thinking aesthetic built on confident contrast and technological precision. The dark canvas ({colors.canvas} — #000000) anchors a vibrant brand experience where vivid purple accents ({colors.accent} — #635BFF) and bright electric greens create striking visual moments against deep neutrals. The typography employs both the measured precision of Inter and the geometric boldness of Plus Jakarta Sans, with dramatic negative letter-spacing on display scales that communicate movement and ambition. Layered micro-shadows and subtle glass-morphism surfaces (via low-opacity overlays) suggest depth without visual weight, while gradient decorations add dimension to hero sections. The system favors clarity and directness: buttons are prominent and rounded-moderate, type hierarchies are steep, and colour plays a distinct semantic role — every accent has purpose.
Key Characteristics
{rounded.lg} — 12px for buttons, {rounded.xxl} — 20px for cards){colors.primary} — #D6DFFF): Pale lavender; used for primary CTA fills, brand emphasis, and active states. Provides soft contrast against dark canvas while maintaining brand identity.{colors.accent} — #635BFF): Rich purple; secondary accent for hero sections, decorative emphasis, and visual hierarchy amplification.{colors.link} — #7355FF): Deep purple; inline link colour and interactive text elements.{colors.accent-1} — #09E354): Bright electric green; no measured semantic role; used for success states, highlights, and energetic visual accents.{colors.accent-2} — #0DC04B): Vivid green; no measured semantic role; alternative bright accent for variation.{colors.accent-3} — #B4AEFF): Light lavender; no measured semantic role; subtle accent and tint layers.{colors.accent-4} — #36F4A4): Bright cyan-green; no measured semantic role; high-energy accent for calls-to-action and highlights.{colors.accent-5} — #242D76): Dark navy blue; no measured semantic role; used as secondary surface or tint overlay.{colors.canvas} — #000000): Pure black; default page background. Establishes the dark-mode foundation.{colors.surface} — #FFF6F2): Off-white with warm undertone; light card and panel backgrounds; used when a light surface is required.{colors.ink} — #FFFFFF): Pure white; headings and primary text on dark backgrounds.{colors.body} — #E9E9E9): Light grey; body copy and secondary text; slightly reduced contrast vs. pure white for reading comfort.{colors.muted} — #61626A): Mid-grey; captions, secondary labels, and metadata.{colors.faint} — #595959): Dark grey; tertiary text, placeholders, and subtle hints.{colors.neutral-1} — #1A1A1A): Very dark grey; alternative surface or container background.{colors.hairline} — #FF4500): Orange-red; 1px borders and dividers. Note: this warm accent stands apart semantically—verify its use on deployed surfaces.Primary: Inter
Font stack: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Used for: body text, buttons, UI copy, utility labels, and most body scales.
Secondary: Plus Jakarta Sans
Font stack: Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Used for: display and heading scales, editorial impact, and brand-forward moments.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Plus Jakarta Sans | 96px | 800 | 1.08 | –2px | Maximum display; reserved for hero/statement moments |
| Display XL | Plus Jakarta Sans | 72px | 700 | 1.11 | –2px | Large hero headings; tight spacing for impact |
| Display MD | Plus Jakarta Sans | 48px | 700 | 1.13 | –2px | Section headers; strong visual presence |
| Display LG | Plus Jakarta Sans | 60px | 700 | 1.1 | –1px | Large hero; editorial presence |
| Display LG Tight | Plus Jakarta Sans | 60px | 700 | 1.05 | –1px | Variant with tighter line for emphasis |
| Heading MD Strong | Inter | 36px | 700 | 1.33 | –2px | Major section heading; strong weight |
| Heading MD | Inter | 36px | 600 | 1.2 | –0.5px | Section heading; flexible weight |
| Heading SM Strong | Inter | 24px | 800 | 1.4 | 0px | Subsection; extra-bold variant |
| Heading SM | Inter | 24px | 700 | 1.33 | –0.5px | Subsection heading; standard weight |
| Heading SM Tight | Inter | 24px | 700 | 0.92 | 0px | Compact heading; very tight line-height |
| Heading XS | Inter | 22px | 500 | 1.27 | 0px | Minor heading; lighter weight |
| Body XL | Inter | 20px | 600 | 1.4 | –0.24px | Large body/emphasis; semibold |
| Button XL | Inter | 20px | 500 | 1.4 | –0.24px | Large button text; medium weight |
| Body LG Strong | Inter | 16px | 600 | 1.5 | 0px | Body emphasis; bold variant |
| Body LG | Inter | 16px | 400 | 1.5 | 0px | Standard body copy; comfortable read |
| Body MD | Inter | 14px | 400 | 1.43 | 0px | Default body; utility text |
| Body MD (+tracking) | Inter | 14px | 400 | 1.43 | 0.25px | Utility text with letter-spacing |
| Button LG | Inter | 14px | 600 | 1.43 | 0.25px | Standard button text; tracked |
| Body SM | Inter | 12px | 400 | 1.4 | 0px | Small body; secondary copy |
| Caption XS | Inter | 12px | 400 | 1.67 | 0px | Captions; minimal prominence |
| Caption XS Strong | Inter | 12px | 600 | 1.67 | 0px | Caption emphasis; bold |
| Caption XS Uppercase | Inter | 12px | 400 | 1.33 | 1px | Labels; all-caps with tracking |
| Caption XS Tight | Inter | 12px | 600 | 1 | 0.1px | Compact label; very tight line |
Primary (Large)
rgba(214, 223, 255, 0.08) (translucent primary)#FFFFFF ({colors.ink})0px 64px64px{typography.button-xl} (20px, weight 500, line-height 1.4, letter-spacing –0.24px){rounded.lg} (12px){shadows.md} (inset micro-elevation)rgba(214, 223, 255, 0.12) (increased opacity)Secondary (Large)
{colors.accent} (#635BFF)#FFFFFF ({colors.ink})0px 64px64px{typography.button-xl} (20px, weight 500, line-height 1.4, letter-spacing –0.24px){rounded.lg} (12px){shadows.md}rgb(99, 91, 255))Primary (Medium)
rgba(214, 223, 255, 0.08)#FFFFFF0px 40px56px{typography.body-lg} (16px, weight 600, line-height 1.5){rounded.lg} (12px){shadows.md}rgba(214, 223, 255, 0.18)Ghost / Tertiary (Small)
oklab(0.999998 -0.00000980496 0.0000234246 / 0.06) (extremely faint white overlay)#FFFFFF6px 16px (compact)36px{typography.body-lg} (16px, weight 400, line-height 1.5)30px 0px 0px 30px (pill-shaped left edge; sharp right)Featured Card
rgba(214, 223, 255, 0.08) (translucent primary tint)#FFFFFF1px solid oklab(0.999998 -0.00000980496 0.0000234246 / 0.1) (faint white border)25px{rounded.xl} (16px){typography.body-lg} (16px, weight 400)Default Card
{colors.accent} (#635BFF)#FFFFFF1px solid rgba(214, 223, 255, 0.08) (subtle primary-tinted border)33px{rounded.xxl} (20px){typography.body-lg} (16px, weight 400)Featured Small Variant
rgba(214, 223, 255, 0.08) (translucent primary)#FFFFFF1px solid rgba(214, 223, 255, 0.08) (matching background tint)33px{rounded.xxl} (20px){typography.body-lg}No explicit form-input measurements were extracted from the sites surveyed. Refer to "Known Gaps" for this limitation.
Header Navigation (Default)
rgba(0, 0, 0, 0))#FFFFFF ({colors.ink})90px{typography.body-md-2} (14px, weight 400)0px (flex container; internal items spaced via gap)Footer Navigation (Default)
#000000 ({colors.canvas})#FFFFFF ({colors.ink}){typography.body-lg} (16px, weight 400)24px 24px 0px 0px (rounded top only)48px 0px (vertical padding; horizontal determined by section layout)Link Default
{colors.accent} (#635BFF)#FFFFFF0px 16px40px{typography.button-lg} (14px, weight 600, line-height 1.43, letter-spacing 0.25px){rounded.lg} (12px){shadows.sm} (inset micro-elevation)rgb(99, 91, 255) (slightly more saturated purple)Link Default Large
rgba(214, 223, 255, 0.08) (translucent primary)#FFFFFF0px 24px48px{typography.button-lg} (14px, weight 600){rounded.lg} (12px){shadows.md}rgba(214, 223, 255, 0.18)Base unit: {spacing.xxs} = 4px
Scale (all multiples of 4px):
{spacing.xxs} = 4px — micro-adjustments, icon gaps{spacing.xs} = 8px — tight component padding, small internal gaps{spacing.sm} = 12px — component padding, label spacing{spacing.md} = 16px — standard padding, body gutters{spacing.lg} = 20px — relaxed padding, section margins{spacing.xl} = 24px — prominent internal padding, grid gaps{spacing.xxl} = 32px — large internal padding, section breaks{spacing.xxxl} = 40px — emphasis spacing, large component gaps{spacing.section} = 48px — standard section padding, major breaks{spacing.band} = 64px — hero and full-width section paddingContext:
{spacing.lg} and {spacing.xxxl} for horizontal padding{spacing.xl} (25px) and {spacing.xxxl} (33px) for internal padding{spacing.section} and {spacing.band} for vertical stacking{spacing.md} for line-height refinement via margin (implied)16px on 375px, 768px, 1280px, 1440px; 10px on 1024px (minor variation)Whitespace is generous and purposeful. Dark canvas ({colors.canvas} — #000000) acts as breathing room; cards and content containers use moderate internal padding (25–33px) to create visual separation. Section breaks employ {spacing.section} (48px) and {spacing.band} (64px) for rhythm; this prevents visual cramping while maintaining forward momentum. White text on black demands ample line-height and word-spacing; body copy defaults to {typography.body-lg} (line-height 1.5) to ensure legibility. Gradients and subtle overlays add atmospheric depth without competing for attention.
{rounded.none} = 0px — sharp edges; used on images and structured grids{rounded.xs} = 4px — minimal softness; subtle UI refinement{rounded.sm} = 6px — light rounding; slight visual relief{rounded.md} = 8px — moderate rounding; standard component softness{rounded.lg} = 12px — primary interactive radius; buttons, small cards, links{rounded.xl} = 16px — featured cards and larger components; 16px is measured on featured cards{rounded.xxl} = 20px — large cards and hero containers; default and featured-small variants use this{rounded.full} = 9999px — pill-shaped; used in decorative or fully-circular contexts (one ghost button variant shows 30px 0px 0px 30px — asymmetric pill)Component-specific radii:
{rounded.lg} (12px){rounded.xl} (16px){rounded.xxl} (20px)30px 0px 0px 30px (asymmetric; left edge pill, right edge sharp)1px — hairline borders on cards and input outlines; used for subtle visual separation2px — accent borders; not widely deployed in measured componentsComponent usage:
1px borders with rgba(214, 223, 255, 0.08) or oklab(0.999998 -0.00000980496 0.0000234246 / 0.1) (subtle white tint)0px (no border stroke; all visual weight via background and shadow)| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; no inset; solid fill or transparent | Base canvas, flat decorative elements, images |
| Micro Inset | {shadows.sm} — inset highlights and dual-layer depth | Secondary buttons, links, tertiary actions |
| Micro Inset Medium | {shadows.md} — inset double-layer (dark shadow + light highlight) | Primary buttons, featured links, elevated text |
| Subtle Lift | {shadows.lg} — minimal outer shadow (3.655px blur, 1.828px offset) | Floating cards, modals, high-priority overlays |
Shadow Philosophy:
The system favors layered micro-elevation via inset shadows rather than outer drop-shadows. This creates a sense of depth through surface texture (bevelled edges, embedded highlights) rather than floating lift. Cards and containers remain visually anchored to the canvas via tight border definitions (1px borders with subtle tint) and zero outer shadows. Buttons achieve dimensionality through inset rgba(0, 0, 0, 0.25) shadow (dark undercut) and rgba(255, 255, 255, 0.16–0.2) highlight (raised top edge), mimicking a subtle emboss. This approach maintains visual weight distribution without introducing visual clutter or excessive shadow complexity.
0.06 — extreme transparency; ghost button background (oklab(0.999998 -0.00000980496 0.0000234246 / 0.06))0.08 — very faint; featured card and primary button background (rgba(214, 223, 255, 0.08))0.1 — subtle; card borders and overlay tints0.12 — light; primary button hover state (rgba(214, 223, 255, 0.12))0.16 — moderate; featured link shadow highlight0.18 — medium; link hover state and elevated surfaces0.20 — prominent; button shadow highlights and overlay intensity0.40 — strong; overlay or emphasis layer0.75 — very strong; modal backdrops or darkened overlays0.81 — near-opaque; high-contrast overlays0.90 — nearly solid; emphasis states1, 2, 3 — standard content flow10, 20, 50, 70 — stacked UI layers (nav dropdowns, secondary overlays, popovers)9999 — topmost layer for dialogs and full-screen overlays{shadows.md} and {shadows.sm}; avoid outer drop-shadows on buttons.{colors.ink} (#FFFFFF) or {colors.body} (#E9E9E9) for all text; never place lower-contrast text without explicit accessibility review.{spacing.section} or {spacing.band} padding. This rhythm anchors the layout and creates predictable visual flow.{rounded.lg} (12px), featured cards {rounded.xl} (16px), default cards {rounded.xxl} (20px). Never deviate without documented reason.{colors.primary} (#D6DFFF) for primary CTAs and accent moments. It is the visual anchor and should appear on every primary interface action.1px white-tinted) consistently. Featured and default cards use subtle borders to define edges against the dark canvas.{rounded.none} (0px); sharp edges maintain photographic integrity.{colors.hairline} (#FF4500) for large surfaces or backgrounds. This warm orange-red is reserved for 1px borders and accents; verify context before use.{spacing.band} (64px) for section padding vertically without documented exception. Sections should stack with consistent rhythm; arbitrary spacing breaks pacing.{typography.caption-xs} (12px) without strong accessibility justification. Readability suffers below this threshold, especially on dark backgrounds.0.06, 0.08, 0.1, 0.12, 0.16, 0.18, 0.20, 0.40, 0.75, 0.81, 0.90.{colors.accent} (#635BFF) to body text. This accent is reserved for secondary CTAs, cards, and special emphasis; body copy remains white or light grey.| Breakpoint | Viewport Width | Content Column | Grid Columns | Heading (largest) | Body Font | Section Padding-x | Notes |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 343px | 4 | 48px | 16px | 16px | Single-column stack; reduced heading scale |
| Tablet | 768px | 736px | 5 | 60px | 16px | 16px | Multi-column grid; heading scales up |
| Desktop (small) | 1024px | 1004px | 5 | 72px | 16px | 10px | Larger display type; minor padding adjustment |
| Desktop (large) | 1280px | 1264px | 5 | 96px | 16px | 16px | Maximum display scale (96px); full content width |
| Desktop (XL) | 1440px | 1408px | 5 | 96px | 16px | 16px | Maximum viewport; content maxes at 1408px |
Key transitions:
10px (responsive margin optimization).{typography.display-xxl}); full design scale is unlocked.No explicit touch-target minimums were extracted from the site's stylesheets. Based on measured component heights:
16px at all breakpoints except 1024px (10px). Content column expands proportionally within breakpoint; max width capped at 1408px (1440px viewport).#D6DFFF)#635BFF)#FFFFFF)#E9E9E9)#61626A)#000000)#FFF6F2) — use sparingly (not dark-mode default)#7355FF)#FF4500) — verify usage contextStart with canvas. Set page background to #000000 ({colors.canvas}). All text defaults to #FFFFFF ({colors.ink}) or #E9E9E9 ({colors.body}).
Button implementation: Primary buttons use rgba(214, 223, 255, 0.08) background with {shadows.md} inset shadow, {rounded.lg} radius, and {typography.button-xl} (20px, weight 500). Secondary buttons substitute #635BFF background. Hover state: increase background opacity or shift colour +10–15% saturation.
Typography tier-stack: Display text uses Plus Jakarta Sans with negative letter-spacing (–1px to –2px); body text uses Inter with neutral or positive tracking. Never mix fonts within a single heading block. Scale headings per breakpoint: 48px (375px), 60px (768px), 72px (1024px), 96px (1280px+).
Cards & containers: Featured cards use rgba(214, 223, 255, 0.08) with 1px border (oklab(0.999998 -0.00000980496 0.0000234246 / 0.1)), {rounded.xl} radius. Default cards use #635BFF background, {rounded.xxl} radius, 1px subtle border. All cards have zero outer shadow.
Spacing rhythm: Apply {spacing.section} (48px) between major sections; {spacing.band} (64px) for hero/full-width breaks. Component padding uses {spacing.md}–{spacing.xxxl} depending on prominence.
Inset elevation: Never use outer drop-shadows. All depth comes from inset {shadows.sm} or {shadows.md} (dark undercut + light highlight) and border definition. This preserves the micro-elevation aesthetic.
Interactive states: Hover states shift background opacity (+0.04–0.1) or colour intensity (e.g., #635BFF → rgb(99, 91, 255)). Disabled elements reduce opacity to 0.6. Focus states apply box-shadow outline (derived from measured focus data; specific values in Interaction States above).
Responsive breakpoints: Always include mobile (375px), tablet (768px), and desktop (1024px, 1280px, 1440px) variants. Heading scale changes at each breakpoint; content column expands but max-width caps at 1408px. Section padding-x remains 16px except 1024px (10px).
Opacity consistency: Transparent backgrounds use the measured scale (0.06, 0.08, 0.1, 0.12, 0.16, 0.18, 0.20, etc.). Never guess intermediate values; refer to extracted palette.
Decorative accents: Greens and additional purples are visual flourish—status colours, highlights, hero band accents. They carry no functional meaning; use strategically for visual rhythm only.
No semantic colour palette. The site does not expose error, success, warning, or info states in measured stylesheets. Decorative greens and secondary purples suggest success/highlight intent, but this is not confirmed by markup or explicit colour mapping. Do not assume these are error/warning roles.
Six accent colours have no measured semantic role. {colors.accent-1} through {colors.accent-5} appear in design patterns but have no explicit role evidence in the extraction data. Treat them as decorative only; do not invent functional meanings (e.g., "this is the error state colour").
Form inputs & validation states not extracted. No measured input fields, focus outlines, error states, or success indicators were captured. Interactive forms (login, challenge signup) exist behind authentication or are not full-page surfaces on the measured pages; assume this gap and document any form additions as extensions to the system.
Interaction state specificity limited. Hover, focus, and disabled states are partially extracted from stylesheets (multiple hover entries recorded). The exact trigger conditions, animation curves, and transition durations are not measured. Implement hover states with the provided background/border/text colour values, but assume 200ms–300ms ease-out transitions as standard (not confirmed).
Animation & motion timing not captured. The system shows decorative gradient overlays and layered sections, but no keyframe animations, scroll-triggered effects, or transition durations are measured. Hero parallax, fade-in effects, and slide transitions are likely present but unmeasured.
Dark/light mode variants. One theme (dark canvas with white text) is measured as primary. No light-mode counterpart was extracted. All colours assume dark-mode context; light-mode implementation would require separate token mapping.
Icon sizing and styling. No explicit icon components, sizing tiers, or icon-specific fonts were measured. Assume icons follow component height (e.g., 16px icons in 36px buttons, 24px icons in 64px buttons) pending explicit data.
Accessibility token gaps. Focus outlines, high-contrast overrides, and reduced-motion preferences are not explicitly measured. The inset shadow strategy may require outer focus rings for WCAG compliance; plan accessibility audit.
Grid gap & gutter measurements incomplete. Grid column count is measured (5 columns tablet+), but exact gap/gutter pixel values are inferred from content column width. Verify grid gap calculations against actual rendered components.
Surfaces behind authentication or secondary pages. The extraction covers 6 public pages. Dashboard, account settings, trading platform UI, and premium content are not measured. The design system may extend with additional components, charts, tables, and data visualizations not reflected in this document.
Scrollbar, tooltip, and custom control styling. No browser scrollbars, custom tooltips, context menus, or date pickers were extracted. Assume browser defaults unless explicit custom styling is discovered.
Document generated from FundedNext design tokens extracted across 6 public pages. Use this system as the authoritative reference for UI implementation. Refer to Known Gaps for unmeasured areas; conduct additional research or design audit for authenticated flows and secondary surfaces.