HTML Systems Design

Semantic, accessible markup structured for large applications, design systems, and dashboards.

Semantic layout and landmarks

I treat HTML as the foundation for performance, accessibility, and maintainability, using landmarks and meaningful structure so teams can build safely on top. 

<header class="app-header" aria-label="Primary site header">
    <nav class="top-nav" aria-label="Main navigation">
        <a class="logo" href="/">Byheir Wise</a>
        <button class="nav-toggle"
                aria-label="Toggle navigation"
                aria-expanded="false">☰</button>
        <ul class="nav-menu">
            <li><a href="#about">About</a></li>
            <li><a href="#experience">Experience</a></li>
            <li><a href="pages/login.html">Dashboard</a></li>
        </ul>
    </nav>
</header>

<main id="content" tabindex="-1">
    <section aria-labelledby="kpi-title">
        <h2 id="kpi-title">Key delivery metrics</h2>
        <div class="kpi-grid" role="list">
            <article class="kpi-card" role="listitem">...</article>
        </div>
            </section>
</main>

Accessible data tables

Collections, fraud, and compliance work lives in data. I build tables with proper headers, captions, sorting controls, and responsive behavior. 

<table class="metrics-table">
    <caption>Monthly collections performance by portfolio</caption>
    <thead>
        <tr>
            <th scope="col">Portfolio</th>
            <th scope="col">Delinquency rate</th>
            <th scope="col">Roll rate</th>
            <th scope="col">Agent coverage</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Private Student Loans</th>
            <td data-label="Delinquency rate">1.8%</td>
            <td data-label="Roll rate">0.3%</td>
            <td data-label="Agent coverage">97%</td>
        </tr>
        <tr>
            <th scope="row">Refi</th>
            <td>1.2%</td>
            <td>0.1%</td>
            <td>99%</td>
        </tr>
    </tbody>
</table>

Reusable HTML patterns

Small, composable patterns that scale in large applications.

Form layouts

<form class="form form--two-col" novalidate>
    <div class="form-row">
        <label for="acct">Account number</label>
        <input id="acct" name="acct" inputmode="numeric"
               autocomplete="off" required />
    </div>
    <div class="form-row">
        <label for="segment">Risk segment</label>
        <select id="segment" name="segment">
            <option>Prime</option>
            <option>Near-prime</option>
            <option>Sub-prime</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Run decision</button>
</form>

Accessible modals

<div class="modal" role="dialog"
     aria-modal="true"
     aria-labelledby="modal-title"
     aria-describedby="modal-body">
    <div class="modal__content">
        <header class="modal__header">
            <h2 id="modal-title">Confirm batch publish</h2>
            <button class="icon-button" aria-label="Close dialog">×</button>
        </header>
        <div id="modal-body" class="modal__body">
            You are about to update 1,000+ accounts. This action is logged.
        </div>
        <footer class="modal__footer">
            <button class="btn btn-secondary">Cancel</button>
            <button class="btn btn-danger">Confirm</button>
        </footer>
    </div>
</div>

Dashboard cards

<article class="stat-card" aria-label="Time saved">
    <h3 class="stat-card__label">Manual hours eliminated</h3>
    <p class="stat-card__value">1,240</p>
    <p class="stat-card__delta stat-card__delta--positive">
        +60% vs prior baseline
    </p>
</article>

HTML reference library

A structured library of semantic templates and layout patterns for compliance-ready UI flows.

Loading modules...