Bruno

Generated May 10, 2026

DESIGN.md for cofounder.co

cofounder.co

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design System Inspired by Cofounder

1. Visual Theme & Atmosphere

Cofounder's design system embodies a contemporary, approachable aesthetic that balances clarity with warmth. The visual language draws inspiration from a serene digital landscape—think pixelated nature scenes and an expansive sky—creating an inviting, optimistic mood. The palette prioritizes calm neutrals anchored by vibrant, nature-inspired accent colors that signal growth and possibility. This system avoids heavy shadows and stark contrasts, instead favoring subtle depth and refined typography to communicate sophistication without intimidation. The overall atmosphere is one of capability and accessibility: a platform designed for ambitious founders who appreciate thoughtful, minimalist design that stays out of the way while supporting complex workflows.

Key Characteristics:

Minimalist yet purposeful, with generous whitespace
Nature-inspired accent palette (lime green, golden yellow, soft teal)
Subtle elevation and depth through refined shadows
Clean, geometric typography with balanced proportion
High legibility paired with elegant restraint
Warm neutral tones create human connection in a digital space

2. Color Palette & Roles

Primary

Brand Primary (#A3E635): Core accent for highlights, active states, and primary CTAs; represents growth and vitality
Accent Gold (#EEC75D): Secondary highlight for emphasis, badges, and supporting visual interest
Accent Green (#71CE45): Tertiary accent for status indicators and supporting elements
Accent Teal (#34D399): Tertiary accent for completions, success states, and supporting calls-to-action

Interactive

Interactive Light (#F5F5F2): Hover states, soft backgrounds for interactive elements
Interactive Pressed (#E7E7E1): Active/pressed button states

Neutral Scale

Text Primary (#171717): Primary text color for all body copy, headings, and high-contrast elements
Text Secondary (#202020): Secondary text, slightly lighter than primary for visual hierarchy
Text Tertiary (#262323): Tertiary text for de-emphasized content
Text Muted (#383838): Muted text for disabled or very subtle content

Surface & Borders

Surface Default (#FBFBF8): Default card and surface background
Surface Alt (#F5F5F2): Alternative surface background for cards and containers
Surface Lightest (#F1F1EE): Lightest surface for nested or secondary containers
Background (#FFFFFF): Main page background and highest-contrast surfaces
Border (#202020 at 10% opacity): Subtle borders and dividers

3. Typography Rules

Font Family

Primary: Neoris (neoris) Fallback stack: neoris, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Secondary: TT Neoris Trial Variable Fallback stack: 'TT Neoris Trial Variable', neoris, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display / H1	Neoris	46px	400	49.68px	0px	Hero headlines and page titles
Heading 2	Neoris	40px	400	46px	0px	Section headers and major divisions
Heading 3	Neoris	20px	440	22px	0px	Subsection titles and card headers
Heading 4	Neoris	24px	400	27.6px	0px	Secondary headings and labels
Body / Paragraph	TT Neoris Trial Variable	16px	460	22.4px	0px	Default body text and descriptions
Body Span	Neoris	16px	400	24px	0px	Inline emphasized text
Small / Caption	TT Neoris Trial Variable	15px	460	22.5px	0px	Captions, secondary text, and metadata
Button / Link	Neoris	16px	400	24px	0px	Interactive text elements

Principles

Font weight deliberately stays light (400–460) to maintain elegance and prevent visual heaviness
Line height is generous (1.08–1.5× font size) to ensure readability and breathing room
Neoris is used for headers and interactive elements; TT Neoris Trial Variable for body copy to optimize legibility at smaller sizes
Typography hierarchy relies on size and weight, not color manipulation, preserving the neutral palette
All font sizes are pixel-based to ensure consistency across implementations

4. Component Stylings

Buttons

Primary Button (Solid Light)

Background: #F5F5F2
Text Color: #171717
Border: 1px solid rgba(32, 32, 32, 0.1)
Border Radius: 8px
Padding: 12px 24px
Font Size: 16px
Font Weight: 400
Line Height: 24px
Box Shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px 0px, rgba(255, 255, 255, 0.35) 0px 0px 0.357px 1.5px inset, rgb(255, 255, 255) 0px 2px 0px 0px inset
Min Height: 41px
Hover State: Darken background to #E7E7E1, increase shadow depth
Active State: Apply lighter shadow rgba(255, 255, 255, 0.35) 0px 0px 0.357px 1.5px inset

Secondary Button (Outline)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: #171717
Border: 1px solid #383838
Border Radius: 8px
Padding: 12px 24px
Font Size: 16px
Font Weight: 400
Line Height: 24px
Box Shadow: rgba(64, 64, 64, 0.12) 0px 0px 0px 1px, rgba(255, 255, 255, 0.24) 0px 2px 0px 0px inset, rgba(0, 0, 0, 0.25) 0px -0.5px 2px 0px inset, rgba(0, 0, 0, 0.03) 0px 2px 8px 0px, rgba(0, 0, 0, 0.16) 0px 3px 4px 0px
Min Height: 41px
Hover State: Lighten border to #202020, enhance inset highlight
Active State: Darken shadow and reduce inset highlight

Tertiary Button (Flat Light)

Background: #F1F1EE
Text Color: #171717
Border: 1px solid rgba(32, 32, 32, 0.1)
Border Radius: 8px
Padding: 12px 24px
Font Size: 16px
Font Weight: 400
Line Height: 24px
Box Shadow: rgba(0, 0, 0, 0.5) 0px 1px 1px 0px, rgba(255, 255, 255, 0.23) 0px 0px 0px 1px
Min Height: 41px
Hover State: Increase background to #F5F5F2
Active State: Reduce shadow intensity

Ghost Button

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: #171717
Border: 1px solid #383838
Border Radius: 8px
Padding: 12px 24px
Font Size: 16px
Font Weight: 400
Line Height: 24px
Box Shadow: none
Min Height: 41px
Hover State: Add subtle background rgba(23, 23, 23, 0.04), darken border
Active State: Increase background opacity to rgba(23, 23, 23, 0.08)

Cards & Containers

Standard Card

Background: #FBFBF8
Border Radius: 7.142px
Padding: 4px
Border: 0px
Text Color: #171717
Font Size: 16px
Font Weight: 400
Line Height: 24px
Box Shadow: rgb(255, 255, 255) 0px 0px 0px 0.714px inset, rgba(0, 0, 0, 0.08) 0px 0px 0px 0.714px, rgba(0, 0, 0, 0.04) 0px 0px 14.284px 0px, rgba(0, 0, 0, 0.01) 0px 16.427px 19.998px 0px, rgba(0, 0, 0, 0.02) 0px 7.142px 14.284px 0px, rgba(0, 0, 0, 0.03) 0px 2.143px 7.856px 0px
Hover State: Increase top shadow layer slightly for perceived lift

Elevated Card

Background: #F5F5F2
Border Radius: 7.142px
Padding: 0px
Border: 0px
Text Color: #171717
Font Size: 16px
Font Weight: 400
Line Height: 24px
Box Shadow: rgb(255, 255, 255) 0px 0px 0px 0.714px inset, rgba(0, 0, 0, 0.08) 0px 0px 0px 0.714px, rgba(0, 0, 0, 0.04) 0px 0px 14.284px 0px, rgba(0, 0, 0, 0.01) 0px 16.427px 19.998px 0px, rgba(0, 0, 0, 0.02) 0px 7.142px 14.284px 0px, rgba(0, 0, 0, 0.03) 0px 2.143px 7.856px 0px

Nested Card / Container

Background: #F5F5F2
Border Radius: 16px
Padding: 24px
Border: 0px
Text Color: #171717
Box Shadow: Softer version: rgba(0, 0, 0, 0.04) 0px 2px 8px 0px

Inputs & Forms

Text Input

Background: #FFFFFF
Border: 1px solid rgba(32, 32, 32, 0.15)
Border Radius: 8px
Padding: 12px 16px
Font Size: 16px
Font Weight: 400
Line Height: 24px
Text Color: #171717
Placeholder Color: rgba(32, 32, 32, 0.4)
Box Shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px inset
Focus State: Border to 1px solid #202020, shadow to rgba(0, 0, 0, 0.08) 0px 0px 0px 3px
Disabled State: Background #F5F5F2, border rgba(32, 32, 32, 0.08), text color rgba(32, 32, 32, 0.4)

Form Label

Font Size: 14px
Font Weight: 460
Line Height: 20px
Color: #171717
Margin Bottom: 8px
Display: block

Navigation

Horizontal Navigation (Header)

Background: rgba(0, 0, 0, 0) (transparent)
Display: flex
Gap: 32px
Align Items: center
Font Size: 16px
Font Weight: 400
Line Height: 24px
Text Color: #171717
Height: Auto

Navigation Link

Background: rgba(0, 0, 0, 0) (transparent)
Border: none
Padding: 6px
Font Size: 15px to 16px
Font Weight: 400 to 460
Color: #171717 or rgba(32, 32, 32, 0.8)
Text Decoration: none
Hover State: Opacity 0.7 or text color lighten to rgba(32, 32, 32, 0.6)
Active State: Border bottom 2px solid #A3E635 or equivalent primary accent

Badges & Status Tags

Badge Default

Background: #F5F5F2
Border Radius: 17px
Padding: 6px 12px
Font Size: 12px
Font Weight: 460
Color: #171717
Border: 1px solid rgba(32, 32, 32, 0.1)

Badge Accent

Background: #A3E635 or #34D399
Border Radius: 17px
Padding: 6px 12px
Font Size: 12px
Font Weight: 460
Color: #171717
Border: none

5. Layout Principles

Spacing System

Base Unit: 4px

Scale and Usage:

4px: Micro-spacing (internal component gaps, icon spacing)
8px: Tight spacing (button label padding, small component padding)
12px: Small spacing (form field internal gaps, compact list items)
16px: Standard spacing (default padding, section dividers)
20px: Medium spacing (card internal padding, smaller section separation)
24px: Comfortable spacing (nested container padding, block-level separation)
28px: Large spacing (form sections, content blocks)
32px: Extra-large spacing (major section separation, navigation gaps)
40px: Generous spacing (full-width sections, layout breathing room)
52px: Major section separation
60px: Extended gaps (hero to content, section transitions)
76px: Full-page section rhythm

Grid & Container

Max Width: 1280px (standard desktop container)

Column Strategy:

12-column grid for desktop layouts
6-column grid for tablet (768px+)
Single-column for mobile

Section Patterns:

Full-width background sections with constrained content container inside
Horizontal padding (left/right) of 24px to 40px depending on breakpoint
Vertical padding (top/bottom) of 40px to 76px depending on section weight

Whitespace Philosophy

Whitespace is treated as a first-class design element. The system favors generous spacing over compact layouts to create visual clarity and reduce cognitive load. Spacing ratios use the base unit consistently, creating visual rhythm. Content breathing room is prioritized—cards, buttons, and form fields have adequate internal and external margin. Section separation uses generous gaps to create visual hierarchy without visual noise.

Border Radius Scale

6px: Compact buttons, small UI elements
7.142px: Cards and medium containers
8px: Standard buttons, inputs, small containers
16px: Large containers, expanded cards, nested sections
17px: Badges and pills (fully rounded appearance)

6. Depth & Elevation

Level	Treatment	Use
Flat (L0)	No shadow; `box-shadow: none`	Ghost buttons, links, text-only elements
Subtle (L1)	`rgba(0, 0, 0, 0.04) 0px 2px 4px 0px`	Disabled states, secondary containers
Base (L2)	`rgba(0, 0, 0, 0.06) 0px 2px 3px 0px, rgba(255, 255, 255, 0.35) 0px 0px 0.357px 1.5px inset, rgb(255, 255, 255) 0px 2px 0px 0px inset`	Primary buttons, standard inputs
Elevated (L3)	`rgba(64, 64, 64, 0.12) 0px 0px 0px 1px, rgba(255, 255, 255, 0.24) 0px 2px 0px 0px inset, rgba(0, 0, 0, 0.25) 0px -0.5px 2px 0px inset, rgba(0, 0, 0, 0.03) 0px 2px 8px 0px, rgba(0, 0, 0, 0.16) 0px 3px 4px 0px`	Secondary buttons, hovered buttons
Pressed (L4)	`rgba(0, 0, 0, 0.5) 0px 1px 1px 0px, rgba(255, 255, 255, 0.23) 0px 0px 0px 1px`	Active/pressed button states
Card (L5)	`rgb(255, 255, 255) 0px 0px 0px 0.714px inset, rgba(0, 0, 0, 0.08) 0px 0px 0px 0.714px, rgba(0, 0, 0, 0.04) 0px 0px 14.284px 0px, rgba(0, 0, 0, 0.01) 0px 16.427px 19.998px 0px, rgba(0, 0, 0, 0.02) 0px 7.142px 14.284px 0px, rgba(0, 0, 0, 0.03) 0px 2.143px 7.856px 0px`	Cards, elevated containers

Shadow Philosophy: Shadows are subtle, refined, and multi-layered to create perceived depth without visual harshness. Inset highlights (light at top, darker at bottom) create a gentle embossed effect. Each shadow layer serves a purpose: outer soft shadow for depth, outer crisp shadow for definition, and inset layers for surface texture. This approach maintains elegance even at high elevations.

7. Do's and Don'ts

Do

Use the spacing scale consistently; combine values from the scale (e.g., 24px + 16px spacing) rather than introducing arbitrary gaps
Apply subtle shadows for depth; reserve maximum shadow intensity for rare interactive moments
Maintain the neutral-first color approach; accent colors are highlights, not backgrounds for large areas
Use generous line height (1.4–1.5×) to maximize readability, especially in body copy
Align interactive elements to the 8px grid for visual consistency
Implement focus states with a 3px colored outline or border for accessibility
Use Neoris for headings and interactive text; TT Neoris Trial Variable for body copy
Create clear visual hierarchy through size and weight, not color manipulation alone

Don't

Avoid high-contrast accent colors in large backgrounds; keep accents as highlights and call-to-action indicators
Don't introduce shadow opacity higher than 0.16 for the darkest layer without specific purpose
Don't use fewer than 12px padding inside buttons or form inputs
Avoid mixing border radius values arbitrarily; stick to the defined scale
Don't reduce line height below 1.4× font size for body text
Avoid stacking shadows without purpose; each layer should define depth or surface texture
Don't place heavy text (weight >500) on colored backgrounds without sufficient contrast
Avoid using the full primary accent (#A3E635) for large text at small sizes; it reduces readability

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	`<768px`	Single column, `16px` left/right padding, `28px` vertical section spacing, font sizes reduced by 1–2px, buttons full-width
Tablet	`768px–1024px`	6-column grid, `24px` left/right padding, `40px` vertical spacing, navigation condensed or hamburger menu
Desktop	`1024px–1280px`	12-column grid, `32px` left/right padding, `52px` vertical spacing, full navigation
Large Desktop	`>1280px`	Constrained max-width container, centered, `40px` left/right padding, `76px` vertical spacing

Touch Targets

Minimum touch target size: 44px × 44px (ensure all interactive elements meet this)
Buttons: Minimum 41px height, sufficient horizontal padding to reach 44px at smaller sizes
Links: Minimum 24px height with 6px vertical padding
Form inputs: Minimum 40px height with adequate internal padding
Navigation items: Minimum 44px tap area with 12px padding

Collapsing Strategy

Mobile (< 768px):

Stack all elements vertically
Reduce heading sizes: H1 to 32px, H2 to 28px, H3 to 18px
Collapse horizontal navigation to hamburger menu
Full-width cards with 16px padding
Single-column grid layout
Increase vertical spacing to separate sections

Tablet (768px–1024px):

6-column grid for multi-element layouts
Heading sizes reduced slightly: H1 to 40px, H2 to 36px
Side-by-side card layout (2 columns)
Horizontal navigation with selective items visible, rest in dropdown
Maintain baseline spacing but compress slightly

Desktop (1024px+):

Full 12-column grid
Original heading sizes and font weights
Multi-column card layouts (3–4 columns)
Full horizontal navigation
Maximum spacing and breathing room

9. Agent Prompt Guide

Quick Color Reference

Use these mappings for rapid component styling:

Primary CTA / Highlights: Primary (#A3E635)
Secondary CTA / Supporting: Accent Gold (#EEC75D)
Success / Completion: Accent Teal (#34D399)
Tertiary Accent: Accent Green (#71CE45)
Primary Text: Text Primary (#171717)
Button Backgrounds (Light): Surface Alt (#F5F5F2)
Card Backgrounds: Surface Default (#FBFBF8)
Heading Text: Text Primary (#171717)
Body Copy: Text Primary (#171717)
Disabled Text: Text Muted (#383838)
Main Background: Background (#FFFFFF)
Borders: rgba(32, 32, 32, 0.1)

Iteration Guide

Follow these rules in order of importance:

All colors use uppercase hex (e.g., #A3E635, #171717); transparency via rgba() with 0.X decimal opacity
Typography must be pixel-perfect: Specify both font-size and line-height; use Neoris for headers and interactive text, TT Neoris Trial Variable for body
Spacing adheres to the 4px base unit scale (4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 52px, 60px, 76px)
Border radius uses only the defined scale (6px, 7.142px, 8px, 16px, 17px)
Shadows are multi-layered and specific: Copy exact box-shadow values from the elevation table; never simplify
Interactive elements have clear hover and active states defined by background, border, and shadow changes
All buttons have a minimum height of 41px and width proportional to padding + label width
Forms have visible focus states: Add 3px outline or enhanced border on :focus
Cards and containers maintain the inset highlight (rgba(255, 255, 255, ...)) for surface refinement
Responsive breakpoints trigger layout changes at 768px and 1024px with mobile-first progression

Want a DESIGN.md like this for your own website?