Design record · 15 July 2026

A calmer space for serious improvement.

This page records the visual decisions behind BratMi’s coaching site. The aim is not to manipulate a visitor into action; it is to remove friction, make the next step obvious, and give the coaching story room to breathe.

The color system

Deep indigo #10172C: The reading surface. Its blue-violet character feels focused and composed while staying softer than pure black, which can create harsh white-text glare.
Soft white #F8F6F0: Primary reading text. It is deliberately warmer than stark white, so long-form copy has less visual bite against the dark field.
Calm teal #85E5D2: Used for the brand mark, navigation state, links, and the primary invitation. One consistent action color reduces the need to hunt for the next step.
Warm peach #FFAD8D: Used sparingly for sequence numbers, results, and the hover state. It adds human warmth without competing with the primary action.
Muted blue-gray #B9C0D3: Used for supporting copy. It preserves hierarchy without dropping supporting information into low-contrast gray.

Comfort is more than color

The hero now contains a direct Discord route and a low-commitment “See how I coach” route. Visitors can choose a conversation or learn more without being pushed into a single path.
A translucent sticky header keeps orientation and contact available while preserving the visual context of the page behind it.
Content is split into short, named stages and stable card shapes. This makes the coaching process easier to scan before a visitor commits time to reading it.
Hover lift is limited to people who have not requested reduced motion. Keyboard focus remains visible with a high-contrast peach outline, and links never depend on color alone for their meaning.

Measured contrast

Contrast was checked against the deep-indigo field: body text is 16.45:1; supporting text is 9.77:1; teal is 11.97:1; peach is 9.83:1; and the dark text on the teal call to action is 11.09:1. These all exceed WCAG AA contrast requirements for normal text. Gradient and panel treatments stay behind text rather than becoming the text’s only background.

Coaching story

The introduction describes BratMi as a 16-year-old passionate grinder working toward a coaching dream, then makes the experience promise explicit: detailed explanations, visual representations, open questions, and research-led answers when a problem is new.

Current facts

Games: Valorant and CS2
Experience: Four players coached: three Valorant players and one CS2 player.
Evidence: The existing Silver 1 to Platinum in four weeks Valorant case study remains on the homepage.
Contact: The existing Discord invite remains the primary contact route.

Evidence roadmap

The testimonials tab intentionally contains placeholders. It will not show invented quotes, anonymous star ratings, or a result screenshot presented as proof of a coaching relationship. The public BratMiAIM YouTube profile is linked from the proof section and footer because it shows real public work, including a VOD review.

For the best future coaching proof, record one focused 4–7 minute session excerpt with the current client’s written permission. Export it at 1080p in 16:9, use English captions when the spoken language is not English, and remove Discord tags, real names, private messages, account emails, or anything else the client has not agreed to publish.

0:00–0:15 — context. Add a title card: game, the client’s agreed goal, and the specific skill being worked on. Do not promise a rank result.
0:15–1:30 — diagnosis. Show one short gameplay or aim-training moment and explain the exact issue in plain language.
1:30–4:30 — coaching interaction. Keep the client’s question or attempt, your explanation or visual cue, and your live correction. This is the part that demonstrates coaching rather than only the client’s progress.
4:30–6:00 — application. Show the client trying the adjustment once or twice, then give a concise recap and next practice step.
6:00–7:00 — attribution. Add only an approved, factual caption such as “Recorded coaching excerpt, shared with client permission.” If the client provides a written review, publish it unchanged with their chosen name or anonymous label.

A Silver-to-Platinum screenshot can still be useful when labelled client-submitted progress result; do not say the coaching caused it unless the client has explicitly approved that statement. The long native-language videos can be retained as source material, but publish a 60–90 second captioned clip rather than a three-hour session. A lightweight YouTube link is used instead of an autoplaying embed so the proof does not slow down or distract from the page.

Navigation refinement

The header now pairs a labelled YouTube icon with a clear “Start a chat” action. The icon has an accessible name, so it is usable by screen readers rather than relying on its shape alone. Desktop section links now show an understated active marker as the visitor scrolls; the mobile menu is labelled “Explore,” uses larger touch targets, and keeps every page section within one tap. The footer includes a visible Back to top route for long-page orientation.

Return to the coaching site