Sign in Start building

Create

Tools

Tails
Blocks

Account

Free & open source

On GitHub

Resources

Community

Start building Sign in

Platform

Open Source

Resources

Recent

quiet gallery wall, loud pictures

Bookmark

Blog Light light minimal dense photographic precise monochrome Built with React Inter

Recent is a white-walled gallery for design inspiration. The interface almost disappears, so a dense four-column masonry of vivid shots, renders and UI captures does all the talking. The chrome is small, grey and polite. Everything is 13px Inter, with one ink-black pill for the main call to action and a single hand-drawn magenta "new" scribble as the only spot of brand colour.

Technically it is a one-size type system. Body, nav, filters and headings are all 13px Inter at 400/500 with a 1.4 line height, and only the page H1 steps up to 16px/500. Hierarchy comes from grey value rather than size: near-black #0b0b0b for active items and mid-grey for links and meta. Shape follows a tight rule: 8px radius on every media card, 9999px pills on every control. Depth is a hairline ring shadow (0 0 0 1px at 5% black plus a 1px 2px soft drop) instead of borders. Spacing is compact and built on 4px: 4px gaps inside clusters, 12px gutters between cards, 12–16px padding.

Listed on Seesaw

Sections

Browse the library by section

Recent navigation section — Navigation

Recent hero section — Hero

Recent showcase section — Showcase

Recent 404 section — 404 /devdojo-inspiration-404-probe-mvnwk8tt

Colors

Click a swatch to copy

Typography

body

Inter

400 · 500 · falls back to system-ui, -apple-system, Helvetica Neue, Arial, sans-serif

The only typeface. Runs at 13px almost everywhere with a hairline negative tracking (-0.041px) on job listings and auth links. Weight 500 is used only for the H1, job titles and the tagline.
display

Inter

500 · falls back to system-ui, Helvetica Neue, Arial, sans-serif

There is no real display size. The page H1 is just 16px/500, so the imagery stays the hero.

H1 / page title

16px / 1.4

500 · normal

The quick brown fox jumps over the lazy dog

Lead / tagline

13px / 1.4

500 · normal

The quick brown fox jumps over the lazy dog

Body / nav link

13px / 1.4

400 · normal

The quick brown fox jumps over the lazy dog

Section label (H2)

13px / 1.4

400 · normal

The quick brown fox jumps over the lazy dog

List title (job role)

13px / 1.4

500 · -0.041px

The quick brown fox jumps over the lazy dog

List meta (company)

13px / 1.4

400 · -0.041px

The quick brown fox jumps over the lazy dog

Count / tight label

13px / 1

400 · normal

The quick brown fox jumps over the lazy dog

Badge (Sponsor)

12px / 1

500 · normal

The quick brown fox jumps over the lazy dog

Tag (new)

12px / 1.4

400 · normal

The quick brown fox jumps over the lazy dog

Spacing & Shape

Spacing

Base unit: 4px
Density: compact
Container: none (fluid full width: ~230px sidebar plus a 4-column masonry)
Section gap: 32px
Card padding: 12px

2

4

6

8

10

12

14

16

24

32

Radius

Media cards, jobs panel, logo tiles 8px
Buttons, filter chips, sort select, Log in 9999px
Avatars, arrow and count badges 50%
Tiny inline marks 2px

Shadows

Card ring Every media card and the jobs panel. A hairline outline plus a barely-there drop instead of a border.

oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px

Inner light rim Overlay chips on media: arrow buttons, count badges and avatars, so they read on dark images.

oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset

Control lift White outline pills such as Log in and the Recent sort select

oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px

Glossy brand chip One special violet-tinted glossy chip. Use it once at most.

oklch(1 0 0 / 0.7) 0px 1px 1px 0px inset, oklch(0.25 0.12 300 / 0.22) 0px -1px 2px 0px inset, oklch(0.25 0.12 300 / 0.18) 0px 1px 3px 0px

Components

Live previews rendered from recipes

Recent ProductPricingChangelogDocs Get started

Buttons

Tags

New Blog light New Blog light

Card

Everything in one ledger

Reconcile every account overnight and close the month in an afternoon instead of a fortnight.

Get started

Primary pill (Sign up / active filter) — Height 28px. The only solid-black control on the page. Doubles as the selected state of the filter row.
Filter chip (inactive) — Height 28px, 4–8px gaps between chips. Row: All, Web, Interface, Branding, Motion, Illustration, Posters, Print. Scrolls sideways on mobile.
Outline pill (Log in / Recent select) — Secondary action. The select adds a small grey chevron. Edges come from the shadow, not a border.
Media card — Variable height in masonry columns with 12px gutters. Bottom-left: 28px round curator avatar. Bottom-right: 28px round ↗ chip in translucent grey. Top-right: slide-count badge ("4").
Jobs panel — Sits as one tile in the grid. Header: grey "Design jobs" plus a grey Post a job pill. Rows: 36px rounded logo, company name in grey 400, role in ink 500, 12px row gap. Footer row: See all jobs with a → arrow, separated by a hairline.
Sidebar nav — Fixed left column about 230px wide. Groups (Browse, Resources) have pale #b4b4b4 labels. Each link sits on a ~23px line. The active link turns ink and gets a 6px black dot after it. The sponsor block and signup CTA sit at the bottom of the column.
Sponsor badge — Overlaid top-left on paid tiles, line-height 1.
New tag — Magenta word with a hand-drawn squiggle underline (SVG). The only brand colour on the site, so keep it rare.

Do / Don't

