Open-source Projects

Overview

Open-source Projects is a curated discovery platform that celebrates the craft of open-source development through a distinctly print-inspired, architectural aesthetic. The brand serves developers, maintainers, and technology enthusiasts seeking to explore, bookmark, and share the most innovative repositories and tools shaping modern software. The design philosophy—termed "Typographic Minimalism"—uses monospace typography (Space Mono) as the primary visual anchor, paired with a clean, high-contrast light background (#f2f8fc) and pure black (#000000) for maximum legibility and authority. The interface evokes the precision of technical documentation and the editorial clarity of a curated broadsheet, where every element earns its space through functional necessity rather than decoration.

The brand voice is direct, knowledgeable, and unpretentious. Tone: matter-of-fact, occasionally witty, never marketing-speak. Vocabulary favors concrete terms ("hidden gems," "trending repositories," "developer tools") over abstractions. The tagline—"A broadsheet for software that doesn't ask for your email"—establishes the brand's irreverent stance on privacy and simplicity. Example sentence in brand voice: "2,343 projects in the index. Infinite possibilities."

Colors

The color system is anchored by a monochromatic foundation with strategic accent colors that signal interactivity and urgency. Primary (#000000) is the dominant text and button color, commanding attention through pure contrast against the light surface (#f2f8fc). This is not a dark-mode brand; the light background is intentional, evoking printed paper and ensuring maximum accessibility (WCAG AAA contrast ratio 21:1 on body text). Secondary (#ff6b35, a warm orange-red) is reserved for sponsored badges, promotional elements, and high-priority CTAs; it appears sparingly but with high visual impact, often paired with a gradient to #f7931e. Tertiary (#ffd700, gold) accents featured content and bookmarks, creating a visual hierarchy without competing with primary actions. The outline color (#666

Typography

The type system is built on a dual-font strategy: Space Mono (monospace, 700 weight) for all display, headline, and label text, and Rubik (sans-serif, 400–600 weight) for body and descriptive copy. This pairing creates a visual tension that reinforces the brand's technical-editorial identity—the monospace headlines feel authoritative and code-like, while Rubik body text remains warm and readable. Display text (58px, 700 weight, -0.02em letter-spacing) is used sparingly for hero headlines and major section breaks; it commands the page through scale and weight rather than color. Headline-lg (40px, 700 weight) anchors card titles and featured sections. Body-md (16px, 400 weight, 24px line-height) is the default for descriptive copy and maintains a generous line-height for on-screen reading co

Layout

The layout follows a 12-column grid with a fixed container max-width of 1280px, centered with symmetric margins. The page rhythm is governed by the spacing scale: lg (40px) separates major sections (hero, featured projects, newsletter), md (24px) creates breathing room between cards and content blocks, and sm (12px) provides internal padding within components. The hero section spans full-width with a left-aligned text column (6–7 columns) and a right-aligned stats box (4–5 columns), creating visual balance without symmetry. Card grids use a responsive 3-column layout on desktop (each card 1/3 width minus gutter), collapsing to 2 columns on tablet and 1 column on mobile. Gutters between cards are consistently 24px (md spacing). The newsletter signup section uses a single-column layout with

Elevation & Depth

Depth in this system is achieved through subtle shadows and border definition rather than layering or blur effects. The elevation scale uses three levels: sm (0 2px 8px rgba(0, 0, 0, 0.1)) for resting cards and input fields, md (0 4px 15px rgba(0, 0, 0, 0.15)) for hovered cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.2)) for floating elements like sticky headers or overlays. Cards at rest have a 1px solid border in outline-variant (#cccccc) and the sm shadow; on hover, the shadow increases to md and the card translates up 2px (transform: translateY(-2px)). Sponsored cards use a custom

Shapes

The shape philosophy is termed "Architectural Precision"—rounded corners are used functionally to soften hard edges without introducing organic or playful forms. Border-radius follows a strict scale: sm (0.25rem / 4px) for small UI elements like tag badges, DEFAULT (0.5rem / 8px) for input fields and standard buttons, md (0.75rem / 12px) for list items and secondary cards, lg (1rem / 16px) for primary cards and modals, xl (1.5rem / 24px) for large featured cards and hero sections, and full (9999px) for circular elements like bookmark buttons and pill-shaped badges. Sponsored badges use full (9

Components

Action Elements Buttons use a 44px minimum height with 12px vertical and 24px horizontal padding. Primary buttons (background: #000000, color: #f2f8fc, border: 1px solid #000000) are set in label-md (14px, 600 weight, 0.05em letter-spacing) and use a 300ms transition on background-color. On hover, the background shifts to primary-container (#1a1a2e) with a subtle outline-variant border, maintaining the monochromatic aesthetic. Secondary buttons are transparent with a 1px outline-variant border and primary text color; on hover, they fill with surface-container-high (#dce6f0) and the border becomes primary. All buttons use cursor: pointer and disable pointer-events when in a disabled state (opacity: 0.5, cursor: not-allowed).

Containers & Surfaces Cards are the primary content conta

Do's and Don'ts

**Do**

• Do use Space Mono for all headlines, labels, and metadata to reinforce the technical, editorial identity—never substitute with sans-serif for these roles.
• Do maintain the light background (#f2f8fc) and pure black text (#000000) for maximum contrast and accessibility; avoid dark mode unless explicitly requested.
• Do apply the 300ms ease transition to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel.
• Do use the secondary accent (#ff6b35) sparingly—only for sponsored badges, high-priority CTAs, and promotional elements—to preserve its visual impact.
• Do respect the spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) for consistent rhythm; never use arbitrary pixel values for margins or padding.
• Do include a 1px solid border on all cards and input fields using outline-variant (#cccccc) to define edges without heavy shadows.

**Don't**

• Don't use rounded corners greater than 24px except for circular elements; avoid organic, pill-shaped forms that contradict the architectural aesthetic.
• Don't apply multiple shadows or blur effects; the elevation system uses a single, precise shadow per level to maintain clarity.
• Don't mix typefaces within a single component—headlines are always Space Mono, body text is always Rubik; no exceptions.
• Don't use color to convey information alone; always pair color changes with text labels, icons, or state indicators for accessibility.
• Don't apply hover effects to non-interactive elements; reserve transform: translateY(-2px) and shadow increases for buttons, cards, and links only.
• Don't introduce new accent colors outside the defined palette (primary, secondary, tertiary, error); maintain visual consistency across all pages and states.