ATHLETICOS INSIGHTS — FINAL ARTICLE HERO SCALE + EDITORIAL STORY RHYTHM
Worktree:
/Users/radioalabamasportsmac/sports-cms-dashboard/.worktrees/insights-public-polish
Branch:
feature/insights-public-polish
DO NOT redesign /insights landing page.
DO NOT change CMS/data/metadata.
DO NOT commit/push/merge.
CURRENT STATE
The light article-header direction is correct.
The remaining issue is the featured image and overall article rhythm.
The current featured image is STILL too large.
Even though it is centered, it visually dominates the entire article page and makes the story feel like a photo showcase instead of premium journalism.
We need to make the ARTICLE HEADER the first editorial moment, then the IMAGE, then quickly transition into the BODY.
==================================================
GOAL
==================================================
Desired article rhythm:
[ AthleticOS marketing header ]
CATEGORY / DATE
BIG HEADLINE
DEK
BYLINE COPY LINK
[ FEATURED IMAGE ]
[ ~850px wide ]
optional photo credit/caption
ARTICLE BODY
~720–760px
The image should feel important, but not consume most of the viewport.
==================================================
FEATURED IMAGE SCALE
==================================================
Desktop:
Target max width:
approximately 840–900px
Prefer around:
880px
Use the actual existing content grid and choose the cleanest exact value.
The image should remain wider than the article body.
Do NOT exceed roughly 900px on normal desktop.
Do NOT make it edge-to-edge.
Do NOT add a card container.
Do NOT add heavy shadow.
==================================================
IMAGE HEIGHT
==================================================
Preserve the editorial crop, but inspect whether strict 16:9 is contributing to the image feeling enormous.
If the source image and current architecture support it safely, consider a slightly shallower editorial ratio such as:
16:9
or
roughly 1.9:1
Do NOT crop athletes badly just to reduce height.
Priority:
good photography first,
better page rhythm second.
If 16:9 remains safest, keep it and reduce width only.
==================================================
ARTICLE HEADER WIDTH
==================================================
The story header should feel confidently wide but not disconnected from the image.
Align:
headline container
byline/share row
featured image
to a deliberate editorial grid.
Do not let the image feel randomly narrower than everything above it.
==================================================
HEADLINE
==================================================
Keep current general direction.
Do not make it heavier.
Do not change font family.
Just confirm:
- readable
- strong
- natural line breaks
- no excessive negative tracking
==================================================
BYLINE / SHARE ROW
==================================================
Refine alignment.
The Copy Link control currently feels detached.
Make the row feel intentional:
By AthleticOS • AthleticOS Insights Copy Link
Both should sit on the same baseline/grid.
The share action should remain understated.
==================================================
SPACE BEFORE IMAGE
==================================================
Reduce the gap slightly if needed so the image feels connected to the story header.
Target roughly:
24–36px
not a giant blank gulf.
==================================================
SPACE AFTER IMAGE
==================================================
The body should begin relatively soon after the image.
Target roughly:
32–48px
If a caption/credit exists, it sits immediately beneath the image and does not create excessive vertical space.
==================================================
PHOTO CREDIT / CAPTION
==================================================
If the Insights data model already supports featured-image alt/caption/credit:
render it subtly beneath the image.
DO NOT invent a new field.
If no credit/caption field exists:
skip it.
Do not expand scope.
==================================================
BODY WIDTH
==================================================
Keep article body around:
720–760px max
This gives the desired hierarchy:
HEADER = wide
IMAGE = medium-wide
BODY = narrow/readable
==================================================
ARTICLE BODY ENTRY
==================================================
Make sure the first paragraph is visible sooner in normal desktop scrolling.
The reader should not have to scroll through an entire screen of image before reaching the story.
This is a key success criterion.
==================================================
RELATED STORIES
==================================================
Do not change unless their placement is currently interfering with the primary article column.
The main story must dominate.
==================================================
MOBILE
==================================================
At 390px / 430px:
- image uses available content width
- normal page gutters
- no arbitrary 880px behavior
- headline stays strong
- byline/share stack cleanly
- article body starts naturally after image
- no horizontal overflow
==================================================
DO NOT TOUCH
==================================================
Do not change:
- /insights landing page
- topics menu/dropdown
- marketing header
- CMS
- publishing
- metadata
- database
- RecruitOS architecture
- StoryOS
- school sites
- GA4
==================================================
VALIDATION
==================================================
Run focused Insights tests.
Then:
next typegen
tsc --noEmit --pretty false
Targeted ESLint.
Do not commit/push/merge.
==================================================
RETURN
==================================================
Return:
1. old image max width
2. new image max width
3. final aspect ratio
4. header/image/body width hierarchy
5. spacing before image
6. spacing after image
7. byline/share alignment changes
8. caption/credit behavior if supported
9. mobile behavior
10. files changed
11. tests
12. TypeScript
13. ESLint
14. git status
15. confirmation no commit/push/merge
MOST IMPORTANT:
THE FEATURED IMAGE SHOULD BE POWERFUL, NOT DOMINANT.
WE SHOULD SEE THE ARTICLE BODY SOONER.
HEADER → IMAGE → STORY.
NOT:
HEADER → MASSIVE WALL OF PHOTO → EVENTUALLY STORY.