School admissions home

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them.

What it is

The home page of Ashcombe Vale College, a made-up day and boarding college for Grades 11 and 12. It is a long, scrolling page aimed at parents and students who are deciding where to apply for the 2027 intake. The ground is warm cream, the ink is navy, and two loud colours are rationed: tomato for the main action and the deadline, mustard for the next date, the scholarship note, and small dots. Headings are set in a book serif, everything else in a geometric sans. The detail worth copying: the campus drawing and the section icons are built only from circles, squares, and triangles in the four brand colours, so the page feels like a school with a point of view rather than a stock template.

Reference behaviour

1. First frame at 1280x800: sticky nav, the hero (headline, lede, two buttons, three facts, campus drawing), and the top of Key dates with the timeline line in view.
2. The nav is sticky at the top, 68px tall, with a 1px hairline under it. It holds the logo, five links, and an “Apply for 2027” button in tomato.
3. Hero buttons: “Apply for 2027” (tomato fill, arrow icon) and “Book a campus visit” (navy 2px outline, calendar icon). Both jump to the enquiry form. Scrolling is smooth unless reduced motion is on.
4. Key dates shows five dates on one horizontal line: 1 Nov 2026 Applications open, 12-13 Dec Open days, 31 Jan 2027 Deadline, 20 Feb Entrance test, 15 Mar Results.
5. The next date (Applications open) has a mustard dot and a “Next” tag. The deadline has a tomato diamond instead of a circle. Other dates have hollow navy circles.
6. A line above the timeline reads “Today is 3 October 2026. Applications open in 29 days.”
7. Programmes shows 9 cards in a 3-column grid, three per stream. Filter chips sit top right: All, Science, Arts, Commerce. All starts pressed.
8. Clicking a chip shows only that stream’s 3 cards and updates the count line, for example “Showing 3 programmes in Science”. All restores 9. The count line is a polite live region.
9. Each card shows a stream mark (navy circle for Science, tomato triangle for Arts, mustard square for Commerce), the stream name, the programme name, its subjects, then seats and “2 years” under a hairline.
10. Fees shows a table: Science, Arts, Commerce, and a one-off admission fee. Columns: Per term, Lab or studio, Per year. Per year is term times three plus lab. A caption under the table says amounts are in NPR and boarding adds NPR 210,000 a year.
11. Beside the table, a mustard-tint scholarship card explains merit and need-based aid, with a link to the FAQ.
12. Student life is a 4-cell strip inside one navy 1px frame: 38 clubs, 11 sports teams, 220 boarding places, 96% go on to university. The second cell is inverted (navy ground, cream text).
13. Parent FAQ has five questions in details elements. The first starts open. Its round plus icon rotates 45 degrees and fills mustard when open.
14. The enquiry form sits beside the FAQ: Parent name, Email, Phone, Student enters (select), I would like to (select), Message, a prospectus checkbox, and “Send enquiry”.
15. Submitting with errors marks each bad field with a tomato border and a message under it, and moves focus to the first bad field. Required: name (2+ characters), email (has @ and a dot), grade.
16. A valid submit shows a mustard-tint status line: “Thank you, [name]. We have your request to [choice]. Admissions will reply within two working days.”
17. Footer is a navy band with the address, office hours, email, and phone.

Structure

