Skip to content

docs(readme): retake screenshots and adopt Block/buzz layout - #17

Merged
johnnyhuy merged 2 commits into
mainfrom
feat/refine-app-design
Jul 27, 2026
Merged

docs(readme): retake screenshots and adopt Block/buzz layout#17
johnnyhuy merged 2 commits into
mainfrom
feat/refine-app-design

Conversation

@johnnyhuy

Copy link
Copy Markdown
Contributor

Summary

Restructures the README to follow the Block/buzz pattern: full-width hero screenshot with a one-line caption, then stacked captioned screenshots under an "A look inside" section.

  • Screenshots moved to docs/assets/screenshots/ (buzz convention) and renamed by topic (workout-home, plan-week, profile-health) instead of by device
  • Retaken on iPhone 16 / iOS 26.2 against the current main demo state, so they show the post-mark, post-color-alignment product (greeting with the BetterFit mark, ember-tinted workout card hero, neutralised health stats)
  • README structure: tagline hero → "What it is, really" → "A look inside" (two stacked shots with bold captions) → features → architecture → install + dev workflow → license

Consequences

  • No source changes; docs only.
  • Old docs/screenshots/ios-*.png files removed.
  • README renders the same on dark and light GitHub themes; the dark-mode app screenshots naturally blend with the dark README sections.

Testing

  • Visual: hero shows the new mark greeting + Up Next card; "look inside" shots show the Plan week strip and the Profile health overview with their new accent-coloured stats.
  • Markdown renders cleanly on GitHub (verified by eye at 414×900 retina display).

Co-authored-by: opencode-agent noreply@opencode.ai

johnnyhuyand others added 2 commits July 27, 2026 14:57
The AthleteIllustration drew a single-stroke stick figure with a
red bar through it for the push pose. That read as clip art and
fights the design system's rule that illustration must use heavy
geometric forms with the same high-contrast confidence as the
mark.
AthleteIllustration now renders three compressed white ovals on
an ember-tinted surface -- the same three-oval form BetterFit's
brand mark uses for plates/repetition/momentum -- with a small
SF Symbol (arrow.up / arrow.down / figure.walk / heart.fill)
offset to the bottom as a category hint.
Removed: gradientColors, segments(), point(), drawAthlete(),
categoryColor. The new visual has no pose-dependent coordinates;
the pose only selects the SF Symbol.
Card hero space on PlayingCardWorkoutCard grows from 100x140 to
140x140 so the new mark has room to breathe.
Co-authored-by: opencode-agent <noreply@opencode.ai>
Block/buzz uses full-width hero + stacked captioned screenshots.
Mirrors that here:
- Move assets to docs/assets/screenshots/ (buzz convention)
- Rename to topic-based PNGs (workout-home, plan-week,
profile-health) instead of type-prefixed ones (ios-*)
- Single hero screenshot at the top with a one-line italic caption
- New 'A look inside' section with two stacked screenshots, each
linked and captioned in bold + soft followup
- Drop the 3-up table; the per-screen shots now have room to read
- Tighten the lead paragraph so the tagline does the talking
- Trim the feature list into a sentence-led section
- Compress the install + dev workflow into one block
Screenshots retaken on iPhone 16 / iOS 26.2 against the current
main demo state, retried after the mark / color alignment work
so they show the actual product state.
Co-authored-by: opencode-agent <noreply@opencode.ai>
@johnnyhuy
johnnyhuy merged commit 2349b9c into mainJul 27, 2026
5 of 7 checks passed
@johnnyhuy
johnnyhuy deleted the feat/refine-app-design branch July 27, 2026 06:41
johnnyhuy added a commit that referenced this pull request Aug 9, 2026
* fix(art): replace stick-figure athlete with the BetterFit mark
The AthleteIllustration drew a single-stroke stick figure with a
red bar through it for the push pose. That read as clip art and
fights the design system's rule that illustration must use heavy
geometric forms with the same high-contrast confidence as the
mark.
AthleteIllustration now renders three compressed white ovals on
an ember-tinted surface -- the same three-oval form BetterFit's
brand mark uses for plates/repetition/momentum -- with a small
SF Symbol (arrow.up / arrow.down / figure.walk / heart.fill)
offset to the bottom as a category hint.
Removed: gradientColors, segments(), point(), drawAthlete(),
categoryColor. The new visual has no pose-dependent coordinates;
the pose only selects the SF Symbol.
Card hero space on PlayingCardWorkoutCard grows from 100x140 to
140x140 so the new mark has room to breathe.
Co-authored-by: opencode-agent[bot] <219766164+opencode-agent[bot]@users.noreply.github.com>
* docs(readme): retake screenshots and adopt Block/buzz layout
Block/buzz uses full-width hero + stacked captioned screenshots.
Mirrors that here:
- Move assets to docs/assets/screenshots/ (buzz convention)
- Rename to topic-based PNGs (workout-home, plan-week,
profile-health) instead of type-prefixed ones (ios-*)
- Single hero screenshot at the top with a one-line italic caption
- New 'A look inside' section with two stacked screenshots, each
linked and captioned in bold + soft followup
- Drop the 3-up table; the per-screen shots now have room to read
- Tighten the lead paragraph so the tagline does the talking
- Trim the feature list into a sentence-led section
- Compress the install + dev workflow into one block
Screenshots retaken on iPhone 16 / iOS 26.2 against the current
main demo state, retried after the mark / color alignment work
so they show the actual product state.
Co-authored-by: opencode-agent[bot] <219766164+opencode-agent[bot]@users.noreply.github.com>
---------
Co-authored-by: opencode-agent[bot] <219766164+opencode-agent[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@johnnyhuy