imgsrc.io — Design System

1. Visual Theme & Atmosphere

Imgsrc.io is a developer tool with the clarity and discipline of a well-designed documentation site. Its white canvas and near-black text establish an immediately functional tone — this is software infrastructure, and the design communicates reliability over personality. The use of Geist Sans (Vercel’s own typeface) alongside a Next.js + Tailwind stack signals a product built within — and comfortable within — the modern Vercel ecosystem.

The atmosphere is clean, compact, and developer-confident. Nothing decorates for its own sake. Shadows are barely there. Borders are fine. The spacing is tight but never cramped. It feels like opening a well-structured terminal window or a tight component library — purposeful precision.

The design system is built on shadcn/ui conventions — the custom property naming (--background, --foreground, --muted, --radius) is the exact shadcn/ui token vocabulary, confirming this is a Radix/shadcn-based component system.

2. Color Palette & Roles

Background / Canvas

• hsl(0 0% 100%) / rgb(255, 255, 255) — Pure white canvas; --background
• hsl(0 0% 96.1%) / rgb(245, 245, 245) — Secondary/muted surface; --secondary, --muted, --accent
• hsl(0 0% 89.8%) / rgb(229, 229, 229) — Borders and inputs; --border, --input

Text / Foreground

• hsl(0 0% 3.9%) / rgb(10, 10, 10) — Near-black; --foreground, --card-foreground
• hsl(0 0% 9%) / rgb(23, 23, 23) — Primary interaction colour; --primary, button defaults, hover states
• hsl(0 0% 45.1%) / rgb(115, 115, 115) — Muted foreground; --muted-foreground — for captions, secondary labels

Destructive

• hsl(0 84.2% 60.2%) — Red; --destructive — standard error/danger token

Ring / Focus

• hsl(0 0% 3.9%) / rgb(10, 10, 10) — --ring — focus ring uses near-black, not the OS blue

Absent: No brand colour. No accent hue. The entire system is neutral greyscale — every token in the shadcn variable set maps to a shade between white and near-black.

3. Typography Rules

Geist Sans (__GeistSans_3a0388) is the sole typeface — Vercel’s custom geometric sans-serif, designed for interface legibility. The fallback is ui-sans-serif, system-ui, sans-serif.

Scale

• H2: 14px / 500 weight / 20px line-height — unusually small for a heading; used for section labels or sidebar titles
• H3: 16px / 600 weight / 16px line-height / −0.4px tracking — tighter, more prominent item headings
• Body: 16px / 400 / 24px line-height
• Paragraphs: 14px / 400 / 20px line-height
• Buttons: 14px / 500 / 20px line-height
• Labels: 14px / 500 / 14px line-height (compressed, for form labels)
• Inputs: 14px / 400 / 20px line-height

The heading size inversion is notable: H2 (14px/500) is smaller than H3 (16px/600). This suggests H2 is used for metadata/section labels, while H3 is the primary content-level heading in the UI.

No display type, no large hero headings detected. The largest element is H3 at 16px — this is a UI-first site, not a marketing site. Content hierarchy is built through weight and colour, not size.

4. Component Stylings

Buttons:

• Default: white background, near-black border (rgb(229,229,229)), near-black text
• Hover: shifts to secondary surface rgb(245,245,245), text darkens to rgb(23,23,23)
• Focus: outline removed; ring applied via box-shadow: 0 0 0 1px rgb(10,10,10)

Inputs:

• Transparent background, --border colour border
• Focus: ring applied as box-shadow 0 0 0 1px rgb(10,10,10) — same as button focus
• Very subtle drop shadow: rgba(0,0,0,0.05) 0px 1px 2px

Cards: div.rounded-xl with white background. Radii use --radius: 0.5rem (8px) as base, with variants at 6px, 12px, and 9999px for pill shapes.

Shadows: Two levels only:

• Micro: rgba(0,0,0,0.05) 0px 1px 2px — barely-there
• Subtle: rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px

Nav: Transparent background, rgb(229,229,229) border — an underline or surrounding border that delineates the nav from page content.

5. Layout Principles

Main content area uses 24px 32px padding (vertical / horizontal) — compact and consistent. Footer matches: 24px 32px. This symmetry creates a contained, app-shell-like feel.

The layout is application-style — no hero, no marketing sections with generous padding. This is a tool UI. Content lives close to edges with precise internal spacing.

Breakpoints: 600px, 640px, 768px, 1024px, 1400px — five points, strongly matching Tailwind’s default scale (sm: 640, md: 768, lg: 1024) plus a wide-desktop cut at 1400px. The 600px breakpoint adds a step between mobile and sm for medium phones.

6. Depth & Elevation

Depth is minimal by design. Only two shadow values exist:

1. rgba(0,0,0,0.05) 0px 1px 2px — barely perceptible card lift
2. rgba(0,0,0,0.1) 0px 1px 3px + 0px 1px 2px -1px — standard shadcn/ui shadow-sm equivalent

Focus states use ring-style box-shadow (0 0 0 1px near-black) rather than colour glow — clean and accessible.

The surface hierarchy is: white canvas → rgb(245,245,245) secondary → rgb(229,229,229) border. Three-step greyscale from canvas to border. Predictable and systematic.

7. Do’s and Don’ts

Do:

• Use Geist Sans for all text — this typeface is load-optimised for Vercel/Next.js deployments.
• Follow the shadcn/ui CSS variable convention (--background, --foreground, --muted, etc.) for all tokens.
• Use --radius: 0.5rem (8px) as the base radius. Compound to 12px for cards.
• Apply focus rings as box-shadow: 0 0 0 1px rgb(10,10,10) — no OS-blue outline.
• Keep shadows to two levels: 1px micro and 3px subtle.
• Use compact 24px/32px padding for application containers.
• Use rgb(229,229,229) for all borders — consistent with --border token.

Don’t:

• Add colour accents. The system is greyscale by design.
• Use large display headings — this is a UI-first system.
• Use font-weight: 300 or 700 outside of very specific use cases.
• Add decorative shadows larger than 3px blur.
• Override the focus ring with browser default blue — the near-black ring is intentional.
• Break the 24/32px padding rhythm in the main application area.

8. Responsive Behavior

Five breakpoints map tightly to Tailwind defaults. The application shell at 24px 32px padding likely reduces to 16px or full-width at mobile. Navigation may collapse below 640px.

The 14–16px heading scale means no typographic rescaling is needed at mobile — headings are already compact enough for small screens. This is a notable advantage of UI-scale typography.

The 1400px breakpoint caps the wide-desktop layout — content is likely centered with a max-width container at this point.

9. Agent Prompt Guide

Build in the style of imgsrc.io: white canvas, Geist Sans throughout (14–16px scale, weights 400/500/600 only). Use the full shadcn/ui CSS variable system — --background: white, --foreground: hsl(0 0% 3.9%), --border: hsl(0 0% 89.8%), --radius: 0.5rem. All surfaces are greyscale: white, rgb(245,245,245) secondary, rgb(229,229,229) border. Focus rings use box-shadow: 0 0 0 1px rgb(10,10,10), not browser outline. Shadows: two levels, max 3px blur at 5–10% opacity. Application padding: 24px 32px consistently. Breakpoints: 600, 640, 768, 1024, 1400px. This is a developer tool UI — compact, systematic, zero decoration.

Generated by Sparkbites — extracted from live CSS analysis