1280 wide, page scrolls, container 1200 max, 40px side padding
+--------------------------------------------------------------------------+
| [logo] Ashcombe Vale        Programmes Admissions Fees Life Parents [Apply]| 68 sticky
+--------------------------------------------------------------------------+
| . ADMISSIONS 2027 . GRADES 11 AND 12      |  +------------------------+   |
| Two years to find out                     |  |  sun   tower           |   |
| what *your* mind is for.        56px      |  |    hall   wing  flag   |   |
| lede 19px                                 |  |  ground band + road    |   |
| [Apply for 2027 ->] [Book a campus visit] |  +------------------------+   |
| 1,140 students | 14 per teacher | 38 clubs |      1.12fr : .88fr         |
+--------------------------------------------------------------------------+
| . KEY DATES   The 2027 intake, start to finish                            |
| o-----------o-----------<>-----------o-----------o    5 equal columns     |
+--------------------------------------------------------------------------+
| . PROGRAMMES  Choose a stream...         [All][Science][Arts][Commerce]   |
| [card][card][card]  x3 rows, gap 20                                       |
+--------------------------------------------------------------------------+
| . FEES  What a year costs  table 1.6fr      | Scholarships card 1fr        |
+--------------------------------------------------------------------------+
| . STUDENT LIFE  [38][11 inverted][220][96%]  one framed strip             |
+--------------------------------------------------------------------------+
| . FOR PARENTS  FAQ x5           | . ENQUIRE  form, 2 columns              |
+--------------------------------------------------------------------------+
| navy footer                                                              |
+--------------------------------------------------------------------------+

• header.top is sticky, with a.logo, nav aria-label="Main", and the Apply link styled as a button.
• main holds six section elements, each with aria-labelledby pointing at its h2. Sections are split by a 1px --line top border and 72px vertical padding.
• The hero facts are a dl. The campus drawing is one inline svg with role="img" and an aria-label.
• Key dates is an ol with time datetime in each item.
• Filter chips are a role="group" of buttons with aria-pressed. Cards are an ul of li.card; hidden cards get the hidden attribute.
• Fees is a real table with caption, th scope="col" and th scope="row". The scholarship card is an aside.
• Student life is an ul of four li.
• FAQ uses native details and summary.
• The form uses label for, aria-describedby to error spans, and a role="status" paragraph for the thank-you.

Tokens

:root {
  /* ground */
  --cream: #f4eee1;      /* page */
  --paper: #fbf8f1;      /* cards, form, life cells */
  --sand: #e8dfcc;       /* drawing ground, chip hover */
  --line: #d6cbb4;       /* hairlines, input borders */

  /* ink */
  --navy: #1b2a4a;       /* text, frames, buttons outline */
  --navy-2: #34466e;     /* italic word, drawing wing */
  --ink-2: #46526b;      /* lede, card body */
  --ink-3: #5f6a80;      /* captions, meta */

  /* rationed accents */
  --tomato: #c8402a;     /* primary action, deadline, focus */
  --mustard: #e2a72e;    /* next date, eyebrow dots, open FAQ icon */
  --mustard-bg: #f6e6bd; /* scholarship card, tags, success, input glow */

  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;

  /* type scale */
  --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px; --t-16: 16px;
  --t-17: 17px; --t-19: 19px; --t-22: 22px; --t-24: 24px; --t-30: 30px;
  --t-36: 36px; --t-56: 56px;

  /* spacing, 4px base */
  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-14: 56px; --s-18: 72px;

  --r: 6px;              /* buttons, cards, inputs, drawing */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 150ms;
  --med: 240ms;
}

No shadows except the 3px mustard-tint focus glow on inputs. No gradients.

Typography

Role	Family	Size	Weight	Line-height	Tracking	Case
Hero h1	Libre Caslon Text	56px	400	1.06	-0.01em	sentence, one italic word
Section h2	Libre Caslon Text	36px	400	1.15	-0.01em	sentence
Card h3	Libre Caslon Text	22px	400	1.2	-0.01em	title
Timeline date	Libre Caslon Text	24px	400	1.2	0	-
Fact and life numbers	Libre Caslon Text	30px / 34px	400	1.1 / 1	0	-
Eyebrow	Jost	13px	600	1.5	0.12em	upper
Lede	Jost	19px	400	1.55	0	sentence
Body	Jost	16px	400	1.55	0	sentence
Card body	Jost	15px	400	1.55	0	sentence
Stream label, table head	Jost	12-13px	600	1.5	0.06-0.1em	upper
Buttons, nav	Jost	15-16px	500-600	1	0	sentence
Meta, caption	Jost	13-14px	400	1.5	0	sentence

