Psyche Digital

Overview

Psyche Digital is a growth-stage marketing agency serving post-seed to Series B climate-tech founders. The design system embodies 'Strategic Minimalism'—a philosophy that pairs austere, light-filled layouts with precise teal and deep teal accents to communicate both approachability and technical rigor. The brand personality is consultative and grounded: the UI should feel like a trusted advisor, not a salesperson. The aesthetic avoids flashiness; instead, it uses generous whitespace (minimum 24px gutters, 40px section separation), restrained color (teal reserved for CTAs and key interactions), and elegant typography (Poppins at 300–500 weight for headlines, Open Sans for body) to establish confidence. The tone is direct, data-informed, and human: 'We embed with your team to turn founder stories into investor-ready narratives across brand, website, and marketing—no full-time hires required.'

Colors

The color palette is anchored by two teal accents: primary (#036b73, a deep teal used for CTAs, active states, and brand-critical interactions) and secondary (#65cada, a bright cyan-teal used for supporting actions and hover states). The primary color appears on the 'Schedule An Ignite Call' button and all primary CTAs; secondary (#65cada) is reserved for secondary buttons and decorative elements. Surfaces are near-white (#ffffff for base, #f4f4f4 for dim, #e5e5e5 for containers) to maximize readability and create visual breathing room. Text is dark gray (#343438 for primary text, #666666 for secondary). Error states use a muted red (#eb5857). The teal accent (#65cada) also appears in the hero illustration as a gradient accent, reinforcing the brand's visual identity. All interactive eleme

Typography

The type system pairs Poppins (300–700 weight) for headlines and Poppins/Open Sans (400–500 weight) for body text. Poppins at 300 weight (60px, -0.02em letter-spacing) creates the hero headline 'Your embedded marketing wing' with an elegant, modern lightness. Subheadings use Poppins 400–500 at 28–40px to maintain hierarchy without visual heaviness. Body copy is Open Sans 400 at 16–18px with 24–28px line-height for comfortable reading on light backgrounds. Labels and CTAs use Poppins 500 at 14px with 0.02em letter-spacing for precision and emphasis. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) on small labels (12px) when placed over colored backgrounds to ensure legibility. The type hierarchy is intentionally restrained: avoid mixing more than two font families in a single component, an

Layout

The layout follows a 12-column grid with a maximum container width of 1280px, maintaining a fluid layout on smaller screens. Section separation uses 40px (lg spacing) for major breaks and 24px (md spacing) for minor groupings. The hero section spans full width with 24px horizontal gutters on mobile, 40px on tablet, and 64px on desktop. Cards and content blocks use 24px internal padding (md spacing) and are separated by 40px vertical space. The design favors generous whitespace: minimum 24px margins around text blocks, 40px between sections. This breathing room reinforces the 'strategic' positioning—the interface feels unhurried and thoughtful. Container max-width of 1280px ensures readability on ultra-wide displays without overwhelming the user. Use the spacing scale consistently: xs (4px)

Elevation & Depth

Depth is achieved through subtle shadows and layering, not through dramatic contrast. The base layer (surface, #ffffff) has no shadow. Cards and containers use box-shadow: 0 8px 24px rgba(34, 44, 57, 0.08) for standard elevation, creating a soft, diffused depth. Elevated modals and overlays use box-shadow: 0 0 60px rgba(0, 139, 219, 0.247), a larger, more pronounced shadow with a slight blue tint that echoes the brand's teal accent. Hover states on buttons and interactive elements increase shadow to 0 4px 12px rgba(3, 107, 115, 0.2), signaling interactivity without jarring the user. Avoid hard

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are minimal and purposeful, never organic or heavily rounded. Buttons and inputs use 3px border-radius (DEFAULT) for a subtle, professional finish. Cards and containers use 6px (lg) for slightly more breathing room. Modals and overlays use 12px (xl) to signal elevation and importance. The full (9999px) radius is reserved for badges and pill-shaped elements only. This restraint communicates precision and control—the brand is not playful or casual, but rather strategic and grounded. Avoid border-radius above 12px except for full-width pil

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (#036b73 background, white text, 44px height, 6px 20px padding) use Poppins 500 at 14px with 0.02em letter-spacing. On hover, the background shifts to #025560 and shadow increases to 0 4px 12px rgba(3, 107, 115, 0.2). Secondary buttons use #65cada background with the same sizing and typography; on hover, they shift to #4db8c8. Tertiary (ghost) buttons have transparent background, #036b73 text, and a 1px #036b73 border; on hover, they gain a light gray background (#f3f3f3). All buttons use transition: background-color 200ms ease, box-shadow 200ms ease for smooth state changes. Focus states (keyboard navigation) use a 3px inset box-shadow: 0 0 0 3px rgba(3, 107, 115, 0.1).

Containers & Surfaces Cards use wh

Do's and Don'ts

**Do**

• Do use primary teal (#036b73) exclusively for primary CTAs, active states, and brand-critical interactions—never for decorative elements or secondary actions.
• Do maintain minimum 24px gutters and 40px section separation to create visual breathing room and reinforce the 'strategic' positioning.
• Do pair Poppins (300–500 weight) for headlines with Open Sans 400 for body text; never mix more than two font families in a single component.
• Do use soft, spread shadows (blur-radius 8–24px) for elevation; avoid hard borders or high-contrast outlines.
• Do apply 3px border-radius to buttons and inputs, 6px to cards, 12px to modals—never exceed 12px except for full-width pills.
• Do use transition: background-color 200ms ease, box-shadow 200ms ease on all interactive elements for smooth state changes.

**Don't**

• Don't use secondary teal (#65cada) on primary CTAs or in place of primary (#036b73)—secondary is for supporting actions and hover states only.
• Don't apply heavy shadows (blur-radius > 24px) or high-contrast borders; the aesthetic is minimalist and refined, not dramatic.
• Don't use font-weight above 600 for body text or mix Poppins and Open Sans within a single paragraph.
• Don't round corners beyond 12px except for full-width pills (9999px); excessive rounding undermines the technical, strategic positioning.
• Don't use background colors other than white and grays for cards and containers; reserve teal for interactive elements only.
• Don't apply instant state changes (transition: none); all interactive elements must transition smoothly over 150–200ms to feel polished and intentional.