Set nearly everything in 13px Inter, line-height 1.4, and build hierarchy with grey value (#0b0b0b vs #7a7a7a vs #b4b4b4) and 400/500 weight, not size.
Use 9999px pills for every interactive control and 8px radius for every content card. Nothing in between.
Outline cards with a ring shadow (0 0 0 1px at 5% black plus 0 1px 2px at 6%) instead of a CSS border.
Make the images the only colour. Keep the chrome strictly black, white and grey.
Mark the active nav item with ink text plus a small black dot. Leave the rest grey.
Mix utility tiles (jobs, sponsors) into the masonry as ordinary cards so the grid never breaks.

Don't add large display headlines or hero sections. The H1 tops out at 16px.
Don't use the magenta accent for buttons, links or backgrounds. It belongs only to the "new" scribble.
Don't put coloured or tinted backgrounds behind sections. The page stays pure #ffffff.
Don't use bold 600/700 weights or uppercase tracking for labels.
Don't add visible 1px borders or heavy drop shadows to cards.
Don't pad generously. Gutters are 12px and cluster gaps are 4px, so keep the feed dense.

Screens

Recent — Design Inspiration — Recent — Design Inspiration /

Mobile view — Mobile 390×844

Mobile navigation open — Mobile navigation menu open

404 page — 404 page not found

Brand assets

As served by the site

Favicon Download

SVG icon Download

Recent open graph image — Open Graph image Download

More Blog Browse by section Surprise me

Recent — Design Reference

quiet gallery wall, loud pictures

Source: https://recent.design
Theme: light
Category: Blog
Mood: light, minimal, dense, photographic, precise, monochrome
Captured: 2026-10-25

Overview

Recent is a white-walled gallery for design inspiration. The interface almost disappears, so a dense four-column masonry of vivid shots, renders and UI captures does all the talking. The chrome is small, grey and polite. Everything is 13px Inter, with one ink-black pill for the main call to action and a single hand-drawn magenta "new" scribble as the only spot of brand colour.

Technically it is a one-size type system. Body, nav, filters and headings are all 13px Inter at 400/500 with a 1.4 line height, and only the page H1 steps up to 16px/500. Hierarchy comes from grey value rather than size: near-black #0b0b0b for active items and mid-grey for links and meta. Shape follows a tight rule: 8px radius on every media card, 9999px pills on every control. Depth is a hairline ring shadow (0 0 0 1px at 5% black plus a 1px 2px soft drop) instead of borders. Spacing is compact and built on 4px: 4px gaps inside clusters, 12px gutters between cards, 12–16px padding.

Tokens — Colors

Name	Value	Token	Role
Gallery White	`#ffffff`	`--color-background`	Page ground, card fill behind light media, mobile menu sheet
Ink	`#0b0b0b`	`--color-foreground`	Body text, active nav item, H1, active filter pill fill and Sign up button fill
Pebble Grey	`#7a7a7a`	`--color-muted-foreground`	Inactive nav links, tagline after the H1, member count, sponsor copy, inactive filter labels
Fog Label	`#b4b4b4`	`--color-subtle-foreground`	Sidebar section labels (Browse, Resources, Company), copyright line
Chalk Pill	`#f0f0f0`	`--color-secondary`	Inactive filter pill fill, Post a job button fill, media placeholder ground
Hairline	`#ebebeb`	`--color-border`	Card ring, divider above See all jobs, outline on the Log in and Recent pills
Scribble Magenta	`#ff1fa8`	`--color-accent`	Only brand colour: the hand-underlined "new" tag beside Launch Videos
Deep Media Black	`#000000`	`--color-media-dark`	Dark media tiles and sponsor tile grounds that sit inside the grid

Semantic roles

Role	Value
background	`#ffffff`
surface	`#f0f0f0`
surface raised	`#ffffff`
border	`#ebebeb`
text	`#0b0b0b`
text muted	`#7a7a7a`
primary	`#0b0b0b`
primary text	`#ffffff`
accent	`#ff1fa8`

Tokens — Typography

Body: Inter (400, 500) — fallbacks: system-ui, -apple-system, Helvetica Neue, Arial, sans-serif. The only typeface. Runs at 13px almost everywhere with a hairline negative tracking (-0.041px) on job listings and auth links. Weight 500 is used only for the H1, job titles and the tagline.
Display: Inter (500) — fallbacks: system-ui, Helvetica Neue, Arial, sans-serif. There is no real display size. The page H1 is just 16px/500, so the imagery stays the hero.

Role	Size	Line height	Weight	Letter spacing	Family
H1 / page title	16px	1.4	500	normal	display
Lead / tagline	13px	1.4	500	normal	body
Body / nav link	13px	1.4	400	normal	body
Section label (H2)	13px	1.4	400	normal	body
List title (job role)	13px	1.4	500	-0.041px	body
List meta (company)	13px	1.4	400	-0.041px	body
Count / tight label	13px	1	400	normal	body
Badge (Sponsor)	12px	1	500	normal	body
Tag (new)	12px	1.4	400	normal	body

Tokens — Spacing & Layout

Base unit: 4px
Density: compact
Container max width: none (fluid full width: ~230px sidebar plus a 4-column masonry)
Section gap: 32px
Card padding: 12px
Scale: 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 24px, 32px

Tokens — Radius

Element	Value
Media cards, jobs panel, logo tiles	8px
Buttons, filter chips, sort select, Log in	9999px
Avatars, arrow and count badges	50%
Tiny inline marks	2px

Tokens — Shadows

Name	Value	Usage
Card ring	`oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px`	Every media card and the jobs panel. A hairline outline plus a barely-there drop instead of a border.
Inner light rim	`oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset`	Overlay chips on media: arrow buttons, count badges and avatars, so they read on dark images.
Control lift	`oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px`	White outline pills such as Log in and the Recent sort select
Glossy brand chip	`oklch(1 0 0 / 0.7) 0px 1px 1px 0px inset, oklch(0.25 0.12 300 / 0.22) 0px -1px 2px 0px inset, oklch(0.25 0.12 300 / 0.18) 0px 1px 3px 0px`	One special violet-tinted glossy chip. Use it once at most.

Components

Primary pill (Sign up / active filter) (button)

Property	Value
background	`#0b0b0b`
color	`#ffffff`
border	`none`
radius	`9999px`
padding	`0px 12px`
font size	`13px`
font weight	`400`
shadow	`none`
hover	`background #262626`

Height 28px. The only solid-black control on the page. Doubles as the selected state of the filter row.

Filter chip (inactive) (button)

Property	Value
background	`#f0f0f0`
color	`#7a7a7a`
border	`none`
radius	`9999px`
padding	`0px 12px`
font size	`13px`
font weight	`400`
shadow	`none`
hover	`color #0b0b0b; background #e8e8e8`

Height 28px, 4–8px gaps between chips. Row: All, Web, Interface, Branding, Motion, Illustration, Posters, Print. Scrolls sideways on mobile.

Outline pill (Log in / Recent select) (button)

Property	Value
background	`#ffffff`
color	`#0b0b0b`
border	`none`
radius	`9999px`
padding	`0px 12px`
font size	`13px`
font weight	`400`
shadow	`oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px`
hover	`background #fafafa`

Secondary action. The select adds a small grey chevron. Edges come from the shadow, not a border.

Media card (card)

Property	Value
background	`#ffffff`
color	`#0b0b0b`
border	`none`
radius	`8px`
padding	`0px (media bleeds to the edges); overlay chips inset 12px`
font size	`13px`
font weight	`400`
shadow	`oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px`
hover	`arrow chip appears or brightens; media can autoplay`

Variable height in masonry columns with 12px gutters. Bottom-left: 28px round curator avatar. Bottom-right: 28px round ↗ chip in translucent grey. Top-right: slide-count badge ("4").

Jobs panel (card)

Property	Value
background	`#ffffff`
color	`#0b0b0b`
border	`none`
radius	`8px`
padding	`14px 16px`
font size	`13px`
font weight	`400`
shadow	`oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px`
hover	`row title underline`

Sits as one tile in the grid. Header: grey "Design jobs" plus a grey Post a job pill. Rows: 36px rounded logo, company name in grey 400, role in ink 500, 12px row gap. Footer row: See all jobs with a → arrow, separated by a hairline.

Sidebar nav (nav)

Property	Value
background	`transparent`
color	`#7a7a7a`
border	`none`
radius	`0`
padding	`0 16px`
font size	`13px`
font weight	`400`
shadow	`none`
hover	`color #0b0b0b`

Fixed left column about 230px wide. Groups (Browse, Resources) have pale #b4b4b4 labels. Each link sits on a ~23px line. The active link turns ink and gets a 6px black dot after it. The sponsor block and signup CTA sit at the bottom of the column.

Sponsor badge (badge)

Property	Value
background	`rgba(0,0,0,0.5)`
color	`#ffffff`
border	`none`
radius	`9999px`
padding	`2px 8px`
font size	`12px`
font weight	`500`
shadow	`oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset`
hover	`none`

Overlaid top-left on paid tiles, line-height 1.

New tag (badge)

Property	Value
background	`transparent`
color	`#ff1fa8`
border	`none`
radius	`0`
padding	`0`
font size	`12px`
font weight	`400`
shadow	`none`
hover	`none`

Magenta word with a hand-drawn squiggle underline (SVG). The only brand colour on the site, so keep it rare.

Layout

A full-bleed, two-zone layout. On the left is a fixed ~230px sidebar with the logo block, Log in pill, grouped text nav, and a bottom-anchored sponsor plus signup block. On the right is the content: a header row (16px H1 "Design" with a grey tagline inline, and small square app icons on the far right), then the pill filter row with a Recent sort select aligned right, then a four-column masonry of 8px-radius cards with 12px gutters. Info widgets such as the jobs panel live inside the grid as ordinary tiles. There are no hero banners and no section bands: the grid simply runs on.

Imagery

The submissions are the whole visual identity: saturated 3D renders, phone UI mockups, pixel art, posters, landscape photos and black product tiles, all shown edge to edge inside the cards. The UI itself never adds illustration, gradients or colour. Small round curator avatars and translucent ↗ chips sit over the images. Logos in the jobs panel are 36px rounded squares.

Motion

Restrained. Expect colour and opacity fades of about 150ms on links and chips, and media that autoplays or reveals its overlay chips on hover. There is no scroll choreography. The grid loads as a feed.

Responsive

On phones the sidebar disappears. A top bar shows the logo on the left, and a Log in outline pill plus a thin hamburger on the right. The signup block (tagline, black Sign up pill, avatar stack, member count) moves to the top of the page, ahead of the "Design" H1 and tagline. Filter chips grow to about 40px tall and scroll sideways, with the Recent select pinned at the end. The masonry collapses to a single full-width column of 8px cards with about 24px side margins. The hamburger opens a full-screen white sheet with a × close button. It lists the same grouped nav at a much larger size (~24px): pale grey group labels (Browse, Resources, Company), grey links, and the active link in ink. The magenta "new" scribble is kept in the menu.

Do

Set nearly everything in 13px Inter, line-height 1.4, and build hierarchy with grey value (#0b0b0b vs #7a7a7a vs #b4b4b4) and 400/500 weight, not size.
Use 9999px pills for every interactive control and 8px radius for every content card. Nothing in between.
Outline cards with a ring shadow (0 0 0 1px at 5% black plus 0 1px 2px at 6%) instead of a CSS border.
Make the images the only colour. Keep the chrome strictly black, white and grey.
Mark the active nav item with ink text plus a small black dot. Leave the rest grey.
Mix utility tiles (jobs, sponsors) into the masonry as ordinary cards so the grid never breaks.

Don't

Don't add large display headlines or hero sections. The H1 tops out at 16px.
Don't use the magenta accent for buttons, links or backgrounds. It belongs only to the "new" scribble.
Don't put coloured or tinted backgrounds behind sections. The page stays pure #ffffff.
Don't use bold 600/700 weights or uppercase tracking for labels.
Don't add visible 1px borders or heavy drop shadows to cards.
Don't pad generously. Gutters are 12px and cluster gaps are 4px, so keep the feed dense.

Agent prompt

Build a light, ultra-minimal design-inspiration gallery. Pure #ffffff ground and Inter only, at 13px/1.4 weight 400 for nearly everything. Use 500 for emphasis and a 16px/500 H1, with -0.041px tracking on list text. Text is #0b0b0b (active) and #7a7a7a (inactive and meta), with #b4b4b4 for section labels. Layout: a fixed ~230px left sidebar with grouped grey text nav (active item in ink plus a 6px black dot), and a sponsor block and signup CTA anchored at the bottom. To the right, a header row ("Design" plus a grey tagline), then a row of 28px-tall pill filters (active: #0b0b0b fill with white text; inactive: #f0f0f0 fill with grey text; padding 0 12px; radius 9999px), then a four-column masonry with 12px gutters. Cards have an 8px radius, edge-to-edge media and no border, only box-shadow oklch(0 0 0/.06) 0 1px 2px, oklch(0 0 0/.05) 0 0 0 1px. Overlay a 28px round curator avatar bottom-left and a translucent round ↗ chip bottom-right (inset ring oklch(1 0 0/.16)). Secondary pills are white with a 0.5px ring and a soft 1px lift. Spacing is a compact 4px base (4/8/12/16/32). The only brand colour is a magenta #ff1fa8 "new" tag with a hand-drawn underline. Let the images supply all the colour. On mobile, the sidebar becomes a hamburger that opens a full-screen white menu with large grey links, and the grid becomes one column.

CSS custom properties

/* Recent — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-background: #ffffff; /* Page ground, card fill behind light media, mobile menu sheet */
  --color-foreground: #0b0b0b; /* Body text, active nav item, H1, active filter pill fill and Sign up button fill */
  --color-muted-foreground: #7a7a7a; /* Inactive nav links, tagline after the H1, member count, sponsor copy, inactive filter labels */
  --color-subtle-foreground: #b4b4b4; /* Sidebar section labels (Browse, Resources, Company), copyright line */
  --color-secondary: #f0f0f0; /* Inactive filter pill fill, Post a job button fill, media placeholder ground */
  --color-border: #ebebeb; /* Card ring, divider above See all jobs, outline on the Log in and Recent pills */
  --color-accent: #ff1fa8; /* Only brand colour: the hand-underlined "new" tag beside Launch Videos */
  --color-media-dark: #000000; /* Dark media tiles and sponsor tile grounds that sit inside the grid */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f0f0f0;
  --surface-raised: #ffffff;
  --border: #ebebeb;
  --text: #0b0b0b;
  --text-muted: #7a7a7a;
  --primary: #0b0b0b;
  --primary-text: #ffffff;
  --accent: #ff1fa8;

  /* Typography */
  --font-body: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Inter, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --text-h1-page-title: 16px;
  --text-h1-page-title--line-height: 1.4;
  --text-h1-page-title--letter-spacing: normal;
  --text-h1-page-title--font-weight: 500;
  --text-lead-tagline: 13px;
  --text-lead-tagline--line-height: 1.4;
  --text-lead-tagline--letter-spacing: normal;
  --text-lead-tagline--font-weight: 500;
  --text-body-nav-link: 13px;
  --text-body-nav-link--line-height: 1.4;
  --text-body-nav-link--letter-spacing: normal;
  --text-body-nav-link--font-weight: 400;
  --text-section-label-h2: 13px;
  --text-section-label-h2--line-height: 1.4;
  --text-section-label-h2--letter-spacing: normal;
  --text-section-label-h2--font-weight: 400;
  --text-list-title-job-role: 13px;
  --text-list-title-job-role--line-height: 1.4;
  --text-list-title-job-role--letter-spacing: -0.041px;
  --text-list-title-job-role--font-weight: 500;
  --text-list-meta-company: 13px;
  --text-list-meta-company--line-height: 1.4;
  --text-list-meta-company--letter-spacing: -0.041px;
  --text-list-meta-company--font-weight: 400;
  --text-count-tight-label: 13px;
  --text-count-tight-label--line-height: 1;
  --text-count-tight-label--letter-spacing: normal;
  --text-count-tight-label--font-weight: 400;
  --text-badge-sponsor: 12px;
  --text-badge-sponsor--line-height: 1;
  --text-badge-sponsor--letter-spacing: normal;
  --text-badge-sponsor--font-weight: 500;
  --text-tag-new: 12px;
  --text-tag-new--line-height: 1.4;
  --text-tag-new--letter-spacing: normal;
  --text-tag-new--font-weight: 400;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 24px;
  --space-10: 32px;
  --container: none (fluid full width: ~230px sidebar plus a 4-column masonry);
  --section-gap: 32px;

  /* Radius */
  --radius-media-cards-jobs-panel-logo-tiles: 8px;
  --radius-buttons-filter-chips-sort-select-log-in: 9999px;
  --radius-avatars-arrow-and-count-badges: 50%;
  --radius-tiny-inline-marks: 2px;

  /* Shadows */
  --shadow-card-ring: oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px;
  --shadow-inner-light-rim: oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset;
  --shadow-control-lift: oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px;
  --shadow-glossy-brand-chip: oklch(1 0 0 / 0.7) 0px 1px 1px 0px inset, oklch(0.25 0.12 300 / 0.22) 0px -1px 2px 0px inset, oklch(0.25 0.12 300 / 0.18) 0px 1px 3px 0px;
}

Tailwind v4 theme

/* Recent — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-background: #ffffff;
  --color-foreground: #0b0b0b;
  --color-muted-foreground: #7a7a7a;
  --color-subtle-foreground: #b4b4b4;
  --color-secondary: #f0f0f0;
  --color-border: #ebebeb;
  --color-accent: #ff1fa8;
  --color-media-dark: #000000;
  --color-background: #ffffff;
  --color-surface: #f0f0f0;
  --color-surface-raised: #ffffff;
  --color-border: #ebebeb;
  --color-text: #0b0b0b;
  --color-text-muted: #7a7a7a;
  --color-primary: #0b0b0b;
  --color-primary-text: #ffffff;
  --color-accent: #ff1fa8;
  --font-body: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Inter, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --text-h1-page-title: 16px;
  --text-h1-page-title--line-height: 1.4;
  --text-h1-page-title--letter-spacing: normal;
  --text-h1-page-title--font-weight: 500;
  --text-lead-tagline: 13px;
  --text-lead-tagline--line-height: 1.4;
  --text-lead-tagline--letter-spacing: normal;
  --text-lead-tagline--font-weight: 500;
  --text-body-nav-link: 13px;
  --text-body-nav-link--line-height: 1.4;
  --text-body-nav-link--letter-spacing: normal;
  --text-body-nav-link--font-weight: 400;
  --text-section-label-h2: 13px;
  --text-section-label-h2--line-height: 1.4;
  --text-section-label-h2--letter-spacing: normal;
  --text-section-label-h2--font-weight: 400;
  --text-list-title-job-role: 13px;
  --text-list-title-job-role--line-height: 1.4;
  --text-list-title-job-role--letter-spacing: -0.041px;
  --text-list-title-job-role--font-weight: 500;
  --text-list-meta-company: 13px;
  --text-list-meta-company--line-height: 1.4;
  --text-list-meta-company--letter-spacing: -0.041px;
  --text-list-meta-company--font-weight: 400;
  --text-count-tight-label: 13px;
  --text-count-tight-label--line-height: 1;
  --text-count-tight-label--letter-spacing: normal;
  --text-count-tight-label--font-weight: 400;
  --text-badge-sponsor: 12px;
  --text-badge-sponsor--line-height: 1;
  --text-badge-sponsor--letter-spacing: normal;
  --text-badge-sponsor--font-weight: 500;
  --text-tag-new: 12px;
  --text-tag-new--line-height: 1.4;
  --text-tag-new--letter-spacing: normal;
  --text-tag-new--font-weight: 400;
  --radius-media-cards-jobs-panel-logo-tiles: 8px;
  --radius-buttons-filter-chips-sort-select-log-in: 9999px;
  --radius-avatars-arrow-and-count-badges: 50%;
  --radius-tiny-inline-marks: 2px;
  --shadow-card-ring: oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px;
  --shadow-inner-light-rim: oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset;
  --shadow-control-lift: oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px;
  --shadow-glossy-brand-chip: oklch(1 0 0 / 0.7) 0px 1px 1px 0px inset, oklch(0.25 0.12 300 / 0.22) 0px -1px 2px 0px inset, oklch(0.25 0.12 300 / 0.18) 0px 1px 3px 0px;
  --container-site: none (fluid full width: ~230px sidebar plus a 4-column masonry);
}

Theme tokens — light + dark

The shadcn-named layer DevDojo Sites speaks (bg-background, text-foreground, bg-primary, rounded-medium…). Paste into site.css after @import "tailwindcss" to restyle any site in this look.

/* Recent — DevDojo theme tokens (light + dark). Generated from style.json. */
/* Drop into site.css after @import "tailwindcss": bg-background, text-foreground, bg-primary, border-border, rounded-medium… all read these. Dark mode: estimated — the site has no dark scheme, so the .dark half is a plausible twin of its palette. */
@custom-variant dark (&:where(.dark, .dark *));

:root {
    color-scheme: light;

    --background: #ffffff;
    --foreground: #0b0b0b;
    --card: #ffffff;
    --card-foreground: #0b0b0b;
    --popover: #ffffff; /* estimated */
    --popover-foreground: #0b0b0b; /* estimated */
    --primary: #0b0b0b;
    --primary-foreground: #ffffff;
    --secondary: #f0f0f0;
    --secondary-foreground: #0b0b0b;
    --muted: #f0f0f0;
    --muted-foreground: #7a7a7a;
    --accent: #f0f0f0;
    --accent-foreground: #0b0b0b;
    --destructive: #e5484d; /* estimated */
    --destructive-foreground: #ffffff; /* estimated */
    --border: #ebebeb;
    --input: #ebebeb; /* estimated */
    --ring: #0b0b0b; /* estimated */

    --radius-small: 2px;
    --radius-medium: 8px;
    --radius-large: 8px;
    --radius: var(--radius-medium);

    --font-body: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-display: Inter, system-ui, 'Helvetica Neue', Arial, sans-serif;
}

.dark {
    color-scheme: dark;
    /* estimated from the light palette */

    --background: #0b0b0b;
    --foreground: #f5f5f5;
    --card: #141414;
    --card-foreground: #f5f5f5;
    --popover: #141414;
    --popover-foreground: #f5f5f5;
    --primary: #ffffff;
    --primary-foreground: #0b0b0b;
    --secondary: #1f1f1f;
    --secondary-foreground: #f5f5f5;
    --muted: #1f1f1f;
    --muted-foreground: #8f8f8f;
    --accent: #1f1f1f;
    --accent-foreground: #f5f5f5;
    --destructive: #e5484d;
    --destructive-foreground: #ffffff;
    --border: rgba(255,255,255,0.08);
    --input: rgba(255,255,255,0.1);
    --ring: #ffffff;
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --radius-small: var(--radius-small);
    --radius-medium: var(--radius-medium);
    --radius-large: var(--radius-large);
    --font-body: var(--font-body);
    --font-display: var(--font-display);
}

Recent — Style Reference

quiet gallery wall, loud pictures

Theme: light · Mood: light, minimal, dense, photographic, precise, monochrome

Recent is a white-walled gallery for design inspiration. The interface almost disappears, so a dense four-column masonry of vivid shots, renders and UI captures does all the talking. The chrome is small, grey and polite. Everything is 13px Inter, with one ink-black pill for the main call to action and a single hand-drawn magenta "new" scribble as the only spot of brand colour.

Tokens — Colors

Name	Value	Token	Role
Gallery White	`#ffffff`	`--background`	Page ground, card fill behind light media, mobile menu sheet
Ink	`#0b0b0b`	`--foreground`	Body text, active nav item, H1, active filter pill fill and Sign up button fill
Pebble Grey	`#7a7a7a`	`--muted-foreground`	Inactive nav links, tagline after the H1, member count, sponsor copy, inactive filter labels
Fog Label	`#b4b4b4`	`--subtle-foreground`	Sidebar section labels (Browse, Resources, Company), copyright line
Chalk Pill	`#f0f0f0`	`--secondary`	Inactive filter pill fill, Post a job button fill, media placeholder ground
Hairline	`#ebebeb`	`--border`	Card ring, divider above See all jobs, outline on the Log in and Recent pills
Scribble Magenta	`#ff1fa8`	`--accent`	Only brand colour: the hand-underlined "new" tag beside Launch Videos
Deep Media Black	`#000000`	`--media-dark`	Dark media tiles and sponsor tile grounds that sit inside the grid

Tokens — Typography

Body: Inter (system-ui, -apple-system, Helvetica Neue, Arial, sans-serif) — weights 400/500
Display: Inter (system-ui, Helvetica Neue, Arial, sans-serif) — weights 500

Tokens — Radius

Element	Value
Media cards, jobs panel, logo tiles	`8px`
Buttons, filter chips, sort select, Log in	`9999px`
Avatars, arrow and count badges	`50%`
Tiny inline marks	`2px`

Do

Set nearly everything in 13px Inter, line-height 1.4, and build hierarchy with grey value (#0b0b0b vs #7a7a7a vs #b4b4b4) and 400/500 weight, not size.
Use 9999px pills for every interactive control and 8px radius for every content card. Nothing in between.
Outline cards with a ring shadow (0 0 0 1px at 5% black plus 0 1px 2px at 6%) instead of a CSS border.
Make the images the only colour. Keep the chrome strictly black, white and grey.
Mark the active nav item with ink text plus a small black dot. Leave the rest grey.
Mix utility tiles (jobs, sponsors) into the masonry as ordinary cards so the grid never breaks.

Don't

Don't add large display headlines or hero sections. The H1 tops out at 16px.
Don't use the magenta accent for buttons, links or backgrounds. It belongs only to the "new" scribble.
Don't put coloured or tinted backgrounds behind sections. The page stays pure #ffffff.
Don't use bold 600/700 weights or uppercase tracking for labels.
Don't add visible 1px borders or heavy drop shadows to cards.
Don't pad generously. Gutters are 12px and cluster gaps are 4px, so keep the feed dense.

/* Recent — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-background: #ffffff;
  --color-foreground: #0b0b0b;
  --color-muted-foreground: #7a7a7a;
  --color-subtle-foreground: #b4b4b4;
  --color-secondary: #f0f0f0;
  --color-border: #ebebeb;
  --color-accent: #ff1fa8;
  --color-media-dark: #000000;
  --color-background: #ffffff;
  --color-surface: #f0f0f0;
  --color-surface-raised: #ffffff;
  --color-border: #ebebeb;
  --color-text: #0b0b0b;
  --color-text-muted: #7a7a7a;
  --color-primary: #0b0b0b;
  --color-primary-text: #ffffff;
  --color-accent: #ff1fa8;
  --font-body: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Inter, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --text-h1-page-title: 16px;
  --text-h1-page-title--line-height: 1.4;
  --text-h1-page-title--letter-spacing: normal;
  --text-h1-page-title--font-weight: 500;
  --text-lead-tagline: 13px;
  --text-lead-tagline--line-height: 1.4;
  --text-lead-tagline--letter-spacing: normal;
  --text-lead-tagline--font-weight: 500;
  --text-body-nav-link: 13px;
  --text-body-nav-link--line-height: 1.4;
  --text-body-nav-link--letter-spacing: normal;
  --text-body-nav-link--font-weight: 400;
  --text-section-label-h2: 13px;
  --text-section-label-h2--line-height: 1.4;
  --text-section-label-h2--letter-spacing: normal;
  --text-section-label-h2--font-weight: 400;
  --text-list-title-job-role: 13px;
  --text-list-title-job-role--line-height: 1.4;
  --text-list-title-job-role--letter-spacing: -0.041px;
  --text-list-title-job-role--font-weight: 500;
  --text-list-meta-company: 13px;
  --text-list-meta-company--line-height: 1.4;
  --text-list-meta-company--letter-spacing: -0.041px;
  --text-list-meta-company--font-weight: 400;
  --text-count-tight-label: 13px;
  --text-count-tight-label--line-height: 1;
  --text-count-tight-label--letter-spacing: normal;
  --text-count-tight-label--font-weight: 400;
  --text-badge-sponsor: 12px;
  --text-badge-sponsor--line-height: 1;
  --text-badge-sponsor--letter-spacing: normal;
  --text-badge-sponsor--font-weight: 500;
  --text-tag-new: 12px;
  --text-tag-new--line-height: 1.4;
  --text-tag-new--letter-spacing: normal;
  --text-tag-new--font-weight: 400;
  --radius-media-cards-jobs-panel-logo-tiles: 8px;
  --radius-buttons-filter-chips-sort-select-log-in: 9999px;
  --radius-avatars-arrow-and-count-badges: 50%;
  --radius-tiny-inline-marks: 2px;
  --shadow-card-ring: oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px;
  --shadow-inner-light-rim: oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset;
  --shadow-control-lift: oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px;
  --shadow-glossy-brand-chip: oklch(1 0 0 / 0.7) 0px 1px 1px 0px inset, oklch(0.25 0.12 300 / 0.22) 0px -1px 2px 0px inset, oklch(0.25 0.12 300 / 0.18) 0px 1px 3px 0px;
  --container-site: none (fluid full width: ~230px sidebar plus a 4-column masonry);
}

/* Recent — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-background: #ffffff; /* Page ground, card fill behind light media, mobile menu sheet */
  --color-foreground: #0b0b0b; /* Body text, active nav item, H1, active filter pill fill and Sign up button fill */
  --color-muted-foreground: #7a7a7a; /* Inactive nav links, tagline after the H1, member count, sponsor copy, inactive filter labels */
  --color-subtle-foreground: #b4b4b4; /* Sidebar section labels (Browse, Resources, Company), copyright line */
  --color-secondary: #f0f0f0; /* Inactive filter pill fill, Post a job button fill, media placeholder ground */
  --color-border: #ebebeb; /* Card ring, divider above See all jobs, outline on the Log in and Recent pills */
  --color-accent: #ff1fa8; /* Only brand colour: the hand-underlined "new" tag beside Launch Videos */
  --color-media-dark: #000000; /* Dark media tiles and sponsor tile grounds that sit inside the grid */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f0f0f0;
  --surface-raised: #ffffff;
  --border: #ebebeb;
  --text: #0b0b0b;
  --text-muted: #7a7a7a;
  --primary: #0b0b0b;
  --primary-text: #ffffff;
  --accent: #ff1fa8;

  /* Typography */
  --font-body: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Inter, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --text-h1-page-title: 16px;
  --text-h1-page-title--line-height: 1.4;
  --text-h1-page-title--letter-spacing: normal;
  --text-h1-page-title--font-weight: 500;
  --text-lead-tagline: 13px;
  --text-lead-tagline--line-height: 1.4;
  --text-lead-tagline--letter-spacing: normal;
  --text-lead-tagline--font-weight: 500;
  --text-body-nav-link: 13px;
  --text-body-nav-link--line-height: 1.4;
  --text-body-nav-link--letter-spacing: normal;
  --text-body-nav-link--font-weight: 400;
  --text-section-label-h2: 13px;
  --text-section-label-h2--line-height: 1.4;
  --text-section-label-h2--letter-spacing: normal;
  --text-section-label-h2--font-weight: 400;
  --text-list-title-job-role: 13px;
  --text-list-title-job-role--line-height: 1.4;
  --text-list-title-job-role--letter-spacing: -0.041px;
  --text-list-title-job-role--font-weight: 500;
  --text-list-meta-company: 13px;
  --text-list-meta-company--line-height: 1.4;
  --text-list-meta-company--letter-spacing: -0.041px;
  --text-list-meta-company--font-weight: 400;
  --text-count-tight-label: 13px;
  --text-count-tight-label--line-height: 1;
  --text-count-tight-label--letter-spacing: normal;
  --text-count-tight-label--font-weight: 400;
  --text-badge-sponsor: 12px;
  --text-badge-sponsor--line-height: 1;
  --text-badge-sponsor--letter-spacing: normal;
  --text-badge-sponsor--font-weight: 500;
  --text-tag-new: 12px;
  --text-tag-new--line-height: 1.4;
  --text-tag-new--letter-spacing: normal;
  --text-tag-new--font-weight: 400;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 24px;
  --space-10: 32px;
  --container: none (fluid full width: ~230px sidebar plus a 4-column masonry);
  --section-gap: 32px;

  /* Radius */
  --radius-media-cards-jobs-panel-logo-tiles: 8px;
  --radius-buttons-filter-chips-sort-select-log-in: 9999px;
  --radius-avatars-arrow-and-count-badges: 50%;
  --radius-tiny-inline-marks: 2px;

  /* Shadows */
  --shadow-card-ring: oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px;
  --shadow-inner-light-rim: oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset;
  --shadow-control-lift: oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px;
  --shadow-glossy-brand-chip: oklch(1 0 0 / 0.7) 0px 1px 1px 0px inset, oklch(0.25 0.12 300 / 0.22) 0px -1px 2px 0px inset, oklch(0.25 0.12 300 / 0.18) 0px 1px 3px 0px;
}

{
  "$name": "Recent",
  "$source": "https://recent.design",
  "$theme": "light",
  "$generated": "inspiration library",
  "color": {
    "background": {
      "$type": "color",
      "$value": "#ffffff",
      "$description": "Page ground, card fill behind light media, mobile menu sheet"
    },
    "foreground": {
      "$type": "color",
      "$value": "#0b0b0b",
      "$description": "Body text, active nav item, H1, active filter pill fill and Sign up button fill"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#7a7a7a",
      "$description": "Inactive nav links, tagline after the H1, member count, sponsor copy, inactive filter labels"
    },
    "subtle-foreground": {
      "$type": "color",
      "$value": "#b4b4b4",
      "$description": "Sidebar section labels (Browse, Resources, Company), copyright line"
    },
    "secondary": {
      "$type": "color",
      "$value": "#f0f0f0",
      "$description": "Inactive filter pill fill, Post a job button fill, media placeholder ground"
    },
    "border": {
      "$type": "color",
      "$value": "#ebebeb",
      "$description": "Card ring, divider above See all jobs, outline on the Log in and Recent pills"
    },
    "accent": {
      "$type": "color",
      "$value": "#ff1fa8",
      "$description": "Only brand colour: the hand-underlined \"new\" tag beside Launch Videos"
    },
    "media-dark": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Dark media tiles and sponsor tile grounds that sit inside the grid"
    }
  },
  "role": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "surface": {
      "$type": "color",
      "$value": "#f0f0f0"
    },
    "surface_raised": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "border": {
      "$type": "color",
      "$value": "#ebebeb"
    },
    "text": {
      "$type": "color",
      "$value": "#0b0b0b"
    },
    "text_muted": {
      "$type": "color",
      "$value": "#7a7a7a"
    },
    "primary": {
      "$type": "color",
      "$value": "#0b0b0b"
    },
    "primary_text": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "accent": {
      "$type": "color",
      "$value": "#ff1fa8"
    }
  },
  "fontFamily": {
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "system-ui",
        "-apple-system",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "$description": "The only typeface. Runs at 13px almost everywhere with a hairline negative tracking (-0.041px) on job listings and auth links. Weight 500 is used only for the H1, job titles and the tagline."
    },
    "display": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "system-ui",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "$description": "There is no real display size. The page H1 is just 16px/500, so the imagery stays the hero."
    }
  },
  "typography": {
    "h1-page-title": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "16px",
        "lineHeight": "1.4",
        "fontWeight": 500,
        "letterSpacing": "normal"
      }
    },
    "lead-tagline": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "13px",
        "lineHeight": "1.4",
        "fontWeight": 500,
        "letterSpacing": "normal"
      }
    },
    "body-nav-link": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "13px",
        "lineHeight": "1.4",
        "fontWeight": 400,
        "letterSpacing": "normal"
      }
    },
    "section-label-h2": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "13px",
        "lineHeight": "1.4",
        "fontWeight": 400,
        "letterSpacing": "normal"
      }
    },
    "list-title-job-role": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "13px",
        "lineHeight": "1.4",
        "fontWeight": 500,
        "letterSpacing": "-0.041px"
      }
    },
    "list-meta-company": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "13px",
        "lineHeight": "1.4",
        "fontWeight": 400,
        "letterSpacing": "-0.041px"
      }
    },
    "count-tight-label": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "13px",
        "lineHeight": "1",
        "fontWeight": 400,
        "letterSpacing": "normal"
      }
    },
    "badge-sponsor": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "12px",
        "lineHeight": "1",
        "fontWeight": 500,
        "letterSpacing": "normal"
      }
    },
    "tag-new": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "12px",
        "lineHeight": "1.4",
        "fontWeight": 400,
        "letterSpacing": "normal"
      }
    }
  },
  "spacing": {
    "1": {
      "$type": "dimension",
      "$value": "2px"
    },
    "2": {
      "$type": "dimension",
      "$value": "4px"
    },
    "3": {
      "$type": "dimension",
      "$value": "6px"
    },
    "4": {
      "$type": "dimension",
      "$value": "8px"
    },
    "5": {
      "$type": "dimension",
      "$value": "10px"
    },
    "6": {
      "$type": "dimension",
      "$value": "12px"
    },
    "7": {
      "$type": "dimension",
      "$value": "14px"
    },
    "8": {
      "$type": "dimension",
      "$value": "16px"
    },
    "9": {
      "$type": "dimension",
      "$value": "24px"
    },
    "10": {
      "$type": "dimension",
      "$value": "32px"
    }
  },
  "radius": {
    "media-cards-jobs-panel-logo-tiles": {
      "$type": "dimension",
      "$value": "8px"
    },
    "buttons-filter-chips-sort-select-log-in": {
      "$type": "dimension",
      "$value": "9999px"
    },
    "avatars-arrow-and-count-badges": {
      "$type": "dimension",
      "$value": "50%"
    },
    "tiny-inline-marks": {
      "$type": "dimension",
      "$value": "2px"
    }
  },
  "shadow": {
    "card-ring": {
      "$type": "shadow",
      "$value": "oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px",
      "$description": "Every media card and the jobs panel. A hairline outline plus a barely-there drop instead of a border."
    },
    "inner-light-rim": {
      "$type": "shadow",
      "$value": "oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset",
      "$description": "Overlay chips on media: arrow buttons, count badges and avatars, so they read on dark images."
    },
    "control-lift": {
      "$type": "shadow",
      "$value": "oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px",
      "$description": "White outline pills such as Log in and the Recent sort select"
    },
    "glossy-brand-chip": {
      "$type": "shadow",
      "$value": "oklch(1 0 0 / 0.7) 0px 1px 1px 0px inset, oklch(0.25 0.12 300 / 0.22) 0px -1px 2px 0px inset, oklch(0.25 0.12 300 / 0.18) 0px 1px 3px 0px",
      "$description": "One special violet-tinted glossy chip. Use it once at most."
    }
  },
  "component": {
    "primary-pill-sign-up-active-filter": {
      "kind": "button",
      "background": "#0b0b0b",
      "color": "#ffffff",
      "border": "none",
      "radius": "9999px",
      "padding": "0px 12px",
      "font_size": "13px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "background #262626",
      "notes": "Height 28px. The only solid-black control on the page. Doubles as the selected state of the filter row."
    },
    "filter-chip-inactive": {
      "kind": "button",
      "background": "#f0f0f0",
      "color": "#7a7a7a",
      "border": "none",
      "radius": "9999px",
      "padding": "0px 12px",
      "font_size": "13px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "color #0b0b0b; background #e8e8e8",
      "notes": "Height 28px, 4–8px gaps between chips. Row: All, Web, Interface, Branding, Motion, Illustration, Posters, Print. Scrolls sideways on mobile."
    },
    "outline-pill-log-in-recent-select": {
      "kind": "button",
      "background": "#ffffff",
      "color": "#0b0b0b",
      "border": "none",
      "radius": "9999px",
      "padding": "0px 12px",
      "font_size": "13px",
      "font_weight": 400,
      "shadow": "oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px",
      "hover": "background #fafafa",
      "notes": "Secondary action. The select adds a small grey chevron. Edges come from the shadow, not a border."
    },
    "media-card": {
      "kind": "card",
      "background": "#ffffff",
      "color": "#0b0b0b",
      "border": "none",
      "radius": "8px",
      "padding": "0px (media bleeds to the edges); overlay chips inset 12px",
      "font_size": "13px",
      "font_weight": 400,
      "shadow": "oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px",
      "hover": "arrow chip appears or brightens; media can autoplay",
      "notes": "Variable height in masonry columns with 12px gutters. Bottom-left: 28px round curator avatar. Bottom-right: 28px round ↗ chip in translucent grey. Top-right: slide-count badge (\"4\")."
    },
    "jobs-panel": {
      "kind": "card",
      "background": "#ffffff",
      "color": "#0b0b0b",
      "border": "none",
      "radius": "8px",
      "padding": "14px 16px",
      "font_size": "13px",
      "font_weight": 400,
      "shadow": "oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px",
      "hover": "row title underline",
      "notes": "Sits as one tile in the grid. Header: grey \"Design jobs\" plus a grey Post a job pill. Rows: 36px rounded logo, company name in grey 400, role in ink 500, 12px row gap. Footer row: See all jobs with a → arrow, separated by a hairline."
    },
    "sidebar-nav": {
      "kind": "nav",
      "background": "transparent",
      "color": "#7a7a7a",
      "border": "none",
      "radius": "0",
      "padding": "0 16px",
      "font_size": "13px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "color #0b0b0b",
      "notes": "Fixed left column about 230px wide. Groups (Browse, Resources) have pale #b4b4b4 labels. Each link sits on a ~23px line. The active link turns ink and gets a 6px black dot after it. The sponsor block and signup CTA sit at the bottom of the column."
    },
    "sponsor-badge": {
      "kind": "badge",
      "background": "rgba(0,0,0,0.5)",
      "color": "#ffffff",
      "border": "none",
      "radius": "9999px",
      "padding": "2px 8px",
      "font_size": "12px",
      "font_weight": 500,
      "shadow": "oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset",
      "hover": "none",
      "notes": "Overlaid top-left on paid tiles, line-height 1."
    },
    "new-tag": {
      "kind": "badge",
      "background": "transparent",
      "color": "#ff1fa8",
      "border": "none",
      "radius": "0",
      "padding": "0",
      "font_size": "12px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "none",
      "notes": "Magenta word with a hand-drawn squiggle underline (SVG). The only brand colour on the site, so keep it rare."
    }
  }
}

