No-Code Supply Co

Overview

No-Code Supply Co is a curated directory and resource hub for designers, developers, and AI enthusiasts seeking inspiration and tools. The brand embodies "Warm Minimalism"—a design philosophy that pairs earthy, high-contrast color palettes (deep charcoal #1d1c1a with cream #eeebdd) with functional clarity and purposeful whitespace. The aesthetic evokes a carefully organized studio or library: every element has a reason, every interaction feels intentional. The UI communicates expertise through restraint—no unnecessary ornament, no gradients, no animations for their own sake. Users feel they've discovered a trusted curator, not a marketplace.

The voice is direct, knowledgeable, and unpretentious. No marketing hyperbole; instead, precise language and clear taxonomy. Example: "2,754 hand-picked resources across 18 categories" rather than "thousands of amazing tools." The brand personality is that of a thoughtful designer who has spent years collecting the best work and now shares it without ego—confident enough to let the resources speak for themselves.

Colors

The color system is anchored in a high-contrast, warm-neutral foundation. Primary surface (#1d1c1a) and primary text (#eeebdd) create a dark-mode-first aesthetic that reduces eye strain and emphasizes content. The primary accent color (#d14424, a burnt-orange-red) is reserved exclusively for calls-to-action, interactive states, and brand moments—it appears on the SUBSCRIBE button, selection highlights (::selection background: #d14424, color: #eeebdd), and hover states on cards. This restraint makes the primary color feel earned and urgent.

Secondary colors support specific functions: tertiary (#f89d3f, a warm gold-orange) is used for badges and supplementary highlights; secondary (#73c2ff, a bright sky blue) appears in accent contexts and supporting UI. The surface stack (surface-containe

Typography

The type system pairs General Sans (a geometric, humanist sans-serif) for all body and heading content with JetBrains Mono for labels, metadata, and technical contexts. This pairing reinforces the brand's dual nature: approachable yet precise. Display (60px, 700 weight, -0.04em tracking) commands attention on hero sections; headline-lg (40px, 600 weight) anchors major sections; body-md (16px, 400 weight, 24px line-height) ensures readability at 1200px container width. Labels use JetBrains Mono at 12–14px with 0.01–0.05em tracking to signal metadata and UI chrome. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm) when placed over busy card backgrounds to maintain contrast. All type is rendered with -webkit-font-smoothing: antialiased and -moz-font-smoothing: antial

Layout

The layout follows a 12-column grid with a 1200px max-width container, centered with 24px gutters on desktop. The page rhythm uses semantic spacing: 40px (lg) separates major sections (hero, featured collections, footer), 24px (md) divides subsections and card groups, 12px (sm) provides breathing room within cards and between list items. The hero section occupies full viewport height with the tagline set in headline-md (28px) for visual hierarchy. The resource grid below uses CSS Grid with responsive column counts: 1 column on mobile, 2 on tablet (768px+), 3 on desktop (1200px+). Cards maintain 24px internal padding and 8px border-radius for a soft-technical feel. The search bar and filter tags sit in a sticky header (position: sticky, top: 0, z-index: 100) with a semi-transparent backdrop

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-color layering rather than dramatic drop shadows. Level 1 (Base): the body background (#1d1c1a) with no shadow. Level 2 (Standard Card): surface-container-high (#292825) with a 1px border (outline: #3f3e3a) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Hover): surface-container-highest (#333230) with the same border and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2). Focus states use a 3px inset box-shadow: 0 0 0 3px rgba(209, 68, 36, 0.1) to create a warm glow without lifting the element. Input fields and modals us

Shapes

The shape language is "Soft-Technical"—a balance between approachability and precision. Buttons and inputs use 4px border-radius (0.25rem), a subtle rounding that feels modern without being playful. Cards use 8px (0.75rem) for a slightly softer appearance that invites interaction. Search dropdowns and modals use 4px to maintain consistency with form elements. Tags and badges use full (9999px) for a pill-shaped appearance that signals they are discrete, removable entities. The rationale: small radii (4–8px) avoid the sterile feel of sharp corners while resisting the softness of 16px+ radii, whi

Components

Action Elements Buttons come in two primary variants. **button-primary** (background: #d14424, color: #ffffff, padding: 9.52px 10.88px, height: 40px, border-radius: 4px, font-family: JetBrains Mono, font-size: 14px) is used for primary CTAs (SUBSCRIBE, SUBMIT). On hover, shift background to #b2391e with a 150ms ease-in-out transition. **button-secondary** (background: #eeebdd, color: #1d1c1a, padding: 7.04px 17.6px, height: 40px, border-radius: 4px, font-family: General Sans, font-size: 16px) is used for secondary actions (About, Learn More). On hover, shift background to #d9d6cc. Both buttons have no border and no box-shadow; they rely on color contrast and the primary accent to signal interactivity.

Containers & Surfaces **card** (background: #292825, border: 1px solid #3f3e3a,

Do's and Don'ts

**Do**

• Do use the primary accent (#d14424) exclusively on CTAs, focus states, and brand moments—never on passive content or backgrounds.
• Do maintain the 24px gutter and 1200px max-width on desktop to preserve the curated, organized feel.
• Do apply the warm-neutral surface stack (surface-container-low through surface-container-highest) to create depth without shadows.
• Do use JetBrains Mono for all labels, metadata, and technical content to reinforce precision and expertise.
• Do apply 150ms ease-in-out transitions on all interactive state changes (hover, focus, active) to feel responsive without being jarring.

**Don't**

• Don't use gradients, blur filters, or glassmorphism—the brand relies on solid colors and clear hierarchy.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.2)—excessive depth undermines the minimalist aesthetic.
• Don't use border-radius larger than 8px on cards or 4px on buttons—the soft-technical feel depends on restraint.
• Don't mix typefaces beyond General Sans and JetBrains Mono—introducing a third font dilutes the brand identity.
• Don't use the primary accent (#d14424) on non-interactive elements or backgrounds—it must remain a signal of actionability.