FPT Corporation

Overview

FPT Corporation is Vietnam's preeminent IT services and digital transformation enterprise, serving Fortune 500 clients across APAC, Europe, and North America. The design system embodies 'Corporate Clarity'—a philosophy that marries enterprise professionalism with approachable warmth. The visual language prioritizes signal over noise: a vibrant orange accent (#fc7321) cuts through a neutral, light-filled canvas (white #ffffff, soft grays #e9ecef–#f0f9fa), creating immediate visual hierarchy without visual clutter. The aesthetic is neither austere nor playful; it is confident, measured, and built for scale across dozens of business units and customer touchpoints.

The brand voice is authoritative yet accessible: precise in technical detail, conversational in tone, never condescending. Sentences are direct and outcome-focused. Example: 'FPT's cloud platform reduces deployment time by 60%—from weeks to days.' The personality reflects the company's 35+ year heritage: trusted, innovative, and deeply rooted in Vietnamese excellence while operating at global standards.

Colors

The color system is anchored by a bold, energetic primary orange (#fc7321) that serves as the brand's signature accent—deployed on all primary CTAs, active states, and brand-critical interactive elements. This orange is never used for body text or large surface areas; it is reserved for moments of intentional user action. The surface stack is deliberately neutral and light: pure white (#ffffff) as the base, with a carefully calibrated progression through soft grays (#f5f5f5 surface-dim, #f0f0f0 surface-container-low, #e9ecef surface-container) that provide subtle depth without introducing visual fatigue. The on-surface text color is a deep navy (#0e1830), chosen to maintain WCAG AAA contrast (18.5:1 ratio) against white while feeling warmer than pure black. Secondary blue (#4a90e2) and ter

Typography

The typography system uses Inter (Google Fonts, variable weight 400–700) as the sole typeface family, ensuring consistent rendering across all platforms and devices. The hierarchy is built on a 4px baseline grid: display (56px, 700 weight) anchors hero sections and major announcements; headline-lg (36px, 600 weight) introduces page sections; headline-md (28px, 600 weight) marks subsection breaks; title-lg (20px, 600 weight) labels card headers and form groups. Body text operates at two scales: body-lg (18px, 400 weight, 28px line-height) for introductory paragraphs and rich content, body-md (16px, 400 weight, 24px line-height) for standard UI copy and descriptions. Labels use a tighter scale: label-md (14px, 600 weight, 20px line-height, 0.02em letter-spacing) for button text and form labe

Layout

The layout system operates on a 12-column fluid grid with a maximum container width of 1280px, ensuring responsive scaling from mobile (320px) through desktop (1920px+). The gutter width is fixed at 24px, providing consistent breathing room between columns and sections. Vertical rhythm is governed by the 8px unit scale: section separation uses lg spacing (40px), component groups use md spacing (24px), and internal component padding uses sm spacing (12px). The page canvas is always white (#ffffff) with no background patterns or gradients—this creates a clean, professional foundation that allows content and accent colors to command attention. Cards and elevated surfaces sit at a single elevation level (box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) to avoid visual confusion; there is no multi-la

Elevation & Depth

Depth in this system is achieved through subtle, consistent shadow application rather than layering or blur effects. The primary elevation token (0 3px 8px rgba(0, 0, 0, 0.15)) is applied to all elevated surfaces: cards, dropdowns, modals, and tooltips. This shadow uses a 3px vertical offset and 8px blur radius to create a gentle lift without drama—the 15% black opacity ensures the shadow reads clearly on white backgrounds without appearing harsh. Hover states on cards intensify the shadow to 0 6px 16px rgba(0, 0, 0, 0.12), signaling interactivity through a subtle vertical shift (6px offset, 1

Shapes

The shape philosophy is 'Measured Softness'—rounded corners are applied selectively to humanize the interface without sacrificing professional clarity. Buttons use the full rounded scale (border-radius: 9999px, or {rounded.full}) to create pill-shaped affordances that feel approachable and clickable; this 44px height with full rounding creates an instantly recognizable CTA. Cards and containers use lg rounding (1rem / 16px) to soften edges while maintaining a structured appearance. Form inputs use DEFAULT rounding (0.5rem / 8px) to signal their functional purpose—slightly rounded but not playf

Components

Action Elements Buttons are the primary interaction mechanism and use the full rounded pill shape (border-radius: 9999px) with a fixed height of 44px and horizontal padding of 32px. The primary button (button-primary) uses the brand orange (#fc7321) background with white text (#ffffff), rendered in label-md weight (600, 14px). On hover, the background darkens to #e85a0a with a 200ms ease-in-out transition, creating a tactile response. The active state (button-primary-active) further darkens to #d64a00, providing clear visual feedback for press states. Secondary buttons use a transparent background with a 1px border in the primary orange and orange text; on hover, they fill with the primary-container color (#ffe4d0) and shift text to on-primary-container (#5a2e0f), maintaining the orang

Do's and Don'ts

**Do**

• Do use the primary orange (#fc7321) exclusively on CTAs, active states, and brand-critical moments—never on body text or large surface areas.
• Do maintain the 24px gutter and 40px section spacing to create visual breathing room and prevent cognitive overload.
• Do apply the full rounded pill shape (9999px) only to buttons; use lg rounding (16px) for cards and DEFAULT (8px) for inputs to maintain hierarchy.
• Do use the 0 3px 8px rgba(0, 0, 0, 0.15) shadow consistently across all elevated surfaces to create a unified depth model.
• Do render all interactive text in Inter 600 weight (label-md) with a subtle text-shadow (0 1px 2px rgba(0, 0, 0, 0.08)) over colored backgrounds for crisp legibility.

**Don't**

• Don't use the primary orange for disabled states, backgrounds, or large text areas—reserve it for moments of intentional user action.
• Don't apply multiple shadow layers or use blur effects (backdrop-filter, glassmorphism)—the system relies on a single, consistent shadow model.
• Don't use rounded corners on structural elements like headers, footers, or page dividers—sharp corners reinforce the grid-based layout.
• Don't mix typefaces or use system fonts; Inter is the sole typeface family across all platforms and weights.
• Don't apply letter-spacing greater than 0.02em on body text or less than -0.03em on display text—maintain the conservative tracking guidelines to preserve readability.