Project One

Overview

Project One is a business intelligence platform purpose-built for Thai e-commerce entrepreneurs and multi-channel sellers. The design system embodies 'Data-Driven Clarity'—a philosophy that transforms complex analytics into intuitive, actionable insights through bold primary red (#d91842) accents against clean white surfaces, paired with supporting purple (#7646dd) and warning orange (#ec8013) for status differentiation. The visual language prioritizes signal over noise: large, confident typography (FCVision for headlines, IBM Plex Sans Thai for body text), generous whitespace (24px gutter, 40px section separation), and purposeful color hierarchy ensure users can scan dashboards and identify profit leaks or growth opportunities in seconds. The brand personality is pragmatic and direct—no decorative flourishes, no false optimism. Every pixel serves the mission of helping business owners see what's really happening. Example voice: 'Your Shopee channel shows 32% margin, but TikTok Shop is bleeding at 8%—here's what to adjust.'

Colors

The color system is anchored by Primary Red (#d91842), the signature accent used exclusively for call-to-action buttons, active states, and critical alerts. This high-saturation red (#d91842 / rgb(217, 24, 66)) commands attention without aggression—it's the color of urgency tempered by professionalism. Secondary Purple (#7646dd) supports secondary actions, badges, and informational highlights; it provides visual rhythm without competing for focus. Tertiary Orange (#ec8013) signals warnings and non-critical alerts. The surface stack is deliberately minimal: pure white (#ffffff) as the primary canvas, with a shallow container hierarchy (surface-container-low at #f0f0f0, surface-container at #e9ecef, surface-container-high at #e0e0e0) to avoid visual clutter. On-surface text is near-black (#1

Typography

The type system pairs two distinct families to create cognitive separation between data (headlines) and narrative (body). FCVision (a geometric, tech-forward sans-serif) handles all headlines (display at 60px, headline-lg at 40px, headline-md at 28px, title-lg at 20px, label-md at 14px) with tight letter-spacing (-0.04em to -0.01em) to convey precision and forward momentum. IBM Plex Sans Thai Looped (a humanist sans with excellent Thai language support) carries body text (body-lg at 18px, body-md at 16px) with looser letter-spacing (0.01em to 0.02em) for reading comfort and cultural appropriateness. Line heights are generous: 68px for display (1.13x), 48px for headline-lg (1.2x), 28px for body-lg (1.56x), ensuring readability on dashboards where users scan rapidly. Font weights are binary:

Layout

The layout system uses a 12-column grid with a 1280px max-width container, centered with equal margins on desktop (breakpoint: 1024px+). Mobile layouts collapse to single-column with 24px horizontal gutter (padding: 0 24px). Section spacing follows a 40px rhythm: 40px (lg) between major sections (hero, feature blocks, testimonials), 24px (md) between subsections, 12px (sm) between list items or card groups. The gutter (24px) is applied consistently to all container padding and horizontal spacing. Whitespace is treated as a design material, not a void—the 40px lg spacing between sections creates visual breathing room that mirrors the brand's 'clarity' philosophy. Cards and containers use 24px internal padding (md spacing) with 1px borders in outline-variant (#b0b0b0) to define edges without

Elevation & Depth

Depth is conveyed through subtle shadows and border definition, not layering or blur. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges and small buttons; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, input fields, and standard containers; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals, dropdowns, and elevated overlays. Shadows are always black with low opacity (6–15%) to maintain the clean, data-forward aesthetic—no colored shadows or blur effects. Cards at rest use md elevation; on hover, they transition to lg elevation with a 200ms e

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are applied strategically to soften the technical nature of data dashboards without sacrificing clarity. Buttons and primary interactive elements use lg radius (1rem / 16px) to create approachable, clickable targets. Cards and containers use lg radius (16px) for consistency. Input fields use DEFAULT radius (0.5rem / 8px) to signal form context. Badges and small UI elements use full radius (9999px) for pill-shaped appearance, reinforcing their secondary status. Hero sections and large background shapes (like the red circle in the her

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses primary red (#d91842) background with white text, 44px height, 12px vertical / 20px horizontal padding, lg radius (16px), and label-md typography (14px, 600 weight). On hover, the background shifts to primary-container (#f50938, a brighter red) with a 200ms ease-in-out transition—no shadow added. On active/pressed, the background darkens to #b80a2a (a deeper red, approximately 20% darker) to provide tactile feedback. Button-secondary uses transparent background with a 2px primary-colored border, same padding and height, and on hover transitions to surface-container-low (#f0f0f0) background while maintaining the border. Button-ghost (tertiary) has no border or background; on hover, it gains surface-contai

Do's and Don'ts

**Do**

• Do use primary red (#d91842) exclusively for primary CTAs, active states, and critical alerts—it's the brand's signature and must remain distinctive.
• Do apply 24px (md) or 40px (lg) spacing between major sections; whitespace is a design material that reinforces clarity and reduces cognitive load.
• Do use FCVision for all headlines and labels to create visual separation from body text and signal data-forward thinking.
• Do transition button and card states over 200ms with ease-in-out timing to provide smooth, professional feedback without feeling sluggish.
• Do maintain 4.5:1 contrast minimum on all text; use text-shadow on small labels over colored backgrounds when needed.
• Do use lg radius (16px) as the default for buttons and cards; it's modern and approachable without appearing cartoonish.

**Don't**

• Don't use secondary purple (#7646dd) or tertiary orange (#ec8013) on primary CTAs—they dilute the red's impact and confuse the action hierarchy.
• Don't apply shadows to buttons; they should feel flat and direct. Reserve shadows for cards and elevated containers only.
• Don't use sharp corners (0px radius) on interactive elements; it conflicts with the brand's goal of making data feel accessible and modern.
• Don't exceed 1280px container width on desktop; wider layouts dilute focus and make dashboards harder to scan.
• Don't use decorative gradients or blur effects; they add visual noise and distract from data clarity.
• Don't mix FCVision and IBM Plex Sans Thai in the same headline or label; maintain clear family separation between headlines (FCVision) and body (IBM Plex).