# Recent — Design Reference
> quiet gallery wall, loud pictures

**Source:** https://recent.design  
**Theme:** light  
**Category:** Blog  
**Mood:** light, minimal, dense, photographic, precise, monochrome  
**Captured:** 2026-10-25

## Overview

Recent is a white-walled gallery for design inspiration. The interface almost disappears, so a dense four-column masonry of vivid shots, renders and UI captures does all the talking. The chrome is small, grey and polite. Everything is 13px Inter, with one ink-black pill for the main call to action and a single hand-drawn magenta "new" scribble as the only spot of brand colour.

Technically it is a one-size type system. Body, nav, filters and headings are all 13px Inter at 400/500 with a 1.4 line height, and only the page H1 steps up to 16px/500. Hierarchy comes from grey value rather than size: near-black #0b0b0b for active items and mid-grey for links and meta. Shape follows a tight rule: 8px radius on every media card, 9999px pills on every control. Depth is a hairline ring shadow (0 0 0 1px at 5% black plus a 1px 2px soft drop) instead of borders. Spacing is compact and built on 4px: 4px gaps inside clusters, 12px gutters between cards, 12–16px padding.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Gallery White | `#ffffff` | `--color-background` | Page ground, card fill behind light media, mobile menu sheet |
| Ink | `#0b0b0b` | `--color-foreground` | Body text, active nav item, H1, active filter pill fill and Sign up button fill |
| Pebble Grey | `#7a7a7a` | `--color-muted-foreground` | Inactive nav links, tagline after the H1, member count, sponsor copy, inactive filter labels |
| Fog Label | `#b4b4b4` | `--color-subtle-foreground` | Sidebar section labels (Browse, Resources, Company), copyright line |
| Chalk Pill | `#f0f0f0` | `--color-secondary` | Inactive filter pill fill, Post a job button fill, media placeholder ground |
| Hairline | `#ebebeb` | `--color-border` | Card ring, divider above See all jobs, outline on the Log in and Recent pills |
| Scribble Magenta | `#ff1fa8` | `--color-accent` | Only brand colour: the hand-underlined "new" tag beside Launch Videos |
| Deep Media Black | `#000000` | `--color-media-dark` | Dark media tiles and sponsor tile grounds that sit inside the grid |

