Narrative

Overview

Narrative is a strategic branding agency serving India's growing B2B enterprises and SMEs, transforming businesses into distinctive, market-leading brands. The design system embodies 'Architectural Minimalism'—a philosophy that prioritizes clarity, intentionality, and structural integrity over ornamentation. The aesthetic is grounded, professional, and confident: clean teal-dark (#204042) surfaces paired with warm burnt-orange accents (#f19937) that signal expertise, approachability, and creative energy. The UI evokes a sense of structured sophistication—like a well-organized design studio where strategy and craft converge.

The brand voice is direct, grounded, and human-centered. Narrative speaks to business leaders with clarity and conviction, avoiding jargon while acknowledging the depth of their challenges. The tone is consultative yet authoritative: 'You have built something valuable. Now become a clear, distinct, and powerful brand that doesn't just represent your business, but multiplies it.' Every interaction—from the hero headline to the symptom cards—reinforces the idea that branding is not decoration; it is foundational business strategy.

Colors

The color system is anchored by a sophisticated teal-dark primary (#204042) that conveys trust, stability, and professional authority—the dominant color on CTAs, headers, and interactive elements. This is paired with a warm burnt-orange secondary (#f19937) used as an accent for emphasis, highlights, and brand moments (italicized words in headlines, icon accents, selection states). The tertiary teal (#2a5558) provides depth for secondary containers and supporting surfaces. The surface palette ranges from off-white (#fbfbfb) for the main canvas to warm beige (#eceae6) for hero sections, creating visual rhythm and hierarchy without relying on harsh contrast. All text on light surfaces uses the primary color (#204042) at 100% opacity for body copy and 90% opacity for secondary text, maintainin

Typography

The type system is built on Lexend, a geometric sans-serif that conveys clarity and modernity while remaining warm and accessible. Display (60px, 400 weight, -0.04em tracking) anchors hero sections with confident, spacious letterforms. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish section hierarchy with tighter tracking (-0.02em, -0.01em respectively) to reinforce structure. Body text uses Lexend at 16px (300 weight) for primary copy and 18px (400 weight) for emphasized passages, with 24px line-height to ensure comfortable reading on light backgrounds. Labels and UI text use 14px (600 weight) with 0.01em tracking for precision and visual distinction. Accent moments—such as italicized words in headlines—use the secondary color (#f19937) at the same weight and s

Layout

The layout follows a 12-column grid with a max-width of 1280px (80rem), providing a structured yet flexible canvas for content. The design uses a 'breathing' approach to white space: sections are separated by lg spacing (40px) vertically, with gutter spacing (24px) applied horizontally on desktop and md spacing (24px) on mobile. The hero section spans full-width with a beige background (#eceae6) and overlaid video, creating visual depth and energy at the top of the page. Card grids (as seen in the symptoms section) use 3 columns on desktop, 2 on tablet, and 1 on mobile, with consistent 24px gaps between cards. Container padding is 24px on desktop and 16px on mobile, ensuring content never touches the viewport edge. The fixed header uses minimal padding (20px vertical) and maintains the lig

Elevation & Depth

Depth in this system is achieved through subtle layering and border definition rather than heavy shadows. The base layer (Level 1) is the light surface (#fbfbfb) with no shadow. Level 2 (cards, inputs) introduces a 1px solid border at rgba(32, 64, 66, 0.15) and an optional box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover to signal interactivity. Level 3 (modals, elevated containers) uses a stronger shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a 2px border at rgba(32, 64, 66, 0.2). The approach is restrained and architectural: shadows are used sparingly to avoid visual clutter, and borders pro

Shapes

The shape philosophy is 'Structural Clarity'—sharp, intentional, and purposeful. Buttons and primary CTAs use 0px border-radius (square corners) to convey precision, authority, and a no-nonsense approach to business. This sharpness is softened only in specific contexts: input fields and dropdowns use 4px border-radius for a slightly more approachable feel, and badges use full border-radius (9999px) to signal lightweight, secondary information. Cards maintain 0px corners to align with the architectural aesthetic, while hover states introduce a 1px border transition rather than a radius change.

Components

Action Elements Buttons are the primary interaction mechanism and come in two distinct variants. Primary buttons (bg-[#204042], text-[#fbfbfb], 10px 20px padding, 44px height, 0px radius) use the teal-dark primary color with white text, set in Lexend 600 weight at 12px. On hover, the background transitions to the darker primary-container (#183234) over 200ms, maintaining the same text color. Secondary buttons use a transparent background with a 1px border in the primary color, 14px text at 600 weight, and 48px height; on hover, they fill with a light surface color (#f9fafa) while maintaining the border. Both variants include a small accent dot (6px × 6px, #f19937) positioned to the right of the label, creating a subtle visual signature. All button transitions use cubic-bezier(0.4, 0, 0

Do's and Don'ts

**Do**

• Do use the primary teal (#204042) for all CTAs, headers, and interactive elements—it is the foundation of brand authority.
• Do apply the secondary accent (#f19937) sparingly and intentionally: italicized words, icon highlights, hover states, and selection indicators.
• Do maintain 0px border-radius on buttons and cards to reinforce the architectural, structured aesthetic.
• Do use Lexend at 300–400 weight for body text to preserve the calm, approachable tone; reserve 600+ weights for labels and emphasis.
• Do separate sections with lg spacing (40px) vertically to create breathing room and visual rhythm.
• Do use 1px borders with subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) for card elevation rather than heavy drop shadows.
• Do transition all interactive states over 200–300ms using cubic-bezier(0.4, 0, 0.2, 1) for a smooth, professional feel.

**Don't**

• Don't use rounded corners on buttons or primary cards—this softens the architectural authority the brand requires.
• Don't apply the secondary accent (#f19937) to large background areas; reserve it for accents, highlights, and micro-interactions.
• Don't use system fonts or generic sans-serifs; always specify Lexend for body and UI text, and IBM Plex Mono for labels and metadata.
• Don't introduce shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—the system relies on borders and subtle depth, not visual weight.
• Don't reduce line-height below 24px on body text; the calm, readable aesthetic depends on generous vertical spacing.
• Don't use the primary color (#204042) at opacity below 85% for body text—this compromises legibility and undermines the professional tone.
• Don't mix rounded and sharp corners within the same component family; maintain consistency to reinforce the structured identity.