BRAND Craigslist 2026 · Page: home

HEADER brand: Craigslist; design_date: 2026-09; page_type: home; variants: every city site home (/area/<site>) and subarea home (/subarea/<code>) use this layout with their own subareas, calendar and nearby list example_urls: https://sfbay.craigslist.org/ (redirects to https://www.craigslist.org/area/sfbay) evidence: measured on live https://www.craigslist.org/area/sfbay 2026-09-29 (homePage-2026-09-21 CSS rules .cl-desktop-homepage / .cl-mobile-homepage and computed styles of the JS-rendered DOM at 1440x900 and 390x844 @2x) unless marked purpose: get the visitor into a category, a search or "post an ad" in one click skeleton: desktop: three centered columns (left panel 214px, center 581px, right panel 127px, 10px margins, total ~962px from x 239 to 1201 at 1440), no header bar, footer band; total height 1147px at 1440 (almost one screen). Mobile (<=480): full-height app: header 45px, search 43px, two-pane category picker (fills the viewport), footer 32px; height = viewport (844px). sidebar: both (left and right panels) overrides: no global header on desktop (the left panel and the center top banner replace it); body font 16px, left panel 14px SECTIONS S1 left panel / brand, post, search, calendar, help - start points background: #eeeeee, 1px #cccccc left and right borders, full content height (1083px); padding 5px 8px 8px; width 196px; items centered in a flex column with 64px top margins between groups elements: (1) wordmark row 156x37: peace-sign glyph 32px (icomoon) + 8px + "craigslist" 32px Times New Roman #800080, top 15px; on holidays the glyph swaps (pi, ghost); (2) "post an ad" 19px #009900 on white, padding 5px 8px, margin 16px 0, pen-in-square glyph before it (127x32); (3) search combo 196x30: white, 1px #ccc, radius 4px, padding 3px, magnifier glyph #aaa, input 16px placeholder "search craigslist"; (4) 64px gap; "event calendar" 14px 700 #00E link; calendar table 187x165: header row S M T W T F S 15.4px #222 on #dddddd, 5 week rows, cells 27x27 with 1px #ccc borders and padding 5px, 14px centered numbers; past days #666666 on #dddddd (no link), today and future days #00E links on white; today cell #ffffcc with 1px #000 border; (5) 3 links 14px #00E centered, 0.8em apart: "help, faq, abuse, legal", "avoid scams & fraud", "personal safety tips"; (6) 5 links: "about craigslist", "best-of-craigslist", "craigslist is hiring", "what's new", "system status"; (7) "craigslist charitable" 14px #00E with a row of 5 emoji (🌎🐮🐷🐔🐟) letter-spacing 5px under it; (8) "craig newmark / philanthropies" two lines copy: all lowercase, 2-4 words per link motion: none; hover underline on links (#0000B3) responsive: replaced on mobile (see S6) S2 center top banner / location bar - show and change the area background: #eeeeee, 1px #cccccc top and bottom, 581x46px, flex space-between, overflow hidden elements: left: map-pin glyph 22px + "SF bay area" 22px/16px Times New Roman #00E (link-like button, margin 0 16px, hover underlines the label); 6 subarea buttons "sfc sby eby pen nby scz" 13px/16px #00E on white, padding 3px, margin 0 3px, no border, radius 0, hover underline; right: 3 thumb buttons 44x44: ⭐ (#ffd508) faves, ✍ (#090) post, 👤 acct; icon 20px, label 10px #000 under it; label hover underline responsive: on mobile becomes the 45px app header S3 center category directory / link tables - browse every section background: #ffffff; starts 8px under S2; 3 flex columns with 16px gaps and justify space-between: left ~208px, center ~206px, right ~135px layout: left column: community (2 link columns x 8), services (2 columns 11 + 10), discussion forums (3 columns x 17); center column: housing (1 column x 12), autos (2 columns x 6), for sale (2 columns x ~21); right column: jobs (1 column x 31), gigs (2 columns x 4), resumes (heading only) elements per table: heading bar 36px: #eee, 1px #ccc top and bottom, padding 3px 0, centered emoji 16px + 8px + label 16px 700 #00E (🌈 community, 🛠 services, a small icon for discussion forums, 🏠 housing, 🚗 autos, 📚 for sale, 🌞 jobs, 🌛 gigs, 📎 resumes); link columns side by side with 8px gaps; each link row 23px: 14px #00E label, padding 3px, 1px #ccc bottom rule (none on the last row); hover: row bg #eeeeee + #0000B3 + underline; tables 8px apart copy: short lowercase category names with " / " and " + ": "apts / housing", "lost + found", "rants & raves", "cars + trucks", "software / qa / dba", "wanted: apts" motion: none responsive: replaced on mobile by the two-pane picker (S6) S4 right panel / language and other sites - switch locale or city background: #eeeeee, 1px #cccccc left and right, padding 8px, content 108px wide, full height elements: language combo "english" 99x24 (white, 1px #ccc, radius 4px, chevron) with 1.5em below; expando groups as full-width bars (#eee, 1px #ccc top and bottom, 14px/16px 700 #00E, padding 3px 0): "nearby cl" expanded by default (bar turns white; list of ~30 nearby sites 14px #00E centered, padding 3px: bakersfield, chico, fresno, gold country ...), then collapsed "us cities", "us states", "ca cities", "ca provs", "cl worldwide" (23px each) motion: click toggles a list open instantly S5 footer / minimal - legal links background: #eeeeee, 1px #ccc top, 22px above it, 32px high, centered row: "© 2026 craigslist" 12.8px, then help, safety, privacy, terms, about, app, sitemap 13px #00E padding 5px margin 3px S6 mobile home (<=480) / category-picker app - replaces S1-S5 background: white with a lavender (#e6e6fa) vertical "craigslist" watermark in Times New Roman 110px (writing-mode vertical-rl) at the right edge behind the list (60px in landscape) elements top to bottom: header 45px #eee with 1px #ccc bottom: 44x44 peace glyph #800080 (28px), two-line button "location ⌄ / SF bay area" 16px #222, right: ✍ post and 👤 acct thumb buttons; search field 380x33 (5px margins, 1px #ccc, radius 4px, magnifier, "search craigslist"); two-pane picker with 1px #ccc top: left pane 102px #eeeeee listing the 7 sections (autos, community, for sale, gigs, housing, jobs, services) right-aligned 16px #00E, 44px rows (padding 14px 8px), 1px #ccc right border; the selected section is white and joins the right pane like a tab (its borders turn white, the rows above and below get a 4px radius corner and a 1px #ccc rule); right pane 288px: "ALL JOBS" (caps) then categories 14.4px/16px #00E, 42px rows (padding 0.9em), scrolls inside with white fade hints top and bottom (linear-gradient white to transparent, 2em); footer 32px #eee: "© 2026 craigslist" + help safety privacy terms forums 13px motion: tapping a section swaps the right list instantly; scroll hints appear when the list is scrolled responsive: landscape phones keep the picker, watermark 60px PAGE COMPONENTS calendar (event calendar): table, header row 15.4px on #ddd, cells 27x27 1px #ccc, padding 5px, today #ffffcc with a black 1px border, future days #00E links to events on that date, past days #666 on #ddd without link heading bar link: see Overview COMPONENTS thumb button (faves / post / acct): 44x44, emoji or glyph 20px centered on top, 10px label under it, no border; selected state bg #f4e8ff bold #666 two-pane category picker (mobile): see S6 INTERACTIONS - id: home.expando element: right panel groups (nearby cl, us cities, us states, ca cities, ca provs, cl worldwide) trigger: click open: list display none -> flex column; the bar bg #eee -> white; instant children: none animated close: instant, bar back to #eee switch: several groups can be open at once (inf) keyboard: bars are buttons (Tab, Enter/Space), focus ring outline 5px auto touch and mobile: not on mobile (location dialog instead) reduced motion: already instant - id: home.search element: left panel search field trigger: type / Enter open: suggestions list under the field (white, 1px #ccc, items padding 5px, hover #bacff2) and a category chooser dialog after Enter (title bar, white body with bottom radius 10px, query 125% padding 16px, category buttons 125% padding 16px) close: Escape or selection; instant - id: home.location element: "SF bay area" in S2 (desktop) or the location button (mobile) trigger: click open: location dialog (desktop: area columns dialog; mobile: full-screen "search location" with map / nearby areas and subareas tabs, see Overview screenshot); instant close: circled x; instant STATES loading: a white curtain covers the page (opacity 1) until the app renders; no skeleton holiday: the peace glyph is swapped for a holiday glyph (pi day π, April fools 👻) linking to a special page no-js: a static message "craigslist" in #00E on a #ccc bar asks to enable JavaScript empty / error: n/a SCREENSHOTS - file: craigslist_2026_home_d1440_full.jpg shows: full home at 1440, 1440x1147 (one screen plus the footer), default state, nearby cl expanded source: live https://www.craigslist.org/area/sfbay 2026-09-29 key values: columns 214 / 581 / 127px centered; heading bars #eee 36px; links 14px #00E rows 23px with #ccc rules; calendar today #ffffcc; footer #eee 32px do not copy: peace-sign logo and wordmark, category emoji choice - file: craigslist_2026_home_m390_full.jpg shows: mobile home 390x844 @2x (the page is exactly one viewport): header, search, picker with jobs selected, lavender watermark, footer - file: craigslist_2026_home_m390_forsale.jpg shows: mobile home after tapping "for sale" in the left pane: the white tab moves, the right list shows "ALL FOR SALE" and the for-sale categories - see also Overview files craigslist_2026_home_d1440_top.jpg, craigslist_2026_home_m390_top.jpg and craigslist_2026_overview_m390_location-picker.jpg (location overlay)