Y Combinator

Overview

Y Combinator embodies 'Institutional Minimalism'—a design philosophy that strips away ornament to reveal pure editorial authority. The brand serves ambitious founders and investors who value clarity over decoration, substance over trend. The aesthetic evokes a prestigious research institution or foundational text: cream-colored surfaces recall aged paper, serif typography commands attention like a manifesto, and the sparse use of a vibrant orange accent (#fb651e) functions as a seal of approval or call-to-action. The emotional response is one of credibility, intellectual rigor, and access to an exclusive network. Voice: direct, confident, occasionally wry. The brand speaks in declarative statements without hedging—"YC turns builders into formidable founders"—and assumes the reader is already ambitious. Example sentence: "We invest in founders, not ideas."

Colors

The color system is built on a foundation of near-white surfaces (rgb(245, 245, 238) / #f5f5ee) paired with pure black text (rgb(0, 0, 0) / #000000), creating maximum legibility and institutional gravitas. Primary (#000000) is used for all body text, navigation, and structural elements; it is the default, the baseline, the voice of authority. Secondary (#fb651e, a warm orange-red) is reserved exclusively for high-intent CTAs—the 'Apply' button, the 'Launch YC' link—and appears sparingly to create visual urgency without noise. Tertiary (#458cc9, a muted corporate blue) supports secondary information, links, and data visualization. The surface stack progresses from #fafaf8 (surface-container-lowest, near-white) through #f5f5ee (surface-container, the default page background) to #e3dfd7 (surf

Typography

The type system pairs Source Serif 4 (a contemporary serif with generous proportions) for editorial content—headlines, body copy, and quotations—with DM Sans (a geometric sans-serif) for interface labels, navigation, and metadata. This pairing communicates 'serious but approachable': the serif lends gravitas and editorial authority, while the sans-serif keeps navigation scannable and modern. Display (72px, 400 weight, -0.02em tracking) is reserved for hero statements and page titles; it commands the room. Headline-lg (48px, 400 weight) is used for section breaks and major content divisions. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for long-form content and maintains 1.56x line-height ratio for comfort. Label-md (14px, 600 weight, DM Sans) is applied to all b

Layout

The page layout uses a 12-column grid with a max-width of 1280px, centered on viewport. Content breathing room is achieved through consistent application of the spacing scale: lg (40px) separates major sections, md (24px) separates cards and subsections, sm (12px) separates inline elements. The gutter width is 24px on desktop, reducing to 16px on tablet and 12px on mobile. Hero sections occupy full-width with centered content, using display typography (72px) and ample vertical padding (80px top/bottom) to create a sense of arrival. Card-based layouts use a 3-column grid on desktop, 2-column on tablet, 1-column on mobile. Container max-width of 1280px ensures text lines never exceed ~70 characters, maintaining readability. White space is treated as a design element, not a void: generous mar

Elevation & Depth

Depth in the Y Combinator system is achieved through subtle layering rather than dramatic shadows. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements, md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for full-page overlays and dropdowns. Shadows are always soft and diffuse—never sharp or high-contrast—to maintain the brand's refined aesthetic. Cards at rest have no shadow; on hover, they elevate to md shadow with a 200ms transition. Modals and popovers use md shadow with a semi-tra

Shapes

The shape philosophy is 'Architectural Clarity'—borders and radii are used sparingly and purposefully to create visual structure without ornamentation. Buttons use full radius (9999px) to signal their interactive nature and create a soft, approachable CTA; this is the only component that uses full radius. Cards and modals use md radius (0.75rem / 12px) to provide subtle definition without appearing playful or rounded. Input fields use DEFAULT radius (0.5rem / 8px) for a neutral, utilitarian appearance. Navigation items and list elements use no radius (0px) to maintain a clean, linear aesthetic

Components

Action Elements Buttons are the primary interaction mechanism and use two distinct styles: primary (black background, white text, full radius, 44px height, 12px vertical / 24px horizontal padding) for high-intent actions like 'Apply' and 'Launch YC', and secondary (transparent background, black text, 1px black border, DEFAULT radius, 44px height) for lower-priority actions like 'Learn More'. Primary buttons use Source Serif 4 at 14px / 400 weight to maintain typographic consistency with headlines. On hover, primary buttons darken to #1a1a1a and add md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) with a 200ms transition. Secondary buttons on hover shift to surface-container-high background (#ede9e1) with no shadow. A tertiary button style uses the secondary color (#fb651e) for accent CTAs; o

Do's and Don'ts

**Do**

• Do use Source Serif 4 for all headlines and body copy to maintain editorial authority and brand consistency.
• Do reserve the orange secondary color (#fb651e) exclusively for high-intent CTAs like 'Apply' and 'Launch YC'—never use it for decorative elements or low-priority actions.
• Do apply lg spacing (40px) between major sections and md spacing (24px) between cards to create visual rhythm and reduce cognitive load.
• Do use full-radius (9999px) only on primary action buttons; all other components use DEFAULT or md radius to maintain architectural clarity.
• Do apply md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) on card hover and modal states with 200ms transition to create subtle depth without visual noise.
• Do maintain 1.56x line-height ratio (28px for 18px body text) to ensure comfortable reading of long-form content.
• Do use pure black (#000000) for all body text and primary navigation to maximize legibility and institutional authority.

**Don't**

• Don't use gray text for primary content; always use primary (#000000) for body copy and navigation to maintain contrast and authority.
• Don't apply radius to dividers, borders, or text-only elements; reserve radius for interactive components and containers.
• Don't use the secondary orange color (#fb651e) for anything other than high-intent CTAs; never use it for badges, tags, or decorative accents.
• Don't exceed 700 font-weight in any component; the brand uses only 400 (body/headlines) and 600 (labels) to preserve measured tone.
• Don't add shadows to elements at rest; only apply shadows on hover, focus, or elevated states to maintain visual clarity.
• Don't use pure white (#ffffff) as the page background; always use surface (#f5f5ee) to reduce eye strain and reinforce the editorial aesthetic.
• Don't introduce new typefaces beyond Source Serif 4 and DM Sans; these two families are sufficient for all typographic needs and maintain brand coherence.