tomiabe/tomiabestudio
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
4 files reviewed·August 23, 2026
More findings
Verdict
Strong system thinking and fragile interaction layer coexist in the same codebase, pulling the score in opposite directions. The mobile menu is the single biggest liability: an unlabelled close button inside an untrapped overlay breaks keyboard and screen-reader access simultaneously.
Files Rams reviewed
assets/email-signature/tomi-abe-signature-2.html
assets/email-signature/tomi-abe-signature.html
index.html
css/onepage.css
Accessibility
index.html:114
Mobile menu overlay missing dialog role and focus trap, keyboard leaks through
The `<div id="mobile-menu" class="menu-wrap" aria-hidden="true">` at line 114 has no `role="dialog"`, no `aria-label`, and no focus trap. When the panel opens, keyboard focus can reach every link and button behind the overlay.
Why it matters
Keyboard users tab into hidden page content while the menu is open, breaking navigation and disorienting screen-reader users who get no overlay announcement.
Fix
Add role="dialog", aria-modal="true", and aria-label to the panel, and implement a JS focus trap on open.
<div id="mobile-menu" class="menu-wrap" aria-hidden="true">
<div class="menu-backdrop" data-close-menu></div>
<div class="menu-panel"><div id="mobile-menu" class="menu-wrap" aria-hidden="true">
<div class="menu-backdrop" data-close-menu></div>
<div class="menu-panel" role="dialog" aria-modal="true" aria-label="Site navigation">index.html:118
Mobile menu close button has no accessible name for screen readers
The `<button class="menu-close" data-close-menu></button>` at line 118 of index.html is completely empty: no text, no aria-label, no child icon. Screen readers announce it as "button" with no action name.
Why it matters
Keyboard and screen-reader users cannot identify or operate the only explicit close control for the mobile menu.
Fix
Add aria-label="Close menu" to every icon-only button.
<button class="menu-close" data-close-menu></button><button class="menu-close" data-close-menu aria-label="Close menu"></button>assets/email-signature/tomi-abe-signature.html:50
Bullet separator is invisible at 1.3:1 contrast in both email signatures
Both signature files use `<span style="color:#27272a;">•</span>` on the `#09090b` table background. #27272a on #09090b computes to ~1.3:1: the separator is invisible to anyone with reduced contrast sensitivity.
Why it matters
The separator that distinguishes the two contact links disappears, making the line harder to parse.
Fix
Match the separator color to the surrounding link text (#a1a1aa) so it remains visible.
<span style="display:inline-block; padding:0 10px; color:#27272a;">•</span><span style="display:inline-block; padding:0 10px; color:#a1a1aa;">•</span>Motion
css/onepage.css:67
Theme-switch color transition runs unguarded for vestibular-sensitive users
The `body` rule at line 67 of css/onepage.css declares `transition: background-color 0.4s ease, color 0.4s ease` with no `@media (prefers-reduced-motion: reduce)` guard. Every theme switch animates for users who have opted out of motion.
Why it matters
Users with vestibular disorders who set prefers-reduced-motion still experience a 0.4 s flashing color change on every theme switch.
Fix
Wrap color transitions in a prefers-reduced-motion media query so they fire only for users who accept motion.
body {
font-family: var(--font-body);
background-color: color-mix(in srgb, var(--theme-bg) 88%, transparent);
color: var(--theme-fg);
transition: background-color 0.4s ease, color 0.4s ease;
}body {
font-family: var(--font-body);
background-color: color-mix(in srgb, var(--theme-bg) 88%, transparent);
color: var(--theme-fg);
}
@media (prefers-reduced-motion: no-preference) {
body {
transition: background-color 0.4s ease, color 0.4s ease;
}
}Typography
Color
Spacing
Components
UX
Craft
Working well
- The prefers-reduced-motion guard on `.animate-scroll-up` is exactly right: the animation is declared, the media query cancels it, and the card image and fader transitions get the same treatment in the same block: three animation sites covered in one focused pass.
- The drawer component uses `role="dialog" aria-modal="true" aria-label="Item details"`: that trio satisfies the overlay naming contract correctly and gives screen readers an immediate context announcement on open. The mobile menu should mirror this pattern.
Scored August 23, 2026 with Rams Engine v0.0.4 · Engine changelog
This page is an automated design review of tomiabe/tomiabestudio’s UI code: 4 files read against 309 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
