Remixes of server.rtlcheck.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: Server
description: |
Flostack presents a modern, tech-forward design system rooted in digital
sophistication. The palette centers on a deep amethyst primary (#3B1E6D)
paired with a vibrant golden accent (#FFC400), creating a striking contrast
that signals innovation and energy. The canvas is wrapped in a subtle lavender
(#F9F7FD), grounding the interface in approachability while the bold
typography—primarily Yekan Bakh FaNum—reinforces authority and clarity. The
system favors generous whitespace, soft rounded corners at selective touch
points, and a colour-blocking depth strategy that prioritizes usability over
visual noise. This is a design language built for platform services:
professional, welcoming, and unambiguously actionable.
source:
url: "https://server.rtlcheck.ir/"
pagesAnalyzed: 1
extractedAt: 2026-10-30
tokensMeasured: true
colors:
primary: "#3B1E6D"
accent: "#FFC400"
canvas: "#F9F7FD"
ink: "#000000"
body: "#090410"
muted: "#625E66"
faint: "#89878C"
hairline: "#E0DBE8"
neutral-1: "#EFEDF3"
typography:
display:
fontFamily: "Yekan Bakh FaNum"
fontSize: 72px
fontWeight: 700
lineHeight: 1
letterSpacing: 0px
heading-lg:
fontFamily: "Yekan Bakh FaNum"
fontSize: 30px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-md:
fontFamily: "Yekan Bakh FaNum"
fontSize: 20px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
heading-sm:
fontFamily: "Yekan Bakh FaNum"
fontSize: 18px
fontWeight: 600
lineHeight: 1.56
letterSpacing: 0px
heading-xs:
fontFamily: "Yekan Bakh FaNum"
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
heading-xs-strong:
fontFamily: "Yekan Bakh FaNum"
fontSize: 16px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
body-xl:
fontFamily: "Yekan Bakh FaNum"
fontSize: 20px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
body-xl-strong:
fontFamily: "Yekan Bakh FaNum"
fontSize: 20px
fontWeight: 600
lineHeight: 1.4
letterSpacing: 0px
body-lg:
fontFamily: "Yekan Bakh FaNum"
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg-loose:
fontFamily: "Yekan Bakh FaNum"
fontSize: 16px
fontWeight: 400
lineHeight: 2
letterSpacing: 0px
body-md:
fontFamily: "Yekan Bakh FaNum"
fontSize: 14px
fontWeight: 400
lineHeight: 2.29
letterSpacing: 0px
body-md-strong:
fontFamily: "Yekan Bakh FaNum"
fontSize: 14px
fontWeight: 700
lineHeight: 1.43
letterSpacing: 0px
label:
fontFamily: "Yekan Bakh FaNum"
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
caption:
fontFamily: "Yekan Bakh FaNum"
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
rounded:
none: 0px
xs: 12px
sm: 16px
md: 24px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 24px
xl: 32px
xxl: 40px
xxxl: 48px
section: 56px
band: 64px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F9F7FD"
surface: "#F2F0F5"
surfaceRaised: "#E8E6EB"
text: "#000000"
textMuted: "#090410"
border: "#E0DBE8"
accent: "#3B1E6D"
accentFg: "#FFFFFF"
focusRing: "#3B1E6D"
elevation: shadow
dark:
bg: "#0E0C12"
surface: "#1C1B20"
surfaceRaised: "#29272C"
text: "#F7F6F9"
textMuted: "#9E9DA1"
border: "#353338"
accent: "#936CD7"
accentFg: "#0B0B0C"
focusRing: "#7C4CCE"
elevation: "border+surface"
components:
button-text:
typography: "{typography.body-lg}"
textColor: "{colors.canvas}"
height: 80px
padding: "8px 16px 8px 16px"
rounded: "{rounded.sm}"
backgroundColor: "oklab(0.847286 0.0146153 -0.0228483 / 0.1)"
button-filled:
typography: "{typography.body-md-strong}"
textColor: "{colors.body}"
height: 36px
padding: "8px 16px 8px 16px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.accent}"
button-filled-lg:
typography: "{typography.body-lg}"
textColor: "{colors.body}"
height: 48px
padding: "12px 0px 12px 0px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.accent}"
card:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
padding: "16px 16px 16px 16px"
rounded: "{rounded.md}"
backgroundColor: "rgb(255, 255, 255)"
card-sm:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
padding: "12px 12px 12px 12px"
rounded: "{rounded.sm}"
backgroundColor: "rgb(255, 255, 255)"
navigation:
typography: "{typography.label}"
textColor: "{colors.ink}"
height: 44px
footer:
typography: "{typography.body-lg}"
textColor: "{colors.canvas}"
padding: "56px 56px 56px 56px"
rounded: "{rounded.md}"
link:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
rounded: "{rounded.md}"
backgroundColor: "{colors.primary}"
link-sm:
typography: "{typography.body-lg}"
textColor: "{colors.canvas}"
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
states:
other-hover:
target: other
state: hover
opacity: 0.6
other-focus-visible:
target: other
state: focus-visible
outlineWidth: 2px
other-disabled:
target: other
state: disabled
opacity: 0.5
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 2
navLinksVisible: 20
menuToggleVisible: false
headingPx: 30
bodyPx: 16
sectionPaddingX: 20
- width: 768
containerWidth: 720
gridColumns: 4
navLinksVisible: 21
menuToggleVisible: false
headingPx: 30
bodyPx: 16
sectionPaddingX: 32
- width: 1024
containerWidth: 976
gridColumns: 7
navLinksVisible: 21
menuToggleVisible: false
headingPx: 30
bodyPx: 16
sectionPaddingX: 32
- width: 1280
containerWidth: 448
gridColumns: 7
navLinksVisible: 21
menuToggleVisible: false
headingPx: 30
bodyPx: 16
sectionPaddingX: 32
- width: 1440
containerWidth: 1280
gridColumns: 7
navLinksVisible: 21
menuToggleVisible: false
headingPx: 30
bodyPx: 16
sectionPaddingX: 32
coverage:
statesFound: 43
gradientsFound: 0
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
tokens:
colors:
primary: "#3B1E6D"
accent: "#FFC400"
canvas: "#F9F7FD"
ink: "#000000"
body: "#090410"
muted: "#625E66"
faint: "#89878C"
hairline: "#E0DBE8"
neutral-1: "#EFEDF3"
typography:
display:
fontSize: 72px
fontWeight: 700
lineHeight: 1
letterSpacing: 0px
heading-lg:
fontSize: 30px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-md:
fontSize: 20px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
heading-sm:
fontSize: 18px
fontWeight: 600
lineHeight: 1.56
letterSpacing: 0px
heading-xs:
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
heading-xs-strong:
fontSize: 16px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
body-xl:
fontSize: 20px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
body-xl-strong:
fontSize: 20px
fontWeight: 600
lineHeight: 1.4
letterSpacing: 0px
body-lg:
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg-loose:
fontSize: 16px
fontWeight: 400
lineHeight: 2
letterSpacing: 0px
body-md:
fontSize: 14px
fontWeight: 400
lineHeight: 2.29
letterSpacing: 0px
body-md-strong:
fontSize: 14px
fontWeight: 700
lineHeight: 1.43
letterSpacing: 0px
label:
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
caption:
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 24px
xl: 32px
xxl: 40px
xxxl: 48px
section: 56px
band: 64px
rounded:
none: 0px
xs: 12px
sm: 16px
md: 24px
zindex:
dropdown: 10
dropdownHigh: 20
sticky: 100
Flostack presents a modern, tech-forward design system rooted in digital sophistication. The palette centers on a deep amethyst primary ({colors.primary} — #3B1E6D) paired with a vibrant golden accent ({colors.accent} — #FFC400), creating a striking contrast that signals innovation and energy. The canvas is wrapped in a subtle lavender ({colors.canvas} — #F9F7FD), grounding the interface in approachability while the bold typography—primarily Yekan Bakh FaNum—reinforces authority and clarity. The system favors generous whitespace, soft rounded corners at selective touch points, and a colour-blocking depth strategy that prioritizes usability over visual noise. This is a design language built for platform services: professional, welcoming, and unambiguously actionable.
Key Characteristics
{colors.primary} — #3B1E6D): Deep amethyst used for primary CTAs, brand accents, active states, and interactive focus. The core identity colour.{colors.accent} — #FFC400): Warm golden yellow reserved for hero bands, call-to-action buttons, and emphasis elements. High contrast and energy.{colors.canvas} — #F9F7FD): Soft lavender page background, providing a cool, welcoming foundation.{colors.ink} — #000000): Pure black for headings and primary text in high-contrast contexts.{colors.body} — #090410): Near-black for body copy and detailed content, with a hint of warmth.{colors.muted} — #625E66): Mid-tone grey for secondary text, captions, and reduced-emphasis labels.{colors.faint} — #89878C): Light grey for tertiary content, placeholder text, and disabled states.{colors.hairline} — #E0DBE8): Delicate lavender for 1px borders, dividers, and subtle separators.{colors.neutral-1} — #EFEDF3): Unassigned neutral, measured on light surface regions but not tied to a specific semantic role. Use sparingly for subtle background tints or card separations.Primary: Yekan Bakh FaNum (all roles)
Fallback stack: Yekan Bakh FaNum, system-ui, -apple-system, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Yekan Bakh FaNum | 72px | 700 | 1 | 0px | Hero / statement text |
| Heading Large | Yekan Bakh FaNum | 30px | 700 | 1.2 | 0px | Page titles, major sections |
| Heading Medium | Yekan Bakh FaNum | 20px | 700 | 1.4 | 0px | Section headings |
| Heading Small | Yekan Bakh FaNum | 18px | 600 | 1.56 | 0px | Subsection titles |
| Heading XS | Yekan Bakh FaNum | 16px | 600 | 1.5 | 0px | Card titles, minor headings |
| Heading XS Strong | Yekan Bakh FaNum | 16px | 700 | 1.5 | 0px | Emphasized card titles |
| Body XL | Yekan Bakh FaNum | 20px | 400 | 1.4 | 0px | Large body paragraphs |
| Body XL Strong | Yekan Bakh FaNum | 20px | 600 | 1.4 | 0px | Emphasized large copy |
| Body Large | Yekan Bakh FaNum | 16px | 400 | 1.5 | 0px | Standard body text |
| Body Large Loose | Yekan Bakh FaNum | 16px | 400 | 2 | 0px | Spacious paragraph blocks |
| Body Medium | Yekan Bakh FaNum | 14px | 400 | 2.29 | 0px | Compact body, lists |
| Body Medium Strong | Yekan Bakh FaNum | 14px | 700 | 1.43 | 0px | Emphasized mid-size text |
| Label | Yekan Bakh FaNum | 14px | 400 | 1.43 | 0px | Form labels, input hints |
| Caption | Yekan Bakh FaNum | 12px | 400 | 1.33 | 0px | Fine print, metadata |
{typography.body-md} at 2.29 vs {typography.heading-lg} at 1.2) to ensure readability and prevent cramping in dense content.margin-inline, padding-inline) to support both LTR and RTL contexts.Primary Filled (Large)
{colors.accent} (#FFC400){colors.body} (#090410){spacing.sm} (12px) vertical × 0 horizontal{typography.body-lg} (16px, 400 weight){rounded.xs} (12px)color-mix(in oklab, {colors.accent} 85%, transparent) or adjusts to primary brand colour{colors.primary} (#3B1E6D) with text colour adjustment{colors.primary}{colors.primary} at 6% opacityPrimary Filled (Standard)
{colors.accent} (#FFC400){colors.body} (#090410){spacing.xs} (8px) vertical × {spacing.md} (16px) horizontal{typography.body-md-strong} (14px, 700 weight){rounded.xs} (12px){colors.primary} with white text{colors.primary}, opacity 1{colors.primary}{colors.primary} at 8% opacity, text {colors.body} at 48% opacityGhost / Secondary
oklab(0.847286 0.0146153 -0.0228483 / 0.1) (light transparent overlay){colors.canvas} (#F9F7FD){spacing.xs} (8px) vertical × {spacing.md} (16px) horizontal{typography.body-lg} (16px, 400 weight){rounded.sm} (16px){colors.primary} at 90% opacityDefault Card (Large)
#FFFFFF){colors.ink} (#000000){spacing.md} (16px) on all sides{typography.body-lg} (16px, 400 weight){rounded.md} (24px)color-mix(in oklab, {colors.primary} 90%, transparent) or slight elevationDefault Card (Small)
#FFFFFF){colors.ink} (#000000){spacing.sm} (12px) on all sides{typography.body-lg} (16px, 400 weight){rounded.sm} (16px)color-mix(in oklab, {colors.secondary} 80%, transparent) or similar light liftDefault Navigation Link
{colors.ink} (#000000){typography.body-md} (14px, 400 weight){rounded.none} (0px){colors.primary} (#3B1E6D){colors.primary}, weight implicit (use 600 or 700){colors.primary}Link Block (Large)
{colors.primary} (#3B1E6D){colors.ink} (#000000){typography.body-lg} (16px, 400 weight){rounded.md} (24px){colors.primary}Link Block (Small Icon)
{colors.primary} (#3B1E6D){colors.canvas} (#F9F7FD){typography.body-lg} (16px, 400 weight){rounded.sm} (16px)color-mix(in oklab, {colors.primary} 80%, transparent) or white text at opacity 0.8Default Footer
{colors.canvas} (#F9F7FD){spacing.section} (56px) on all sides{typography.body-lg} (16px, 400 weight){rounded.md} (24px)The spacing system uses a 4px base unit with a modular scale applied across the design:
{spacing.xxs} (4px): Micro adjustments, internal component padding{spacing.xs} (8px): Tight spacing between adjacent elements{spacing.sm} (12px): Button internal padding, small card gaps{spacing.md} (16px): Standard padding, primary component spacing{spacing.lg} (24px): Section-to-section gaps, generous breathing{spacing.xl} (32px): Major section breaks{spacing.xxl} (40px): Large content blocks, hero sections{spacing.xxxl} (48px): Between major page sections{spacing.section} (56px): Page section padding and footer internal spacing{spacing.band} (64px): Hero banner and full-width section paddingUsage context: Smaller units (xxs, xs, sm) for interactive component internals; medium units (md, lg) for content separation; large units (xl, xxl, section, band) for page-level structure.
| Viewport | Content Max-Width | Grid Columns | Section Padding-X |
|---|---|---|---|
| 375px | 343px | 2 | 20px |
| 768px | 720px | 4 | 32px |
| 1024px | 976px | 7 | 32px |
| 1280px | 1280px | 7 | 32px |
| 1440px | 1280px | 7 | 32px |
The grid expands progressively from 2 columns on mobile to 7 on desktop. Content remains centered within the max-width constraint; padding increases at tablet and larger to maintain breathing room on ultra-wide displays. At 1280px and beyond, the max content width stabilizes at 1280px.
The system prioritizes breathing room over density. Sections are separated by {spacing.section} (56px) or {spacing.band} (64px) to create clear visual pauses. Cards and buttons use consistent internal padding ({spacing.md}, {spacing.sm}) to ensure content never feels cramped. The light canvas background ({colors.canvas} — #F9F7FD) extends whitespace psychologically, making the interface feel expansive and welcoming.
{rounded.none} (0px): Inputs, image containers, structural elements requiring sharp edges{rounded.xs} (12px): Buttons (primary and secondary fills), small interactive elements{rounded.sm} (16px): Small cards, secondary button variants, icon buttons{rounded.md} (24px): Large cards, hero sections, footers, prominent containersComponent-specific radius:
{rounded.xs} (12px){rounded.md} (24px){rounded.sm} (16px){rounded.none} (0px){rounded.none} (0px)This design system uses colour-blocking as its primary depth mechanism. Rather than relying on box-shadows to create lift, the system achieves depth through strategic surface colour changes. The card white (#FFFFFF) sits against the lavender canvas ({colors.canvas} — #F9F7FD), creating implicit layering. The primary brand colour ({colors.primary} — #3B1E6D) and accent ({colors.accent} — #FFC400) mark interactive and elevated zones through their chromatic distinctiveness, not shadow.
| Level | Treatment | Use |
|---|---|---|
| Base | Canvas background ({colors.canvas} — #F9F7FD) | Page foundation |
| Lifted | White cards (#FFFFFF) | Content containers, cards |
| Accent | Primary ({colors.primary} — #3B1E6D) or Accent ({colors.accent} — #FFC400) | Interactive elements, CTAs, hero bands |
| Interactive Hover | Semi-transparent primary (color-mix(in oklab, {colors.primary} 90%, transparent)) or 85% alpha variant | Hover states without full colour shift |
Box-shadow usage is intentionally minimal or absent in the measured components. Extracted data shows boxShadow: "none" across buttons, cards, and navigation. Depth is communicated via colour contrast and semantic placement, not shadow blur or spread.
1020100{colors.accent} — #FFC400) for primary CTAs and hero banner buttons; it guarantees visibility and energy.{spacing.md} and {spacing.lg} between sections to maintain the breathing-room aesthetic.{rounded.xs} (12px) to all interactive buttons for consistency and approachability.{spacing.sm} vertical (12px for large fills) and adjust horizontal padding contextually (0 for large fills, {spacing.md} for standard).{colors.primary} — #3B1E6D) with the accent for visual hierarchy; never use both equally in a single region.{colors.primary} outlines to ensure WCAG AA compliance.{spacing.section} (56px) or {spacing.band} (64px) padding to preserve visual rhythm across viewports.{rounded.xs}, large cards use {rounded.md}, inputs use {rounded.none}.{spacing.xs} (8px) on interactive elements; touch targets must remain accessible.{colors.primary} at 6–8% opacity).| Viewport | Width | Grid Columns | Max Content | Section Padding-X | Key Changes |
|---|---|---|---|---|---|
| Mobile | 375px | 2 | 343px | 20px | Compact navigation, single-column cards, tight spacing |
| Tablet | 768px | 4 | 720px | 32px | Navigation remains visible, cards begin to tile, padding increases |
| Medium Desktop | 1024px | 7 | 976px | 32px | Full 7-column grid active, full navigation, larger type possible |
| Desktop | 1280px | 7 | 1280px | 32px | Content width stabilizes, max spacing applied consistently |
| Large Desktop | 1440px | 7 | 1280px | 32px | No further width growth; max-width constraint holds |
No media-driven type changes were detected in the extraction across breakpoints; heading and body sizes remain constant at 30px and 16px respectively from 375px to 1440px. This suggests size adaptation, if any, happens via container queries or responsive padding rather than @media font-size rules.
{spacing.md} (16px) minimum to prevent accidental triggers{spacing.lg} (24px) or {spacing.xl} (32px). Navigation links remain visible (no hamburger detected in extraction).No explicit hamburger menu or nav collapse was detected in the extraction data; the measured site maintains a horizontal navigation bar across all viewports. If mobile collapsing is needed, implement it at <= 375px with a toggle at z-index: 100 and ensure menu links remain accessible.
{colors.accent} — #FFC400); use this for all main call-to-action buttons and hero emphasis.{colors.primary} — #3B1E6D); use for primary brand moments, links, and focus indicators.{colors.canvas} — #F9F7FD); the default, always-present backdrop.{colors.ink} — #000000); strongest contrast for readability.{colors.body} — #090410); near-black, warmer than pure ink for sustained reading.{colors.muted} — #625E66); use for captions, secondary labels, or reduced-emphasis regions.{colors.faint} — #89878C); placeholder text, disabled states, very low contrast.{colors.hairline} — #E0DBE8); 1px separators and subtle structural lines.{colors.accent} — #FFC400) for primary CTAs; it is the system's strongest call-to-attention.{spacing.md} (16px) horizontal (36px height).{rounded.sm} 16px), large cards ({rounded.md} 24px). Inputs and images stay sharp ({rounded.none} 0px).{colors.primary} — #3B1E6D) or use semi-transparent overlays; never darken accent buttons by more than 10–15% alpha.{spacing.section}) is the standard for content sections; 64px ({spacing.band}) for hero and full-width blocks.{colors.primary} at 6% opacity + text at 48% opacity.{colors.neutral-1} — #EFEDF3): This colour was measured on light surface regions but has no explicit semantic role. Use sparingly for decorative backgrounds or secondary card tints.none or inferred from Tailwind defaults; they are not primary depth signals.