Trump Accounts

Overview

Trump Accounts is a fintech platform designed to democratize long-term wealth-building for American families, combining classical American iconography (coins, patriotic imagery) with modern app-based accessibility. The aesthetic is 'Institutional Optimism'—a design movement that pairs heritage visual language (serif typography, muted earth tones, coin motifs) with contemporary UI clarity to evoke trust, stability, and forward momentum. The brand personality is aspirational yet grounded: confident without arrogance, patriotic without bombast, and focused on tangible financial outcomes. The UI evokes the feeling of opening a treasury—dignified, purposeful, and secure.

The voice is direct and empowering. Sentences are declarative and action-oriented: 'Big things start with small steps.' 'Your child's account grows with them.' The vocabulary avoids financial jargon in favor of accessible, family-focused language. Every interaction reinforces the core message: this is an official, trustworthy vehicle for American families to build generational wealth. The tone never wavers into hype; instead, it grounds itself in concrete benefits and clear next steps.

Colors

The color palette reflects 'Institutional Optimism'—a deliberate fusion of heritage and modernity. The primary color, Navy Slate (#2d3a50), anchors the interface as the signature accent for CTAs, focus states, and key interactive elements. It conveys authority and trustworthiness without the coldness of pure navy. Secondary gold (#d8b579) is a warm, muted accent used for highlights, badges, and decorative elements, evoking coins and American currency. The tertiary accent, Patriotic Red (#bd0c3c), appears sparingly in the hero banner and error states, referencing the American flag.

The surface stack is built on Bright Ivory (#f9f6f0) as the primary background, with a carefully calibrated container hierarchy: surface-container-low (#f5f2eb) for subtle depth, surface-container (#f1ede2) for

Typography

The type system pairs Instrument Serif for display and headline levels with GeistSans for body and label text, creating a 'Heritage + Modern' visual rhythm. Instrument Serif (400 weight, 92px at display level with -0.02em letter-spacing) commands attention in hero sections while maintaining elegance; its classical proportions reinforce institutional credibility. Headline levels (56px, 40px) use the same serif family at tighter line-heights (64px, 48px) to create visual hierarchy without excess whitespace. Body text shifts to GeistSans (400 weight, 16px–18px) for legibility and contemporary feel, with 24–28px line-heights ensuring comfortable reading on all screen sizes. Labels use GeistSans at 600 weight (15px) with 0.01em letter-spacing for button text, creating clear affordance. Apply te

Layout

The layout follows a 12-column grid with a max-width of 1232px, centered on the viewport with 24px gutters on desktop and 50px horizontal padding on smaller screens. The page rhythm is built on a 40px (lg spacing) unit for section separation, creating breathing room between hero, feature blocks, and footer. Container max-widths vary by section (850px–1146px) to optimize readability for different content types: narrower for text-heavy sections, wider for image-heavy features. White-space is generous and intentional—the ivory background is never crowded. The spacing scale (4px unit, 12px sm, 24px md, 40px lg, 64px xl) is applied consistently: md spacing for internal card padding, lg spacing for section breaks, and xl spacing for hero-to-content transitions. This creates a sense of deliberate

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the heritage aesthetic. The base level (Level 1) is the Bright Ivory background (#f9f6f0) with no shadow. Level 2 (standard cards and containers) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation without drama. Level 3 (hovered cards, modals, elevated UI) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a softer, more diffuse shadow that suggests lift rather than weight. No hard borders or harsh contrasts; instead, shadows are the primary depth cue. Interactive elements (buttons, inputs) do not use shad

Shapes

The shape philosophy is 'Soft Institutional'—rounded corners are used strategically to soften the formality of a government/financial interface without sacrificing professionalism. Buttons use full border-radius (9999px) to create pill-shaped affordances that feel modern and approachable, contrasting with the serif headlines. Cards and containers use lg radius (1rem / 16px) for a subtle roundness that feels contemporary without being playful. Input fields use DEFAULT radius (0.5rem / 8px) for a neutral, business-like appearance. Decorative elements (badges, accent boxes) use full radius to add

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses Navy Slate (#2d3a50) background with white text (GeistSans, 600 weight, 15px), full border-radius (9999px), and 16px vertical / 32px horizontal padding for a 48px total height. On hover, the background shifts to primary-container (#465660), a darker shade that maintains contrast while signaling state change. On active/press, it moves to primary-fixed-dim (#2d3a50) with a subtle box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to indicate depression. Transitions use 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth feedback. Secondary buttons are transparent with a 2px solid border in primary color, allowing users to choose between commitment (primary) and exploration (secondary).

Containers & Surfa

Do's and Don'ts

**Do**

• Do use Navy Slate (#2d3a50) for all primary CTAs and focus states—it is the signature brand accent and must remain consistent across all touchpoints.
• Do pair Instrument Serif headlines with GeistSans body text to create the 'Heritage + Modern' visual rhythm that defines the brand.
• Do apply md spacing (24px) between sections and lg spacing (40px) for major breaks to maintain the generous, deliberate pacing.
• Do use full border-radius (9999px) on buttons and DEFAULT radius (8px) on inputs to create clear visual distinction between action and input elements.
• Do keep shadows subtle (0 3px 8px rgba(0, 0, 0, 0.15) at rest, 0 8px 24px rgba(0, 0, 0, 0.12) on hover) to maintain the clean, institutional aesthetic.
• Do use the secondary gold (#d8b579) sparingly for accents and badges—it should never dominate the interface.

**Don't**

• Don't use pure black (#000) or pure white (#fff) for text or backgrounds—always use the defined surface and on-surface tokens to maintain the warm, institutional tone.
• Don't apply shadows to buttons at rest; reserve shadows for hover and active states to signal interactivity clearly.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph—maintain the clear hierarchy of serif for display/headlines and sans-serif for body/labels.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—custom radii break the visual system.
• Don't apply the tertiary red (#bd0c3c) to non-error, non-patriotic elements—it is reserved for high-priority alerts and hero banner accents.
• Don't exceed 1232px container max-width on desktop; narrower sections (850px–1000px) are preferred for text-heavy content to maintain readability.