Remixes of numberland.ir
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: Numberland
description: |
NumberLand's design system embodies a modern, professional fintech aesthetic
with a approachable warmth. The palette blends deep teals and ocean blues with
bright, energetic accents—creating a trustworthy yet dynamic visual language
suited to virtual telecommunications and online services. The typography is
crisp and legible, relying on a custom numberlandfont to establish brand
identity. Rounded pill-shaped buttons and soft transitions convey
accessibility and confidence, while the light canvas background (#F5F8FC)
keeps the interface airy and focused on content. Depth emerges primarily
through surface colour shifts rather than heavy shadows, yielding a clean,
contemporary aesthetic.
source:
url: "https://numberland.ir/"
pagesAnalyzed: 1
extractedAt: 2026-10-28
tokensMeasured: true
colors:
primary: "#000000"
link: "#003F57"
canvas: "#F5F8FC"
surface-alt: "#FFFFFF"
ink: "#484848"
body: "#747474"
hairline: "#009CD7"
accent-1: "#006388"
accent-2: "#8291A6"
accent-3: "#00AF55"
accent-4: "#00BD73"
neutral-1: "#DDDDDD"
neutral-2: "#808080"
typography:
heading:
fontFamily: numberlandfont
fontSize: 17px
fontWeight: 700
letterSpacing: 0px
body-lg:
fontFamily: numberlandfont
fontSize: 17px
fontWeight: 300
letterSpacing: 0px
body-lg-strong:
fontFamily: numberlandfont
fontSize: 17px
fontWeight: 400
letterSpacing: 0px
body-md:
fontFamily: numberlandfont
fontSize: 16px
fontWeight: 400
lineHeight: 1.88
letterSpacing: 0px
body-md-tight:
fontFamily: numberlandfont
fontSize: 16px
fontWeight: 400
lineHeight: 1.75
letterSpacing: 0px
body-sm:
fontFamily: numberlandfont
fontSize: 13px
fontWeight: 400
lineHeight: 2.15
letterSpacing: 0px
body-xs:
fontFamily: numberlandfont
fontSize: 12px
fontWeight: 400
letterSpacing: 0px
rounded:
none: 0px
xs: 5px
sm: 8px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 44px
section: 100px
band: 176px
borderWidths:
thin: 1px
medium: 2px
shadows:
sm: "rgba(23, 23, 23, 0.53) 0px 0px 10px 0px"
md: "rgba(28, 76, 156, 0.15) 0px 10px 50px 0px"
lg: "rgba(44, 62, 80, 0.05) 0px 1px 2px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F5F8FC"
surface: "#FFFFFF"
surfaceRaised: "#F8F8F8"
text: "#484848"
textMuted: "#747474"
border: "#009CD7"
accent: "#003F57"
accentFg: "#FFFFFF"
focusRing: "#003F57"
elevation: shadow
dark:
bg: "#0B1013"
surface: "#1A1E21"
surfaceRaised: "#262A2D"
text: "#F5F7F8"
textMuted: "#9C9FA1"
border: "#323639"
accent: "#0089BD"
accentFg: "#0B0B0C"
focusRing: "#006B94"
elevation: "border+surface"
contrastFailures:
- "light: muted on bg = 4.39:1 (needs 4.5:1)"
components:
button-filled:
textColor: "{colors.ink}"
border: "1px solid {colors.hairline}"
height: 32px
padding: "10px 10px 10px 10px"
fontSize: 16px
fontFamily: numberlandfont
fontWeight: 400
rounded: 20px
backgroundColor: "rgb(235, 248, 255)"
button-secondary:
textColor: "{colors.ink}"
border: "1px solid {colors.surface-alt}"
height: 32px
padding: "10px 10px 10px 10px"
fontSize: 16px
fontFamily: numberlandfont
fontWeight: 400
rounded: 20px
backgroundColor: "{colors.surface-alt}"
button-filled-2:
textColor: "{colors.link}"
padding: "8px 20px 8px 15px"
fontSize: 15px
fontFamily: numberlandfont
fontWeight: 500
rounded: "{rounded.xs}"
backgroundColor: "rgb(244, 249, 255)"
card:
textColor: "rgb(114, 114, 114)"
fontSize: 16px
fontFamily: "Font Awesome 5 Pro"
fontWeight: 300
lineHeight: 1
card-2:
textColor: "{colors.surface-alt}"
fontSize: 16px
fontFamily: "Font Awesome 5 Pro"
fontWeight: 400
lineHeight: 1
link:
textColor: "{colors.primary}"
fontSize: 16px
fontFamily: numberlandfont
fontWeight: 400
link-2:
textColor: "{colors.link}"
padding: "2px 11px 2px 11px"
fontSize: 15px
fontFamily: numberlandfont
fontWeight: 500
states:
other-hover:
target: other
state: hover
opacity: 1
input-hover:
target: input
state: hover
backgroundColor: "rgb(31, 143, 232)"
input-focus:
target: input
state: focus
boxShadow: none
other-focus:
target: other
state: focus
boxShadow: none
link-hover:
target: link
state: hover
textColor: "rgb(105, 146, 254)"
button-hover:
target: button
state: hover
transform: "scale(1.05)"
backgroundColor: "rgb(0, 159, 222)"
nav-hover:
target: nav
state: hover
textColor: "rgb(255, 195, 105)"
transform: "translate3d(-4px, 0px, 0px)"
other-active:
target: other
state: active
boxShadow: "rgba(0, 156, 215, 0.1) 0px 0px 0px 3px"
transform: "translateY(-50%)"
badge-hover:
target: badge
state: hover
textColor: "rgb(44, 62, 80)"
borderColor: "{colors.hairline}"
backgroundColor: "rgb(243, 250, 255)"
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 17
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 17
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 5
navLinksVisible: 0
menuToggleVisible: false
headingPx: 17
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 17
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1440
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 17
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 0
rolesUnassigned: 6
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
NumberLand's design system embodies a modern, professional fintech aesthetic with a approachable warmth. The palette blends deep teals and ocean blues with bright, energetic accents—creating a trustworthy yet dynamic visual language suited to virtual telecommunications and online services. The typography is crisp and legible, relying on a custom numberlandfont to establish brand identity. Rounded pill-shaped buttons and soft transitions convey accessibility and confidence, while the light canvas background ({colors.canvas} — #F5F8FC) keeps the interface airy and focused on content. Depth emerges primarily through surface colour shifts rather than heavy shadows, yielding a clean, contemporary aesthetic.
Key Characteristics
numberlandfont){colors.primary} — #000000): Primary text, brand mark emphasis, and active states; anchors all strong visual hierarchy{colors.link} — #003F57): Inline hyperlink text; transitions to #0081B2 on hover for enhanced affordance{colors.accent-1} — #006388): Decorative teal; used for brand illustrations and secondary visual elements{colors.accent-2} — #8291A6): Muted blue-grey; supports secondary illustrations and supporting graphics{colors.accent-3} — #00AF55): Vibrant emerald green; used for accent callouts and supplementary branding{colors.accent-4} — #00BD73): Bright teal-green; complements accent-3 in decorative applications{colors.canvas} — #F5F8FC): Default page background; light blue-grey providing subtle visual separation{colors.surface-alt} — #FFFFFF): White surface for alternating section bands and card backgrounds{colors.ink} — #484848): Primary heading and display text; strong contrast on light backgrounds{colors.body} — #747474): Secondary body copy and supporting text{colors.neutral-1} — #DDDDDD): Light grey for subtle dividers and disabled states{colors.neutral-2} — #808080): Mid-grey for tertiary text and auxiliary UI elements{colors.hairline} — #009CD7): 1px accent borders and icon highlights; calls attention to interactive focus statesnumberlandfont (custom brand typeface)Calibri (fallback for system compatibility)-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Heading | numberlandfont | 17px | 700 | Auto | 0px | Used for H1 and primary headings; strong emphasis |
| Body MD | numberlandfont | 16px | 400 | 1.88 | 0px | Primary body copy; generous line height for readability |
| Body MD Tight | numberlandfont | 16px | 400 | 1.75 | 0px | Compact body variant; used in dense layouts |
| Body LG | numberlandfont | 17px | 300 | Auto | 0px | Light-weight large text; secondary emphasis |
| Body LG Strong | numberlandfont | 17px | 400 | Auto | 0px | Matched size to display but weight 400; mid-level emphasis |
| Body SM | numberlandfont | 13px | 400 | 2.15 | 0px | Smaller body text; high line height for legibility at reduced size |
| Body XS | numberlandfont | 12px | 400 | Auto | 0px | Minimal text; links and helper copy |
0px across all roles, reflecting the custom typeface's inherent spacing designnumberlandfont is mandatory for brand consistency; Calibri serves as fallback onlyPrimary Filled
#EBF8FF (light cyan){colors.ink} (#484848)1px solid {colors.hairline} (#009CD7){spacing.xs} (8px) all sides{typography.body-md} (16px, 400, numberlandfont){rounded.xs} (5px) — pill shape#009FDE, text {colors.ink}, scale 1.05rgba(0, 156, 215, 0.12) 0px 0px 0px 3px, rgba(0, 156, 215, 0.12) 0px 4px 12px, border rgba(0, 156, 215, 0.55)Secondary (White)
{colors.surface-alt} (#FFFFFF){colors.ink} (#484848)1px solid {colors.surface-alt} (#FFFFFF){spacing.xs} (8px) all sides{typography.body-md} (16px, 400, numberlandfont){rounded.xs} (5px)#F6F6F6, text {colors.ink}Tertiary (Filled Variant)
#F4F9FF (very light cyan){colors.link} (#003F57)0px{spacing.xs} (8px) 20px 8px 15pxnumberlandfont, 15px, weight 500