Remixes of agentoai.app
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: Agentoai
description: |
Agento's design system projects a modern, intelligent, and approachable
personality suited to AI-powered business automation. The visual identity
combines a vibrant gradient-driven hero aesthetic with a calm, neutral canvas
for content. The dominant purple-to-blue gradient (linear-gradient(148.52deg,
rgb(186, 155, 255) -76.22%, rgb(14, 77, 236) 169.93%)) signals innovation and
trust, while the soft cream background (#FCFCFC) ensures readability and
reduces cognitive load. The system emphasizes clarity through generous
whitespace, rounded interactive elements that feel inviting, and subtle shadow
treatments that create depth without visual noise. Typography defaults to
generous line-height and weight hierarchy, reflecting a design philosophy that
prioritizes accessibility and scannability for diverse user personas across
web and mobile.
source:
url: "https://agentoai.app/"
pagesAnalyzed: 1
extractedAt: 2026-10-28
tokensMeasured: true
colors:
primary: "#353566"
link: "#0000EE"
canvas: "#FCFCFC"
hairline: "#ED9913"
info: "#D2CEFF"
accent-1: "#EB263A"
accent-2: "#5236B0"
accent-3: "#DD65CF"
accent-4: "#006699"
accent-5: "#51C275"
accent-6: "#3B66F0"
neutral-1: "#000000"
neutral-2: "#D5D5D5"
neutral-3: "#E7E7E7"
neutral-4: "#A8A8A8"
typography:
display:
fontFamily: Pinar
fontSize: 30px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
heading-md:
fontFamily: Pinar
fontSize: 28px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
heading-sm:
fontFamily: IranYekanBold
fontSize: 24px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
heading-xs:
fontFamily: IranYekanBold
fontSize: 17px
fontWeight: 700
lineHeight: 1.41
letterSpacing: 0px
body-xl:
fontFamily: Pinar
fontSize: 24px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
body-lg:
fontFamily: Pinar
fontSize: 20px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: Pinar
fontSize: 17.0804px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: IranYekanBold
fontSize: 16px
fontWeight: 400
letterSpacing: 0px
body-xs:
fontFamily: IranYekanBold
fontSize: 14.5px
fontWeight: 500
lineHeight: 2
letterSpacing: 0px
body-xs-2:
fontFamily: IranYekanBold
fontSize: 14px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
button:
fontFamily: IranYekanBold
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
caption:
fontFamily: IranYekanBold
fontSize: 11.7px
fontWeight: 600
lineHeight: 1.37
letterSpacing: 0px
rounded:
none: 0px
xs: 10px
sm: 12px
md: 15px
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(53, 53, 102, 0.2) 0px 20px 60px 0px"
md: "rgba(0, 0, 0, 0.02) 0px 30px 18px 0px, rgba(0, 0, 0, 0.03) 0px 13px 13px 0px, rgba(0, 0, 0, 0.03) 0px 3px 7px 0px"
lg: "rgba(0, 0, 0, 0.1) 0px 2.01225px 4.0245px 0px"
elevationStrategy: layered-micro
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FCFCFC"
surface: "#F4F4F4"
surfaceRaised: "#EBEBEB"
text: "#111111"
textMuted: "#636363"
border: "#ED9913"
accent: "#353566"
accentFg: "#FFFFFF"
focusRing: "#353566"
elevation: shadow
dark:
bg: "#0E0E11"
surface: "#1C1C1F"
surfaceRaised: "#29292B"
text: "#F7F7F9"
textMuted: "#9E9EA1"
border: "#353537"
accent: "#8181BD"
accentFg: "#0B0B0C"
focusRing: "#5959A8"
elevation: "border+surface"
gradients:
- context: hero
kind: linear
value: "linear-gradient(148.52deg, rgb(186, 155, 255) -76.22%, rgb(14, 77, 236) 169.93%)"
- context: section
kind: linear
value: "linear-gradient(136.02deg, rgb(186, 155, 255) 0%, rgb(14, 77, 236) 99.98%)"
- context: section
kind: linear
value: "linear-gradient(166.47deg, rgb(186, 155, 255) -77.21%, rgb(14, 77, 236) 155.44%)"
- context: section
kind: linear
value: "linear-gradient(90deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.73) 54.11%, rgba(255, 255, 255, 0) 100%)"
- context: section
kind: linear
value: "linear-gradient(136.02deg, rgb(186, 155, 255) 0px, rgb(14, 77, 236) 99.98%)"
- context: section
kind: linear
value: "linear-gradient(rgba(253, 253, 253, 0.65) 0%, rgba(255, 255, 255, 0.31) 100%)"
components:
button-filled:
textColor: "{colors.primary}"
border: "1px solid {colors.primary}"
height: 48px
padding: "12px 24px 12px 24px"
fontSize: 14px
fontFamily: IranYekanBold
fontWeight: 700
rounded: "{rounded.xs}"
backgroundColor: "rgb(242, 243, 249)"
button-filled-2:
textColor: "{colors.link}"
border: "1px solid {colors.primary}"
height: 48px
padding: "12px 12px 12px 12px"
fontSize: 16px
fontFamily: IranYekanLight
fontWeight: 400
rounded: "{rounded.xs}"
backgroundColor: "rgb(242, 243, 249)"
button-outline:
textColor: "{colors.link}"
border: "1px solid {colors.primary}"
height: 48px
padding: "12px 12px 12px 12px"
fontSize: 16px
fontFamily: IranYekanLight
fontWeight: 400
rounded: "{rounded.xs}"
card:
textColor: "{colors.neutral-1}"
fontSize: 16px
fontFamily: IranYekanLight
fontWeight: 400
rounded: "{rounded.md}"
backgroundColor: "rgba(255, 255, 255, 0.13)"
card-sm:
textColor: "{colors.neutral-1}"
fontSize: 16px
fontFamily: IranYekanLight
fontWeight: 400
badge-filled:
textColor: "{colors.neutral-1}"
height: 34.0156px
padding: "4px 10px 4px 10px"
fontSize: 16px
boxShadow: "rgba(0, 0, 0, 0.09) 0px 5px 30.3px 0px"
fontFamily: IranYekanLight
fontWeight: 400
rounded: "{rounded.sm}"
backgroundColor: "rgb(255, 255, 255)"
navigation:
textColor: "{colors.neutral-1}"
height: 47px
fontSize: 16px
fontFamily: IranYekanLight
fontWeight: 400
link:
textColor: "{colors.link}"
padding: "13.7918px 13.7918px 13.7918px 13.7918px"
fontSize: 16px
fontFamily: IranYekanLight
fontWeight: 400
rounded: 9.92733px
backgroundColor: "rgba(60, 67, 84, 0.03)"
link-sm:
textColor: "{colors.link}"
padding: "12px 12px 12px 12px"
fontSize: 16px
boxShadow: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
fontFamily: IranYekanLight
fontWeight: 400
rounded: "{rounded.xs}"
states:
input-focus:
target: input
state: focus
opacity: 0
link-hover:
target: link
state: hover
textColor: "rgb(255, 255, 255)"
other-hover:
target: other
state: hover
opacity: 1
nav-hover:
target: nav
state: hover
textColor: "rgb(129, 111, 152)"
backgroundColor: "rgb(233, 230, 237)"
button-hover:
target: button
state: hover
textColor: "rgb(81, 81, 81)"
textDecoration: none
backgroundColor: "rgb(220, 215, 226)"
button-disabled:
target: button
state: disabled
opacity: 0.5
card-hover:
target: card
state: hover
textColor: "rgb(14, 77, 236)"
other-active:
target: other
state: active
transform: "translateY(0px)"
other-disabled:
target: other
state: disabled
opacity: 0.6
other-focus:
target: other
state: focus
borderColor: "rgb(12, 13, 14)"
breakpoints:
- width: 375
containerWidth: 358
gridColumns: 5
navLinksVisible: 8
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 14
- width: 768
containerWidth: 728
gridColumns: 5
navLinksVisible: 8
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 14
- width: 1024
containerWidth: 1004
gridColumns: 5
navLinksVisible: 8
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 14
- width: 1280
containerWidth: 1240
gridColumns: 5
navLinksVisible: 8
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 14
- width: 1440
containerWidth: 1339
gridColumns: 5
navLinksVisible: 8
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 14
coverage:
statesFound: 46
gradientsFound: 8
rolesUnassigned: 10
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: true
Agento's design system projects a modern, intelligent, and approachable personality suited to AI-powered business automation. The visual identity combines a vibrant gradient-driven hero aesthetic with a calm, neutral canvas for content. The dominant purple-to-blue gradient (linear-gradient(148.52deg, rgb(186, 155, 255) -76.22%, rgb(14, 77, 236) 169.93%)) signals innovation and trust, while the soft cream background ({colors.canvas} — #FCFCFC) ensures readability and reduces cognitive load. The system emphasizes clarity through generous whitespace, rounded interactive elements that feel inviting, and subtle shadow treatments that create depth without visual noise. Typography defaults to generous line-height and weight hierarchy, reflecting a design philosophy that prioritizes accessibility and scannability for diverse user personas across web and mobile.
Key Characteristics
{colors.primary} — #353566): Core interactive element fill, primary CTA backgrounds, active states, and brand accent. Slightly desaturated deep purple projects professionalism while maintaining warmth.{colors.link} — #0000EE): Inline hyperlink colour; changes to white on dark backgrounds and neutral grey on hover.{colors.canvas} — #FCFCFC): Default page background; off-white with minimal warmth for extended viewing comfort.{colors.neutral-1} — #000000): Primary text colour for body copy and high-contrast headings.{colors.neutral-2} — #D5D5D5): Light divider lines and subtle borders.{colors.neutral-3} — #E7E7E7): Secondary surface fill; used in disabled or deprioritized states.{colors.neutral-4} — #A8A8A8): Tertiary text and placeholders; mid-tone grey for reduced emphasis.{colors.hairline} — #ED9913): 1px borders and decorative accents; warm orange rarely used in system but measured on select dividers.{colors.info} — #D2CEFF): Informational backgrounds and accent fills; pale lavender signals auxiliary messaging and light callouts.{colors.accent-1} — #EB263A): Red; used for social icons (Instagram frame enhancement), error states, and high-alert messaging.{colors.accent-2} — #5236B0): Deep purple; decorative gradient component and brand partnership marks.{colors.accent-3} — #DD65CF): Magenta; accent for partner brand logos and decorative callouts.{colors.accent-4} — #006699): Teal; partner brand and icon accent.{colors.accent-5} — #51C275): Green; social icon (WhatsApp) and success-aligned messaging.{colors.accent-6} — #3B66F0): Bright blue; hero gradient component, decorative elements, and prominent CTAs.Primary Font: Pinar
Fallback stack: Pinar, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Used for display, headings, and bold body emphasis. Supports Persian (Farsi) characters natively.
Secondary Font: IranYekan (Bold & Light variants)
Fallback stack: IranYekanBold, IranYekanLight, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Used for body copy, buttons, navigation, and captions. Provides weight flexibility across weights 400, 500, 600, and 700 while maintaining Persian typographic correctness.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Pinar | 30px | 700 | 1.5 | 0px | Hero headline; used sparingly at page top |
| Heading MD | Pinar | 28px | 700 | 1.5 | 0px | Main section heading; high visual priority |
| Heading SM | IranYekan | 24px | 700 | 1.5 | 0px | Secondary section heading; subsection title |
| Heading XS | IranYekan | 17px | 700 | 1.41 | 0px | Tertiary heading; card and compact section title |
| Body XL | Pinar | 24px | 700 | 1.5 | 0px | Emphasized body paragraph; used for feature callouts |
| Body LG | Pinar | 20px | 700 | 1.5 | 0px | Bold feature paragraph; narrative prominence |
| Body MD | Pinar | 17.08px | 600 | 1.5 | 0px | Standard emphasis; used in subheadings and list labels |
| Body SM | IranYekan | 16px | 400 | 1.5 | 0px | Primary body text; standard paragraph copy |
| Body XS | IranYekan | 14.5px | 500 | 2 | 0px | Secondary body; helper text and supplementary copy |
| Body XS-2 | IranYekan | 14px | 500 | 1.5 | 0px | Reduced body; metadata and compact labels |
| Button | IranYekan | 16px | 600 | 1.5 | 0px | Interactive label text; all button variants |
| Caption | IranYekan | 11.7px | 600 | 1.37 | 0px | Smallest text; image captions, timestamps, footnotes |
Primary Filled ({rounded.xs} — 10px radius)
#F2F3F9 (light neutral surface, not primary — reverses colour intent from brand){colors.primary} (#353566)12px 24px1px solid {colors.primary} (#353566){typography.button} (16px, weight 600, IranYekanLight)#DC D7 E2 (warmer neutral); text remains primarySecondary / Link Outline ({rounded.xs} — 10px radius)
rgba(0, 0, 0, 0)){colors.link} (#0000EE)12px 12px1px solid {colors.primary} (#353566){typography.button} (16px, weight 400, IranYekanLight)#F5F2FF (pale lavender); text colour remains link bluePrimary Pill / CTA (observed on hero section, {rounded.full} — pill-shaped)
#353566 or brand gradient)12px 24px{typography.button} (16px, weight 600)rgba(14, 77, 236, 0.35) 0px 8px 24px (blue-tinted elevation on hover)translateY(-2px)translateY(0px) (button returns to base)Default Card ({rounded.md} — 15px radius)
rgba(255, 255, 255, 0.13) (semi-transparent white; used over gradient backgrounds){colors.neutral-1} (#000000)0px (interior spacing managed by content){colors.accent-6} (#3B66F0); border becomes 1px solid rgb(186, 155, 255) (brand gradient colour)Card / Flat Layout ({rounded.none} — 0px radius)
rgba(0, 0, 0, 0) (transparent){colors.neutral-1} (#000000)0pxText Input ({rounded.xs} — 10px radius)
{colors.canvas} (#FCFCFC) or white{colors.neutral-1} (#000000)1px solid {colors.neutral-2} (#D5D5D5) — hairline divider12px 12px{typography.body-sm} (16px, weight 400)rgba(186, 155, 255, 0.15) 0px 0px 0px 3px; border-colour rgb(186, 155, 255) (brand gradient tone); opacity on outline set to 0currentcolor (inherits text colour)Header Navigation (horizontal bar, {rounded.none} — 0px radius)
rgba(0, 0, 0, 0) (blends with page){colors.neutral-1} (#000000)0px{typography.body-sm} (16px, weight 400, IranYekanLight)rgb(129, 111, 152) (warm neutral); background rgb(233, 230, 237) (pale mauve); border-radius 11.32px (slight rounding on hover)rgb(186, 155, 255) (brand gradient tone); opacity 1; transform rotate(180deg) (chevron animation)Filled Badge ({rounded.sm} — 12px radius)
#FFFFFF (white){colors.neutral-1} (#000000)4px 10px{typography.body-sm} (16px, weight 400, IranYekanLight)rgba(0, 0, 0, 0.09) 0px 5px 30.3px 0px (soft drop shadow)Social / Icon Link ({rounded.xs} — 10px radius)
rgba(60, 67, 84, 0.03) (barely-there grey tint){colors.link} (#0000EE)13.79px (equal on all sides){typography.body-sm} (16px, weight 400)rgb(186, 155, 255) (brand gradient); background rgb(253, 252, 255) (pale lavender); transform translateX(-3px) (subtle left slide)Text Link / Call-to-Action ({rounded.xs} — 10px radius)
{colors.link} (#0000EE)12px 12px{typography.body-sm} (16px, weight 400)rgba(0, 0, 0, 0.05) 0px 1px 2px 0px (micro shadow on base)rgb(245, 242, 255) (pale lavender); border-colour rgb(186, 155, 255); text remains link blueBase unit: {spacing.xs} = 8px. The system uses a 4px sub-unit ({spacing.xxs}) for fine-tuning and a modular scale for section separation.
{spacing.xxs} — 4px, {spacing.xs} — 8px): Interior padding of compact components (badges, small buttons), gutter between inline elements.{spacing.sm} — 12px, {spacing.md} — 16px): Standard button padding, card internal margins, text input padding.{spacing.lg} — 20px, {spacing.xl} — 24px): Component margins, section internal spacing, generous padding in hero and feature sections.{spacing.xxl} — 28px, {spacing.section} — 36px, {spacing.band} — 40px): Major layout divisions, footer spacing, hero band top/bottom margins.{spacing.md} (16px) on left and right at all breakpoints; provides consistent margin from viewport edges.Agento employs a generous whitespace approach that mirrors modern SaaS and AI product interfaces. Large paragraph margins (1.5–2 line-height) reduce cognitive density. Section breaks use {spacing.band} (40px) or larger to create visual breathing room between hero, feature, and CTA sections. Card components benefit from padding via wrapper layers rather than internal edge insets, allowing negative space to enhance perceived elegance. Links and buttons are surrounded by tap-safe zones ({spacing.md} minimum clearance on mobile, {spacing.lg} on desktop) to prevent accidental activation.
{rounded.none} — 0px): Images, full-bleed sections, hero overlays, flat card layouts.{rounded.xs} — 10px): Buttons, text inputs, small icon links, sidebar navigation items.{rounded.sm} — 12px): Badges, small callout containers.{rounded.md} — 15px): Standard cards, modal containers, feature callouts.{rounded.full} — 9999px): Primary CTA buttons, toggle switches, fully rounded icon buttons.1px): Input borders (default and focus states), card hover borders, divider lines, subtle accent strokes on hover.| Level | Treatment | Use |
|---|---|---|
| Flat (base) | No shadow; solid fill or transparent | Body text, icon links, badges, flat cards |
| Micro (sm) | rgba(53, 53, 102, 0.2) 0px 20px 60px 0px | Modal overlays, prominent callouts |
| Subtle (md) | rgba(0, 0, 0, 0.02) 0px 30px 18px 0px, rgba(0, 0, 0, 0.03) 0px 13px 13px 0px, rgba(0, 0, 0, 0.03) 0px 3px 7px 0px | Dropdown menus, secondary cards, layered surfaces |
| Lift (lg) | rgba(0, 0, 0, 0.1) 0px 2.01225px 4.0245px 0px | Button base state, subtle affordance |
| Hover lift | rgba(14, 77, 236, 0.35) 0px 8px 24px (blue-tinted) | Primary buttons on hover; emphasizes interactivity with brand-colour shadow |
Shadow Philosophy
Agento employs a layered-micro elevation strategy. Rather than a clear 1–5 level progression, shadows are built from near-transparent, stacked layers that create barely-perceptible depth. This approach keeps the interface feeling clean and modern; shadows are functional cues (hover, focus, nesting) rather than ornamental. The micro shadow (sm) uses the brand primary colour (#353566 at 20% opacity) to reinforce the design system identity. Most interactive elements sit flat by default, gaining shadow only on hover or focus to signal affordance without visual noise.
0.15): Subtle background tints, watermark-like elements, semi-transparent surface overlays.0.40): Reduced-emphasis text, placeholder text, secondary imagery.0.60): Disabled button or input state; signals non-interactivity while maintaining visibility.0.70): Secondary UI surfaces, backdrop filters, semi-transparent hero overlays.0.75): Hover state overlays, focused text emphasis.0.90): Near-opaque surfaces; near-full visibility for hero content, prominent callouts.z-index: 1, 3, 4, 6, 9): Content flow layers; images, cards, body text (low stacking context).z-index: 10, 99): Navigation menus, select dropdowns, floating popovers; layers above base content but below modals.z-index: 999): Fixed navigation bar, sticky section headers, persistent UI chrome.linear-gradient(148.52deg, rgb(186, 155, 255) -76.22%, rgb(14, 77, 236) 169.93%)) for hero sections and high-impact callouts; it is the brand signature.rgba(14, 77, 236, 0.35) 0px 8px 24px) to signal interactivity and depth without visual overload.{rounded.full}) for primary CTAs and main interactive elements; the soft roundness aligns with the modern, approachable brand voice.{colors.neutral-1} for primary text, {colors.neutral-4} for secondary, {colors.neutral-3} for subtle dividers.{spacing.md} side padding to maintain viewport edge clearance.rgb(186, 155, 255)) as a border or shadow highlight; this ensures keyboard navigation is discoverable.{spacing.md} (16px) clearance between adjacent interactive zones.{colors.accent-1} through {colors.accent-6}) for semantic status states (error, warning, success); these are reserved for partner logos, social icons, and decorative accents.{rounded.full} (pill) and secondary at {rounded.xs} (10px); mixing radii creates visual inconsistency.{colors.canvas} — #FCFCFC) pairs with dark text ({colors.neutral-1} — #000000) for safety.{typography.body-xs} (14.5px) requires line-height 2 to remain readable.margin-inline-end instead of margin-right).| Viewport Width | Content Max-Width | Grid Columns | Navigation Visible | Menu Toggle | Display / Heading | Body Text |
|---|---|---|---|---|---|---|
| 375px (Mobile) | 358px | 5 | 8 links visible | No toggle | 24px | 16px |
| 768px (Tablet) | 728px | 5 | 8 links visible | No toggle | 24px | 16px |
| 1024px (Desktop) | 1004px | 5 | 8 links visible | No toggle | 24px | 16px |
| 1280px (Large Desktop) | 1240px | 5 | 8 links visible | No toggle | 24px | 16px |
| 1440px (XL Desktop) | 1339px | 5 | 8 links visible | No toggle | 24px | 16px |
Breakpoint Strategy: The site maintains a consistent 5-column grid and stable typography across all measured breakpoints (375px–1440px). No responsive collapse point is detected in the navigation; all 8 links remain visible and no hamburger menu toggle appears at any viewport width. This indicates a desktop-first or fluid layout strategy where content scales proportionally rather than reflowing into a vertical stack. Section padding-x ({spacing.md} — 16px) remains constant across all widths, creating uniform viewport margins.
{spacing.md} (16px) minimum horizontal separation; {spacing.sm} (12px) minimum vertical separation to prevent accidental double-tap.3px (as observed in rgba(186, 155, 255, 0.15) 0px 0px 0px 3px on input focus).Because the navigation does not collapse across the measured breakpoints, the site likely uses a horizontal scroll or fixed sidebar pattern on mobile. Section widths scale proportionally (content column shrinks from 1339px at 1440px to 358px at 375px); typography sizes remain stable (no font-size reduction observed), and padding-x does not adjust. This suggests percentage-based or viewport-width-relative sizing for container widths, with fixed spacing applied consistently.
Expected mobile adaptation (not measured, but inferred):
{spacing.md} on ultra-narrow viewports; not validated.{colors.primary} — #353566). Use with white text and rounded {rounded.full} pill shape.#F2F3F9). Pair with primary text #353566 and 1px border #353566.{colors.canvas} — #FCFCFC). Warm off-white; use throughout page body and card surfaces.{colors.neutral-1} — #000000). Use Pinar or IranYekan at sizes 17–30px.{colors.neutral-1} — #000000). Use IranYekan at 14–16px with line-height 1.5–2.{colors.link} — #0000EE). Standard blue; changes to white on dark backgrounds, grey on hover.{colors.neutral-2} — #D5D5D5). Use as 1px solid border or separator line.{colors.info} — #D2CEFF). Pale lavender; use for auxiliary messaging, hints, secondary surfaces.{colors.accent-1} through {colors.accent-6}). Reserve for icons, logos, and non-semantic visual flourishes.Start with grid and spacing: Use the {spacing} scale (4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px) for all margins and padding. Never invent intermediate values.
Apply typography hierarchy: Choose the appropriate role from the table (display, heading-md, body-md, button, etc.). Pinar conveys emphasis; IranYekan provides flexible, readable body text. Maintain exact px sizes and line-heights; do not scale.
Assign border-radius by component: Buttons and inputs use {rounded.xs} (10px) or {rounded.full} (pill). Cards use {rounded.md} (15px). Badges use {rounded.sm} (12px). Images and overlays use {rounded.none} (0px).
Layer depth with shadows, not borders: Use the shadow scale (sm, md, lg) sparingly. Default state: flat. Hover state: add shadow and minor translate. No shadow on all interactive elements; reserve shadows for elevated surfaces and focus indicators.
Implement focus states on every interactive element: Use border-colour rgb(186, 155, 255) (brand gradient tone) and box-shadow rgba(186, 155, 255, 0.15) 0px 0px 0px 3px. This ensures keyboard navigation is visible and accessible.
Build hover states with minimal motion: Translate y-axis by -2px on lift, rotate chevrons 180deg, or adjust background colour via the neutral or info scale. Avoid scale transforms and colour shifts that feel jarring.
Support RTL layout: Use logical properties (margin-inline, padding-inline-start, margin-inline-end) instead of left/right. Test all layouts in right-to-left context; the Farsi text flows RTL natively.
Maintain touch-safe zones: Buttons and links minimum 48px height/width; {spacing.md} clearance between interactive targets. Mobile-first design but desktop-validated breakpoints.
Use opacity for emphasis, not as a substitute for colour: Disabled state uses opacity 0.6; reduced-emphasis text uses 0.4; overlays use 0.15–0.7. Never layer multiple opacity values; use the discrete scale.
Validate against the brand gradient: Hero sections and high-impact CTAs should reference or echo the primary gradient (linear-gradient(148.52deg, rgb(186, 155, 255) -76.22%, rgb(14, 77, 236) 169.93%)). This reinforces brand identity without overuse.
Interaction states for secondary components: The extraction captured hover and focus states for buttons, inputs, and navigation links, but many UI elements (toggles, checkboxes, tabs, carousels) lack explicit interaction data. Implementation should follow the observed pattern: flat base state, shadow + colour shift on hover, border-colour + box-shadow on focus.
Dark mode / Light mode variants: Only one theme was measured. The site does not expose a dark-mode toggle or CSS media query (prefers-color-scheme). If dark-mode support is required, it is not defined in this system.
Animation and transition timing: No CSS transition or animation properties were extracted. Hover transforms (translateY(-2px), translateX(-3px), rotate(180deg)) are observed but their duration and easing function are not recorded. Default to transition: all 0.2s ease-in-out until motion values are supplied.
Semantic error, warning, and success states: No explicit error red, warning yellow, or success green were extracted and assigned roles. The accent palette is decorative only; if form validation, alert states, or status indicators are required, new semantic colours must be measured and added to the system.
Responsive typography scaling: All measured breakpoints (375px–1440px) maintain the same font sizes (heading 24px, body 16px). It is unclear whether typography would reduce below 375px or scale on breakpoints in between. Treat the current hierarchy as fixed; confirm responsive text scaling separately.
Component shadows and layering on mobile: Shadow values (sm, md, lg) were measured on desktop. Clarity on whether shadows render identically on mobile (where touch targets are larger and shadow rendering may differ) is absent. Test on real mobile devices.
Z-index ranges for deep modals, tooltips, and portals: Measured values (base 1–9, dropdown 10–99, sticky 999) cover observed UI. Additional components (tooltips, popovers, deep modals) may require z-index values > 999; extend as needed.
Surfaces and features behind authentication: Only the public landing page was analysed. Logged-in dashboard, user settings, admin panels, and payment flows are not covered by this extraction.
Gradient consistency: Eight gradient definitions were extracted, but not all are explicitly mapped to specific component roles. Confirm gradient application on hero, section backgrounds, and button fills in implementation.
Font fallback rendering: Pinar and IranYekan are assumed available; if fonts fail to load, system fallback stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) will render. Test fallback appearance on low-bandwidth or offline scenarios.
Colour contrast on gradients: Primary gradient backgrounds (rgb(186, 155, 255) to rgb(14, 77, 236)) contain text and interactive elements. WCAG contrast ratios against this gradient were not measured; verify accessibility via automated contrast checking and manual testing.