Psyche Digital

Overview

Psyche Digital operates at the intersection of strategic clarity and technical execution, serving growth-stage founders who need integrated marketing without departmental overhead. The design language embodies 'Precision Warmth'—a movement that pairs dark, technical foundations (deep ink backgrounds at #05080a with teal accents at #036b73) with approachable, human-scaled interactions. The UI evokes trust through contrast: cyan (#65cada) and peach (#f3b77c) accent colors pop against near-black surfaces, creating visual hierarchy that guides users toward action without shouting. The emotional response is one of competence and calm—users feel they're in capable hands.

The brand voice is direct, strategic, and grounded. Psyche avoids hype; instead, it speaks in concrete outcomes ('build clarity, create momentum, execute marketing that scales'). Vocabulary favors business-forward language ('embedded,' 'growth-stage,' 'execution') over trendy marketing speak. Tone is confident but not arrogant—the brand acknowledges complexity while promising simplification. Example sentence in brand voice: 'We embed directly into your team to eliminate the friction between strategy and execution.'

Colors

The color system is anchored by a dark-mode-first philosophy, with the primary accent—cyan (#65cada)—serving as the signature call-to-action and interactive focus color. This cyan appears on all primary buttons, links, and hover states, creating a consistent visual thread throughout the interface. The secondary color, teal (#036b73), provides depth and is used for text on cyan backgrounds and secondary interactive states. Peach (#f3b77c) acts as a tertiary accent for highlights, badges, and supporting visual elements, introducing warmth to the otherwise cool palette.

The surface stack is built for both light and dark contexts: light mode uses #f4f5f6 (surface) with #343438 (charcoal) text for high contrast; dark mode inverts to #05080a (ink) backgrounds with white text. Borders use semant

Typography

The type system pairs Poppins (headings, labels, UI text) with Open Sans (body copy, longer-form content), creating a clear distinction between structural hierarchy and narrative flow. Display and headline sizes use Poppins at weights 500–600 with tight line-heights (1.03–1.1) and negative letter-spacing (-0.04em to -0.01em), creating a compact, modern silhouette that commands attention. Body copy in Open Sans at 16–18px with 400 weight and 1.62–1.65 line-height ensures legibility and approachability. Labels and UI text use Poppins 600 at 12–14px with letter-spacing from 0.01em to 0.16em (uppercase labels), reinforcing the technical precision of the brand. On dark backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels (12px and below) to maintain contrast and prevent

Layout

The layout system uses a 12-column grid with a max-width of 1280px (--pd-container), centered with symmetric padding that scales from 20px on mobile to 72px on desktop (--pd-container-pad: clamp(20px, 5vw, 72px)). Sections use vertical rhythm via --pd-section-y (clamp(4rem, 7vw, 7.5rem)), creating breathing room between major content blocks. The primary split layout (--pd-split) uses a 0.86fr / 1.6fr column ratio, allowing introductory content to anchor the left while rich media or detailed information flows on the right. Spacing tokens follow a 8px base unit: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Gap values between grid items scale with viewport (clamp(1rem, 1.6vw, 1.75rem)), ensuring the design feels spacious on large screens without overwhelming mobile. Container padding

Elevation & Depth

Depth is conveyed through a three-tier shadow system that reinforces visual hierarchy without relying on color alone. Level 1 (subtle, for cards and inputs) uses box-shadow: 0 1px 2px rgba(5, 8, 10, 0.05), 0 6px 18px rgba(5, 8, 10, 0.05)—a soft, spread shadow that barely lifts the element. Level 2 (standard, for hovered cards and modals) uses 0 2px 6px rgba(5, 8, 10, 0.06), 0 18px 46px rgba(5, 8, 10, 0.09)—a more pronounced lift with greater blur and spread. Level 3 (prominent, for floating CTAs and hero overlays) uses 0 30px 80px rgba(5, 8, 10, 0.16)—a dramatic shadow that creates clear separ

Shapes

The shape philosophy is 'Technical Approachability'—rounded corners are present but restrained, signaling modernity without sacrificing the precision the brand demands. The radius scale progresses from sm (6px) for buttons and small inputs, DEFAULT (10px) for standard cards and containers, md (12px) for slightly larger cards, lg (16px) for hero sections and major containers, xl (20px) for oversized modals, and full (999px) for pills and badges. Buttons use 6px (sm) radius, creating a subtle softness that feels contemporary without being playful. Cards default to 10px (DEFAULT), balancing appro

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with 12.8px vertical and 21.6px horizontal padding. The primary button (Schedule an Ignite Call) uses cyan (#65cada) background with teal (#036b73) text, rounded to 6px. On hover, the background shifts to #4db3c8 with a box-shadow of 0 10px 26px rgba(101, 202, 218, 0.22) and a subtle upward transform (translateY(-2px)), creating tactile feedback. Active state deepens to #036b73 background with white text. All button transitions use 260ms cubic-bezier(0.22, 0.61, 0.36, 1) for smooth, snappy motion. Secondary buttons use transparent background with a 2px cyan border and cyan text, inverting on hover to a light cyan background (rgba(101, 202, 218, 0.08)). Ghost buttons (tertiary actions) use a 1

Do's and Don'ts

**Do**

• Do use cyan (#65cada) as the primary accent for all CTAs, focus states, and interactive elements—it is the signature brand color and should appear consistently across every page.
• Do maintain the dark-mode-first aesthetic by defaulting to #05080a backgrounds with white text; light mode is secondary and should feel like an inversion, not a redesign.
• Do apply the 260ms cubic-bezier(0.22, 0.61, 0.36, 1) easing to all transitions (hover, focus, active states) for a consistent, snappy feel across the interface.
• Do use Poppins for all headings, labels, and UI text to reinforce the technical, structured brand voice; reserve Open Sans for body copy and narrative content only.
• Do pair shadows with subtle transforms (translateY(-2px to -4px)) on hover to create tactile feedback; shadows alone feel flat and unresponsive.

**Don't**

• Don't use the peach color (#f3b77c) as a primary CTA—it is a supporting accent for badges and highlights only; cyan is always the primary interactive color.
• Don't apply rounded corners larger than 16px to standard cards or buttons; the brand requires technical precision, and excessive rounding undermines credibility.
• Don't use pure black (#000000) or pure white (#ffffff) for text on dark backgrounds; always use #ffffff (white) for text on #05080a (ink) to maintain the brand's specific contrast ratio.
• Don't animate elements for longer than 260ms or use easing functions other than cubic-bezier(0.22, 0.61, 0.36, 1); this creates a disjointed, unprofessional feel.
• Don't mix Poppins and Open Sans weights arbitrarily—Poppins is always 500–600 weight for hierarchy, Open Sans is always 400 weight for body; mixing weights within the same typeface creates visual confusion.