### Semantic roles

| Role | Value |
|---|---|
| background | `#ffffff` |
| surface | `#f0f0f0` |
| surface raised | `#ffffff` |
| border | `#ebebeb` |
| text | `#0b0b0b` |
| text muted | `#7a7a7a` |
| primary | `#0b0b0b` |
| primary text | `#ffffff` |
| accent | `#ff1fa8` |

## Tokens — Typography

- **Body:** Inter (400, 500) — fallbacks: system-ui, -apple-system, Helvetica Neue, Arial, sans-serif. The only typeface. Runs at 13px almost everywhere with a hairline negative tracking (-0.041px) on job listings and auth links. Weight 500 is used only for the H1, job titles and the tagline.
- **Display:** Inter (500) — fallbacks: system-ui, Helvetica Neue, Arial, sans-serif. There is no real display size. The page H1 is just 16px/500, so the imagery stays the hero.

| Role | Size | Line height | Weight | Letter spacing | Family |
|---|---|---|---|---|---|
| H1 / page title | 16px | 1.4 | 500 | normal | display |
| Lead / tagline | 13px | 1.4 | 500 | normal | body |
| Body / nav link | 13px | 1.4 | 400 | normal | body |
| Section label (H2) | 13px | 1.4 | 400 | normal | body |
| List title (job role) | 13px | 1.4 | 500 | -0.041px | body |
| List meta (company) | 13px | 1.4 | 400 | -0.041px | body |
| Count / tight label | 13px | 1 | 400 | normal | body |
| Badge (Sponsor) | 12px | 1 | 500 | normal | body |
| Tag (new) | 12px | 1.4 | 400 | normal | body |

