Duna

Overview

Duna is an AI-native business identity and compliance platform that transforms enterprise onboarding through intelligent automation. The design system embodies 'Warm Minimalism'—a philosophy that pairs organic, landscape-inspired color palettes (warm earth tones, soft greens, muted teals) with rigorous typographic clarity and geometric precision. The aesthetic evokes both natural trust and technical competence, making complex compliance workflows feel approachable rather than intimidating. Users encounter a calm, unhurried interface that prioritizes legibility and cognitive ease over visual spectacle.

The brand voice is authoritative yet conversational, precise without jargon, and optimistic about automation's role in reducing friction. Tone markers: declarative headlines ('Defining the future of business onboarding'), concrete benefit statements ('accelerates business onboarding, automates manual work, and grows revenue'), and a measured confidence that avoids hype. Example sentence in brand voice: 'Our AI handles the paperwork so your team can focus on relationships.'

Colors

The color system is anchored in a warm, earthy primary palette (#160e0b, a near-black brown) paired with a secondary teal accent (#45848d) that signals trust and technical capability. Primary (#160e0b) is used exclusively on CTAs ('Get started', 'Schedule a demo') and interactive states; it commands attention through restraint rather than brightness. Secondary (#45848d) appears as a supporting accent for highlights, focus rings (0 0 0 3px rgba(69, 132, 141, 0.1)), and tertiary UI elements. The surface stack is built from warm neutrals: surface (#ffffff), surface-dim (#f7f7f5), surface-container (#b2afae), and surface-container-highest (#4d4846), creating a cohesive, low-contrast hierarchy that reduces visual fatigue. On-surface text (#1a1816) is a warm charcoal, never pure black, maintaini

Typography

The type system uses GT America as the primary typeface family—a geometric sans-serif that balances warmth with technical precision. Display and headline levels (72px, 48px, 32px) use GT America Regular at lighter weights (400–500), creating an open, inviting hierarchy that feels editorial rather than corporate. Body text (16px–18px) in GT America Trial Rg at 400 weight maintains readability at small sizes with a 24px line-height (1.5x), ensuring comfortable scanning. Labels and UI microcopy use GT America Trial Md (500 weight) at 14px with 0.02em letter-spacing to add precision and visual separation from body text. Fragment Mono (12px, 400 weight) is reserved for technical labels and monospaced contexts (e.g., code snippets, transaction IDs), signaling machine-readable content. All headli

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered on the viewport with 24px gutters on desktop and 12px on mobile. The hero section spans full-width with a background image (landscape illustration), overlaid with a semi-transparent white gradient (rgba(255, 255, 255, 0.7) to rgba(255, 255, 255, 0.3)) to ensure text legibility. Content sections use lg spacing (40px) for vertical rhythm between major blocks, md spacing (24px) for subsection separation, and sm spacing (12px) for component-level padding. The container max-width (1200px) is applied to text-heavy sections to maintain optimal line length (~65–75 characters); wider sections (testimonials, feature grids) may extend to 1280px. White-space philosophy: generous margins around headlines (40px below display te

Elevation & Depth

Elevation is achieved through subtle shadows and layering rather than dramatic depth effects. Level 1 (base surface) has no shadow; Level 2 (cards, modals) uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), creating a soft, diffused lift. Level 3 (elevated modals, popovers, hover states) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a larger spread that signals prominence without feeling heavy. Hover transitions on interactive elements (buttons, cards) shift from Level 2 to Level 3 shadow over 200ms (transition: all 200ms ease-in-out), providing tactile feedback. Focus states on inputs use a

Shapes

The shape philosophy is 'Geometric Warmth'—combining sharp, technical corners with generous rounding on interactive elements to balance precision with approachability. Buttons use full rounding (border-radius: 9999px) to signal action and create a pill-shaped form that feels inviting and modern. Cards and containers use lg rounding (1rem / 16px) for a subtle, refined edge that avoids harsh corners without appearing overly organic. Input fields use DEFAULT rounding (0.5rem / 8px), a middle ground that feels technical yet accessible. Badges and small UI elements use full rounding (9999px) to emp

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses backgroundColor: {colors.primary} (#160e0b), textColor: {colors.on-primary} (#ffffff), padding: 12px 24px, height: 44px, and border-radius: 9999px. On hover, the background shifts to {colors.primary-container} (#222221) with a 200ms transition, providing clear feedback without changing the button's size. The secondary button (button-secondary) uses a semi-transparent plum background (rgba(27, 6, 36, 0.6)), a 1px border (rgba(0, 0, 0, 0.1)), and smaller padding (4px 8px 4px 14px) to signal lower priority. Secondary buttons are used for 'See more', 'Learn more', and other exploratory CTAs.

Containers & Surfaces Cards (card component) use backgroundColor: {colors.surface-container-lo

Do's and Don'ts

**Do**

• Do use primary (#160e0b) exclusively on CTAs and high-priority interactive elements—never on decorative or background surfaces.
• Do apply 24px gutters and 40px section spacing to create visual rhythm and prevent content from feeling cramped.
• Do use full rounding (9999px) on all buttons and badges to signal interactivity and maintain the warm, approachable aesthetic.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels over low-contrast backgrounds to ensure legibility.
• Do use the secondary teal (#45848d) for focus rings and supporting accents—never as a primary button color.
• Do maintain 1.5x line-height (24px for 16px body text) to ensure comfortable reading and reduce cognitive load.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—stick to the warm neutral palette (#1a1816, #edece7, #f7f7f5).
• Don't apply shadows larger than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)) or use multiple layered shadows—the system relies on single, clean shadows.
• Don't use the tertiary plum (#1b0624) on primary CTAs or as a dominant surface color—it's reserved for badges and status indicators.
• Don't apply letter-spacing tighter than -0.02em on headlines or looser than 0.03em on labels—maintain the specified range for visual consistency.
• Don't round corners on input fields beyond {rounded.md} (12px)—they should feel technical, not organic.
• Don't mix typeface families within a single component—stick to GT America for UI and Fragment Mono only for monospaced technical content.