# Imgs.so — Design System
> A minimalist image hosting and management platform.
- **Canonical:** https://uiuxskills.com/library/imgs-so
- **Source:** https://imgs.so
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:06.089Z

---

---
version: alpha
name: Imgs.so
description: A minimalist image hosting and management platform.
tone: Professional, direct, and minimalist.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-dim: "#F9F9F9"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  neutral: "#717171"
  outline: "#E5E5E5"
  error: "#DC2626"
  success: "#16A34A"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: 100%
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#000000"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FEE2E2"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Imgs.so utilizes a clean, high-contrast aesthetic focused on utility and speed. The interface is sparse, prioritizing content over decorative elements to ensure a distraction-free experience for users.

## Colors

The color palette is strictly monochromatic, relying on high-contrast black and white to establish hierarchy and focus. Semantic colors are used sparingly to indicate success or error states.

*   Primary (inferred) (#000000): Primary action color for buttons and active states.
*   Surface (inferred) (#FFFFFF): Main background color for the application.
*   Surface-dim (inferred) (#F9F9F9): Subtle background for secondary containers.
*   On-surface (inferred) (#1A1A1A): Primary text color for high readability.
*   Outline (inferred) (#E5E5E5): Border color for inputs and dividers.
*   Error (inferred) (#DC2626): Semantic color for error states.
*   Success (inferred) (#16A34A): Semantic color for success states.
*   Focus-ring (inferred) (#000000): Focus ring color for accessibility.

## Typography

Typography relies on a system sans-serif font, using size and weight to establish hierarchy rather than decorative styling.

*   Display-lg (inferred): Used for primary page headings.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard body text.
*   Label-md (inferred): Button and input labels.
*   Label-sm (inferred): Small helper text.

## Layout

The layout follows a centered, narrow-column approach, particularly for authentication and utility pages. It relies on a 4px base grid, with {spacing.md} and {spacing.xl} defining vertical rhythm. The page pattern follows a strict order: `nav`, `hero`, `auth-form`, `footer`. The hero section features a centered headline and subhead; on mobile, the authentication form expands to fill the width.

## Elevation & Depth

Depth is used sparingly, relying on subtle borders (`{colors.outline}`) to define containers rather than heavy shadows. Elevation values (inferred) are provided to maintain consistent depth across the application.

*   Elevation.sm: Card lift and minor container separation.
*   Elevation.md: Dropdowns and popover menus.
*   Elevation.lg: Modals and drawer overlays.

## Shapes

The brand uses a subtle rounding strategy to maintain a clean, modern, and structured appearance.

*   {rounded.sm}: Applied to input fields and small UI elements.
*   {rounded.md}: Applied to cards and larger containers.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{typography.label-md}`. It is designed to be full-width in form contexts. Use the secondary button variant for non-primary actions, ensuring the border uses `{colors.outline}`.

### Card
Cards are containers for content, defined by a `{colors.surface}` background, `{rounded.md}` corners, and a `{colors.outline}` border. They should not rely on heavy shadows for definition.

### Input Field
Inputs are the primary interaction point, utilizing `{rounded.sm}` and a `{colors.outline}` border. When the user focuses on the field, the border must transition to `{colors.focus-ring}`.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary call-to-action buttons. | Do not use {colors.error} for non-destructive actions. |
| Apply {typography.body-md} for all standard paragraph text. | Do not use {typography.display-lg} for body text. |
| Use {spacing.md} as the default gutter between form elements. | Avoid using large {rounded.full} on standard input fields. |
| Ensure all input fields have a {colors.outline} border. | Do not mix multiple font families; stick to system sans-serif. |
| Use {rounded.sm} for all input fields to maintain consistency. | Avoid excessive use of shadows; prefer borders for containers. |
| Apply {colors.on-surface} for all primary text content. | Never use {colors.surface-dim} as a primary background for text. |
| Use {colors.focus-ring} for all active input focus states. | Do not use low-contrast text colors for primary labels. |
| Use {rounded.md} for card containers. | Do not use {rounded.lg} or higher on standard form inputs. |

## Content Style

CTA labels should be imperative, short, and direct (e.g., "Sign in", "Create account"). Avoid flowery language; keep the user's path clear.

Headings should be concise and welcoming, serving as clear signposts for the user's current task.

Copy density is kept very low. Prioritize whitespace and essential information only; avoid long-form text blocks.

## Imagery & Icons

Icons are simple, thin-stroke, and monochromatic to match the minimalist aesthetic. Defer to a minimal-icon style that avoids heavy fills or complex gradients.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Imgs.so, a minimalist image hosting platform with a professional, direct, and spare aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.sm}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only the component variants defined under `components:`. Do not invent a ghost button, pill input, or any variant the spec omits.
3. Follow the Layout section: centered narrow column, 4px base grid, `{spacing.md}` between form elements, `{spacing.xl}` for vertical rhythm. Page order is `nav → hero → auth-form → footer`.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., applying `{rounded.full}` to an input), surface the conflict before proceeding.
5. All tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values override the spec.

## Output contract
**Must:**
- Use named tokens for every color, spacing, radius, and typography decision.
- Include hover, focus, and disabled states for interactive components when the spec defines them (`button-primary-hover`, `input-field-focus`).
- Apply `{rounded.sm}` to inputs and `{rounded.md}` to cards exclusively.
- Use `{elevation.sm}` for cards, `{elevation.md}` for dropdowns, `{elevation.lg}` for modals; prefer `{colors.outline}` borders over heavy shadows.
- Keep CTA copy imperative and short per the Content Style section.

**Must NOT:**
- Invent colors, font families, or radius values absent from the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, decorative flourishes, or long-form copy.
- Apply `{colors.error}` to non-destructive actions or `{typography.display-lg}` to body text.
- Rewrite page copy, button labels, headings, or alter navigation structure.

## When in doubt
- If a value is not in the spec, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary containers, use `{colors.surface-dim}`.
- For unspecified breakpoints, use mobile-first with one breakpoint at 768px; on mobile, forms expand to full width per the Layout section.
- Inferred token values yield to any authoritative design system source provided by the product team.