Switch between the rendered Visual preview and the Raw DESIGN.md.
SetorMail embodies a modern, tech-forward aesthetic rooted in trust and accessibility for gig workers in Southeast Asia. The design combines deep, sophisticated dark tones with vibrant orange accents that convey energy, urgency, and financial empowerment. The atmosphere is professional yet approachable, balancing the technical complexity of automated email processing with the straightforward clarity of daily payouts. Smooth transitions, generous whitespace, and carefully considered typography create a sense of reliability and transparency—essential qualities for a financial platform. The visual language emphasizes speed and simplicity, reflecting the core promise of instant, hassle-free fund transfers.
Key Characteristics
#192843): Primary background for main sections, containers, and layout foundation; establishes trusted, corporate aesthetic#0C2145): Darker variant for nested backgrounds, depth separation, and secondary surfaces#0D1321): Darkest neutral used sparingly for maximum contrast text and premium elements#FF7729): Primary brand accent; used for CTAs, highlights, and key metrics; signals action and financial energy#FF843D): Secondary orange for hover states and lighter accent applications#3392FF): Interactive elements, links, and information indicators; creates secondary call-to-action pathway#192843): Interactive surface foundation, repeating from primary for consistency#F7F5F2): Primary light neutral for text, labels, and secondary content; warm undertone balances cool backgrounds#A8AFBD): Mid-tone neutral for helper text, disabled states, and subtle UI elements#FFFFFF): Reserved use for premium emphasis and high-contrast overlays#000000): Minimal use, primarily for darkest text emphasis#192843): Card and container borders; creates visual separation without harshnessrgba(13, 19, 33, 0.6)): Semi-transparent dark surface for badges, tags, and overlay containers#EF4343): Danger states, validation errors, and critical alerts#DC2626): Darker error variant for high-priority warnings#FACC15): Caution indicators and non-critical warnings#EAB308): Darker warning variant for emphasisPrimary: Sora (https://fonts.googleapis.com/)
Fallback stack: Sora, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Used for headings and display text; modern, geometric sans-serif with high personality.
Secondary: Manrope (https://fonts.googleapis.com/)
Fallback stack: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Used for body content, UI labels, and interactive elements; warm, humanized sans-serif for accessibility.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/H1 | Sora | 72px | 900 | 72px | 0px | Brand hero statements; maximum impact |
| Heading/H3 | Sora | 18px | 700 | 28px | 0px | Section headings and card titles |
| Body/Paragraph | Manrope | 18px | 400 | 28px | 0px | Long-form content and descriptions |
| Body/Secondary | Manrope | 16px | 400 | 24px | 0px | Standard body text, list items |
| Label/UI Text | Manrope | 14px | 500 | 20px | 0px | Buttons, links, form labels |
| Caption/Helper | Manrope | 12px | 400 | 16px | 0px | Captions, timestamps, disabled text |
rgba(255, 119, 41, 1) (solid Sunset Orange with glow)#060C18 (Pure dark navy for contrast)0px 28px (vertical handled by height)44px9999px (fully rounded)rgba(255, 94, 0, 0.55) 0px 8px 24px -8px, rgba(255, 230, 204, 0.25) 0px 1px 0px 0px inset24px#FF843D) background; increase shadow blur to 32px0.45#A8AFBD; text #F7F5F2; remove shadowrgba(255, 119, 41, 1) (Sunset Orange)#060C180px 12px36px9999pxrgba(255, 94, 0, 0.55) 0px 8px 24px -8px, rgba(255, 230, 204, 0.25) 0px 1px 0px 0px inset20px24px#A8AFBD; remove shadow#A8AFBD (Mist Gray)0px 12px36px14px1px solid #19284320pxrgba(52, 146, 255, 0.1); text #3392FF; border 1px solid #3392FFrgba(52, 146, 255, 0.15) (Vivid Blue tint)rgba(13, 19, 33, 0.6) (semi-transparent dark)1px solid #19284316px20px 24pxrgba(255, 94, 0, 0.25) 0px 12px 40px -8px, rgba(255, 126, 51, 0.18) 0px 0px 0px 1px#A8AFBD (Mist Gray for secondary content)#F7F5F2 (Stone Light for titles)rgba(13, 19, 33, 0.6)1px solid #19284312px24px 28pxrgba(0, 0, 0, 0.05) 0px 1px 2px 0pxrgba(255, 119, 41, 0.1) (light orange tint)8px#3392FF; shadow increases to rgba(0, 0, 0, 0.1) 0px 4px 8px 0pxrgba(13, 19, 33, 0.6) (semi-transparent dark)#A8AFBD4px 12px26px999px (fully rounded)1px solid #19284316px#10B981; text #10B981#EF4343; text #EF4343#FACC15; text #FACC15rgba(13, 19, 33, 0.4)1px solid #1928438px12px 16px#F7F5F2#A8AFBD#3392FF; box shadow 0px 0px 0px 2px rgba(51, 146, 255, 0.2)#EF4343; box shadow 0px 0px 0px 2px rgba(239, 67, 67, 0.2)#A8AFBD at 20% opacity; text #A8AFBD20px × 20px4px (checkbox) / 9999px (radio)2px solid #192843#3392FF; border #3392FF; checkmark #FFFFFF0px 0px 0px 2px rgba(51, 146, 255, 0.3)rgba(13, 19, 33, 0.8) with backdrop blur#F7F5F28px 16px8pxrgba(51, 146, 255, 0.1); text #3392FFrgba(255, 119, 41, 0.15); text #FF7729#3392FF (default)#FF7729; underline #FF7729 2px#A8AFBDBase Unit: 4px
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px, 80px
Usage Context:
4px–8px): Icon spacing, tight component gaps, badge padding12px–16px): Form input padding, card padding, list gaps20px–24px): Section padding, component margins, content spacing28px–40px): Hero sections, major layout gaps, feature spacing48px–80px): Page-level margins, hero-to-content transitions1440px for main content container16px gutters on desktop; 4-column on tablet; single column on mobile#192843) with centered content containers; alternating with transparent sections for visual rhythm40px horizontal on desktop, 24px on tablet, 16px on mobileGenerous, intentional whitespace creates visual clarity and reduces cognitive load. Sections are separated by minimum 48px vertical spacing, increasing to 80px for major transitions. Content within cards breathes with 24px padding minimum. The design avoids density; every interactive element has clear focus areas with surrounding negative space.
0px): Reserved; not used in primary UI8px): Input fields, small interactive elements12px): Feature cards, medium containers16px): Primary cards, data containers9999px): Buttons, badges, pill-shaped elements28%): Image overlays, decorative elements (create 28% border-radius for asymmetric shapes)| Level | Treatment | Use |
|---|---|---|
| Ground (0) | No shadow | Static text, backgrounds |
| Raised (1) | rgba(0, 0, 0, 0.05) 0px 1px 2px 0px | Subtle card elevation, input focus |
| Elevated (2) | rgba(255, 94, 0, 0.25) 0px 12px 40px -8px, rgba(255, 126, 51, 0.18) 0px 0px 0px 1px | Primary cards, data containers |
| Floating (3) | rgba(255, 94, 0, 0.55) 0px 8px 24px -8px, rgba(255, 230, 204, 0.25) 0px 1px 0px 0px inset | Buttons, prominent CTAs |
| Lifted (4) | rgba(255, 94, 0, 0.55) 0px 8px 24px -8px, rgba(255, 230, 204, 0.25) 0px 1px 0px 0px inset (increased to 32px blur on hover) | Interactive hover states, modals |
Shadow Philosophy: Shadows are warm-tinted (orange-based) rather than cool gray, reinforcing the brand's energetic personality. Elevation is achieved through shadow blur and inset highlights creating depth without harsh darkness. Shadows support focus and hierarchy by directing attention to actionable elements. Subtle shadows on cards ground data within the interface; prominent shadows on buttons create clear interactive targets.
#FF7729) for all primary CTAs — buttons, form submissions, key metrics. This trains users to recognize actionable moments.20px–24px minimum) within containers — creates breathing room and reduces visual fatigue in data-heavy interfaces.rgba(13, 19, 33, 0.6)) over the navy background for subtle depth without introducing new colors.#10B981 success, #EF4343 error, #FACC15 warning) with matching text.#3392FF) — supports keyboard navigation and accessibility.9999px radius), soft card corners (12px–16px radius).rgba(0, 0, 0, ...) shadows; use warm orange-tinted shadows to match brand personality.1px subtle borders (#192843) instead of thick, dark lines that feel dated.#F7F5F2) or Warm Orange for readability.8px, 12px, 16px, 9999px) for visual cohesion.16px internal spacing to prevent cramped appearance.300ms — keeps the interface snappy and responsive.| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single column, full-width containers, 16px padding, stacked buttons, 14px base font size |
| Tablet | 640px–1023px | 2-column grid, 24px padding, 16px base font size, horizontal scroll for tables |
| Desktop | 1024px–1439px | 12-column grid, 32px padding, full typography hierarchy, 18px base font size |
| Wide | 1440px+ | Max-width container (1440px centered), 40px padding, enhanced whitespace |
44px × 44px for buttons, links, and touch-friendly elements8px to prevent accidental activation44px height on mobile; 36px acceptable on desktop44px × 44px minimum; icons centered within40px padding (desktop) → 24px (tablet) → 16px (mobile); maintain 16px minimum gutter72px to 48px on tablet, 36px on mobile while maintaining line-height ratio#FF7729)#3392FF)#192843)#0D1321) or semi-transparent rgba(13, 19, 33, 0.6)#F7F5F2)#A8AFBD)#EF4343)#FACC15)#3392FF) or infer from context#192843)rgba(13, 19, 33, 0.4)Always use the defined color palette — Sunset Orange for primary actions, Vivid Blue for secondary, Navy Dark for backgrounds. Do not introduce new colors.
Apply shadows consistently: Use warm orange-tinted shadows (rgba(255, 94, 0, 0.55)...) on elevated components; subtle gray shadows (rgba(0, 0, 0, 0.05)...) on inputs and subtle elevations.
Typography hierarchy is strict: H1 = 72px Sora 900, Body = 18px Manrope 400, Labels = 14px Manrope 500. Deviations require explicit design intent.
Padding and spacing follow the 4px scale: Use multiples of 4px (4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 64, 80). Never introduce arbitrary spacing values.
Border radius follows the defined scale: Buttons/badges = 9999px, cards = 12px–16px, inputs = 8px. Do not use intermediate values.
Buttons are always rounded pills (9999px radius) with shadow elevation, never sharp or rectangular in primary UI.
Focus states use Vivid Blue (#3392FF) with light blue box-shadow tint; maintains accessibility and brand consistency.
Dark backgrounds are always Navy Dark (#192843) or its transparent variant; never pure black (#000000).
Text on dark backgrounds is always Stone Light (#F7F5F2) or Sunset Orange (#FF7729); Mist Gray (#A8AFBD) for secondary/helper text.
Mobile-first approach: Design mobile at 44px height buttons, 16px padding, single column. Scale up gracefully to tablet and desktop with increased padding and multi-column layouts.
Accessibility first: All interactive elements have visible focus states; contrast ratios meet WCAG AA (4.5:1 minimum); line-height is always 1.33+.
Micro-interactions are subtle and fast: Transitions max 300ms, hover states shift color or shadow, no delay on focus states.