cofounder.co website design: fonts, colors and UI patterns

Design character

Cofounder markets agent automation with an unusually soft, storybook posture: pure white chrome, near-black serif-like display headlines, quiet gray body, and full-bleed pixel-art landscapes as the emotional core. UI chrome is minimal — text nav, ghost buttons, one black pill “Sign up” — while product moments appear as translucent glass prompts and toast cards floating over illustrated worlds (sunflowers, parks, laptops in grass).

What should survive adaptation:

• White marketing frame + #0a0a0a primary type and #646464 secondary
• Huge, calm display lines (46–90px) with generous whitespace
• Pixel / painterly illustration as primary media, not stock photos
• Black filled primary button vs outlined/ghost secondary
• Soft floating cards (~8–16px radius) over the art
• Sparse density; illustration does the heavy lifting

Foundations

Color

Measured:

Canvas reads pure white in chrome; illustration supplies full-spectrum greens, sky blues, and sunflower yellows. Keep UI monochrome so the art stays loud.

Typography

Families undeclared. Texture reads editorial/serif for display on several crops, with simpler UI sans for nav and cards.

Display is large and relatively light (not ultra-black poster type). Body stays classic 16/24.

Spacing and layout

• Wide desktop heroes with large top padding and centered copy blocks.
• Side padding often ~48–120px; some ultra-wide crops push huge outer margins.
• Pricing mobile-ish crop (~660px) still keeps centered stacks with ~24px padding and ~16px card radius.
• Gaps between chrome and art are intentional white bands or hard illustration bleeds.

Visual language

• Illustration-first: Pixel landscapes, soft clouds, props (laptop, book, flower) set tone.
• Glass UI: Frosted prompt bars and notification toasts over the scene; light borders and soft shadows (y:1–6, small blurs).
• Radius: 4–10px on small controls; ~16px on larger pricing cards; occasional full pills on primary buttons.
• Borders: 1px neutral outlines on ghosts and cards.
• Motion: Not established from stills; floating cards imply gentle product life without proving animation specs.

Components and states

1. Marketing header — wordmark; text links; ghost “Log in”; black pill “Sign up” / “Run a company”.
2. Hero — oversized claim, short gray subcopy, dual CTAs, optional text link (“Watch our launch video”).
3. Illustration stage — full-width pixel scene with overlaid prompt composer and email toast.
4. Side mini-nav (some crops) — vertical text list over white margin beside the art.
5. Pricing — large display price/headline on white; simple card with soft shadow (narrow viewport capture).

Only default resting states are visible.

Responsive behavior

Set includes ultra-wide home (~2540px), standard wide (~2048px), and a narrow pricing crop (~660px). Chrome collapses toward simpler stacked headers on smaller widths while illustration remains dominant on home. Exact breakpoint tokens were not recorded.

Practical guidance

Preserve

• Monochrome UI over rich pixel worlds
• Massive calm headlines and airy white margins
• Black pill primary + ghost secondary pairing
• Glass prompt/toast vocabulary for “product in the world”

Avoid

• Generic purple-gradient AI clichés
• Dense dashboard marketing above the fold
• Heavy shadows or neon accents on chrome
• Replacing illustration with abstract 3D blobs without a new art system

Adaptation

Build the brand around one illustration language and keep controls almost invisible. If art changes, keep the black/white type and button recipe stable.

Scope note

Six captures on / and /pricing (pins 8169–8173, 9470–9471). No declared fonts. Color roles only cover black/gray UI — illustration palettes are visual only. App-authenticated product screens were not in this set.