# 123RF Design System

> A high-contrast creative workbench where deep obsidian canvases meet vibrant "Kournikova" gold accents and ultra-soft rounded geometry.

**Source:** [https://123rf.com](https://123rf.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
123RF utilizes a "Dark Mode" default for its primary creative surfaces, using a deep charcoal `#212121` and near-black `#0d0d0d` to make stock imagery pop. The primary brand voltage is carried by `#ffd44d` (internally named `--kournikova`), used for search actions, primary CTAs, and focus rings. Typography is strictly sans-serif, favoring **Inter UI Regular** at weights 400 through 700, with a signature 16px border radius on feature cards that softens the high-contrast aesthetic. Layouts rely on a 1200px container with generous 24px-40px internal padding.

## Signature DNA
1. **The Kournikova Punch** (The use of `#ffd44d` as a high-visibility functional accent against dark backgrounds, specifically for the search button and "7-day FREE trial" CTAs).
2. **Soft-Shell Surfaces** (A consistent `16px` border radius applied to all primary content cards and "Sphere" feature blocks, contrasting with the sharp `0px` edges of the global navigation).
3. **Obsidian Hierarchy** (Layering depth using `#0d0d0d` for the base floor, `#1a1a1a` for sidebars, and `#212121` for elevated header elements).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| AI Suite | Gradient (Multi) | Iridescent Orbs | Parent Grid | Dark Canvas |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--body-bg` | `#ffffff` | Page floor (Light mode/Footer) | 156 | 1 | CSS Variable |
| `--Greyscale-G10` | `#212121` | Primary Dark Surface (Header/Sidebar) | 24 | 1 | Computed Style |
| `--Greyscale-Black` | `#0d0d0d` | Layout Background (Dark mode) | 3 | 1 | CSS Variable |
| `--Greyscale-G5` | `#1a1a1a` | Elevated Sidebar Surface | 3 | 1 | Computed Style |
| `--body-color` | `#333333` | Primary Text (Light mode) | 74 | 1 | CSS Variable |
| `--Greyscale-White` | `#ffffff` | Primary Text (Dark mode) | 156 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--kournikova` | `#ffd44d` | Primary Action / Search Button | 3 | 1 | CSS Variable |
| `--link-hover` | `#ccaa3e` | Interactive hover state | 1 | 0.9 | CSS Variable |
| `--text-link` | `#2298ca` | Secondary text links | 1 | 0.8 | CSS Variable |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--form-invalid-color` | `#dc3545` | Error states |
| `--form-valid-color` | `#06874e` | Success states |
| `--info-bg-subtle` | `#cff4fc` | Informational banners |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter UI Regular | 400, 600, 700 | Heading & Body | Inter | Open Font License |
| Nunito | 700 | Secondary Heading | Nunito | Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h3}` | 32px | 48px | normal | 600 | Feature Highlights | `h3#features-highlight-title` |
| `{type.stat}` | 24px | 36px | normal | 600 | Overlay Statistics | `div.ThumbnailImages_overlayStatistics` |
| `{type.caption-lg}`| 24px | 36px | normal | 400 | Figcaptions | `figcaption` |
| `{type.body-lg}` | 16px | 24px | normal | 600 | Overlay Text | `div.ThumbnailImages_overlayText` |
| `{type.body}` | 16px | 24px | normal | 400 | Search Filters | `span.SearchBarV2__searchFilterCategory` |
| `{type.footer-h}` | 16px | 19px | normal | 700 | Footer Titles | `span.FooterLinks__title__text` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Sidebar Text | `div.SideBarLayout__sideBar` |
| `{type.label}` | 12px | 18px | normal | 600 | Sidebar Item Titles | `span.SideBarItem__sideBarItemTitle` |

### Principles
1. **Achromatic Text Hierarchy**: Use `#ffffff` for all text on dark surfaces and `#333333` for text on light surfaces.
2. **Weight-Based Emphasis**: Use 600 weight for interactive labels and 700 for structural titles.
3. **Tight Line Heights**: Display headings use a 1.5x ratio (32/48) to maintain compactness in dense grids.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 87 |
| `{space.sm}` | 16px | 35 |
| `{space.md}` | 24px | 20 |
| `{space.xl}` | 40px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Global Nav / Footer | 213 occurrences |
| `{radius.input}` | 4px | Search Inputs | 6 occurrences |
| `{radius.card}` | 16px | Feature/Stock Cards | 30 occurrences |
| `{radius.panel}` | 28px | Floating Action Panels | 5 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Default Cards | `Card` component spec |
| Floating | `0px 8px 16px 0px rgb(30, 30, 30)` | Active Panels / Modals | 2 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary CTA (e.g., "7-day FREE trial")
**Pages observed:** 1
**Spec:** Background `#ffd44d` / Text `#000000` / Radius `28px` / Padding `8px 24px` / Typography `14px 600`
**States observed:** Default | Hover: captured | Focus: captured

### Tier 2: Patterns
#### Stock Asset Card
**Role:** Displaying image/vector categories
**Pages observed:** 1
**Spec:** Background `#212121` / Text `#ffffff` / Radius `16px` / Padding `24px` / Shadow `none`
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific
#### Sidebar Navigation Item
**Role:** Vertical app-style navigation
**Pages observed:** 1
**Spec:** Background `transparent` / Text `#c9c9c9` / Radius `0px` / Typography `12px 600`
**States observed:** Default | Active: `#ffffff` text

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Sidebar Width | 80px |
| Grid Gutter | 16px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Sidebar moves to bottom or hidden; Search bar becomes full-width. |
| Desktop | 1440px | Sidebar fixed left; 1200px centered container. |

## Imagery & decoration
123RF uses high-density grids of stock photography. Decoration is minimal, limited to iridescent gradients for "AI Suite" branding and subtle 1px borders on input fields.

## Do's
- Use `#ffd44d` for the primary search trigger and high-conversion CTAs.
- Apply a `16px` border radius to all content-containing cards.
- Set background to `#0d0d0d` for hero sections to maximize image contrast.
- Use **Inter UI Regular** weight 600 for all overlay text on images.
- Maintain an 8px base unit for all component internal spacing.

## Don'ts
- **Wrong:** Using `#ffd44d` as a background for the entire page. **Right:** Use `#ffffff` or `#0d0d0d`. **Reason:** Yellow is a functional accent, not a surface color.
- **Wrong:** Applying shadows to every card. **Right:** Keep cards flat with `0px` border. **Reason:** The system relies on color blocking rather than elevation.
- **Wrong:** Using Nunito for body copy. **Right:** Use Inter UI Regular. **Reason:** Nunito is reserved for specific heading treatments.

## Similar brands
- Adobe Stock
- Shutterstock
- Getty Images
- Canva (Dark Mode)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --primary: #ffd44d;
  --surface-dark: #212121;
  --bg-obsidian: #0d0d0d;
  --text-primary: #ffffff;
  --radius-card: 16px;
  --font-main: 'Inter UI Regular', sans-serif;
}
```

## Agent prompt examples
- "Create a feature card using a #212121 background, 16px border radius, and white Inter UI text at 16px."
- "Generate a primary CTA button with #ffd44d background, black text, and a 28px pill radius."
- "Design a search bar component with a 4px border radius and a #ffd44d square action button on the right."

## Known gaps
- Hover states for secondary navigation links were not fully captured in the CSS variable mapping.
- Tablet-specific breakpoints (768px-1024px) were not analyzed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://123rf.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://123rf.com | 390x844 | 2026-06-06 |