Andreas

Overview

Andreas is a strategic product designer's portfolio site built on a foundation of playful minimalism and approachable sophistication. The brand serves early-stage founders, SaaS teams, and EdTech companies seeking to transform complex product ideas into investor-ready experiences. The aesthetic movement is 'Whimsical Clarity'—combining a soft, sky-blue (#a5dbff) canvas with bold, italicized typography and hand-drawn character illustrations that humanize the design process. The UI evokes a sense of creative energy and accessibility: the bright primary blue (#0099ff) acts as a beacon for action, while the warm cream surfaces (#fbf9f5) provide breathing room. The emotional response is one of optimism and clarity—users feel that their product challenges are solvable, and Andreas is the guide.

The brand voice is direct, conversational, and confident without being arrogant. Vocabulary leans into product language ('investor-ready', 'simplify complexity', 'brand with soul') and avoids jargon. The tone is warm but professional—think of a mentor who speaks plainly and gets things done. Example sentence in Andreas's voice: 'I help founders turn unclear product ideas into experiences investors actually want to fund.'

Colors

The color system is built around a primary accent of #0099ff (vibrant sky blue), which dominates CTAs, links, and interactive states. This primary is paired with a soft, pervasive background of #a5dbff (lighter sky blue), creating a cohesive, calming canvas that feels open and inviting. The surface stack uses warm, off-white tones (#fbf9f5 for container-lowest, #f0eeeb for container, #ddd9d0 for container-highest) to provide subtle depth without harsh contrast. Secondary colors include #94c5e5 (muted blue-gray) for supporting UI elements and #fbf5bc (warm cream) for highlights and tertiary accents. Error states use #fdb7b7 (soft coral) to signal caution without aggression. On-surface text is pure black (#000000) for maximum readability over the light backgrounds, with on-surface-variant at

Typography

The type system balances playfulness with professionalism through a three-tier hierarchy: display-level headlines use Inter Display at 56px, 500 weight, with -0.02em letter-spacing for a modern, airy feel; headline-lg (40px, 700 weight, italic) serves as the primary hero statement, with italics adding personality and movement; body text uses Spline Sans Mono at 16–18px with 0.01–0.02em letter-spacing to introduce a technical, approachable character. The monospace body font reinforces the 'design-as-craft' positioning—it feels intentional and deliberate. Labels and CTAs use Inter at 14px, 600 weight, with 0.01em letter-spacing for crispness. The smallest tier, label-sm, uses Fragment Mono at 12px with 0.05em letter-spacing for micro-interactions and metadata. When displaying body text over

Layout

The page uses a fluid, centered layout with a max-width of 1280px and a 12-column grid system. Horizontal padding is 24px (gutter) on mobile, scaling to 40px (lg spacing) on desktop. The hero section occupies the full viewport height with centered content, using 64px (xl spacing) for vertical separation between the greeting, headline, subheading, and CTA. The background is a continuous light blue (#a5dbff) that extends edge-to-edge, creating an immersive, unbroken canvas. Cards and content blocks use 24px (md spacing) padding internally and are separated by 40px (lg spacing) vertically. The container-max-width of 1280px ensures text remains readable at any screen size; line-length for body text stays between 60–80 characters. White-space is generous—never crowd elements. Use the spacing sc

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): the background is a flat, continuous light blue (#a5dbff) with no shadow. Level 2 (Standard Cards): use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) to lift cards slightly off the surface; background is #fbf9f5 (surface-container-lowest). Level 3 (Elevated/Hover): on hover, cards transition to box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) with a 200ms ease-out timing; background shifts to #fcf9f5 (surface-container-low). Primary CTAs use a tighter shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to feel

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are generous enough to feel approachable and modern, but not so extreme as to appear childish. Buttons and CTAs use the full radius (9999px) to create pill-shaped elements that feel inviting and clickable. Cards and containers use xl radius (1.5rem / 24px) for a soft, contemporary look. Input fields and smaller components use DEFAULT radius (0.5rem / 8px) for subtle definition. The rationale: full-radius buttons signal 'click me' with visual confidence; xl-radius cards feel like friendly containers; smaller radii on inputs maintain focus

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses a 48px height, 12px vertical padding, 32px horizontal padding, full radius (9999px), and the primary blue (#0099ff) background with white text. On hover, the background transitions to #0077cc with a 200ms ease-out timing and a glow shadow (0 6px 16px rgba(0, 153, 255, 0.25)). On active/press, the background darkens to #005fa3 and the shadow tightens (0 2px 4px rgba(0, 0, 0, 0.2)). Button-secondary uses a transparent background with a 2px border in primary blue, allowing the background to show through; on hover, it fills with primary-container (#c6e3ff) and text becomes on-primary-container (#003d7a). Links use the body-md typography with an underline (2px solid, offset 4px) in the primar

Do's and Don'ts

**Do**

• Do use the primary blue (#0099ff) exclusively for interactive elements—CTAs, links, focus states, and hover effects—to create a consistent, recognizable interaction language.
• Do maintain generous white-space (40px lg spacing between major sections) to keep the interface feeling open and uncluttered, reinforcing the 'clarity' part of the brand promise.
• Do apply the monospace body font (Spline Sans Mono) consistently for body text to reinforce the technical, craft-oriented positioning of the brand.
• Do use the full-radius pill shape (9999px) for all primary buttons to signal confidence and approachability; never use sharp corners on interactive elements.
• Do layer shadows subtly (md: 0 4px 12px, lg: 0 16px 40px) to create depth without drama; the brand is optimistic, not moody.

**Don't**

• Don't use dark colors (near-black, dark grays) for backgrounds or large surfaces; the brand lives in light, optimistic territory—stick to the warm cream and light blue palette.
• Don't apply harsh, high-contrast text (pure black on pure white) over the light blue background; use on-surface (#000000) with subtle shadows (0 1px 2px rgba(0, 0, 0, 0.08)) for legibility.
• Don't mix multiple accent colors in a single interface; primary blue (#0099ff) is the only interactive accent—secondary and tertiary colors are supporting, not competing.
• Don't use sharp corners (0px border-radius) on any interactive element; the brand is too approachable for geometric severity.
• Don't remove focus rings or outlines on interactive elements for aesthetic reasons; accessibility and brand consistency are non-negotiable.