Remixes of mixin.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: Mixin
description: |
Mixin presents a modern, professional e-commerce platform designed with
clarity and trust as its core emotional drivers. The interface balances
minimalist surfaces with subtle depth, using a carefully controlled navy
accent to anchor trust and authority. Decorative accent tones—peachy warm and
soft coral—appear selectively in product showcases and promotional zones,
creating visual hierarchy without visual noise. The system embraces generous
whitespace, soft-edge components, and a typography scale rooted in the Iranian
Yekan font family, lending cultural authenticity and regional relevance.
Interactions are smooth and understated; micro-interactions employ gentle
opacity shifts and minimal shadow elevation rather than dramatic transitions.
The overall aesthetic conveys reliability, professionalism, and ease of
use—key brand values for a no-code e-commerce builder.
source:
url: "https://mixin.ir"
pagesAnalyzed: 1
extractedAt: 2026-11-08
tokensMeasured: true
colors:
primary: "#4C5199"
canvas: "#FFFFFF"
surface: "#E9E9F5"
surface-alt: "#464A91"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#202021"
muted: "#6E6E6E"
faint: "#A9A8AA"
error: "#CD0000"
success: "#2EB974"
warning: "#FA6B00"
info: "#006ED8"
accent-1: "#FFF1E5"
accent-2: "#FF6666"
neutral-1: "#FFF4F4"
typography:
heading-md:
fontFamily: __iranyekan_388145
fontSize: 24px
fontWeight: 600
lineHeight: 1.33
letterSpacing: 0px
heading-sm:
fontFamily: __iranyekan_388145
fontSize: 20px
fontWeight: 300
lineHeight: 1.6
letterSpacing: 0px
heading-sm-strong:
fontFamily: __iranyekan_388145
fontSize: 20px
fontWeight: 500
lineHeight: 1.63
letterSpacing: 0px
heading-sm-2:
fontFamily: __iranyekan_388145
fontSize: 20px
fontWeight: 600
lineHeight: 1.6
letterSpacing: 0px
heading-xs:
fontFamily: __iranyekan_388145
fontSize: 16px
fontWeight: 700
lineHeight: 1.63
letterSpacing: 0px
body-md:
fontFamily: __iranyekan_388145
fontSize: 16px
fontWeight: 300
lineHeight: 1.63
letterSpacing: 0px
body-md-strong:
fontFamily: __iranyekan_388145
fontSize: 16px
fontWeight: 400
lineHeight: 1.75
letterSpacing: 0px
body-md-loose:
fontFamily: __iranyekan_388145
fontSize: 16px
fontWeight: 600
lineHeight: 1.75
letterSpacing: 0px
body-sm:
fontFamily: __iranyekan_388145
fontSize: 14px
fontWeight: 400
lineHeight: 1.71
letterSpacing: 0px
body-sm-loose:
fontFamily: __iranyekan_388145
fontSize: 14px
fontWeight: 400
lineHeight: 2
letterSpacing: 0px
body-sm-2:
fontFamily: __iranyekan_388145
fontSize: 14px
fontWeight: 400
lineHeight: 2.29
letterSpacing: 0px
button:
fontFamily: __iranyekan_388145
fontSize: 16px
fontWeight: 500
lineHeight: 1.63
letterSpacing: 0px
label:
fontFamily: __iranyekan_388145
fontSize: 12px
fontWeight: 400
lineHeight: 1.83
letterSpacing: 0px
caption-xs:
fontFamily: __iranyekan_388145
fontSize: 12px
fontWeight: 400
lineHeight: 2.33
letterSpacing: 0px
caption-xs-strong:
fontFamily: __iranyekan_388145
fontSize: 12px
fontWeight: 500
lineHeight: 1.83
letterSpacing: 0px
rounded:
none: 0px
xs: 8px
sm: 12px
md: 16px
lg: 24px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 36px
band: 40px
borderWidths:
thin: 1px
shadows:
sm: "rgba(76, 94, 184, 0.08) 0px 12px 32px 0px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#E9E9F5"
surfaceRaised: "#E0E0EB"
text: "#000000"
textMuted: "#202021"
border: "#E0E0E0"
accent: "#4C5199"
accentFg: "#FFFFFF"
focusRing: "#4C5199"
elevation: shadow
dark:
bg: "#0D0D11"
surface: "#1C1C1F"
surfaceRaised: "#28282B"
text: "#F8F8FB"
textMuted: "#9F9FA2"
border: "#343437"
accent: "#7A7EBD"
accentFg: "#0B0B0C"
focusRing: "#5358A7"
elevation: "border+surface"
components:
button-secondary:
textColor: "{colors.on-primary}"
border: "1px solid {colors.canvas}"
height: 38px
padding: "8px 24px 8px 24px"
fontSize: 14px
fontFamily: __iranyekan_388145
fontWeight: 400
lineHeight: 1.43
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface-alt}"
button-primary:
typography: "{typography.button}"
textColor: "{colors.on-primary}"
height: 50px
padding: "12px 32px 12px 32px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
button-secondary-lg:
textColor: "{colors.on-primary}"
height: 52px
padding: "16px 56px 16px 56px"
fontSize: 14px
fontFamily: __iranyekan_388145
fontWeight: 400
lineHeight: 1.43
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface-alt}"
button-outline:
textColor: "{colors.accent-2}"
border: "1px solid {colors.accent-2}"
height: 38px
padding: "8px 16px 8px 16px"
fontSize: 14px
fontFamily: __iranyekan_388145
fontWeight: 400
lineHeight: 1.43
rounded: "{rounded.xs}"
button-outline-lg:
typography: "{typography.caption-xs-strong}"
textColor: "{colors.on-primary}"
border: "1px solid {colors.canvas}"
height: 40px
padding: "8px 12px 8px 12px"
rounded: "{rounded.xs}"
button-icon:
textColor: "{colors.muted}"
border: "1px solid rgb(235, 235, 235)"
height: 40px
fontSize: 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.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px"
fontFamily: __iranyekan_388145
fontWeight: 400
lineHeight: 1.5
rounded: "{rounded.full}"
backgroundColor: "{colors.canvas}"
card:
textColor: "{colors.ink}"
padding: "16px 16px 24px 16px"
fontSize: 16px
fontFamily: __iranyekan_388145
fontWeight: 400
lineHeight: 1.5
rounded: "{rounded.md}"
backgroundColor: "{colors.surface}"
card-2:
textColor: "{colors.ink}"
padding: "16px 16px 24px 16px"
fontSize: 16px
fontFamily: __iranyekan_388145
fontWeight: 400
lineHeight: 1.5
rounded: "{rounded.md}"
backgroundColor: "{colors.accent-1}"
badge-icon:
textColor: "{colors.ink}"
height: 64px
padding: "2px 2px 2px 2px"
fontSize: 16px
fontFamily: __iranyekan_388145
fontWeight: 400
lineHeight: 1.5
rounded: "{rounded.full}"
navigation:
typography: "{typography.body-md-strong}"
textColor: "{colors.body}"
height: 36px
footer:
textColor: "{colors.ink}"
fontSize: 16px
fontFamily: __iranyekan_388145
fontWeight: 400
lineHeight: 1.5
backgroundColor: "{colors.surface-alt}"
link:
textColor: "{colors.ink}"
fontSize: 16px
fontFamily: __iranyekan_388145
fontWeight: 400
lineHeight: 1.5
rounded: "{rounded.md}"
link-sm:
textColor: "{colors.on-primary}"
padding: "16px 16px 16px 16px"
fontSize: 16px
fontFamily: __iranyekan_388145
fontWeight: 300
lineHeight: 1.5
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface}"
states:
other-hover:
target: other
state: hover
backgroundColor: "rgba(255, 255, 255, 0.1)"
other-focus:
target: other
state: focus
borderColor: "rgba(76, 81, 153, 0.4)"
other-focus-visible:
target: other
state: focus-visible
rounded: 0.25rem
other-disabled:
target: other
state: disabled
opacity: 0.3
link-focus-visible:
target: link
state: focus-visible
outlineWidth: 2px
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 5
navLinksVisible: 0
menuToggleVisible: false
headingPx: 20
bodyPx: 16
sectionPaddingX: 16
- width: 768
containerWidth: 736
gridColumns: 5
navLinksVisible: 0
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 32
- width: 1024
containerWidth: 992
gridColumns: 5
navLinksVisible: 5
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 48
- width: 1280
containerWidth: 1248
gridColumns: 5
navLinksVisible: 5
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 48
- width: 1440
containerWidth: 1408
gridColumns: 5
navLinksVisible: 5
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 48
coverage:
statesFound: 41
gradientsFound: 0
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: true
Mixin presents a modern, professional e-commerce platform designed with clarity and trust as its core emotional drivers. The interface balances minimalist surfaces with subtle depth, using a carefully controlled navy accent to anchor trust and authority. Decorative accent tones—peachy warm and soft coral—appear selectively in product showcases and promotional zones, creating visual hierarchy without visual noise. The system embraces generous whitespace, soft-edge components, and a typography scale rooted in the Iranian Yekan font family, lending cultural authenticity and regional relevance. Interactions are smooth and understated; micro-interactions employ gentle opacity shifts and minimal shadow elevation rather than dramatic transitions. The overall aesthetic conveys reliability, professionalism, and ease of use—key brand values for a no-code e-commerce builder.
Key Characteristics
{colors.primary} — #4C5199) as the primary accent{colors.primary} — #4C5199): Navy accent used for primary CTAs, brand identity, active states, and trusted authority markers. The system's main interactive colour.{colors.accent-1} — #FFF1E5): Soft peachy off-white used as a decorative surface in product cards and promotional backgrounds. No functional role—purely atmospheric.{colors.accent-2} — #FF6666): Soft coral accent applied decoratively in hero zones and highlight badges. No semantic function; treated as a mood colour.{colors.primary} — #4C5199): Buttons, active navigation, critical interactive surfaces.{colors.surface-alt} — #464A91): Darker navy used for alternate section backgrounds, secondary interactive zones, and footer regions.{colors.canvas} — #FFFFFF): Default page background; text colour on brand-coloured surfaces.{colors.surface} — #E9E9F5): Card and panel backgrounds, neutral secondary surfaces.{colors.surface-alt} — #464A91): Darker neutral band backgrounds, footer, section dividers.{colors.ink} — #000000): Primary heading and display text.{colors.body} — #202021): Body copy and standard paragraph text.{colors.muted} — #6E6E6E): Captions, secondary descriptive text, and metadata.{colors.faint} — #A9A8AA): Placeholder text, disabled states, tertiary labels.{colors.neutral-1} — #FFF4F4): Subtle warm neutral for soft backgrounds.{colors.error} — #CD0000): Error states, validation failures, destructive actions.{colors.success} — #2EB974): Success messages, confirmation states, positive actions.{colors.warning} — #FA6B00): Warning alerts, caution states, attention-needed indicators.{colors.info} — #006ED8): Informational messages, notices, help text.Primary: __iranyekan_388145 (Iranian Yekan), with fallback stack: Yekan, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Heading XL | Iranian Yekan | 24px | 600 | 1.33 | 0px | Used for main page headings and hero titles |
| Heading Large / H2 | Iranian Yekan | 20px | 600 | 1.6 | 0px | Section headings, card titles |
| Heading Medium | Iranian Yekan | 20px | 300 | 1.6 | 0px | Secondary headings, lighter emphasis |
| Heading Small Strong | Iranian Yekan | 20px | 500 | 1.63 | 0px | Mid-weight section headers |
| Heading XS / Bold Label | Iranian Yekan | 16px | 700 | 1.63 | 0px | Inline strong headings, bold labels |
| Body Large | Iranian Yekan | 16px | 300 | 1.63 | 0px | Large body text, lighter prose |
| Body Large Strong | Iranian Yekan | 16px | 600 | 1.75 | 0px | Emphasized body text, strong calls |
| Body Regular | Iranian Yekan | 16px | 400 | 1.75 | 0px | Links and standard body copy |
| Body Medium Loose | Iranian Yekan | 14px | 400 | 2.0 | 0px | Body text with generous leading |
| Body Small | Iranian Yekan | 14px | 400 | 1.71 | 0px | Smaller body copy, descriptions |
| Body Small Loose | Iranian Yekan | 14px | 400 | 2.29 | 0px | Small copy with open line height |
| Button / Control | Iranian Yekan | 16px | 500 | 1.63 | 0px | Button labels and interactive text |
| Label / Form Label | Iranian Yekan | 12px | 400 | 1.83 | 0px | Form labels, metadata tags |
| Caption XS | Iranian Yekan | 12px | 400 | 2.33 | 0px | Small captions, footnotes |
| Caption XS Strong | Iranian Yekan | 12px | 500 | 1.83 | 0px | Emphasized captions |
{colors.primary} (#4C5199){colors.canvas} (#FFFFFF){rounded.sm} (12px)rgba(233, 233, 245, 0.5)rgba(76, 81, 153, 0.4), outline 2px transparent#A9A9AA, text opacity 0.3{colors.primary} (#4C5199){colors.canvas} (#FFFFFF){rounded.xs} (8px){colors.canvas} (#FFFFFF)#FFFFFF with opacity 0.1#A9A9AA, border #C9CCCF{colors.primary} (#4C5199){colors.canvas} (#FFFFFF){rounded.xs} (8px){colors.accent-2} (#FF6666){rounded.xs} (8px){colors.accent-2} (#FF6666)rgba(239, 68, 68, 0.7){colors.canvas} (#FFFFFF){rounded.xs} (8px){colors.canvas} (#FFFFFF){colors.canvas} (#FFFFFF){colors.muted} (#6E6E6E){rounded.full} (9999px, pill-shaped)#EBEBEBrgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2pxrgba(233, 233, 245, 0.5){colors.surface} (#E9E9F5){colors.ink} (#000000){rounded.md} (16px){colors.accent-1} (#FFF1E5){colors.ink} (#000000){rounded.md} (16px){rounded.full} (9999px, circular){colors.canvas} (#FFFFFF){colors.body} (#202021){colors.faint} (#A9A8AA){rounded.sm} (12px)rgba(76, 81, 153, 0.4), outline 2px transparentrgba(239, 68, 68, 0.7)#EBEBEB, border #C9CCCF, color #A9A9AA{colors.canvas} (#FFFFFF){colors.body} (#202021){colors.primary} (#4C5199), opacity 0.9{colors.primary}, possible underline or weight increase{colors.surface-alt} (#464A91){colors.canvas} (#FFFFFF){colors.canvas}, hover opacity 0.8{colors.body} (#202021){colors.primary} (#4C5199), opacity 0.9{colors.primary}, outline-width 2px{colors.surface} (#E9E9F5){colors.canvas} (#FFFFFF){rounded.xs} (8px)rgba(32, 32, 33, 0.2)Base unit: 4px, with a modular scale providing predictable increments.
| Scale | Value | Context |
|---|---|---|
{spacing.xxs} | 4px | Micro-spacing, tight component gaps |
{spacing.xs} | 8px | Compact spacing, button padding (small) |
{spacing.sm} | 12px | Form input padding, small margins |
{spacing.md} | 16px | Standard padding, card spacing, medium gaps |
{spacing.lg} | 20px | Larger margins, section spacing |
{spacing.xl} | 24px | Generous spacing, section padding |
{spacing.xxl} | 28px | Large section dividers |
{spacing.xxxl} | 32px | Major spacing, footer padding |
{spacing.section} | 36px | Section-level separation |
{spacing.band} | 40px | Full-width band/region spacing |
{spacing.md} (16px per side){spacing.xl} (32px per side)Generous whitespace is a design principle. Content zones are separated by {spacing.section} (36px) or {spacing.band} (40px), creating visual breathing room. Cards and containers use internal {spacing.md} to {spacing.lg} padding. Text lines use elevated line heights (1.6–2.33) rather than tight leading, supporting Persian script legibility and visual comfort. Avoid crowding; prioritize clarity and scanability.
| Value | Token | Component Role |
|---|---|---|
| 0px | {rounded.none} | Images, full-width sections, flat elements |
| 8px | {rounded.xs} | Buttons (secondary, outline), inputs, small containers |
| 12px | {rounded.sm} | Input fields, small form controls |
| 16px | {rounded.md} | Cards, panels, standard containers |
| 24px | {rounded.lg} | Large containers, hero sections |
| 9999px | {rounded.full} | Icon buttons, badges, pill-shaped elements, circles |
Philosophy: Most interactive elements use soft radius (8–16px) for approachability. Circular elements employ full radius. Images and structural backgrounds remain sharp (0px) unless explicitly rounded for visual emphasis.
| Width | Value | Use |
|---|---|---|
| Thin | 1px | Button borders, input borders, icon button borders, link underlines |
Single standard: The system employs 1px for all visible borders, providing consistency and subtlety.
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Default background, images, typography |
| Raised | Custom single-tier shadow | Icon buttons, hover states |
| Elevated | Micro shadow | Card surfaces when lifted, interactive hover |
Custom Shadow (Raised):
rgba(76, 94, 184, 0.08) 0px 12px 32px 0px
Applied to icon buttons and select interactive elements for subtle depth without visual clutter.
Shadow Philosophy: The system employs a single-tier, colour-blocking elevation model. Depth is achieved primarily through surface colour changes (light neutral #E9E9F5 vs. dark navy #464A91 backgrounds) rather than layered shadows. The one custom shadow is used sparingly—on icon buttons and focused interactive states—providing a barely-there lift that reinforces interactivity without dominating the visual hierarchy. This restrained approach maintains the system's minimalist, professional character.
| Value | Context |
|---|---|
| 0.25 (25%) | Subtle overlay, very light transparency |
| 0.30 (30%) | Disabled text, very muted state |
| 0.4 (40%) | Disabled background, faded state |
| 0.6 (60%) | Hover overlay, moderate transparency |
| 0.65 (65%) | Secondary hover, reduced opacity |
| 0.7 (70%) | Interactive fade, lower-emphasis state |
| 0.8 (80%) | Card hover, subtle darkening |
| 0.9 (90%) | Link hover, almost full emphasis |
| 1.0 (100%) | Full opacity, standard state |
Use Cases:
| Layer | Z-Index | Use |
|---|---|---|
| Base | 1–2 | Default page content, standard containers |
| Dropdown | 10–30 | Dropdown menus, popovers, contextual panels |
| Modal | 9999 | Modal dialogs, overlays, full-screen interactions |
Layering Philosophy: A three-tier stack keeps complexity minimal. Base content flows naturally; dropdown layers (10–30) sit above without dominating; modals (9999) guarantee absolute front positioning for critical interactions. No intermediate layers (sidebar, sticky nav, toast) were observed in extraction; gaps are noted below.
{colors.primary} — #4C5199) for all primary CTAs, active states, and trust-building interactive elements.{spacing.section} (36px) and {spacing.band} (40px) between content zones; avoid crowding.{rounded.xs} to {rounded.md} for approachability.#FFFFFF, #E9E9F5, #464A91) to create visual layers rather than stacking shadows.#CD0000), success (#2EB974), warning (#FA6B00), and info (#006ED8) consistently for status communication.#FFF1E5) or coral (#FF6666) for functional UI. Reserve them for decorative backgrounds and highlights; they carry no semantic role.| Breakpoint | Viewport Width | Max Content Width | Grid Columns | Key Changes |
|---|---|---|---|---|
| Mobile | 375px | 343px | 5 | Single-column layout, 16px horizontal padding, heading 20px, body 16px |
| Tablet | 768px | 736px | 5 | Two-column stacking, 32px horizontal padding, same typography |
| Desktop | 1024px | 992px | 5 | Full layout, 48px horizontal padding, same typography |
| Large Desktop | 1280px–1440px | 1248–1408px | 5 | Full layout, 48px horizontal padding, no change |
Navigation Collapse Point: Navigation links remain visible at all measured breakpoints (no mobile menu toggle observed). Assume full navigation visibility from 375px and up based on extraction.
Heading & Body Scale: Heading remains 24px (display role) and 20px (section headings) across all breakpoints. Body text stays at 16px. No text scaling below desktop.
{spacing.xs}) around clickable elements to prevent accidental touches{spacing.md} (16px) minimum to avoid confusion and mis-tapsUse this mapping when implementing UI components:
#4C5199) — buttons, active nav, trust signals#464A91) — alternate section backgrounds, footer#FFFFFF) — page background, card text on brand#E9E9F5) — neutral card backgrounds, containers#000000) — primary display text#202021) — standard paragraph text#6E6E6E) — captions, metadata, reduced emphasis#A9A8AA) — form placeholders, disabled text#CD0000)#2EB974)#FA6B00)#006ED8)#FFF1E5), Coral (#FF6666)Start with navy (#4C5199) for all primary CTAs. Every actionable button, link, and interactive focus should reference this colour as the foundation of the design system's trust and authority.
Apply surface-colour blocking for depth. Rather than shadow stacking, vary background colours (#FFFFFF, #E9E9F5, #464A91) to create visual hierarchy. Use the single custom shadow only on icon buttons and interactive hover states.
Use the Iranian Yekan typography stack consistently. All text, from display to caption, should reference __iranyekan_388145 with appropriate weight (300–600) and size (12–24px). Respect line heights ≥1.6 for body copy.
Radius follows component role: Icon buttons and badges are full-pill (9999px); standard buttons and inputs use {rounded.sm} or {rounded.xs} (8–12px); cards use {rounded.md} (16px); images and structure stay sharp (0px).
Spacing is modular on a 4px grid. Use {spacing.md} (16px) as the default, {spacing.sm} (12px) for tight spacing, and {spacing.section} (36px) or {spacing.band} (40px) for section separation. All padding and margins should land on 4px increments.
All interactive elements must have focus-visible states with 2px outline in the primary navy. Form inputs require 2px transparent outline and border colour shift to rgba(76, 81, 153, 0.4).
Disabled states combine background shift and opacity reduction. Background moves to neutral grey (#A9A9AA or #EBEBEB), and text opacity drops to 0.3–0.7 depending on component. Never disable with colour alone.
Hover states should be subtle: Opacity shifts to 0.8–0.9, or backgrounds fade with rgba() modulation. Avoid dramatic colour shifts; maintain the neutral, professional aesthetic.
Semantic colours are always used for status: Error (#CD0000) for failures, success (#2EB974) for confirmations, warning (#FA6B00) for cautions, info (#006ED8) for notices. Never repurpose these for non-status functions.
Responsive layout is stable across breakpoints. Content width increases with viewport (343px → 1408px), but typography, grid columns (5), and component structure remain fixed. Assume horizontal padding scales (16px → 48px) but no visible menu toggle at any breakpoint.
#FFF1E5) and coral accent (#FF6666) have no measurable semantic role and are described as decorative only. Their functional purpose (if any) could not be inferred from extraction.#CD0000) but field-level error text styling and ARIA integration were not extracted.