frontend-design の実行検証

I've built index.html and styles.css in /work, but I haven't opened them in a browser. I can't promise how they look on a real phone yet, so give both a quick look. There are no external requests of any kind, and no JavaScript was needed.

Visual direction: the card catalog itself. Your committee said people love opening the drawers and asked us not to look like a tech startup. So the page is built from the cabinet and its cards.

• Header: a wooden drawer front with a brass label holder reading "Northside Seed Library" and a brass pull. It's drawn in CSS, with no images.
• How borrowing works: the five steps are ruled index cards with a red margin line and a big typewriter numeral. They tilt slightly, like cards that have been handled. Your brief says this really is a sequence, so it stays a numbered list.
• This season: each highlight is a catalog card with a tab (Tomato, Bean, Basil, Kale, Marigold). I filed them alphabetically by variety, as a catalog would.
• Numbers: 1,840 packets, 63 varieties and 37% returned appear as red rubber stamps.
• Packing nights: a ruled slip with the date and your email address.
• Visit: the address and a typewriter-style hours table.
• Type and colors: a warm serif for reading and a typewriter stack for labels and numbers, using only fonts already on the device. The palette is oak, brass, aged paper, library-stamp red and a seed-leaf green.

Phones: the layout is one column by default and goes to two columns for the cards and three for the stamps on wider screens. The main button is large, and the email address wraps instead of overflowing. The page respects reduced-motion settings and has a skip link and visible focus outlines.

Content: everything comes from your brief. The only additions are the small drawer labels ("Drawer 1", "Drawer 2", "Drawer 3") and the plant-type tabs on the cards. The tabs come straight from the variety names.

I've built /work/index.html and /work/styles.css. I haven't opened them in a browser or checked them on a phone, so look at both before you share it. The CSS is written mobile-first, with the layout widening at 40rem and 60rem. It uses no JavaScript, no external requests, and only system font stacks, so it works offline.

Visual direction: the page is one of your card catalog drawers.

• Hero: the top is a wooden drawer front with a brass label holder and a brass pull. The label card reads "Northside Seed Library" in typewriter type, with a red rule under it like a real catalog card. It slides in once on load, which is the only animation, and it's switched off for people who've asked for reduced motion.
• Sections: each one is a guide card with a tab, like the dividers in a drawer (Borrow, This season, Record, Volunteer, Visit).
• Borrowing steps: these are numbered because they really are a sequence. Step 5 has a red border to mark the November 30 return date.
• Highlights: the five varieties are written as catalog entries (for example "Tomato, 'Cherokee Purple'") on lined cards.
• Numbers: the three stats sit on a date-due slip with a blue stamp-style figure, instead of the usual big-number tiles.
• Palette and type: warm walnut wood, brass, pale card stock, blue-black typewriter ink, printed blue lines and one red rule. Headings and labels use a typewriter stack (American Typewriter, then Courier New). Body text uses a Palatino/Georgia stack.

I chose this because you said you're proud of the wooden catalog and don't want a tech-startup look. The drawer is the thing people already love about the library, so it carries the whole design. The rest stays plain: no gradients as decoration, no icon grids, no all-caps labels.

I added a few things that aren't in the brief:

• Wording: a line saying the 37% return rate is the number you'd like to grow, and "we'll save you a seat" on the volunteer contact line. Edit or cut these.
• Headings and tab labels: headings like "What the binder says" and "Find the cabinet", plus the tab labels. These are my wording, so change them if they don't sound like you.
• Footer: a short footer line saying the library is volunteer-run.
• Browser title: "Northside Seed Library: borrow seeds free at Elm Street".

I built index.html and styles.css in /work. I haven't opened the page in a browser, so I haven't seen how it looks on a phone. A search of both files found no external URLs, imports, fonts or frameworks, and there's no JavaScript. The page uses system font stacks only, so it works offline.

Visual direction: the card catalog itself. Your committee said people love opening the drawers and asked that it not look like a tech startup. So the page is built from the cabinet, drawn in CSS with no images:

• Header: an oak drawer front with a brass label holder and pull. The label reads "Northside Seed Library" in typewriter type.
• Section headings: they look like the tabbed dividers inside a drawer.
• How borrowing works: your five steps are slightly crooked catalog cards linked by a dashed line, because the brief says the order matters. Step 5, with the November 30 deadline, is marked in red.
• This season's highlights: ruled index cards with a red top line. Each has a small type label (Tomato, Bean, Kale, Flower, Herb) in place of a made-up call number.
• Numbers: the three figures sit on brass drawer-label plates on a dark wood band.
• Packing nights: a yellow note pinned up like a community-board flyer, with the contact email as a button.
• Visit: hours and address on a plain card, then a wood footer.

Why this works for you:

• First packet: "How to borrow your first packet" is the main button in the header, since getting people to borrow is the site's main job.
• Look and feel: the colors are oak, aged paper, brass and leaf green. The typography is a Palatino/Georgia-style serif for text and a typewriter stack for labels. Nothing resembles a startup landing page.
• Phones: the layout is one column on narrow screens and the cards reflow into a grid on wider ones. The text is large and the buttons are easy to tap.
• Accessibility: there is a skip link, visible focus outlines and reduced-motion support, and the pages print cleanly.

I added three small pieces of wording that aren't in the brief:

• The line "Returning seeds is how the library grows: seeds saved from plants that thrived here are the ones best suited to here." This follows from the brief's point about adapting to the local climate.
• The line "Run by volunteers. Seeds are free. Please bring some back." in the footer.
• The "Whether you're growing on a balcony, in a community plot, or in a school garden…" sentence in the Who we are section. It's there to address your three audiences.

Edit or remove any of them if you'd rather not have them.

I built index.html and styles.css in /work. I haven't opened the page in a browser, so I haven't checked the layout or how it looks on a phone.

The page is plain HTML and CSS with no JavaScript, no CDNs and no web fonts. It uses system font stacks, so it works offline.

Visual direction: the page is the card catalog cabinet. Your committee said people love opening the old drawers, and you asked for something that doesn't look like a tech startup. So the site looks like the cabinet itself.

• Hero: an oak drawer front with a brass label holder and pull. The label card carries the name and the headline, "Borrow seeds. Grow them. Bring some back." The drawer slides open once on load, which is the only motion on the page. It is turned off for people who have reduced motion set.
• Borrowing steps: these are the one place numbers are used, because they really are a sequence. Each step is a card with a brass divider tab.
• Season highlights: each variety is a catalog card, like the ones in your drawers. It has a typewriter heading, a red rule under it and a rod hole at the bottom. Genovese basil, your most borrowed packet, gets a green top edge.
• Numbers: 1,840 packets, 63 varieties and 37% returned appear as slightly crooked "date due" stamps in ink-blue, not as a row of big stats.
• Visit and help out: two more cards cover hours and address, and the packing nights with the contact email.

Palette: painted library green-grey for the background, oak and brass for the cabinet, off-white card stock, a catalog-card red for the rules, and a leaf green for the call to action. I avoided cream with terracotta, which is the usual look for this kind of site.

Type: a Palatino/Georgia-style serif for reading, and a Courier-style typewriter face only where it belongs, on the card headings.

Copy: all of it comes from your brief. The only wording I added is connective, such as the section headings and the short intro lines. Check that you're happy with it.

One thing to check: the typewriter and serif faces depend on what each device has installed, so the exact look will differ a little between phones and computers.