Switch between the rendered Visual preview and the Raw DESIGN.md.
The FPT design system embodies a modern, corporate technology aesthetic rooted in professionalism and trustworthiness. The palette combines deep navy tones with vibrant orange accents, creating a dynamic contrast that conveys innovation within a stable, enterprise-focused framework. The typography is clean and minimalist, emphasizing clarity and accessibility across digital touchpoints. Subtle shadows and generous whitespace reinforce a premium, uncluttered experience. The overall mood is approachable yet authoritative—ideal for a leading Vietnamese IT services conglomerate that bridges cutting-edge technology with established business credibility.
Key Characteristics
#0E1830) for trust and corporate stability#FC7321) for calls-to-action and focal points#0E1830): Primary brand color used extensively for headings, text, and structural elements. Conveys corporate stability and technology expertise.#0A1628): Darkest variant for high-contrast text and primary navigation elements requiring maximum legibility.#1A1D29): Intermediate navy for secondary structural elements and subtle background variations.#FC7321): Primary CTA, buttons, highlighted links, and focal design elements. Drives engagement and energy.#0E1830): Text color for links and interactive elements in default state.#FC7321): Hover and active states for buttons and CTAs.#FFFFFF): Primary background for cards, containers, and content areas. Maximum contrast surface.#F9FAFB): Subtle background for secondary surfaces and gentle visual separation.#F5F5F7): Alternative neutral background with slight warmth.#EFEFEF): Minimal border and divider color.#DEDFE0): Secondary text and disabled states.#7E8284): Tertiary text, captions, and muted information.#000000): Text, borders, and high-contrast structural elements.#808080): Subtle borders and divider lines.#5E1515): Reserved for error or alert states (minimal usage).#3A3631): Reserved for secondary semantic purposes (minimal usage).Primary: Inter (system stack: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif)
Secondary/Button Overrides: Arial (fallback: Arial, sans-serif)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Inter | 26px | 600 | 36px | 0px | Large page titles and hero headlines |
| Heading 1 | Inter | 26px | 600 | 36px | 0px | Section headers |
| Heading 2 | Inter | 20px | 700 | 30px | 0px | Subsection headers and card titles |
| Heading 3 | Inter | 18px | 700 | 25px | 0px | Tertiary headings and prominent labels |
| Body Text | Inter | 15px | 400 | 19px | 0px | Primary paragraph and body content |
| List Item | Inter | 14px | 400 | 21px | 0px | Bulleted and numbered list content |
| Navigation Link | Inter | 14px | 600 | 19px | 0px | Primary navigation menu items |
| Navigation Link Alt | Inter | 14px | 400 | 21px | 0px | Secondary navigation links |
| Small Text / Caption | Inter | 13.3333px | 400 | normal | 0px | Captions, metadata, and fine print |
| Link (Footer) | Inter | 11.9px | 400 | 17.85px | 0px | Footer and tertiary links |
| Label / Form | Inter | 16px | 400 | 24px | 0px | Form labels and input descriptions |
| Button Text | Arial | 13.3333px | 400 | normal | 0px | Button labels and call-to-action text |
| Input Text | Arial | 18px | 400 | 26px | 0px | Form input placeholder and entered text |
#FC7321#FFFFFF12px 24px8pxrgba(10, 4, 60, 0.05) 0px 12px 30px 0px#E56B1B, shadow intensifies#D45F15#DEDFE0, text #7E8284#0E183025px 20px#FC7321, background #F9FAFB#FC7321#0E183025px 0px 30px 54px#FC7321#FFFFFF#DEDFE08px24pxrgba(10, 4, 60, 0.05) 0px 2px 8px 0px16px 0pxlinear-gradient(135deg, #4A9FD8 0%, #3A8BC4 100%) (sky blue gradient inferred from hero imagery)48px 40px#FFFFFF or #0E1830 overlay#F5F5F7#0E1830 (entered), #7E8284 (placeholder)0px 25px4pxrgba(0, 0, 0, 0.1) 0px 1px 5px 0px inset56px448pxrgba(0, 0, 0, 0.2) 0px 0px 0px 2px inset#EFEFEF, text #DEDFE0#0E18308px#FFFFFF71px0px 40px#DEDFE0#0E183026px 10px (nav items)#FC7321, background #F9FAFB#FC7321, border-bottom #FC7321 (2px)#0E1830/ in #7E82848px#0E1830#FC7321, text-decoration underline#D45F15#FC732112px 20px#F9FAFB on hover4px#F5F5F7#F5F5F7#0E18304px 12px13px#DEDFE0Base Unit: 4px
Scale:
4px: Micro spacing for inline elements8px: Small padding, tight grouping12px: Compact component spacing16px: Standard padding, section margins20px: Medium section spacing24px: Card and container padding32px: Large section separation36px: Extra-large container padding40px: Page-level container padding44px: Heading and hero spacing48px: Major section breaks52px: Page section spacingUsage Context:
4px8px–12px24px–40px32px–52px1200px (inferred from full-width layouts)40px left/right on desktop24px between columnsGenerous whitespace creates breathing room and visual hierarchy. Spacing is intentional and follows the modular scale; negative space is as important as content. High-contrast color usage (navy on white, orange on navy) compensates for minimal decorative elements, allowing content to stand out cleanly.
0px: Navigation bar, hero sections, full-width elements4px: Input fields, small cards, badges, subtle rounding8px: Standard buttons, primary cards, moderate rounding10px: Image containers with slight corner treatment13px: Badge and pill-shaped elements (maximum softness)40px: Fully circular or heavily rounded image elements| Level | Treatment | Use |
|---|---|---|
| 0 (Flat) | No shadow | Background surfaces, full-width sections |
| 1 (Subtle) | rgba(10, 4, 60, 0.05) 0px 2px 8px 0px | Cards, containers, slight lift |
| 2 (Standard) | rgba(10, 4, 60, 0.05) 0px 12px 30px 0px | Primary buttons, modals, prominent components |
| 3 (Elevated) | rgba(10, 4, 60, 0.1) 0px 20px 40px 0px | Dropdown menus, tooltips, floating UI (inferred) |
Shadow Philosophy: Minimal, subtle shadows create depth without distraction. All shadows use a cool-toned dark purple-gray (rgba(10, 4, 60, ...)) at low opacity, maintaining the clean, corporate aesthetic. Shadows increase softly with elevation levels; they never feel harsh or dramatic. Inset shadows on inputs provide tactile feedback without prominent outer elevation.
#0E1830) as your structural anchor. It builds trust and establishes visual hierarchy for primary content and navigation.#FC7321) deliberately for CTAs and focal points. Limit to 2–3 uses per page to maintain impact.16px between logical content blocks).rgba(10, 4, 60, 0.05)) to create depth without visual noise.44px × 44px for interactive elements on mobile.0px radius for hero areas and max-width containers.8px for standard components. It compromises breathing room and touch accessibility.1.25 line height ratio for body text.| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single column, full-width containers, 20px padding, reduced button sizes, collapsed navigation |
| Tablet | 768px–1024px | Two-column layout option, 32px padding, medium button sizes, offscreen nav menu |
| Desktop | 1025px–1440px | Full 12-column grid, 40px padding, standard button sizes, full horizontal navigation, 1200px max-width |
| Large Desktop | 1441px+ | Centered container with side margin, consistent 1200px max-width, spacing remains constant |
44px × 44px for all interactive elements on mobile and tablet.12px vertical, 20px horizontal on touch devices.8px of invisible padding around text links to expand touch area.12px horizontal and vertical gap to prevent accidental overlap.56px on all devices for comfortable interaction; maintain on desktop.<768px; show full horizontal nav at ≥768px.20px at mobile, 32px at tablet, 40px at desktop.4px on mobile (e.g., 26px → 22px); maintain hierarchy.24px 20px on mobile; increase to 48px 40px on desktop.25% on mobile to save vertical real estate.#FC7321) — buttons, highlighted links, focal actions#0E1830) — headings, body text, navigation#FFFFFF) — main content areas, cards, and default surface#F5F5F7 or #F9FAFB) — subtle surface variation, input backgrounds#DEDFE0) — subtle separation between elements#7E8284 or #808080) — secondary text, captions, inactive states#000000) — used sparingly for maximum emphasisEvery button uses Orange (#FC7321) with 8px border-radius minimum and 12px 24px padding; primary CTAs always include subtle shadow rgba(10, 4, 60, 0.05).
All text defaults to Deep Navy (#0E1830) on white; never use black for body copy to maintain brand consistency.
Maintain exactly 24px–40px padding inside cards and containers; never compress below 16px for standard components.
Headings use Inter 600–700 weight; body text uses Inter 400 weight at 15px base size with 19px line-height minimum.
Navigation bars are always white with navy text; active items highlight with orange text and optional bottom border.
Input fields are always 56px tall with #F5F5F7 background, 4px border-radius, and inset shadow rgba(0, 0, 0, 0.1) 0px 1px 5px 0px inset.
Cards and containers use 1px #DEDFE0 border with rgba(10, 4, 60, 0.05) box shadow for subtle depth.
Hero sections use gradients or photography backgrounds (blue tones inferred); full width with centered content container max 1200px.
Spacing follows the scale: 8px, 12px, 16px, 24px, 32px, 40px, 48px—use multiples of 4px; never use arbitrary values.
Responsive collapse: navigation to hamburger at <768px, padding reduces 40px → 20px, typography scales down 4px, hero section padding halves on mobile.