## Tokens — Spacing & Layout

- **Base unit:** 4px
- **Density:** compact
- **Container max width:** none (fluid full width: ~230px sidebar plus a 4-column masonry)
- **Section gap:** 32px
- **Card padding:** 12px
- **Scale:** 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 24px, 32px

## Tokens — Radius

| Element | Value |
|---|---|
| Media cards, jobs panel, logo tiles | 8px |
| Buttons, filter chips, sort select, Log in | 9999px |
| Avatars, arrow and count badges | 50% |
| Tiny inline marks | 2px |

## Tokens — Shadows

| Name | Value | Usage |
|---|---|---|
| Card ring | `oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px` | Every media card and the jobs panel. A hairline outline plus a barely-there drop instead of a border. |
| Inner light rim | `oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset` | Overlay chips on media: arrow buttons, count badges and avatars, so they read on dark images. |
| Control lift | `oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px` | White outline pills such as Log in and the Recent sort select |
| Glossy brand chip | `oklch(1 0 0 / 0.7) 0px 1px 1px 0px inset, oklch(0.25 0.12 300 / 0.22) 0px -1px 2px 0px inset, oklch(0.25 0.12 300 / 0.18) 0px 1px 3px 0px` | One special violet-tinted glossy chip. Use it once at most. |

## Components