The italic word in the h1 (“your”) is --navy-2. Serif is for headings and numbers only. Never set body in the serif.

Motion

Thing	Trigger	Property	From → to	Duration	Easing	Reduced motion
Anchor jumps	click nav or CTA	scroll	-	browser smooth	-	scroll-behavior: auto
Button press	active	translateY	0 → 1px	150ms	--ease	no transition
Button hover	hover	background	fill → darker or navy	150ms	--ease	no transition
FAQ icon	open/close	rotate, background	0 → 45deg, none → mustard	240ms	--ease	instant
Filter	chip click	cards show/hide	-	instant	-	same

Nothing animates on load. The page is calm on purpose.

States

• Primary button: tomato fill, white text. Hover #ad3522. Active moves down 1px.
• Secondary button: 2px navy outline, transparent. Hover fills navy with cream text.
• Nav link: hover shows a 2px mustard underline.
• Chip: 1.5px navy outline. Hover --sand fill. Pressed navy fill, cream text.
• Card: no hover lift. Cards are information, not links.
• Timeline dot: default hollow navy circle 20px. Next: mustard fill. Deadline: tomato square rotated 45deg.
• FAQ: closed shows a plus in a 28px ring. Open rotates it to a cross and fills mustard.
• Input: 1.5px --line border, white fill, 46px tall. Focus: navy border plus a 3px --mustard-bg ring. Error: tomato border, message in #b23a24 13px.
• Success: status paragraph appears with --mustard-bg fill and 6px radius. Empty, it is display: none.
• Focus-visible on links and buttons: 2px tomato outline, offset 3px.

Accessibility

• One h1. Each section has an h2, and aria-labelledby ties the section to it.
• The campus svg has role="img" and a one-sentence label. All icon SVGs are aria-hidden="true".
• Chips use aria-pressed. The count line under them is aria-live="polite" so the result is announced.
• Hidden cards use the hidden attribute, so they leave the accessibility tree.
• The fees table has a caption and row and column headers.
• FAQ uses native details, so Enter and Space toggle it with no script.
• Every input has a visible label. Errors are linked with aria-describedby, the field gets aria-invalid="true", and focus moves to the first bad field.
• The thank-you message is role="status".
• Contrast: navy #1b2a4a on cream is about 13:1. #5f6a80 on cream is about 5:1. White on tomato #c8402a is about 5:1. Do not lighten the tomato; #d9482f drops under 4.5:1.
• Buttons are 48px tall (40px in the nav). Chips are 40px. Checkbox is 20px with the whole label clickable.

Responsive rules

• 1280 and up: as drawn. Container 1200px, 40px side padding.
• 1024 (up to 1100): nav link gap 16px, h1 46px, student life becomes 2x2.
• 768 (up to 900): nav links hide; logo and Apply stay. Hero, fees, and FAQ+form stack to one column with 40px gap. Programmes grid becomes 2 columns. Hero drawing sits under the text.
• Under 640 (up to 767): side padding 20px, section padding 52px, h1 38px, h2 30px, lede 17px. Timeline turns vertical: the line runs down the left at 10px, dots sit on it, text indents 40px. Programmes, student life, and the form go to one column. The “Lab or studio” column hides; the per-year total stays. The logo subline hides.
• At 390 nothing overflows sideways. Every grid uses minmax(0,1fr).

Acceptance checklist

Always

• Four colours only: cream ground, navy ink, tomato and mustard in small doses. Tomato marks the main action and the deadline.
• Headings in the serif, body in the geometric sans. One italic word in the h1.
• Radius is 6px on buttons, cards, inputs, and the drawing. No pill shapes.
• The illustration and icons use only circles, squares, and triangles. Inline SVG, no images.
• Two hero actions: apply (filled) and visit (outline).
• The timeline marks the next date and the deadline differently from the rest, not by colour alone (diamond vs circle, plus a “Next” tag).
• Filters use aria-pressed and a live count line.
• Form errors show per field, and focus moves to the first one.
• Timeline goes vertical under 768. No horizontal scroll at 390px.

