Dotin

Overview

Dotin is a fintech infrastructure platform enabling rapid, accessible deployment of financial services across emerging markets. The design system embodies 'Organic Minimalism'—a philosophy that marries technical precision with human-centered warmth. The brand uses a verdant primary green (#006839) as its signature accent, paired with a clean white canvas and supporting warm orange (#f68b1f) and deep purple (#3d44bc) accents. This palette evokes trust, growth, and forward momentum. The UI prioritizes clarity and directness: every interaction is purposeful, every surface breathes, and every color choice reinforces the brand's mission to democratize financial access.

The voice is confident yet approachable, technical yet human. Dotin speaks in clear, direct language—avoiding jargon where possible, explaining complex financial concepts in accessible terms. The tone is optimistic without being breathless, precise without being cold. Example: 'Deploy financial services in minutes, not months—built for speed, designed for scale.'

Colors

The color system is anchored in a verdant primary green (#006839), the signature brand accent used exclusively for primary CTAs, active states, and key interactive elements. This green conveys growth, trust, and financial stability—core to Dotin's mission. The surface stack ranges from pure white (#ffffff) at the brightest level to soft grays (#e0e0e0 at surface-container-highest) for subtle depth without visual noise. On-surface text is a near-black (#231f20) for maximum legibility; on-surface-variant (#58595b) provides secondary text hierarchy. Secondary accent orange (#f68b1f) highlights secondary actions and supporting information, while tertiary purple (#3d44bc) reserves for specialized UI elements or tertiary interactions. Error red (#cf2e2e) is used sparingly for destructive actions

Typography

The type system uses iranyekanx-fa and yekanxEN fonts, optimized for Persian and English bilingual content. Display (60px, 700 weight) anchors hero sections and major announcements; headline-lg (40px, 700) structures primary page headings; headline-md (32px, 700) breaks content into digestible sections. Body-lg (18px, 400) and body-md (16px, 400) carry narrative content with generous line-height (28px and 24px respectively) for readability. Label-md (14px, 700) and label-sm (12px, 600) are reserved for UI labels, button text, and badges. Letter-spacing is tightened on display and headline levels (-0.04em to -0.01em) to create visual weight; body and label levels use +0.01em to +0.02em for clarity. When labels appear over busy backgrounds or illustrations, apply text-shadow: 0 2px 4px rgba(

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on all screen sizes. The spacing scale is semantic: unit (8px) is the base increment; sm (12px) for tight grouping; md (24px) for standard section separation; lg (40px) for major section breaks; xl (64px) for hero-to-content transitions. Gutters are consistently 24px, creating breathing room around content. White-space is treated as a design element—sections are separated by lg spacing (40px) to create visual rhythm and prevent cognitive overload. Cards and containers use md padding (24px) internally, with rounded corners at 25px (a custom radius between lg and xl) to convey approachability without excessive softness. The hero section uses a 50/50 split (illustration left,

Elevation & Depth

Elevation is achieved through subtle shadows and layering, not through darkness. Level 1 (Base) uses no shadow—the white surface (#ffffff) is the foundation. Level 2 (Standard Cards) applies elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06))—a barely perceptible shadow that separates cards from the background without visual heaviness. Level 3 (Hover/Interactive) applies elevation.md (0 4px 12px rgba(0, 0, 0, 0.08))—a soft, diffuse shadow that lifts elements on interaction. Level 4 (Modals/Overlays) applies elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12))—a pronounced shadow that creates clear visual h

Shapes

The shape philosophy is 'Soft-Technical Approachability'—rounded corners are used strategically to soften technical interfaces without sacrificing clarity. Buttons use md radius (0.75rem / 12px) for a balanced, clickable appearance; cards use 25px (a custom value between lg and xl) to convey premium, thoughtful design; input fields use DEFAULT radius (0.5rem / 8px) for a neutral, functional feel. The 25px card radius is Dotin's signature—it's distinctive enough to be memorable yet not so extreme as to feel playful or unprofessional. Badges and pills use full radius (9999px) to create a contain

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses the brand green (#006839) background with white text, md radius (12px), and padding 8px 24px for a compact, clickable target. On hover, the background transitions to primary-fixed-dim (#87b29a) with elevation.md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) applied over 0.3s cubic-bezier(0.23, 1, 0.32, 1). On active, the button scales to 0.98 and shifts to on-primary-fixed-variant (#247e59) for tactile feedback. The button-secondary component uses a semi-transparent dark overlay (rgba(0, 0, 0, 0.39)) with asymmetric corners (0px 10px 10px 0px) and padding 16px 16px 16px 8px—a distinctive shape that signals secondary importance while maintaining visual interest. Button-ghost uses a light background

Do's and Don'ts

**Do**

• Do use the primary green (#006839) exclusively for primary CTAs, active states, and key brand moments—it's the signature accent and should never be diluted or overused.
• Do maintain md spacing (24px) between major sections and lg spacing (40px) for hero-to-content transitions to create visual rhythm and prevent cognitive overload.
• Do apply smooth transitions (0.3s cubic-bezier(0.23, 1, 0.32, 1)) to all interactive elements—buttons, cards, inputs—to reinforce responsiveness and build confidence in the interface.
• Do use the 25px card radius consistently across all container elements to build visual cohesion and reinforce the 'Soft-Technical' aesthetic.
• Do pair body text (16px, 400 weight) with generous line-height (24px) and letter-spacing (+0.01em) to maximize readability, especially for Persian content.

**Don't**

• Don't use the primary green (#006839) for body text, backgrounds, or decorative elements—reserve it exclusively for interactive, high-priority UI.
• Don't apply shadows heavier than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12))—the aesthetic is 'Soft Technical', not dramatic or theatrical.
• Don't mix rounded radii inconsistently; use md (12px) for buttons, 25px for cards, DEFAULT (8px) for inputs, and full (9999px) for badges—consistency builds trust.
• Don't use sharp corners (0px radius) except in rare directional cases (e.g., secondary button)—the brand voice is approachable, not austere.
• Don't override the typography scale or mix font families; iranyekanx-fa and yekanxEN are the canonical fonts for all UI text—consistency across bilingual content is non-negotiable.