### Primary pill (Sign up / active filter) (button)

| Property | Value |
|---|---|
| background | `#0b0b0b` |
| color | `#ffffff` |
| border | `none` |
| radius | `9999px` |
| padding | `0px 12px` |
| font size | `13px` |
| font weight | `400` |
| shadow | `none` |
| hover | `background #262626` |

Height 28px. The only solid-black control on the page. Doubles as the selected state of the filter row.

### Filter chip (inactive) (button)

| Property | Value |
|---|---|
| background | `#f0f0f0` |
| color | `#7a7a7a` |
| border | `none` |
| radius | `9999px` |
| padding | `0px 12px` |
| font size | `13px` |
| font weight | `400` |
| shadow | `none` |
| hover | `color #0b0b0b; background #e8e8e8` |

Height 28px, 4–8px gaps between chips. Row: All, Web, Interface, Branding, Motion, Illustration, Posters, Print. Scrolls sideways on mobile.

### Outline pill (Log in / Recent select) (button)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#0b0b0b` |
| border | `none` |
| radius | `9999px` |
| padding | `0px 12px` |
| font size | `13px` |
| font weight | `400` |
| shadow | `oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px` |
| hover | `background #fafafa` |

Secondary action. The select adds a small grey chevron. Edges come from the shadow, not a border.

### Media card (card)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#0b0b0b` |
| border | `none` |
| radius | `8px` |
| padding | `0px (media bleeds to the edges); overlay chips inset 12px` |
| font size | `13px` |
| font weight | `400` |
| shadow | `oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px` |
| hover | `arrow chip appears or brightens; media can autoplay` |

Variable height in masonry columns with 12px gutters. Bottom-left: 28px round curator avatar. Bottom-right: 28px round ↗ chip in translucent grey. Top-right: slide-count badge ("4").

### Jobs panel (card)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#0b0b0b` |
| border | `none` |
| radius | `8px` |
| padding | `14px 16px` |
| font size | `13px` |
| font weight | `400` |
| shadow | `oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px` |
| hover | `row title underline` |

Sits as one tile in the grid. Header: grey "Design jobs" plus a grey Post a job pill. Rows: 36px rounded logo, company name in grey 400, role in ink 500, 12px row gap. Footer row: See all jobs with a → arrow, separated by a hairline.

### Sidebar nav (nav)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#7a7a7a` |
| border | `none` |
| radius | `0` |
| padding | `0 16px` |
| font size | `13px` |
| font weight | `400` |
| shadow | `none` |
| hover | `color #0b0b0b` |