This demo

• College name Ashcombe Vale, est. 1962. Headline “Two years to find out what your mind is for.”
• Facts: 1,140 students, 14 per teacher, 38 clubs.
• Five dates from 1 Nov 2026 to 15 Mar 2027. Deadline 31 Jan 2027.
• 9 programmes, 3 per stream. Science, Arts, Commerce.
• Fees per year 186,000, 155,000, 156,000 NPR, admission 25,000.
• Sixty merit scholarships of 25-100 percent.
• Five FAQ items. The first is open.

Implementation notes

1. The timeline is one line and five dots. Draw the line once on the ol, not per item. Flip it to vertical with the same pseudo-element.

.dates ol { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); position: relative; list-style: none; padding: 0; }
.dates ol::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--navy); }
.dates li { position: relative; padding: 40px 20px 0 0; }
.dates li::before { content: ""; position: absolute; top: 2px; left: 0; width: 20px; height: 20px;
  border-radius: 50%; background: var(--cream); border: 2px solid var(--navy); }
.dates li.next::before { background: var(--mustard); }
.dates li.due::before { background: var(--tomato); border-color: var(--tomato); border-radius: 3px; transform: rotate(45deg); }
@media (max-width: 767px) {
  .dates ol { grid-template-columns: minmax(0,1fr); }
  .dates ol::before { left: 10px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .dates li { padding: 0 0 28px 40px; }
}

2. Windows with an SVG pattern. The hall and the wing are one rect each, filled with a pattern of small window rects. This keeps the drawing under 2 KB.

<pattern id="w" width="26" height="32" patternUnits="userSpaceOnUse">
  <rect x="7" y="8" width="12" height="16" fill="#f4eee1"/>
</pattern>
<rect x="40" y="180" width="270" height="190" fill="#1b2a4a"/>
<rect x="53" y="196" width="244" height="160" fill="url(#w)"/>

Build order inside the drawing: mustard sun, sand hills, navy hall, tower with a tomato roof and a cream clock, tomato arched door, lighter navy wing with mustard windows, flag, navy ground band with a dashed cream road line.

3. Filter with one handler. Keep the cards in the DOM and toggle hidden.

chips.forEach(b => b.addEventListener('click', () => {
  chips.forEach(c => c.setAttribute('aria-pressed', c === b));
  const f = b.dataset.f; let n = 0;
  grid.querySelectorAll('.card').forEach(c => {
    const on = f === 'all' || c.dataset.s === f; c.hidden = !on; n += on;
  });
  count.textContent = `Showing ${n} programmes${f === 'all' ? '' : ' in ' + b.textContent}`;
}));

Remember .card[hidden] { display: none }, because .card { display: flex } beats the default hidden rule.

Common mistakes:

• Using tomato for every button and link. It is for Apply and the deadline only.
• Adding a fifth colour for the “Science” tag. Streams use navy, tomato, mustard shapes.
• A photo hero. The point is the geometric drawing.
• Rounded pills on chips. Keep 6px.
• A carousel for programmes. Use the grid and the filter.
• Errors shown only as a red border with no message.
• Leaving the “Lab or studio” column at 390px so the table scrolls sideways.

Rebuild order:

1. Tokens and the two fonts.
2. Sticky nav.
3. Hero text, buttons, facts.
4. Campus drawing.
5. Timeline, then its vertical version.
6. Programmes data, cards, filter.
7. Fees table and scholarship card.
8. Student life strip.
9. FAQ and form, with validation.
10. Footer, then the breakpoints at 1100, 900, and 767.