Dichvu Cong DCS

Overview

Dichvu Cong DCS is a Vietnamese government digital transformation platform designed to streamline administrative procedures for Party members and citizens. The brand embodies Civic Formalism—a design movement that combines institutional authority with digital accessibility, using bold primary colors and clear hierarchies to convey trustworthiness and procedural transparency. The interface evokes a sense of civic responsibility and official legitimacy, transforming bureaucratic complexity into navigable clarity. The emotional response is one of confidence: users feel guided through processes by an authoritative yet approachable system.

The brand voice is formal yet direct, avoiding flowery language in favor of imperative clarity. Vocabulary emphasizes duty, process, and official status: 'Đăng nhập' (Log in), 'Cấp nhật' (Update), 'Hướng dẫn' (Guidance). Tone is never apologetic or uncertain—instructions are stated as facts. Example sentence in brand voice: 'Cần bộ, đảng viên truy cập Công DVC quốc gia: dichvucong.gov.vn để hoàn tất đăng ký.' (Party members must access the national DVC portal at dichvucong.gov.vn to complete registration.)

Colors

The color system is built on a Civic Red primary (#c10800) paired with institutional white (#ffffff) and neutral grays. Primary (#c10800) is the signature accent used exclusively on call-to-action buttons, active navigation states, and critical alerts—it signals official action and demands attention. Secondary (#007bff) provides a supporting accent for informational elements and links, maintaining visual hierarchy without competing with the primary red. Tertiary (#ffc107) highlights warnings and non-critical updates. The surface stack progresses from bright white (#ffffff) for primary content areas through subtle grays (#f4f5f7, #e5e5e5) for containers and dividers, ensuring legibility of dense procedural text. On-surface text (#001230) is a deep navy, not pure black, reducing eye strain d

Typography

The typography system uses Inter as the primary typeface, chosen for its clarity and neutrality in technical contexts. Display (56px, 700 weight) anchors page titles and hero sections with -0.02em letter-spacing to create visual impact. Headline-lg (36px, 700) and headline-md (28px, 600) structure major sections, with headline-md used for subsection headers in procedural guides. Body-md (16px, 400) is the baseline for form labels and instructional text, set at 24px line-height for comfortable reading of dense procedural content. Label-md (14px, 600) is applied to button text and form field labels, with 0.01em letter-spacing for precision. On small labels over busy backgrounds (such as badge text on colored containers), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure contrast. All

Layout

The layout follows a 12-column fluid grid with a fixed max-width of 1140px, centered on the viewport. This accommodates both desktop and tablet views without excessive horizontal scrolling. The gutter spacing is 24px between columns, creating breathing room for dense procedural content. Page sections are separated by lg spacing (40px) to establish clear rhythm; form groups within sections use md spacing (24px). The left sidebar navigation occupies 3 columns on desktop, leaving 9 columns for main content—a 1:3 ratio that prioritizes content while maintaining navigation accessibility. Container padding follows the md spacing token (24px) on all sides, except for full-width hero sections which use no padding. White-space is treated as a structural element: empty space between form sections si

Elevation & Depth

Depth is conveyed through subtle shadows and surface color shifts rather than dramatic layering. Level 1 (Base): surface-bright (#ffffff) with no shadow, used for primary content areas and form fields. Level 2 (Cards & Containers): surface-container-low (#f4f5f7) with elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)), used for grouped form sections and informational cards. Level 3 (Modals & Overlays): surface-bright (#ffffff) with elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), used for modal dialogs and floating panels. Hover states elevate cards to elevation.md to signal interactivity. Focus states

Shapes

The shape philosophy is Institutional Precision—rounded corners are used sparingly and consistently to soften institutional formality without sacrificing clarity. Buttons use lg radius (1rem / 16px) to create approachable call-to-action zones while maintaining a professional appearance. Form inputs use DEFAULT radius (0.5rem / 8px) for a more compact, technical feel. Cards and containers use md radius (0.75rem / 12px) as a middle ground. Navigation items and list elements use md radius (0.75rem / 12px) to create distinct touch targets. Badges and status indicators use full radius (9999px) to d

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses primary (#c10800) background with white text, 44px height, 12px vertical / 24px horizontal padding, and lg radius (16px). On hover, the background shifts to primary-container (#dd1a00) with a 200ms ease transition. On active/press, the background becomes primary-fixed-dim (#cf2d21). Button-secondary uses a transparent background with a 2px primary border and primary text; on hover, the background fills with surface-container-high (#e5e5e5). All buttons use label-md typography (14px, 600 weight) with 0.01em letter-spacing. Focus states apply a 3px outline in primary with 4px offset.

Containers & Surfaces Cards use surface-bright (#ffffff) background with md radius (12px), md padding (24px), and a 1px

Do's and Don'ts

**Do**

• Do use primary red (#c10800) exclusively on CTAs and critical actions—never on passive elements or backgrounds.
• Do maintain the 24px gutter spacing in multi-column layouts to ensure procedural content remains scannable.
• Do apply 600+ font-weight to all interactive text (buttons, links, form labels) to signal affordance.
• Do use the full 12-column grid with max-width 1140px to accommodate dense procedural forms without horizontal scrolling.
• Do apply elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) on card hover to signal interactivity without overwhelming the interface.

**Don't**

• Don't use primary red (#c10800) as a background for large content areas—it reduces readability of procedural text.
• Don't mix rounded corners inconsistently; buttons use lg (16px), inputs use DEFAULT (8px), cards use md (12px).
• Don't apply shadows deeper than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12))—the aesthetic is institutional, not atmospheric.
• Don't use secondary blue (#007bff) or tertiary yellow (#ffc107) on primary CTAs; reserve primary red for official actions only.
• Don't reduce padding below sm (12px) on form fields or navigation items—dense spacing reduces accessibility for motor-impaired users.