Fixed left column about 230px wide. Groups (Browse, Resources) have pale #b4b4b4 labels. Each link sits on a ~23px line. The active link turns ink and gets a 6px black dot after it. The sponsor block and signup CTA sit at the bottom of the column.

### Sponsor badge (badge)

| Property | Value |
|---|---|
| background | `rgba(0,0,0,0.5)` |
| color | `#ffffff` |
| border | `none` |
| radius | `9999px` |
| padding | `2px 8px` |
| font size | `12px` |
| font weight | `500` |
| shadow | `oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset` |
| hover | `none` |

Overlaid top-left on paid tiles, line-height 1.

### New tag (badge)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#ff1fa8` |
| border | `none` |
| radius | `0` |
| padding | `0` |
| font size | `12px` |
| font weight | `400` |
| shadow | `none` |
| hover | `none` |

Magenta word with a hand-drawn squiggle underline (SVG). The only brand colour on the site, so keep it rare.

## Layout

A full-bleed, two-zone layout. On the left is a fixed ~230px sidebar with the logo block, Log in pill, grouped text nav, and a bottom-anchored sponsor plus signup block. On the right is the content: a header row (16px H1 "Design" with a grey tagline inline, and small square app icons on the far right), then the pill filter row with a Recent sort select aligned right, then a four-column masonry of 8px-radius cards with 12px gutters. Info widgets such as the jobs panel live inside the grid as ordinary tiles. There are no hero banners and no section bands: the grid simply runs on.

## Imagery

The submissions are the whole visual identity: saturated 3D renders, phone UI mockups, pixel art, posters, landscape photos and black product tiles, all shown edge to edge inside the cards. The UI itself never adds illustration, gradients or colour. Small round curator avatars and translucent ↗ chips sit over the images. Logos in the jobs panel are 36px rounded squares.

## Motion

Restrained. Expect colour and opacity fades of about 150ms on links and chips, and media that autoplays or reveals its overlay chips on hover. There is no scroll choreography. The grid loads as a feed.

## Responsive

On phones the sidebar disappears. A top bar shows the logo on the left, and a Log in outline pill plus a thin hamburger on the right. The signup block (tagline, black Sign up pill, avatar stack, member count) moves to the top of the page, ahead of the "Design" H1 and tagline. Filter chips grow to about 40px tall and scroll sideways, with the Recent select pinned at the end. The masonry collapses to a single full-width column of 8px cards with about 24px side margins. The hamburger opens a full-screen white sheet with a × close button. It lists the same grouped nav at a much larger size (~24px): pale grey group labels (Browse, Resources, Company), grey links, and the active link in ink. The magenta "new" scribble is kept in the menu.

## Do

