ExploreYC

Overview

ExploreYC is a developer-centric, open-source API and database platform that transforms fragmented startup ecosystem data into a unified, queryable resource. It aggregates 22,174+ companies from Y Combinator, a16z, Product Hunt, and Hacker News, serving founders, investors, researchers, and engineers who need structured startup intelligence without scraping. The aesthetic is "Technical Minimalism with Startup Energy"—a clean, monospace-forward interface that celebrates the command-line heritage of developer tools while injecting vibrant orange (#FB651E) as the signature accent that signals action, urgency, and the entrepreneurial spirit. The visual language is deliberately austere: generous whitespace (rgb(248, 248, 246) background), high-contrast monospace typography (IBM Plex Mono and JetBrains Mono), and sharp 8px grid discipline create an environment where data and CTAs command attention without distraction.

The brand voice is precise, direct, and unapologetically technical. Sentences are short, active, and metric-driven—no marketing fluff. Example: "22,174 companies. 10+ countries. Instant semantic search. No scraping." The tone assumes the user is intelligent, time-constrained, and values efficiency over charm. Personality traits: pragmatic, transparent, builder-focused. The UI celebrates the developer's workflow: monospace fonts echo terminal aesthetics, the primary CTA ("Get API key") is always visible and orange, and every interaction feels intentional and fast.

Colors

The color system is rooted in a light, neutral foundation (surface #f8f8f6, on-surface #181827) that maximizes legibility for data-dense interfaces and code snippets. Primary (#fb651e, RGB 251, 101, 30) is the brand's signature orange—used exclusively for CTAs, active navigation states, and brand moments. It is vibrant enough to cut through the neutral palette (contrast ratio 8.2:1 against white) yet warm enough to feel approachable rather than clinical. Secondary (#2563eb, a medium blue) supports data visualization, secondary actions, and informational badges; it provides a cool counterpoint to the warm primary. Tertiary (#ffc93c, a golden yellow) is reserved for highlights, success states, and tertiary badges—used sparingly to avoid visual chaos. The surface stack is minimal: surface-bri

Typography

The type system is built on two monospace families—IBM Plex Mono for body and display text, JetBrains Mono for labels, code, and UI chrome—creating a cohesive, technical aesthetic that reinforces the developer-first positioning. Display (60px, 700 weight, -0.04em letter-spacing) is used for hero headlines and sets the tone of precision and scale. Headline-lg (40px, 700 weight) anchors major sections; headline-md (28px, 600 weight) breaks up content hierarchically. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for hero copy and long-form content; body-md (16px, 400 weight, 24px line-height) is the default for card text and descriptions. Label-md (14px, 600 weight, JetBrains Mono) is used for button text, navigation items, and form labels—the 600 weight ensures leg

Layout

The layout follows a 12-column grid with a max-width of 1280px (container-max-width), centered with 24px horizontal gutters on desktop and 12px on mobile. The page rhythm is built on a 8px unit scale: spacing tokens (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) create predictable, scannable rhythm. Hero sections use lg spacing (40px) for vertical separation between headline, subheading, and CTA; card grids use md spacing (24px) between items. The whitespace philosophy is "generous but purposeful"—the 248, 248, 246 background is not pure white, which reduces eye strain and creates subtle visual separation from browser chrome. Sections are separated by 64px (xl spacing) vertically; within sections, related elements are grouped with 24px (md spacing). The container max-width of 1280px ens

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than color shifts or blur effects. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on flat elements like list items and badges—a barely-perceptible lift; md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards, modals, and dropdowns—a clear separation from the background; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like sticky headers and overlays. Cards in the default state have no shadow (flat against the surface); on hover, they receive md elevation and a background shift from rgba(

Shapes

The shape philosophy is "Geometric Precision with Functional Softness"—corners are rounded just enough to feel contemporary and approachable, but not so much that they sacrifice the technical aesthetic. Buttons use rounded-md (0.75rem / 12px) for a balanced, clickable appearance; cards use rounded-md (12px) for consistency with buttons, creating a cohesive component family. Inputs use rounded-DEFAULT (0.5rem / 8px) for a slightly sharper feel that echoes form-field conventions. Badges and pills use rounded-full (9999px) to signal their compact, label-like nature. The rationale: 12px (md) is th

Components

Action Elements Buttons are the primary interaction primitive. Primary buttons (button-primary) use background #fb651e, text color #181827, JetBrains Mono 14px 600 weight, 10px vertical × 20px horizontal padding, and rounded-md (12px). On hover, the background transitions to #e65c00 over 150ms (transition: background-color 150ms ease-in-out), creating a tactile feedback loop without shadow. The 44px height ensures WCAG AAA touch-target compliance (minimum 44×44px). Secondary buttons (button-secondary) use a transparent background with a 1px outline-variant border (#c9c9cd), text color primary (#fb651e), and the same padding and typography. On hover, the background fills with surface-container-high (#f0f0ee) and the text remains primary, creating a "fill-on-hover" effect. Avoid using se

Do's and Don'ts

**Do**

• Do use primary (#fb651e) for all CTAs, active states, and brand moments—it is the visual signature and must be instantly recognizable.
• Do maintain 44px minimum height for all interactive elements (buttons, inputs, list items) to meet WCAG AAA touch-target standards.
• Do use monospace typography (IBM Plex Mono, JetBrains Mono) exclusively for body, labels, and UI text—never substitute system fonts or sans-serif faces.
• Do apply 150–200ms transitions on hover and focus states (background-color, box-shadow, border-color) to signal interactivity without feeling sluggish.
• Do preserve the 8px grid discipline: all spacing, padding, and border-radius values should be multiples of 4px (4, 8, 12, 16, 24, 32, 40, 64).
• Do use the surface stack (surface-bright #ffffff for interactive elements, surface-container #f8f8f6 for backgrounds) to create visual hierarchy without introducing new colors.

**Don't**

• Don't use primary (#fb651e) for body text, large surface areas, or non-interactive elements—it fatigues the eye and dilutes the brand signal.
• Don't introduce new accent colors beyond primary, secondary, and tertiary; the palette is intentionally constrained to maintain visual clarity.
• Don't use rounded-lg (16px) or rounded-xl (24px) for primary components like buttons or cards; reserve those for secondary surfaces like modals.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) to avoid a heavy, dated appearance; the design is flat-first with micro-depth.
• Don't use sans-serif or system fonts; monospace is non-negotiable and reinforces the technical, developer-first positioning.
• Don't reduce padding below 8px or spacing below 12px on desktop; the generous whitespace is a core part of the brand's clarity and approachability.