Audit activity log

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. When a kit is locked, map colours onto the kit tokens. Keep the four filters and the row anatomy.

What it is

The activity screen for an ops tool. A title “Activity” and four pills: All, Access, Changes, Denied. All starts pressed. Below, six events. Each row is a mono timestamp, an 8px dot, a bold verb plus a sentence, and a badge. Filtering hides rows that are not that kind. Nothing animates. It should read like a yard log, not a social feed.

Reference behaviour

1. Initial state: All is aria-pressed="true". Six rows visible, newest conceptually at the top as listed: 09:41 sign-in through 10:22 password failure.
2. Click Access: only rows with kind info remain. Changes shows warning rows. Denied shows danger rows. All shows every row.
3. The pressed pill is ink fill with background-coloured text. The others are white with a hairline.
4. Dots: info #1e4f78, warning #8a5a10, danger #8d2f2f. Badges use the matching soft fill and the same ink.
5. Rows that do not match get display: none. Do not remove them from the DOM.
6. There is no pagination and no search in this piece.
7. Focus ring is 2px --focus with 2px offset on the pills.

Structure

header: h1 Activity | pill group
ol
  time 148px | dot | sentence | badge

• Filters are a group labelled “Filter events”. Each pill is a button with aria-pressed.
• The log is an ol of li.
• Time is a time element. The visible text is HH:MM:SS. A full datetime attribute is optional.

Tokens

:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --ink: #161513;
  --ink-2: #5a554c;
  --ink-3: #8a847a;
  --line: #e4dfd4;
  --primary: #1f4d3a;
  --danger: #8d2f2f;
  --danger-soft: #f8e8e6;
  --warning: #8a5a10;
  --warning-soft: #f8efd8;
  --info: #1e4f78;
  --info-soft: #e7f0f7;
  --focus: #1f4d3a;
  --font-text: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

Typography

• Title: IBM Plex Sans 500, 28px, tracking -0.03em.
• Verb: 14px, weight 600. The rest of the sentence is 14px, --ink-2.
• Timestamp: IBM Plex Mono 12px, --ink-3, column width 148px.
• Badge: 11px, weight 600, height 22px, padding 0 8px, pill radius.
• Pills: 12px, weight 500, height 32px.

Motion

None. Filtering is instant. Reduced motion changes nothing.

States

• Pill pressed and not pressed.
• Row visible or hidden by filter.
• Badge and dot variants: info, warning, danger. There is no success badge in this piece.

Accessibility

• The pill group has an accessible name.
• Pressed state is aria-pressed, not only a colour change.
• The verb is text, so the dot is not the only signal.
• --info, --warning, and --danger on their soft backgrounds must stay at or above 4.5.
• Do not auto-refresh the log in the demo.

Responsive rules

• At 1280 the row is four columns: 148px, 16px, fluid text, badge.
• At 768 the timestamp stays on the left.
• Below 640 the badge wraps under the sentence, and the timestamp column shrinks to 96px with the same mono size.

Acceptance checklist

• Six events render in the listed order.
• All is pressed on load.
• Access, Changes, and Denied each hide the other kinds.
• Timestamps are IBM Plex Mono. Prose is IBM Plex Sans.
• Dots are 8px. Badges name the kind in words.
• Pressed pill is ink on background, not a second palette.
• Hidden rows stay in the DOM.
• No motion, no emoji, no avatar images.

Implementation notes

Store the kind on data-kind. The filter buttons use data-f of all, info, warning, or danger. One listener can serve every pill.

Do not colour the whole row. The signal is the dot, the badge, and the verb. A full-row danger wash makes a log unreadable at fifty lines.

In the product, append new events at the top without resetting the active filter.

Rebuild in this order:

1. Page #f6f4ef. Title padding 22px 32px 12px. Title 28px, weight 500, tracking -0.03em.
2. Pills height 32, padding 0 12px, radius 999px, 12px weight 500. Rest fill white, border #e4dfd4, text #5a554c.
3. Pressed pill fill #161513, text #f6f4ef, border the same ink.
4. List padding 0 32px 32px.
5. Row grid 148px 16px 1fr auto, padding 12px 0, top rule #e4dfd4.
6. Time IBM Plex Mono 12px #8a847a.
7. Dot 8px circle, margin-top 6. Info #1e4f78. Warning #8a5a10. Danger #8d2f2f.
8. Verb 14px weight 600. Remainder 14px #5a554c.
9. Badge height 22, padding 0 8px, radius 99px, 11px weight 600.
10. Access badge fill #e7f0f7 ink #1e4f78. Change badge fill #f8efd8 ink #8a5a10. Denied badge fill #f8e8e6 ink #8d2f2f.
11. The six times are 09:41:12, 09:44:03, 09:51:40, 10:02:18, 10:16:55, 10:22:07.
12. Verbs, in order: Signed in, Rate changed, Export denied, Key copied, Member invited, Password failed.
13. Kinds in that order: info, warning, danger, info, warning, danger.
14. Filtering uses display none. Rows stay in the DOM.
15. Do not add avatars, a search field, or a live clock.

Common mistakes to avoid:

• Sorting the list when a filter is clicked. Order stays as authored.
• Removing denied rows from the DOM. They are display none.
• Using red text for the whole “Export denied” sentence. The verb stays ink. The badge carries the status colour.
• A 16px dot. The dot is 8px.
• Making All a dropdown. It is one of four pills.
• Adding pagination after six rows.
• Live-updating the clock in the timestamps.
• Using a table element. This is an ordered list.
• Giving every row a card shadow.
• Translating the verbs. Keep the six verbs as written.
• Filtering with opacity 0. Hidden rows must not take space and must not be readable as if present.
• Adding a fifth pill for Success. This log has access, change, and denied.
• Rewriting “Rate changed” as “Updated”. Keep the verb.
• Putting the badge before the sentence. The badge is the last column.
• Using 13px for the timestamp. It is 12px mono.
• Collapsing the 148px time column at 1280. That column is for the desktop frame.
• Adding a row hover that covers the badge. Hover is not part of this piece.
• Centering the title. It is left aligned with the list’s 32px padding.
• Giving Denied a heavier font than the other verbs. All verbs are weight 600.
• Inserting a date header between morning and the later events. The list is one sequence.
• Colouring the page title green. The title is ink. Green is not a brand fill here.
• Making the pills 40px tall. They are 32px.
• Adding a divider under the header besides the first row’s top rule.
• Exporting the log from a button. There is no export control on this screen.