- Set nearly everything in 13px Inter, line-height 1.4, and build hierarchy with grey value (#0b0b0b vs #7a7a7a vs #b4b4b4) and 400/500 weight, not size.
- Use 9999px pills for every interactive control and 8px radius for every content card. Nothing in between.
- Outline cards with a ring shadow (0 0 0 1px at 5% black plus 0 1px 2px at 6%) instead of a CSS border.
- Make the images the only colour. Keep the chrome strictly black, white and grey.
- Mark the active nav item with ink text plus a small black dot. Leave the rest grey.
- Mix utility tiles (jobs, sponsors) into the masonry as ordinary cards so the grid never breaks.

## Don't

- Don't add large display headlines or hero sections. The H1 tops out at 16px.
- Don't use the magenta accent for buttons, links or backgrounds. It belongs only to the "new" scribble.
- Don't put coloured or tinted backgrounds behind sections. The page stays pure #ffffff.
- Don't use bold 600/700 weights or uppercase tracking for labels.
- Don't add visible 1px borders or heavy drop shadows to cards.
- Don't pad generously. Gutters are 12px and cluster gaps are 4px, so keep the feed dense.

## Agent prompt

> Build a light, ultra-minimal design-inspiration gallery. Pure #ffffff ground and Inter only, at 13px/1.4 weight 400 for nearly everything. Use 500 for emphasis and a 16px/500 H1, with -0.041px tracking on list text. Text is #0b0b0b (active) and #7a7a7a (inactive and meta), with #b4b4b4 for section labels. Layout: a fixed ~230px left sidebar with grouped grey text nav (active item in ink plus a 6px black dot), and a sponsor block and signup CTA anchored at the bottom. To the right, a header row ("Design" plus a grey tagline), then a row of 28px-tall pill filters (active: #0b0b0b fill with white text; inactive: #f0f0f0 fill with grey text; padding 0 12px; radius 9999px), then a four-column masonry with 12px gutters. Cards have an 8px radius, edge-to-edge media and no border, only box-shadow oklch(0 0 0/.06) 0 1px 2px, oklch(0 0 0/.05) 0 0 0 1px. Overlay a 28px round curator avatar bottom-left and a translucent round ↗ chip bottom-right (inset ring oklch(1 0 0/.16)). Secondary pills are white with a 0.5px ring and a soft 1px lift. Spacing is a compact 4px base (4/8/12/16/32). The only brand colour is a magenta #ff1fa8 "new" tag with a hand-drawn underline. Let the images supply all the colour. On mobile, the sidebar becomes a hamburger that opens a full-screen white menu with large grey links, and the grid becomes one column.

## CSS custom properties

```css
/* Recent — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-background: #ffffff; /* Page ground, card fill behind light media, mobile menu sheet */
  --color-foreground: #0b0b0b; /* Body text, active nav item, H1, active filter pill fill and Sign up button fill */
  --color-muted-foreground: #7a7a7a; /* Inactive nav links, tagline after the H1, member count, sponsor copy, inactive filter labels */
  --color-subtle-foreground: #b4b4b4; /* Sidebar section labels (Browse, Resources, Company), copyright line */
  --color-secondary: #f0f0f0; /* Inactive filter pill fill, Post a job button fill, media placeholder ground */
  --color-border: #ebebeb; /* Card ring, divider above See all jobs, outline on the Log in and Recent pills */
  --color-accent: #ff1fa8; /* Only brand colour: the hand-underlined "new" tag beside Launch Videos */
  --color-media-dark: #000000; /* Dark media tiles and sponsor tile grounds that sit inside the grid */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f0f0f0;
  --surface-raised: #ffffff;
  --border: #ebebeb;
  --text: #0b0b0b;
  --text-muted: #7a7a7a;
  --primary: #0b0b0b;
  --primary-text: #ffffff;
  --accent: #ff1fa8;

  /* Typography */
  --font-body: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Inter, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --text-h1-page-title: 16px;
  --text-h1-page-title--line-height: 1.4;
  --text-h1-page-title--letter-spacing: normal;
  --text-h1-page-title--font-weight: 500;
  --text-lead-tagline: 13px;
  --text-lead-tagline--line-height: 1.4;
  --text-lead-tagline--letter-spacing: normal;
  --text-lead-tagline--font-weight: 500;
  --text-body-nav-link: 13px;
  --text-body-nav-link--line-height: 1.4;
  --text-body-nav-link--letter-spacing: normal;
  --text-body-nav-link--font-weight: 400;
  --text-section-label-h2: 13px;
  --text-section-label-h2--line-height: 1.4;
  --text-section-label-h2--letter-spacing: normal;
  --text-section-label-h2--font-weight: 400;
  --text-list-title-job-role: 13px;
  --text-list-title-job-role--line-height: 1.4;
  --text-list-title-job-role--letter-spacing: -0.041px;
  --text-list-title-job-role--font-weight: 500;
  --text-list-meta-company: 13px;
  --text-list-meta-company--line-height: 1.4;
  --text-list-meta-company--letter-spacing: -0.041px;
  --text-list-meta-company--font-weight: 400;
  --text-count-tight-label: 13px;
  --text-count-tight-label--line-height: 1;
  --text-count-tight-label--letter-spacing: normal;
  --text-count-tight-label--font-weight: 400;
  --text-badge-sponsor: 12px;
  --text-badge-sponsor--line-height: 1;
  --text-badge-sponsor--letter-spacing: normal;
  --text-badge-sponsor--font-weight: 500;
  --text-tag-new: 12px;
  --text-tag-new--line-height: 1.4;
  --text-tag-new--letter-spacing: normal;
  --text-tag-new--font-weight: 400;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 24px;
  --space-10: 32px;
  --container: none (fluid full width: ~230px sidebar plus a 4-column masonry);
  --section-gap: 32px;

  /* Radius */
  --radius-media-cards-jobs-panel-logo-tiles: 8px;
  --radius-buttons-filter-chips-sort-select-log-in: 9999px;
  --radius-avatars-arrow-and-count-badges: 50%;
  --radius-tiny-inline-marks: 2px;

  /* Shadows */
  --shadow-card-ring: oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px;
  --shadow-inner-light-rim: oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset;
  --shadow-control-lift: oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px;
  --shadow-glossy-brand-chip: oklch(1 0 0 / 0.7) 0px 1px 1px 0px inset, oklch(0.25 0.12 300 / 0.22) 0px -1px 2px 0px inset, oklch(0.25 0.12 300 / 0.18) 0px 1px 3px 0px;
}
```

## Tailwind v4 theme

```css
/* Recent — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-background: #ffffff;
  --color-foreground: #0b0b0b;
  --color-muted-foreground: #7a7a7a;
  --color-subtle-foreground: #b4b4b4;
  --color-secondary: #f0f0f0;
  --color-border: #ebebeb;
  --color-accent: #ff1fa8;
  --color-media-dark: #000000;
  --color-background: #ffffff;
  --color-surface: #f0f0f0;
  --color-surface-raised: #ffffff;
  --color-border: #ebebeb;
  --color-text: #0b0b0b;
  --color-text-muted: #7a7a7a;
  --color-primary: #0b0b0b;
  --color-primary-text: #ffffff;
  --color-accent: #ff1fa8;
  --font-body: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Inter, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --text-h1-page-title: 16px;
  --text-h1-page-title--line-height: 1.4;
  --text-h1-page-title--letter-spacing: normal;
  --text-h1-page-title--font-weight: 500;
  --text-lead-tagline: 13px;
  --text-lead-tagline--line-height: 1.4;
  --text-lead-tagline--letter-spacing: normal;
  --text-lead-tagline--font-weight: 500;
  --text-body-nav-link: 13px;
  --text-body-nav-link--line-height: 1.4;
  --text-body-nav-link--letter-spacing: normal;
  --text-body-nav-link--font-weight: 400;
  --text-section-label-h2: 13px;
  --text-section-label-h2--line-height: 1.4;
  --text-section-label-h2--letter-spacing: normal;
  --text-section-label-h2--font-weight: 400;
  --text-list-title-job-role: 13px;
  --text-list-title-job-role--line-height: 1.4;
  --text-list-title-job-role--letter-spacing: -0.041px;
  --text-list-title-job-role--font-weight: 500;
  --text-list-meta-company: 13px;
  --text-list-meta-company--line-height: 1.4;
  --text-list-meta-company--letter-spacing: -0.041px;
  --text-list-meta-company--font-weight: 400;
  --text-count-tight-label: 13px;
  --text-count-tight-label--line-height: 1;
  --text-count-tight-label--letter-spacing: normal;
  --text-count-tight-label--font-weight: 400;
  --text-badge-sponsor: 12px;
  --text-badge-sponsor--line-height: 1;
  --text-badge-sponsor--letter-spacing: normal;
  --text-badge-sponsor--font-weight: 500;
  --text-tag-new: 12px;
  --text-tag-new--line-height: 1.4;
  --text-tag-new--letter-spacing: normal;
  --text-tag-new--font-weight: 400;
  --radius-media-cards-jobs-panel-logo-tiles: 8px;
  --radius-buttons-filter-chips-sort-select-log-in: 9999px;
  --radius-avatars-arrow-and-count-badges: 50%;
  --radius-tiny-inline-marks: 2px;
  --shadow-card-ring: oklch(0 0 0 / 0.06) 0px 1px 2px 0px, oklch(0 0 0 / 0.05) 0px 0px 0px 1px;
  --shadow-inner-light-rim: oklch(1 0 0 / 0.16) 0px 0px 0px 1px inset;
  --shadow-control-lift: oklch(0 0 0 / 0.08) 0px 0px 0px 0.5px, oklch(0 0 0 / 0.2) 0px 1px 1px -1px, oklch(0 0 0 / 0.08) 0px 1px 2px 0px;
  --shadow-glossy-brand-chip: oklch(1 0 0 / 0.7) 0px 1px 1px 0px inset, oklch(0.25 0.12 300 / 0.22) 0px -1px 2px 0px inset, oklch(0.25 0.12 300 / 0.18) 0px 1px 3px 0px;
  --container-site: none (fluid full width: ~230px sidebar plus a 4-column masonry);
}
```

## Theme tokens — light + dark

The shadcn-named layer DevDojo Sites speaks (`bg-background`, `text-foreground`, `bg-primary`, `rounded-medium`…). Paste into site.css after `@import "tailwindcss"` to restyle any site in this look.

```css
/* Recent — DevDojo theme tokens (light + dark). Generated from style.json. */
/* Drop into site.css after @import "tailwindcss": bg-background, text-foreground, bg-primary, border-border, rounded-medium… all read these. Dark mode: estimated — the site has no dark scheme, so the .dark half is a plausible twin of its palette. */
@custom-variant dark (&:where(.dark, .dark *));

:root {
    color-scheme: light;

    --background: #ffffff;
    --foreground: #0b0b0b;
    --card: #ffffff;
    --card-foreground: #0b0b0b;
    --popover: #ffffff; /* estimated */
    --popover-foreground: #0b0b0b; /* estimated */
    --primary: #0b0b0b;
    --primary-foreground: #ffffff;
    --secondary: #f0f0f0;
    --secondary-foreground: #0b0b0b;
    --muted: #f0f0f0;
    --muted-foreground: #7a7a7a;
    --accent: #f0f0f0;
    --accent-foreground: #0b0b0b;
    --destructive: #e5484d; /* estimated */
    --destructive-foreground: #ffffff; /* estimated */
    --border: #ebebeb;
    --input: #ebebeb; /* estimated */
    --ring: #0b0b0b; /* estimated */

    --radius-small: 2px;
    --radius-medium: 8px;
    --radius-large: 8px;
    --radius: var(--radius-medium);

    --font-body: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-display: Inter, system-ui, 'Helvetica Neue', Arial, sans-serif;
}

.dark {
    color-scheme: dark;
    /* estimated from the light palette */

    --background: #0b0b0b;
    --foreground: #f5f5f5;
    --card: #141414;
    --card-foreground: #f5f5f5;
    --popover: #141414;
    --popover-foreground: #f5f5f5;
    --primary: #ffffff;
    --primary-foreground: #0b0b0b;
    --secondary: #1f1f1f;
    --secondary-foreground: #f5f5f5;
    --muted: #1f1f1f;
    --muted-foreground: #8f8f8f;
    --accent: #1f1f1f;
    --accent-foreground: #f5f5f5;
    --destructive: #e5484d;
    --destructive-foreground: #ffffff;
    --border: rgba(255,255,255,0.08);
    --input: rgba(255,255,255,0.1);
    --ring: #ffffff;
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --radius-small: var(--radius-small);
    --radius-medium: var(--radius-medium);
    --radius-large: var(--radius-large);
    --font-body: var(--font-body);
    --font-display: var(--font-display);
}
```

# Recent — Style Reference
> quiet gallery wall, loud pictures

**Theme:** light · **Mood:** light, minimal, dense, photographic, precise, monochrome

Recent is a white-walled gallery for design inspiration. The interface almost disappears, so a dense four-column masonry of vivid shots, renders and UI captures does all the talking. The chrome is small, grey and polite. Everything is 13px Inter, with one ink-black pill for the main call to action and a single hand-drawn magenta "new" scribble as the only spot of brand colour.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Gallery White | `#ffffff` | `--background` | Page ground, card fill behind light media, mobile menu sheet |
| Ink | `#0b0b0b` | `--foreground` | Body text, active nav item, H1, active filter pill fill and Sign up button fill |
| Pebble Grey | `#7a7a7a` | `--muted-foreground` | Inactive nav links, tagline after the H1, member count, sponsor copy, inactive filter labels |
| Fog Label | `#b4b4b4` | `--subtle-foreground` | Sidebar section labels (Browse, Resources, Company), copyright line |
| Chalk Pill | `#f0f0f0` | `--secondary` | Inactive filter pill fill, Post a job button fill, media placeholder ground |
| Hairline | `#ebebeb` | `--border` | Card ring, divider above See all jobs, outline on the Log in and Recent pills |
| Scribble Magenta | `#ff1fa8` | `--accent` | Only brand colour: the hand-underlined "new" tag beside Launch Videos |
| Deep Media Black | `#000000` | `--media-dark` | Dark media tiles and sponsor tile grounds that sit inside the grid |

## Tokens — Typography

- **Body:** Inter (system-ui, -apple-system, Helvetica Neue, Arial, sans-serif) — weights 400/500
- **Display:** Inter (system-ui, Helvetica Neue, Arial, sans-serif) — weights 500

## Tokens — Radius

| Element | Value |
|---------|-------|
| Media cards, jobs panel, logo tiles | `8px` |
| Buttons, filter chips, sort select, Log in | `9999px` |
| Avatars, arrow and count badges | `50%` |
| Tiny inline marks | `2px` |

## Do

- Set nearly everything in 13px Inter, line-height 1.4, and build hierarchy with grey value (#0b0b0b vs #7a7a7a vs #b4b4b4) and 400/500 weight, not size.
- Use 9999px pills for every interactive control and 8px radius for every content card. Nothing in between.
- Outline cards with a ring shadow (0 0 0 1px at 5% black plus 0 1px 2px at 6%) instead of a CSS border.
- Make the images the only colour. Keep the chrome strictly black, white and grey.
- Mark the active nav item with ink text plus a small black dot. Leave the rest grey.
- Mix utility tiles (jobs, sponsors) into the masonry as ordinary cards so the grid never breaks.

## Don't

- Don't add large display headlines or hero sections. The H1 tops out at 16px.
- Don't use the magenta accent for buttons, links or backgrounds. It belongs only to the "new" scribble.
- Don't put coloured or tinted backgrounds behind sections. The page stays pure #ffffff.
- Don't use bold 600/700 weights or uppercase tracking for labels.
- Don't add visible 1px borders or heavy drop shadows to cards.
- Don't pad generously. Gutters are 12px and cluster gaps are 4px, so keep the feed dense.