Bending Spoons

Overview

Bending Spoons is a product acquisition and improvement company that combines technical excellence with creative ambition. The design system reflects a 'High-Contrast Minimalism' aesthetic: a pure black canvas (rgb(0, 0, 0)) serves as the foundation, while a vibrant lime-green accent (#c7ff9f) and pure white (#ffffff) create striking focal points. The brand personality is direct, confident, and unapologetically bold—it speaks to engineers, designers, and visionary leaders who appreciate precision without decoration. The UI evokes a sense of technological clarity and purposeful restraint: every pixel earns its place.

The voice is concise and action-oriented, favoring active verbs and concrete outcomes. Bending Spoons avoids corporate jargon and instead uses language that feels both technical and human. Example sentence in brand voice: 'We acquire iconic products and make them better—through engineering, design, and relentless iteration.'

Colors

The color system is built on extreme contrast and strategic accent deployment. The primary surface is pure black (#000000), which provides maximum visual separation and allows accent colors to dominate. White (#ffffff) is reserved for primary CTAs, headers, and high-emphasis text—it functions as both a neutral and a call-to-action color due to its high contrast against the black background. The secondary accent is a vibrant lime-green (#c7ff9f), used sparingly for highlights, italicized text in headlines, and interactive states. This green appears at 89 instances across the site, making it the brand's signature color for emphasis and energy. Tertiary blue (#3860be, #5867ed) supports secondary actions and data visualization. Error red (#fb2c36) is reserved for destructive actions and alerts

Typography

The type system is anchored in Instrument Sans, a geometric sans-serif that conveys technical precision and modern confidence. Display sizes (100px, 56px) use regular weight (400) to maintain visual lightness despite their scale, creating an airy, confident presence. Headline and title levels (40px–28px) remain at 400 weight for consistency, with letter-spacing tightened to -0.01em to -0.015em to enhance impact. Body text (18px, 16px) sits at 400 weight with 24–28px line-height for comfortable reading on dark backgrounds. Labels and UI text use 600 weight to ensure legibility at smaller sizes (12px–14px). Italic styling is applied selectively to secondary keywords in headlines (e.g., 'acquire and *improve*') to create visual hierarchy without introducing additional colors. All text on pure

Layout

The layout system uses a 12-column grid with a max-width of 1440px, allowing flexible content scaling from mobile to desktop. The gutter is consistently 24px, creating breathing room between sections. Hero sections use full-width backgrounds with centered content, typically 896px–1024px wide, to balance visual impact with readability. Section spacing follows the semantic scale: lg (40px) separates major sections, md (24px) separates subsections, and sm (12px) separates inline elements. Container max-widths vary by context (860px for narrow content, 1080px for standard, 1440px for full-width), but all adhere to the 24px gutter rule. White-space is generous—the brand favors breathing room over density. Padding inside cards and containers uses md (24px) for standard spacing, sm (12px) for com

Elevation & Depth

Depth is achieved through subtle shadows and layered surfaces rather than dramatic drop-shadows. The elevation system uses three levels: sm (0 1px 3px rgba(0, 0, 0, 0.12)) for subtle separation of interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.2)) for floating panels and popovers. Hover states on cards transition from sm to md shadow with a 200ms ease-out timing. The black background naturally creates depth through color contrast—white and green elements appear to float without requiring heavy shadows. Modals and overlays use a

Shapes

The shape philosophy is 'Technical Precision with Selective Softness'—sharp corners dominate, with rounded corners reserved for specific interaction contexts. Buttons use full-radius (9999px) to signal primary actions and create a pill-shaped affordance that feels approachable despite the austere aesthetic. Secondary buttons and inputs use small-to-medium radius (4px–10px) to maintain a technical feel while softening harsh edges. Cards and containers use md radius (10px) for a subtle, modern appearance. Dividers and borders are sharp (0px radius). The rationale: full-radius buttons stand out a

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use white background (#ffffff) with black text, full-radius (9999px), 48px height, and 12px 28px padding. On hover, the background transitions to light gray (#d4d4d4) with a 200ms ease-out timing. Secondary buttons use a dark gray background (#262626) with white text, 4px radius, 44px height, and a 1px outline in #525252. Ghost buttons have transparent backgrounds with white text and a 1px transparent border; on hover, the background becomes rgba(255, 255, 255, 0.08). All buttons use label-md typography (14px, 600 weight) and include a box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for subtle depth.

Containers & Surfaces Cards use surface-container background (#171717), 10px radius, 24px padding, and a 1px b

Do's and Don'ts

**Do**

• Do use white (#ffffff) for primary CTAs and high-emphasis text—it creates maximum contrast and signals importance.
• Do apply the secondary green (#c7ff9f) accent sparingly: use it for italicized keywords, interactive states, and focus indicators to maintain visual impact.
• Do maintain 24px gutters and generous white-space; the brand thrives on breathing room and clarity.
• Do use full-radius (9999px) exclusively for primary buttons to create a distinctive affordance that stands out against sharp card corners.
• Do apply 200ms ease-out transitions on all hover and focus states to create smooth, predictable interactions.
• Do use Instrument Sans at 400 weight for headlines and 600 weight for labels to maintain the technical, confident tone.

**Don't**

• Don't use the secondary green (#c7ff9f) as a background color for large areas—it's an accent, not a surface. Reserve it for text, icons, and small UI elements.
• Don't add drop-shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.2))—the brand aesthetic is sharp and direct, not soft or diffuse.
• Don't use rounded corners on cards or containers; stick to 10px (md) or leave them sharp (0px). Avoid intermediate values like 6px or 8px.
• Don't mix typefaces—Instrument Sans is the only font family. Avoid system fonts, serif fonts, or monospace fonts in the main UI.
• Don't use colors outside the defined palette. The brand relies on extreme contrast; introducing new colors dilutes the visual system.
• Don't apply text-shadow or text-outline effects except on white text over photographic backgrounds (0 2px 4px rgba(0, 0, 0, 0.3)).