---
id: "2115614638599745546"
source: https://x.com/HamzaInstantly/status/2115614638599745546
author: "Hamza A. (@HamzaInstantly)"
media: "photo, 1782x1928 (first of 2 media items)"
model: claude-opus-5-5
generated: 2026-10-31
---
# Zigzag Feature Rows for Comment Moderation

## Summary
Two alternating feature rows for a comment-moderation product: each pairs a large dark-green headline and three icon-led benefits with a soft pastel illustration card built from simplified app UI. The first card shows a comment feed surrounded by floating "Hide ..." filter chips; the second shows a trigger, keyword and action rule above an automated reply thread. Worth studying as a clean, calm way to explain automation with abstracted UI rather than screenshots.

## Style
- Theme: light (white page with mint and lavender gradient cards)
- Mood: calm, trustworthy, clear, friendly
- Tags: feature-section, zigzag-layout, abstract-ui, floating-chips, icon-list, saas, pastel-gradient
- Category: Features

## Palette
| Role | Hex |
|---|---|
| Page background | #FFFFFF |
| Lavender card tint | #EEF0F7 |
| Mint tint | #E9F8F6 |
| Divider | #DBDEE1 |
| Muted text | #A3ABAD |
| Body text | #435450 |
| Heading ink | #0F2A22 |
| Mention blue | #4A5CF0 |

## Typography
- Section headlines ("Automatically hide or delete negative comments and spam"): grotesk sans, medium, sentence case, tight tracking (about -0.03em), three lines, about 3.5 percent of the image height per line. Inter Tight (500).
- Benefit titles ("Smart filter", "Saved replies"): same sans, regular, about half the headline size, dark ink. Inter Tight (400).
- Benefit body: regular sans, small, #435450, two lines. Inter (400).
- Chip labels and UI text in cards: tiny sans, medium, dark green or grey. Inter (500).

## Layout
- Portrait canvas (1782x1928) with a white page inside a faint 1px rounded border (about 24px radius).
- Two rows in a 2-column zigzag: row 1 has the card left and text right, row 2 flips; columns split about 50/50 with a 64px gutter, rows separated by about 180px.
- Cards: about 560 x 560px, 28px radius, 1px #DBDEE1 border, soft gradient fill from mint at the top-left to lavender at the bottom-right, with faint concentric circles behind the UI.
- Benefit lists: three items separated by 1px hairlines, each with a 44px mint icon tile (10px radius) on the left and 24px gap to the text.
- Generous 32px vertical rhythm between list items.

## Elements
- Feed mock: a browser-like window (three grey dots, 12px radius) with a grey image placeholder, three comment rows with small avatars and placeholder name text, and grey skeleton lines.
- Filter chips: white pills with a sparkle icon in green and labels ("Hide negativity", "Hide URL's", "Hide emails", "Hide mentions", "Hide hashtags"), each with a soft 0 4px 12px shadow, placed overlapping the window edges.
- User cursor: a blue arrow pointer with a "You" pill label and a hexagon-cropped avatar.
- Rule bar: a white strip with three columns (Trigger, Keyword, Action), each with an outline icon, a value below, and the keyword in a grey bordered pill.
- Reply thread: two speech-bubble cards in light grey linked by a thin vertical thread line; the agent reply starts with a blue @mention; "Like", "Reply" and timestamp microcopy below each.
- Icon tiles: mint squares with dark green outline icons (globe, person with sparkle, shield check).

## Motion
Static image. Idea: let the filter chips float in a slow 4 second bob with offset phases, and have the reply bubble type in after the rule bar highlights.

## Rebuild it
1. Section wrapper: `max-w-6xl mx-auto px-8 py-24 space-y-40`; each row `grid md:grid-cols-2 gap-16 items-center`, with `md:[&>*:first-child]:order-2` on the flipped row.
2. Headline: `text-5xl font-medium tracking-[-0.03em] leading-[1.05] text-[#0F2A22]`.
3. Benefit item: `flex gap-6 py-8 border-b border-[#DBDEE1]`, icon tile `size-11 rounded-[10px] bg-[#E9F8F6] grid place-items-center`.
4. Card: `aspect-square rounded-[28px] border border-[#DBDEE1] bg-[linear-gradient(160deg,#EAF8F3,#EEF0F7_70%)] relative overflow-hidden`, with a centred mini window built from divs and skeleton bars.
5. Chips: absolutely positioned `rounded-full bg-white px-4 py-2 text-sm shadow-[0_4px_12px_rgba(15,42,34,0.08)]` with a sparkle icon.
6. With Motion, animate chips `y: [0, -6, 0]` over 4s `repeat: Infinity` with a 0.4s offset each, and reveal rows with `whileInView` (opacity and y 24px, 500ms).

## Generation prompt
A clean light SaaS feature section in a two-row zigzag layout: large dark green sans-serif headlines with three icon-led benefits separated by hairlines, beside rounded pastel mint-to-lavender cards containing simplified app UI, a comment feed surrounded by floating white filter chips with sparkle icons, and an automation rule bar above a threaded auto-reply conversation; soft shadows, generous whitespace, calm and trustworthy, no real brand names.