feat(components): ActionButton stopAlert + typography type fixes

This commit is contained in:
fightrate-bot committed 2026-06-16 01:50:26 -03:00
1 parent 2c51fd2623
commit bbe2919c2c
89 files changed
+75993 -9961

No files matched your search

@@ -0,0 +1,513 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate — React Native Redesign Directions</title>
<style>
:root {
--ink: #11110f;
--paper: #f5f1e8;
--muted: #706c63;
--line: #d9d0bf;
--red: #d9352a;
--amber: #f0a01f;
--blue: #1d5cff;
--green: #15a06e;
--black: #050505;
--radius-xl: 32px;
--radius-lg: 22px;
--radius-md: 14px;
--shadow: 0 24px 80px rgba(17, 17, 15, 0.12);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family:
ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
sans-serif;
line-height: 1.45;
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 10% 0%,
rgba(217, 53, 42, 0.12),
transparent 34%
),
radial-gradient(
circle at 90% 20%,
rgba(29, 92, 255, 0.1),
transparent 36%
),
linear-gradient(rgba(17, 17, 15, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(17, 17, 15, 0.035) 1px, transparent 1px);
background-size:
auto,
auto,
42px 42px,
42px 42px;
}
.wrap {
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
padding: 48px 0 80px;
position: relative;
}
.eyebrow {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 800;
color: var(--red);
}
h1 {
font-family: Georgia, serif;
font-size: clamp(46px, 9vw, 104px);
line-height: 0.88;
letter-spacing: -0.07em;
margin: 18px 0 18px;
max-width: 980px;
}
h2 {
font-size: clamp(28px, 5vw, 56px);
letter-spacing: -0.055em;
line-height: 0.95;
margin: 0 0 14px;
}
p {
color: var(--muted);
font-size: 17px;
max-width: 760px;
}
.hero {
padding: 34px;
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background: rgba(255, 255, 255, 0.46);
box-shadow: var(--shadow);
backdrop-filter: blur(14px);
}
.actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 28px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
border-radius: 999px;
padding: 13px 18px;
text-decoration: none;
font-weight: 900;
border: 1px solid var(--ink);
color: var(--ink);
background: #fff;
}
.btn.dark {
background: var(--ink);
color: var(--paper);
}
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
margin-top: 28px;
}
.card {
position: relative;
min-height: 420px;
border-radius: 28px;
border: 1px solid var(--line);
overflow: hidden;
background: #fff;
box-shadow: 0 18px 45px rgba(17, 17, 15, 0.08);
}
.card .top {
padding: 18px;
}
.card h3 {
font-size: 25px;
letter-spacing: -0.04em;
line-height: 1;
margin: 6px 0;
}
.tag {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 900;
color: var(--muted);
}
.phone {
margin: 10px auto 0;
width: 150px;
height: 282px;
border-radius: 30px;
background: #0d0d0d;
padding: 8px;
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.22);
}
.screen {
height: 100%;
border-radius: 24px;
padding: 12px;
overflow: hidden;
}
.metric {
font-size: 44px;
font-weight: 950;
letter-spacing: -0.08em;
}
.small {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 900;
}
.line {
height: 56px;
border-bottom: 2px solid currentColor;
border-radius: 50%;
transform: skewX(-12deg);
opacity: 0.65;
}
.rail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 14px;
}
.pill {
border-radius: 999px;
padding: 7px 8px;
font-size: 10px;
font-weight: 900;
text-align: center;
}
.corner .screen {
background: #0c0b09;
color: #f5ead8;
}
.corner .pill {
background: #211e17;
color: #ffbd37;
}
.corner .line {
color: #e23b2e;
}
.lab .screen {
background: #f7fbf8;
color: #12231d;
}
.lab .pill {
background: #e7f4ed;
color: #08724c;
}
.lab .line {
color: #16a06b;
}
.night .screen {
background: #140409;
color: #fff2f2;
}
.night .pill {
background: #35111a;
color: #ff596c;
}
.night .line {
color: #ff2e48;
}
.sensor .screen {
background: #03070a;
color: #d6f7ff;
}
.sensor .pill {
background: #06222c;
color: #5be6ff;
}
.sensor .line {
color: #5be6ff;
}
.minimal .screen {
background: #f7f3eb;
color: #15130f;
}
.minimal .pill {
background: #eee4d3;
color: #15130f;
}
.minimal .line {
color: #15130f;
}
.matrix {
margin-top: 42px;
display: grid;
grid-template-columns: 1.2fr repeat(5, 1fr);
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
background: rgba(255, 255, 255, 0.55);
}
.matrix div {
padding: 14px;
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
font-size: 13px;
}
.matrix div:nth-child(6n) {
border-right: 0;
}
.matrix .head {
font-weight: 950;
background: #fff;
color: var(--ink);
}
.score {
font-weight: 950;
}
.notes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 28px;
}
.note {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 18px;
}
.note b {
display: block;
margin-bottom: 6px;
}
@media (max-width: 1050px) {
.grid {
grid-template-columns: 1fr 1fr;
}
.matrix {
grid-template-columns: 1fr;
}
.matrix div {
border-right: 0;
}
.notes {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.grid {
grid-template-columns: 1fr;
}
.hero {
padding: 22px;
}
.phone {
width: 170px;
height: 320px;
}
}
</style>
</head>
<body>
<main class="wrap">
<section class="hero">
<div class="eyebrow">FightRate / React Native Redesign</div>
<h1>Antes de reconstruir, escolher a linguagem visual certa.</h1>
<p>
Este pacote propõe cinco direções de design system para um app de
captura contínua de treino, histórico denso, sensor BLE e insights
úteis. Nenhuma direção usa o design antigo como base.
</p>
<div class="actions">
<a class="btn dark" href="01-corner-command.html"
>01 Corner Command</a
>
<a class="btn" href="02-athlete-lab.html">02 Athlete Lab</a>
<a class="btn" href="03-fight-night.html">03 Fight Night</a>
<a class="btn" href="04-sensor-instrument.html"
>04 Sensor Instrument</a
>
<a class="btn" href="05-minimal-performance.html"
>05 Minimal Performance</a
>
</div>
</section>
<section class="grid" aria-label="direções visuais">
<article class="card corner">
<div class="top">
<span class="tag">tático premium</span>
<h3>Corner Command</h3>
<p>Treino real, córner, intensidade, preto/couro/vermelho.</p>
</div>
<div class="phone">
<div class="screen">
<div class="small">captura ativa</div>
<div class="metric">148</div>
<div>bpm médio</div>
<div class="line"></div>
<div class="rail">
<span class="pill">Z4 38%</span
><span class="pill">Pico 181</span>
</div>
</div>
</div>
</article>
<article class="card lab">
<div class="top">
<span class="tag">ciência esportiva</span>
<h3>Athlete Lab</h3>
<p>Limpo, confiável, claro, excelente para dados e relatórios.</p>
</div>
<div class="phone">
<div class="screen">
<div class="small">sessão</div>
<div class="metric">72%</div>
<div>tempo em carga</div>
<div class="line"></div>
<div class="rail">
<span class="pill">TRIMP 96</span
><span class="pill">Rec 18h</span>
</div>
</div>
</div>
</article>
<article class="card night">
<div class="top">
<span class="tag">marca esportiva</span>
<h3>Fight Night</h3>
<p>Editorial, energia de evento, bom para virar marca pública.</p>
</div>
<div class="phone">
<div class="screen">
<div class="small">rounds auto</div>
<div class="metric">6×3</div>
<div>alta intensidade</div>
<div class="line"></div>
<div class="rail">
<span class="pill">Explosão</span
><span class="pill">Ritmo</span>
</div>
</div>
</div>
</article>
<article class="card sensor">
<div class="top">
<span class="tag">instrumentação</span>
<h3>Sensor Instrument</h3>
<p>BLE, telemetria, logs e confiança técnica máxima.</p>
</div>
<div class="phone">
<div class="screen">
<div class="small">h003 conectado</div>
<div class="metric">-61</div>
<div>RSSI estável</div>
<div class="line"></div>
<div class="rail">
<span class="pill">180D</span><span class="pill">2A37</span>
</div>
</div>
</div>
</article>
<article class="card minimal">
<div class="top">
<span class="tag">premium minimal</span>
<h3>Minimal Performance</h3>
<p>Menos interface, mais leitura. Elegante e rápido.</p>
</div>
<div class="phone">
<div class="screen">
<div class="small">hoje</div>
<div class="metric">41m</div>
<div>capturados</div>
<div class="line"></div>
<div class="rail">
<span class="pill">Média 142</span
><span class="pill">Z5 08%</span>
</div>
</div>
</div>
</article>
</section>
<section class="matrix">
<div class="head">Critério</div>
<div class="head">Corner</div>
<div class="head">Lab</div>
<div class="head">Night</div>
<div class="head">Sensor</div>
<div class="head">Minimal</div>
<div>Confiança para atleta</div>
<div class="score">9</div>
<div class="score">9</div>
<div class="score">8</div>
<div class="score">8</div>
<div class="score">9</div>
<div>Potencial de marca</div>
<div class="score">8</div>
<div class="score">7</div>
<div class="score">10</div>
<div class="score">7</div>
<div class="score">8</div>
<div>Clareza de dados</div>
<div class="score">8</div>
<div class="score">10</div>
<div class="score">7</div>
<div class="score">9</div>
<div class="score">9</div>
<div>Energia visual</div>
<div class="score">9</div>
<div class="score">6</div>
<div class="score">10</div>
<div class="score">7</div>
<div class="score">5</div>
<div>Viabilidade React Native</div>
<div class="score">9</div>
<div class="score">10</div>
<div class="score">8</div>
<div class="score">9</div>
<div class="score">10</div>
</section>
<section class="notes">
<div class="note">
<b>Recomendação forte</b
><span
>Escolher entre Corner Command e Athlete Lab. Corner vende melhor a
ideia de combate; Athlete Lab resolve melhor histórico, relatórios e
confiança.</span
>
</div>
<div class="note">
<b>Possível híbrido</b
><span
>Base Athlete Lab com modo treino Corner Command. Assim o app fica
sério no relatório e intenso na captura.</span
>
</div>
<div class="note">
<b>Próximo passo</b
><span
>Escolher 1 direção ou 2 para fundir. Depois criar DESIGN.md final +
tokens React Native + protótipo Expo.</span
>
</div>
</section>
</main>
</body>
</html>
@@ -0,0 +1,732 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate Direction 01 — Corner Command</title>
<style>
:root {
--bg: #090806;
--surface: #12100c;
--surface-2: #1b1710;
--ink: #fff3dd;
--muted: #b7a98e;
--line: #3a3022;
--accent: #e23b2e;
--accent-2: #ffb02e;
--ok: #31c47a;
--blue: #48a7ff;
--r-xs: 8px;
--r-sm: 13px;
--r-md: 18px;
--r-lg: 28px;
--r-xl: 38px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--fast: 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
--slow: 700ms cubic-bezier(0.19, 1, 0.22, 1);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: Bahnschrift, "Arial Narrow", system-ui, sans-serif;
line-height: 1.35;
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 20% -10%,
rgba(226, 59, 46, 0.28),
transparent 32%
),
radial-gradient(
circle at 90% 12%,
rgba(255, 176, 46, 0.13),
transparent 28%
),
linear-gradient(
120deg,
rgba(255, 255, 255, 0.055) 0 1px,
transparent 1px 18px
);
opacity: 0.9;
}
.wrap {
width: min(1240px, calc(100% - 28px));
margin: auto;
padding: 34px 0 80px;
position: relative;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid var(--line);
border-radius: 999px;
padding: 10px 12px 10px 18px;
background: rgba(18, 16, 12, 0.84);
backdrop-filter: blur(14px);
position: sticky;
top: 16px;
z-index: 2;
}
.brand {
font-weight: 1000;
letter-spacing: -0.04em;
}
.brand span {
color: var(--accent);
}
.nav a {
color: var(--muted);
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.16em;
margin-left: 18px;
}
.hero {
display: grid;
grid-template-columns: 1.08fr 0.92fr;
gap: 24px;
margin-top: 34px;
}
.panel {
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: linear-gradient(
145deg,
rgba(27, 23, 16, 0.96),
rgba(10, 9, 7, 0.98)
);
box-shadow:
0 32px 90px rgba(0, 0, 0, 0.46),
inset 0 1px rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
}
.panel:after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.055),
transparent
);
transform: translateX(-100%);
animation: scan 5s infinite;
}
@keyframes scan {
60%,
100% {
transform: translateX(100%);
}
}
.pad {
padding: 30px;
}
.eyebrow {
color: var(--accent-2);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.25em;
font-weight: 900;
}
.h1 {
font-size: clamp(54px, 9vw, 118px);
line-height: 0.78;
letter-spacing: -0.09em;
margin: 18px 0;
}
.lead {
font-size: 19px;
color: var(--muted);
max-width: 720px;
}
.cta-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 28px;
}
.btn {
border: 0;
border-radius: 999px;
padding: 14px 18px;
font-weight: 1000;
text-transform: uppercase;
letter-spacing: 0.08em;
background: var(--accent);
color: white;
box-shadow: 0 14px 34px rgba(226, 59, 46, 0.28);
display: inline-flex;
align-items: center;
gap: 12px;
}
.btn.secondary {
background: transparent;
color: var(--ink);
border: 1px solid var(--line);
}
.btn i {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
font-style: normal;
}
.phone-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 26px;
}
.phone {
height: 560px;
border-radius: 42px;
background: #050403;
padding: 10px;
border: 1px solid #33291c;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.screen {
height: 100%;
border-radius: 34px;
background: var(--surface);
padding: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 14px;
}
.topline {
display: flex;
justify-content: space-between;
color: var(--muted);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.mega {
font-size: 82px;
line-height: 0.85;
font-weight: 1000;
letter-spacing: -0.1em;
}
.unit {
font-size: 18px;
color: var(--muted);
letter-spacing: 0;
}
.status {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.chip {
padding: 8px 10px;
border-radius: 999px;
background: #231d14;
color: var(--accent-2);
font-size: 11px;
font-weight: 1000;
text-transform: uppercase;
}
.chart {
height: 118px;
border-radius: 22px;
background: linear-gradient(180deg, #211911, #100d09);
border: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.chart svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.chart path {
fill: none;
stroke: var(--accent);
stroke-width: 4;
stroke-linecap: round;
}
.metric-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.metric {
border: 1px solid var(--line);
border-radius: 18px;
padding: 12px;
background: #16120d;
}
.metric b {
font-size: 22px;
}
.metric span {
display: block;
color: var(--muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.13em;
}
.dock {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dock .btn {
justify-content: center;
padding: 14px 10px;
font-size: 11px;
}
.stop {
background: #fff0e4;
color: #100b08;
}
.section {
margin-top: 28px;
}
.section h2 {
font-size: 42px;
letter-spacing: -0.06em;
margin: 0 0 10px;
}
.book {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.spec {
border: 1px solid var(--line);
border-radius: 28px;
padding: 20px;
background: rgba(18, 16, 12, 0.78);
}
.swatches {
display: grid;
grid-template-columns: 6fr 3fr 1fr;
gap: 8px;
height: 96px;
}
.swatches div {
border-radius: 18px;
padding: 12px;
font-weight: 1000;
}
.type-sample .a {
font-size: 52px;
letter-spacing: -0.09em;
line-height: 0.84;
}
.type-sample .b {
font-size: 18px;
color: var(--muted);
}
.radii {
display: flex;
gap: 10px;
align-items: end;
}
.radii div {
border: 1px solid var(--line);
background: #211a12;
}
.r1 {
width: 54px;
height: 54px;
border-radius: 8px;
}
.r2 {
width: 70px;
height: 70px;
border-radius: 18px;
}
.r3 {
width: 92px;
height: 92px;
border-radius: 32px;
}
.component-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.component {
border: 1px solid var(--line);
border-radius: 24px;
background: #120f0b;
padding: 16px;
min-height: 150px;
}
.field {
border: 1px solid var(--line);
border-radius: 16px;
padding: 12px;
background: #0b0907;
color: var(--muted);
margin-top: 12px;
}
.timeline {
display: grid;
gap: 10px;
}
.event {
display: grid;
grid-template-columns: 54px 1fr;
gap: 10px;
align-items: center;
}
.time {
color: var(--accent-2);
font-weight: 1000;
}
.bar {
height: 12px;
border-radius: 999px;
background: #2b2115;
overflow: hidden;
}
.bar i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--accent-2), var(--accent));
border-radius: 999px;
}
.rule {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.rule div {
border-radius: 22px;
padding: 16px;
border: 1px solid var(--line);
}
@media (max-width: 1050px) {
.hero,
.book {
grid-template-columns: 1fr;
}
.phone-grid {
grid-template-columns: 1fr;
}
.component-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 620px) {
.nav {
position: relative;
top: 0;
}
.hero {
margin-top: 18px;
}
.pad {
padding: 22px;
}
.phone {
height: 640px;
}
.component-grid,
.rule {
grid-template-columns: 1fr;
}
.h1 {
font-size: 64px;
}
}
</style>
</head>
<body>
<main class="wrap">
<nav class="nav">
<div class="brand">Fight<span>Rate</span> / Corner Command</div>
<div>
<a href="00-index.html">Índice</a><a href="#book">Design book</a
><a href="#screens">Telas</a>
</div>
</nav>
<section class="hero">
<div class="panel pad">
<div class="eyebrow">Direção 01 / tático premium</div>
<div class="h1">mesa de córner para treino real.</div>
<p class="lead">
Visual de equipamento sério: preto fosco, couro queimado, vermelho
de corte e âmbar de sinal. O app parece uma ferramenta que fica no
canto do tatame/ringue, não uma dashboard genérica.
</p>
<div class="cta-row">
<button class="btn">Iniciar treino <i>↗</i></button
><button class="btn secondary">Ver histórico</button>
</div>
</div>
<div class="panel pad">
<div class="eyebrow">Regra 60 / 30 / 10</div>
<div class="swatches">
<div style="background: #090806; color: #fff3dd">
60% base preta
</div>
<div style="background: #1b1710; color: #fff3dd">
30% superfície couro
</div>
<div style="background: #e23b2e; color: white">10% impacto</div>
</div>
<p class="lead">
O âmbar aparece só como estado e leitura auxiliar. O vermelho é ação
crítica e intensidade.
</p>
</div>
</section>
<section id="screens" class="section">
<h2>Exemplos de telas mobile</h2>
<p class="lead">
Seis telas para validar o padrão: início, captura ativa, fim de
treino, histórico, sensor e insight.
</p>
<div class="phone-grid">
<div class="phone">
<div class="screen">
<div class="topline">
<span>pré-treino</span><span>sensor ok</span>
</div>
<div class="mega">00<span class="unit">bpm</span></div>
<p class="lead">
Coloque a cinta, inicie a captura e deixe o celular parado.
</p>
<div class="status">
<span class="chip">H003 pronto</span
><span class="chip">bateria 84%</span>
</div>
<div class="dock">
<button class="btn">Iniciar</button
><button class="btn secondary">check-in</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="topline">
<span>captura ativa</span><span>38:12</span>
</div>
<div class="mega">148<span class="unit">bpm</span></div>
<div class="chart">
<svg viewBox="0 0 260 120">
<path
d="M8 90 C38 80,40 48,70 54 S112 95,140 66 S180 28,204 44 S232 76,252 42"
/>
</svg>
</div>
<div class="metric-row">
<div class="metric"><b>181</b><span>pico</span></div>
<div class="metric"><b>142</b><span>média</span></div>
<div class="metric"><b>Z4</b><span>zona</span></div>
</div>
<div class="dock">
<button class="btn stop">Parar treino</button
><button class="btn secondary">marcar evento</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="topline"><span>resumo</span><span>salvo</span></div>
<div class="mega">47<span class="unit">min</span></div>
<div class="status">
<span class="chip">carga alta</span
><span class="chip">recuperar 18h</span>
</div>
<div class="timeline">
<div class="event">
<span class="time">0-10</span>
<div class="bar"><i style="width: 42%"></i></div>
</div>
<div class="event">
<span class="time">10-30</span>
<div class="bar"><i style="width: 86%"></i></div>
</div>
<div class="event">
<span class="time">30-47</span>
<div class="bar"><i style="width: 64%"></i></div>
</div>
</div>
<div class="dock">
<button class="btn">Relatório</button
><button class="btn secondary">exportar</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="topline">
<span>histórico</span><span>junho</span>
</div>
<div class="metric-row">
<div class="metric"><b>8</b><span>treinos</span></div>
<div class="metric"><b>5h</b><span>tempo</span></div>
<div class="metric"><b>72%</b><span>carga</span></div>
</div>
<div class="timeline">
<div class="event">
<span class="time">Hoje</span>
<div>
<b>Sparring</b><br /><span style="color: var(--muted)"
>47 min · pico 181</span
>
</div>
</div>
<div class="event">
<span class="time">Ontem</span>
<div>
<b>Drill</b><br /><span style="color: var(--muted)"
>32 min · base técnica</span
>
</div>
</div>
<div class="event">
<span class="time">Seg</span>
<div>
<b>Muay Thai</b><br /><span style="color: var(--muted)"
>61 min · alta carga</span
>
</div>
</div>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="topline"><span>sensor</span><span>ble</span></div>
<div class="mega">-61<span class="unit">rssi</span></div>
<div class="component">
<b>Heart Rate Service</b>
<div class="field">180D / 2A37 / notify</div>
<div class="field">Battery 180F / read</div>
<div class="field">Body Location 2A38</div>
</div>
<div class="dock">
<button class="btn secondary">diagnóstico</button
><button class="btn secondary">reconectar</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="topline"><span>insight</span><span>útil</span></div>
<div class="mega">Z4<span class="unit">38%</span></div>
<p class="lead">
Você sustentou intensidade de luta por tempo relevante. Bom
sinal para condicionamento específico.
</p>
<div class="component">
<b>Por que importa?</b>
<p style="color: var(--muted); margin-bottom: 0">
Ajuda a medir capacidade de manter pressão sem depender de
sensação subjetiva.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="book" class="section">
<h2>Design book</h2>
<div class="book">
<div class="spec">
<div class="eyebrow">Cores</div>
<div class="rule">
<div style="background: #090806">Base #090806<br />60%</div>
<div style="background: #1b1710">Surface #1B1710<br />30%</div>
<div style="background: #e23b2e">Accent #E23B2E<br />10%</div>
</div>
</div>
<div class="spec type-sample">
<div class="eyebrow">Tipografia</div>
<div class="a">148 BPM</div>
<div class="b">
Condensed grotesk para números. Corpo com espaçamento curto, tom
técnico e direto.
</div>
</div>
<div class="spec">
<div class="eyebrow">Raio e borda</div>
<div class="radii">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<p>
Raio grande nas telas e painéis; raio menor só em campos técnicos.
Bordas cor de metal queimado, nunca cinza genérico.
</p>
</div>
<div class="spec">
<div class="eyebrow">Botões</div>
<button class="btn">Primário <i>↗</i></button
><button class="btn secondary" style="margin-left: 8px">
Secundário
</button>
<p>
Primário só para ação decisiva. Parar treino usa fundo claro para
contraste emergencial.
</p>
</div>
</div>
</section>
<section class="section">
<h2>Componentes-base</h2>
<div class="component-grid">
<div class="component">
<div class="eyebrow">Status band</div>
<span class="chip">captura ativa</span
><span class="chip">sensor ok</span>
<div class="field">Usado no topo da captura.</div>
</div>
<div class="component">
<div class="eyebrow">Metric block</div>
<div class="mega" style="font-size: 54px">181</div>
<span class="chip">pico</span>
</div>
<div class="component">
<div class="eyebrow">Input</div>
<div class="field">Nome do treino</div>
<div class="field">RPE 0-10</div>
</div>
<div class="component">
<div class="eyebrow">Alert</div>
<b style="color: var(--accent-2)">Zona alta sustentada</b>
<p style="color: var(--muted)">
Use vibração curta, sem interromper o treino.
</p>
</div>
</div>
</section>
</main>
</body>
</html>
@@ -0,0 +1,652 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate Direction 02 — Athlete Lab</title>
<style>
:root {
--bg: #f4f8f4;
--paper: #fcfffc;
--ink: #102019;
--muted: #607168;
--line: #d7e4dc;
--green: #12a36b;
--lime: #c6ee3f;
--blue: #1769ff;
--warn: #ef8b18;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 34px;
--shadow: 0 24px 80px rgba(16, 32, 25, 0.1);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "Aptos", ui-sans-serif, system-ui, sans-serif;
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(16, 32, 25, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(16, 32, 25, 0.045) 1px, transparent 1px),
radial-gradient(
circle at 85% 4%,
rgba(198, 238, 63, 0.28),
transparent 30%
);
background-size:
28px 28px,
28px 28px,
auto;
}
.wrap {
width: min(1220px, calc(100% - 28px));
margin: auto;
padding: 34px 0 80px;
position: relative;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(252, 255, 252, 0.82);
border: 1px solid var(--line);
border-radius: 22px;
padding: 12px 16px;
position: sticky;
top: 14px;
z-index: 3;
backdrop-filter: blur(16px);
}
.nav a {
color: var(--muted);
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-left: 16px;
}
.brand {
font-weight: 900;
letter-spacing: -0.04em;
}
.hero {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 18px;
margin-top: 24px;
}
.hero-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 32px;
box-shadow: var(--shadow);
}
.eyebrow {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 900;
color: var(--green);
}
h1 {
font-size: clamp(50px, 8vw, 104px);
line-height: 0.84;
letter-spacing: -0.08em;
margin: 16px 0;
}
h2 {
font-size: 42px;
letter-spacing: -0.06em;
margin: 0 0 10px;
}
.lead {
font-size: 18px;
color: var(--muted);
line-height: 1.45;
}
.token-row {
display: grid;
grid-template-columns: 6fr 3fr 1fr;
gap: 8px;
margin-top: 20px;
}
.token {
border-radius: 18px;
padding: 16px;
min-height: 98px;
font-weight: 900;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
border-radius: 16px;
background: var(--green);
color: white;
padding: 14px 18px;
font-weight: 900;
box-shadow: 0 16px 36px rgba(18, 163, 107, 0.22);
}
.btn.secondary {
background: #edf6f0;
color: var(--ink);
border: 1px solid var(--line);
box-shadow: none;
}
.btn.ghost {
background: transparent;
color: var(--green);
border: 1px solid var(--green);
box-shadow: none;
}
.section {
margin-top: 30px;
}
.lab-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.phone {
height: 590px;
background: #111;
border-radius: 42px;
padding: 10px;
box-shadow: 0 30px 80px rgba(16, 32, 25, 0.18);
}
.screen {
height: 100%;
background: var(--paper);
border-radius: 34px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
overflow: hidden;
}
.top {
display: flex;
justify-content: space-between;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
font-weight: 900;
}
.number {
font-size: 76px;
letter-spacing: -0.09em;
line-height: 0.86;
font-weight: 950;
}
.unit {
font-size: 18px;
color: var(--muted);
}
.strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.tile {
border: 1px solid var(--line);
border-radius: 18px;
background: #f7fbf8;
padding: 12px;
}
.tile b {
font-size: 24px;
}
.tile span {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
font-weight: 900;
}
.chart {
height: 130px;
border: 1px solid var(--line);
border-radius: 22px;
background: linear-gradient(180deg, #fafffa, #edf7f0);
position: relative;
overflow: hidden;
}
.chart svg {
width: 100%;
height: 100%;
}
.chart path {
fill: none;
stroke: var(--green);
stroke-width: 4;
stroke-linecap: round;
}
.zones {
display: flex;
height: 14px;
border-radius: 999px;
overflow: hidden;
}
.zones i:nth-child(1) {
background: #9bd8ff;
flex: 1;
}
.zones i:nth-child(2) {
background: #b7ecb4;
flex: 1.4;
}
.zones i:nth-child(3) {
background: #c6ee3f;
flex: 1.8;
}
.zones i:nth-child(4) {
background: #efb84d;
flex: 1.2;
}
.zones i:nth-child(5) {
background: #e75b4a;
flex: 0.7;
}
.dock {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dock .btn {
padding: 14px 8px;
}
.spec-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.spec {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 24px;
padding: 18px;
}
.spec h3 {
margin: 6px 0;
font-size: 22px;
letter-spacing: -0.04em;
}
.type .big {
font-size: 62px;
letter-spacing: -0.08em;
line-height: 0.86;
}
.radii {
display: flex;
gap: 10px;
align-items: end;
}
.radii div {
background: #eaf3ed;
border: 1px solid var(--line);
}
.r1 {
width: 48px;
height: 48px;
border-radius: 10px;
}
.r2 {
width: 68px;
height: 68px;
border-radius: 16px;
}
.r3 {
width: 92px;
height: 92px;
border-radius: 28px;
}
.component-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.component {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 22px;
padding: 14px;
min-height: 154px;
}
.field {
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px;
background: #f7fbf8;
color: var(--muted);
margin-top: 10px;
}
.table {
display: grid;
gap: 8px;
}
.row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
border-bottom: 1px solid var(--line);
padding: 8px 0;
}
.badge {
display: inline-flex;
border-radius: 999px;
padding: 6px 9px;
background: #e7f6ee;
color: #08734c;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.principle {
border-left: 5px solid var(--green);
background: var(--paper);
border-radius: 0 22px 22px 0;
padding: 18px;
box-shadow: var(--shadow);
}
@media (max-width: 1000px) {
.hero,
.lab-grid {
grid-template-columns: 1fr;
}
.spec-grid {
grid-template-columns: 1fr 1fr;
}
.component-grid {
grid-template-columns: 1fr 1fr;
}
.principles {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.hero-card {
padding: 22px;
}
.spec-grid,
.component-grid {
grid-template-columns: 1fr;
}
.phone {
height: 650px;
}
.nav {
position: relative;
top: 0;
}
.nav div:last-child {
display: none;
}
}
</style>
</head>
<body>
<main class="wrap">
<nav class="nav">
<div class="brand">FightRate / Athlete Lab</div>
<div>
<a href="00-index.html">Índice</a><a href="#screens">Telas</a
><a href="#system">Sistema</a>
</div>
</nav>
<section class="hero">
<div class="hero-card">
<div class="eyebrow">Direção 02 / ciência esportiva</div>
<h1>laboratório limpo para performance real.</h1>
<p class="lead">
A direção mais confiável para relatórios, histórico, sensores e
decisões pós-treino. Visual claro, médico-esportivo sem parecer
hospital.
</p>
<button class="btn">Capturar treino</button>
<button class="btn secondary">Ver relatório</button>
</div>
<div class="hero-card">
<div class="eyebrow">Regra 60 / 30 / 10</div>
<div class="token-row">
<div class="token" style="background: #fcfffc">60% paper</div>
<div class="token" style="background: #eaf3ed">30% lab surface</div>
<div class="token" style="background: #12a36b; color: white">
10% green
</div>
</div>
<p class="lead">
Azul só para informação técnica; amarelo para alerta leve; vermelho
apenas para risco/limite.
</p>
</div>
</section>
<section id="screens" class="section">
<h2>Telas mobile</h2>
<div class="lab-grid">
<div class="phone">
<div class="screen">
<div class="top">
<span>pronto para captura</span><span>h003</span>
</div>
<div class="number">--<span class="unit">bpm</span></div>
<p class="lead">
Comece antes do treino. O relatório será construído pela janela
inteira.
</p>
<div class="strip">
<div class="tile"><b>84%</b><span>bateria</span></div>
<div class="tile"><b>-58</b><span>rssi</span></div>
<div class="tile"><b>0</b><span>amostras</span></div>
</div>
<div class="dock">
<button class="btn">Iniciar</button
><button class="btn secondary">check-in</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top">
<span>captura ativa</span><span>42:18</span>
</div>
<div class="number">154<span class="unit">bpm</span></div>
<div class="chart">
<svg viewBox="0 0 280 130">
<path
d="M8 92 C44 88,54 58,78 64 S118 96,146 76 S196 32,226 48 S250 84,272 58"
/>
</svg>
</div>
<div class="zones"><i></i><i></i><i></i><i></i><i></i></div>
<div class="strip">
<div class="tile"><b>146</b><span>média</span></div>
<div class="tile"><b>183</b><span>pico</span></div>
<div class="tile"><b>41%</b><span>Z4/Z5</span></div>
</div>
<div class="dock">
<button class="btn secondary">Evento</button
><button class="btn" style="background: #e75b4a">Parar</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>relatório</span><span>salvo</span></div>
<div class="number">96<span class="unit">trimp</span></div>
<div class="table">
<div class="row"><span>Tempo em carga</span><b>28m</b></div>
<div class="row"><span>Pico sustentado</span><b>181</b></div>
<div class="row"><span>Recuperação</span><b>18h</b></div>
<div class="row"><span>Consistência</span><b>Boa</b></div>
</div>
<span class="badge">carga alta controlada</span>
<div class="dock">
<button class="btn">Detalhar</button
><button class="btn secondary">Exportar</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top">
<span>histórico</span><span>4 semanas</span>
</div>
<div class="strip">
<div class="tile"><b>11</b><span>treinos</span></div>
<div class="tile"><b>7h</b><span>total</span></div>
<div class="tile"><b>+8%</b><span>carga</span></div>
</div>
<div class="table">
<div class="row"><span>Sparring — hoje</span><b>96</b></div>
<div class="row"><span>Drills — ontem</span><b>54</b></div>
<div class="row"><span>Muay Thai — seg</span><b>110</b></div>
<div class="row"><span>Boxe — sex</span><b>77</b></div>
</div>
<button class="btn secondary">Comparar semanas</button>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>sensor lab</span><span>ble</span></div>
<div class="number">2A37</div>
<div class="table">
<div class="row"><span>Heart Rate</span><b>notify</b></div>
<div class="row"><span>Battery</span><b>read</b></div>
<div class="row"><span>Body Sensor</span><b>read</b></div>
<div class="row"><span>RSSI</span><b>-61</b></div>
</div>
<span class="badge">perfil estável</span>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top">
<span>insights</span><span>explicável</span>
</div>
<div class="number">18h<span class="unit">rec</span></div>
<p class="lead">
Carga cardiovascular alta. Priorize sono e treino técnico leve
na próxima sessão.
</p>
<div class="tile">
<b>Por que importa?</b
><span>Evita acumular fadiga sem perder evolução.</span>
</div>
<div class="tile">
<b>Confiança</b><span>Baseada em 2.844 amostras.</span>
</div>
</div>
</div>
</div>
</section>
<section id="system" class="section">
<h2>Design system</h2>
<div class="spec-grid">
<div class="spec">
<div class="eyebrow">Cores</div>
<h3>Verde = performance</h3>
<p class="lead">
Nunca usar verde em tudo. Ele guia progresso, estabilidade e ação
primária.
</p>
</div>
<div class="spec type">
<div class="eyebrow">Tipo</div>
<div class="big">72%</div>
<p class="lead">
Números gigantes, labels técnicos pequenos, corpo legível.
</p>
</div>
<div class="spec">
<div class="eyebrow">Raios</div>
<div class="radii">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<p class="lead">Raios médios. Menos agressivo que Corner.</p>
</div>
<div class="spec">
<div class="eyebrow">Bordas</div>
<p class="lead">
Borda suave verde/cinza; elevação quase invisível. Parece
instrumento científico, não card de rede social.
</p>
</div>
</div>
</section>
<section class="section">
<h2>Componentes</h2>
<div class="component-grid">
<div class="component">
<div class="eyebrow">Primary CTA</div>
<button class="btn">Iniciar captura</button
><button class="btn secondary" style="margin-top: 8px">
Secundário
</button>
</div>
<div class="component">
<div class="eyebrow">Form</div>
<div class="field">Tipo de treino</div>
<div class="field">RPE pós-treino</div>
</div>
<div class="component">
<div class="eyebrow">Metric</div>
<div class="number" style="font-size: 54px">146</div>
<span class="badge">bpm médio</span>
</div>
<div class="component">
<div class="eyebrow">Insight</div>
<b>Carga subiu 8%</b>
<p class="lead">Comparado à semana anterior.</p>
</div>
<div class="component">
<div class="eyebrow">Sensor row</div>
<div class="row"><span>2A37</span><b>notify</b></div>
<div class="row"><span>2A19</span><b>read</b></div>
</div>
</div>
</section>
<section class="section">
<h2>Princípios</h2>
<div class="principles">
<div class="principle">
<b>Clareza antes de estilo</b>
<p class="lead">Durante treino, o atleta entende em 1 segundo.</p>
</div>
<div class="principle">
<b>Densidade no histórico</b>
<p class="lead">
Depois do treino, a tela pode ser mais informativa.
</p>
</div>
<div class="principle">
<b>Explicável sempre</b>
<p class="lead">Toda métrica importante diz por que importa.</p>
</div>
</div>
</section>
</main>
</body>
</html>
@@ -0,0 +1,695 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate Direction 03 — Fight Night</title>
<style>
:root {
--bg: #120209;
--ink: #fff4f6;
--muted: #be9aa4;
--panel: #210712;
--panel2: #310b19;
--line: #5b1c2d;
--pink: #ff3156;
--gold: #ffc14a;
--violet: #6c4dff;
--r-sm: 6px;
--r-md: 12px;
--r-lg: 20px;
--r-xl: 32px;
--shadow: 0 34px 90px rgba(0, 0, 0, 0.48);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: Impact, "Arial Black", system-ui, sans-serif;
letter-spacing: -0.02em;
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 18% 10%,
rgba(255, 49, 86, 0.36),
transparent 28%
),
radial-gradient(
circle at 80% 8%,
rgba(108, 77, 255, 0.28),
transparent 30%
),
linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0 1px,
transparent 1px 22px
);
}
.wrap {
width: min(1240px, calc(100% - 28px));
margin: auto;
padding: 34px 0 90px;
position: relative;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid var(--line);
background: rgba(18, 2, 9, 0.72);
border-radius: 999px;
padding: 10px 16px;
backdrop-filter: blur(14px);
position: sticky;
top: 14px;
z-index: 4;
}
.nav a {
color: var(--muted);
text-decoration: none;
margin-left: 16px;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.18em;
}
.brand {
font-size: 22px;
}
.hero {
margin-top: 26px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 18px;
}
.poster {
background: linear-gradient(145deg, #270814, #120209);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 34px;
box-shadow: var(--shadow);
overflow: hidden;
position: relative;
}
.poster:before {
content: "FIGHTRATE";
position: absolute;
font-size: 170px;
line-height: 0.7;
letter-spacing: -0.12em;
color: rgba(255, 255, 255, 0.035);
left: -18px;
top: 18px;
}
.eyebrow {
position: relative;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--gold);
font-weight: 900;
}
h1 {
position: relative;
font-size: clamp(62px, 12vw, 150px);
line-height: 0.72;
letter-spacing: -0.08em;
margin: 18px 0;
text-transform: uppercase;
}
.lead {
position: relative;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 18px;
line-height: 1.45;
color: var(--muted);
max-width: 720px;
letter-spacing: 0;
}
.btn {
border: 0;
border-radius: 10px;
background: var(--pink);
color: white;
font-weight: 1000;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 15px 18px;
box-shadow: 0 20px 46px rgba(255, 49, 86, 0.32);
}
.btn.secondary {
background: transparent;
border: 1px solid var(--line);
color: var(--ink);
box-shadow: none;
}
.tokens {
display: grid;
grid-template-columns: 6fr 3fr 1fr;
gap: 8px;
margin-top: 24px;
}
.token {
border-radius: 12px;
padding: 16px;
min-height: 112px;
font-family: ui-sans-serif, system-ui, sans-serif;
font-weight: 900;
}
.section {
margin-top: 30px;
}
h2 {
font-size: 52px;
line-height: 0.82;
letter-spacing: -0.07em;
margin: 0 0 14px;
text-transform: uppercase;
}
.screen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.phone {
height: 590px;
background: #050104;
border-radius: 40px;
padding: 10px;
border: 1px solid #681b30;
box-shadow: var(--shadow);
}
.screen {
height: 100%;
border-radius: 30px;
background: linear-gradient(180deg, #240713, #13030a);
padding: 18px;
display: flex;
flex-direction: column;
gap: 13px;
overflow: hidden;
}
.top {
font-family: ui-sans-serif, system-ui, sans-serif;
display: flex;
justify-content: space-between;
color: var(--muted);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.score {
font-size: 84px;
line-height: 0.74;
letter-spacing: -0.08em;
}
.unit {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 16px;
color: var(--muted);
letter-spacing: 0;
}
.belt {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.belt span {
font-family: ui-sans-serif, system-ui, sans-serif;
background: #3b0d1d;
color: #ffb8c3;
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 9px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 900;
}
.chart {
height: 125px;
background: #16030b;
border: 1px solid var(--line);
border-radius: 18px;
position: relative;
overflow: hidden;
}
.chart:before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
transparent 0 18px,
rgba(255, 255, 255, 0.04) 18px 19px
);
}
.chart svg {
position: relative;
width: 100%;
height: 100%;
}
.chart path {
fill: none;
stroke: var(--pink);
stroke-width: 5;
stroke-linecap: round;
filter: drop-shadow(0 0 12px rgba(255, 49, 86, 0.9));
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.stat {
border: 1px solid var(--line);
background: #1b0610;
border-radius: 14px;
padding: 11px;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.stat b {
display: block;
font-size: 22px;
}
.stat span {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.dock {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.dock .btn {
padding: 13px 6px;
font-size: 11px;
}
.system {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.spec {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 22px;
padding: 18px;
}
.spec h3 {
font-size: 28px;
line-height: 0.9;
margin: 8px 0;
text-transform: uppercase;
}
.type-big {
font-size: 68px;
line-height: 0.75;
}
.radii {
display: flex;
gap: 8px;
align-items: end;
}
.radii div {
background: #360b1a;
border: 1px solid var(--line);
}
.r1 {
width: 48px;
height: 48px;
border-radius: 6px;
}
.r2 {
width: 68px;
height: 68px;
border-radius: 12px;
}
.r3 {
width: 92px;
height: 92px;
border-radius: 20px;
}
.components {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.component {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 20px;
padding: 14px;
min-height: 156px;
}
.field {
font-family: ui-sans-serif, system-ui, sans-serif;
background: #13030a;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
color: var(--muted);
margin-top: 10px;
}
.fight-card {
display: grid;
grid-template-columns: 52px 1fr auto;
gap: 10px;
align-items: center;
border-bottom: 1px solid var(--line);
padding: 10px 0;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.round {
width: 42px;
height: 42px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--pink);
font-weight: 1000;
}
.principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.principle {
background: linear-gradient(145deg, #210712, #120209);
border: 1px solid var(--line);
border-radius: 24px;
padding: 22px;
}
.principle b {
font-size: 24px;
text-transform: uppercase;
}
@media (max-width: 1000px) {
.hero,
.screen-grid {
grid-template-columns: 1fr;
}
.system {
grid-template-columns: 1fr 1fr;
}
.components {
grid-template-columns: 1fr 1fr;
}
.principles {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.nav {
position: relative;
top: 0;
}
.nav div:last-child {
display: none;
}
.poster {
padding: 22px;
}
.system,
.components {
grid-template-columns: 1fr;
}
.phone {
height: 650px;
}
h1 {
font-size: 70px;
}
}
</style>
</head>
<body>
<main class="wrap">
<nav class="nav">
<div class="brand">FIGHTRATE / FIGHT NIGHT</div>
<div>
<a href="00-index.html">Índice</a><a href="#screens">Telas</a
><a href="#system">Sistema</a>
</div>
</nav>
<section class="hero">
<div class="poster">
<div class="eyebrow">Direção 03 / esportivo editorial</div>
<h1>energia de evento para virar marca.</h1>
<p class="lead">
A direção mais agressiva visualmente. Boa para marketing,
comunidade, social sharing e identidade memorável. Menos clínica;
mais luta, pressão, noite, placar e pôster.
</p>
<button class="btn">Começar captura</button>
<button class="btn secondary">Ver card da noite</button>
</div>
<div class="poster">
<div class="eyebrow">Regra 60 / 30 / 10</div>
<div class="tokens">
<div class="token" style="background: #120209">
60% arena escura
</div>
<div class="token" style="background: #310b19">
30% vinho profundo
</div>
<div class="token" style="background: #ff3156">10% neon golpe</div>
</div>
<p class="lead">
Dourado é prêmio, recorde e destaque editorial. Roxo só para
profundidade.
</p>
</div>
</section>
<section id="screens" class="section">
<h2>Telas mobile</h2>
<div class="screen-grid">
<div class="phone">
<div class="screen">
<div class="top"><span>fight night</span><span>h003</span></div>
<div class="score">READY</div>
<p class="lead">
Capture o treino como se fosse seu fight card pessoal.
</p>
<div class="belt">
<span>cinta ok</span><span>pré-treino</span
><span>sem round manual</span>
</div>
<div class="dock">
<button class="btn">Iniciar</button
><button class="btn secondary">perfil</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>ao vivo</span><span>37:54</span></div>
<div class="score">151<span class="unit">bpm</span></div>
<div class="chart">
<svg viewBox="0 0 280 130">
<path
d="M8 98 C34 88,38 44,70 58 S110 104,140 72 S190 20,220 48 S250 92,272 48"
/>
</svg>
</div>
<div class="stats">
<div class="stat"><b>185</b><span>pico</span></div>
<div class="stat"><b>41%</b><span>z4/z5</span></div>
<div class="stat"><b>7</b><span>eventos</span></div>
</div>
<div class="dock">
<button class="btn secondary">Marcar</button
><button class="btn">Parar</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>resultado</span><span>salvo</span></div>
<div class="score">W</div>
<div class="belt">
<span>carga alta</span><span>pico 185</span><span>48 min</span>
</div>
<div class="fight-card">
<span class="round">1</span>
<div>Entrou em ritmo</div>
<b>138</b>
</div>
<div class="fight-card">
<span class="round">2</span>
<div>Pico do treino</div>
<b>181</b>
</div>
<div class="fight-card">
<span class="round">3</span>
<div>Queda controlada</div>
<b>152</b>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>histórico</span><span>cards</span></div>
<div class="fight-card">
<span class="round">S</span>
<div>
<b>Sparring</b><br /><span style="color: var(--muted)"
>Hoje · 48 min</span
>
</div>
<b>96</b>
</div>
<div class="fight-card">
<span class="round">M</span>
<div>
<b>Muay Thai</b><br /><span style="color: var(--muted)"
>Seg · 61 min</span
>
</div>
<b>110</b>
</div>
<div class="fight-card">
<span class="round">B</span>
<div>
<b>Boxe</b><br /><span style="color: var(--muted)"
>Sex · 42 min</span
>
</div>
<b>77</b>
</div>
<button class="btn secondary">Ranking pessoal</button>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>sensor</span><span>corner tech</span></div>
<div class="score">BLE</div>
<div class="belt">
<span>180D</span><span>2A37</span><span>-61 RSSI</span>
</div>
<div class="field">Heart Rate Measurement — notify</div>
<div class="field">Battery Level — read</div>
<div class="field">Body Sensor Location — read</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>insight</span><span>headline</span></div>
<div class="score">PRESSÃO</div>
<p class="lead">
Você sustentou alta intensidade por mais tempo que a média das
últimas sessões.
</p>
<div class="belt"><span>+12%</span><span>boa evolução</span></div>
<div class="field">
Use amanhã para treino técnico, não guerra.
</div>
</div>
</div>
</div>
</section>
<section id="system" class="section">
<h2>Design book</h2>
<div class="system">
<div class="spec">
<div class="eyebrow">Cores</div>
<h3>neon controlado</h3>
<p class="lead">
Rosa só para ação, pico e vitória. Se tudo brilha, nada importa.
</p>
</div>
<div class="spec">
<div class="eyebrow">Tipo</div>
<div class="type-big">185</div>
<p class="lead">
Display condensado, letras de pôster, corpo neutro só nos textos
longos.
</p>
</div>
<div class="spec">
<div class="eyebrow">Raio</div>
<div class="radii">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<p class="lead">
Raios menores, mais angular, sensação de esporte e placar.
</p>
</div>
<div class="spec">
<div class="eyebrow">Bordas</div>
<p class="lead">
Bordas vinho/neon, contraste alto, nada de cinza corporativo.
</p>
</div>
</div>
</section>
<section class="section">
<h2>Componentes</h2>
<div class="components">
<div class="component">
<div class="eyebrow">CTA</div>
<button class="btn">Iniciar</button
><button class="btn secondary" style="margin-top: 8px">
Secundário
</button>
</div>
<div class="component">
<div class="eyebrow">Fight card row</div>
<div class="fight-card">
<span class="round">S</span>
<div>Sparring</div>
<b>96</b>
</div>
</div>
<div class="component">
<div class="eyebrow">Badge</div>
<div class="belt"><span>recorde</span><span>z5 08%</span></div>
</div>
<div class="component">
<div class="eyebrow">Input</div>
<div class="field">Nome do treino</div>
<div class="field">Categoria</div>
</div>
<div class="component">
<div class="eyebrow">Share</div>
<p class="lead">
Este padrão é o melhor para gerar imagem compartilhável
pós-treino.
</p>
</div>
</div>
</section>
<section class="section">
<h2>Princípios</h2>
<div class="principles">
<div class="principle">
<b>Memorável</b>
<p class="lead">O usuário deve reconhecer FightRate de longe.</p>
</div>
<div class="principle">
<b>Editorial</b>
<p class="lead">Relatórios viram cards visuais de treino.</p>
</div>
<div class="principle">
<b>Com risco</b>
<p class="lead">Pode cansar visualmente se usado em todo app.</p>
</div>
</div>
</section>
</main>
</body>
</html>
@@ -0,0 +1,642 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate Direction 04 — Sensor Instrument</title>
<style>
:root {
--bg: #02070a;
--ink: #dffaff;
--muted: #7aa6b1;
--panel: #061118;
--panel2: #0a1c25;
--line: #14313c;
--cyan: #5be6ff;
--blue: #2d8cff;
--green: #35ef9f;
--red: #ff4c5d;
--amber: #ffd166;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-xl: 26px;
--mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
--sans: ui-sans-serif, system-ui, sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(91, 230, 255, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(91, 230, 255, 0.07) 1px, transparent 1px),
radial-gradient(
circle at 50% 0%,
rgba(91, 230, 255, 0.18),
transparent 36%
);
background-size:
22px 22px,
22px 22px,
auto;
}
.wrap {
width: min(1240px, calc(100% - 28px));
margin: auto;
padding: 34px 0 86px;
position: relative;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(6, 17, 24, 0.82);
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px 14px;
font-family: var(--mono);
position: sticky;
top: 14px;
z-index: 3;
backdrop-filter: blur(14px);
}
.nav a {
color: var(--muted);
text-decoration: none;
font-size: 12px;
margin-left: 14px;
}
.brand {
color: var(--cyan);
}
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 24px;
}
.terminal {
background: linear-gradient(180deg, #061118, #03090d);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 26px;
box-shadow:
0 28px 80px rgba(0, 0, 0, 0.5),
inset 0 1px rgba(255, 255, 255, 0.05);
}
.eyebrow {
font-family: var(--mono);
color: var(--cyan);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.16em;
}
h1 {
font-family: var(--mono);
font-size: clamp(38px, 7vw, 82px);
line-height: 0.9;
letter-spacing: -0.05em;
margin: 16px 0;
}
h2 {
font-family: var(--mono);
font-size: 36px;
letter-spacing: -0.04em;
margin: 0 0 12px;
}
.lead {
color: var(--muted);
line-height: 1.5;
font-size: 17px;
}
.cmd {
font-family: var(--mono);
background: #02070a;
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
color: var(--green);
margin-top: 16px;
}
.tokens {
display: grid;
grid-template-columns: 6fr 3fr 1fr;
gap: 8px;
}
.token {
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
min-height: 98px;
font-family: var(--mono);
font-weight: 800;
}
.section {
margin-top: 30px;
}
.screen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.phone {
height: 590px;
background: #000;
border-radius: 38px;
padding: 9px;
border: 1px solid #16404d;
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}
.screen {
height: 100%;
border-radius: 30px;
background: #041017;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
overflow: hidden;
border: 1px solid #092532;
}
.top {
font-family: var(--mono);
display: flex;
justify-content: space-between;
color: var(--muted);
font-size: 10px;
}
.big {
font-family: var(--mono);
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.06em;
color: var(--cyan);
}
.unit {
font-size: 16px;
color: var(--muted);
}
.scope {
height: 120px;
border: 1px solid var(--line);
border-radius: 12px;
background: #02070a;
position: relative;
overflow: hidden;
}
.scope:before {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
0deg,
transparent 0 19px,
rgba(91, 230, 255, 0.06) 19px 20px
),
repeating-linear-gradient(
90deg,
transparent 0 19px,
rgba(91, 230, 255, 0.06) 19px 20px
);
}
.scope svg {
position: relative;
width: 100%;
height: 100%;
}
.scope path {
fill: none;
stroke: var(--cyan);
stroke-width: 3;
filter: drop-shadow(0 0 8px var(--cyan));
}
.grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.module {
border: 1px solid var(--line);
border-radius: 12px;
background: #061822;
padding: 10px;
font-family: var(--mono);
}
.module b {
color: var(--ink);
}
.module span {
display: block;
color: var(--muted);
font-size: 10px;
margin-top: 4px;
}
.row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
font-family: var(--mono);
font-size: 12px;
border-bottom: 1px solid var(--line);
padding: 8px 0;
}
.ok {
color: var(--green);
}
.warn {
color: var(--amber);
}
.bad {
color: var(--red);
}
.dock {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.btn {
border: 1px solid var(--cyan);
background: rgba(91, 230, 255, 0.08);
color: var(--cyan);
border-radius: 10px;
padding: 13px 8px;
font-family: var(--mono);
font-weight: 900;
}
.btn.primary {
background: var(--cyan);
color: #021015;
}
.system {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.spec {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 18px;
padding: 16px;
}
.type-big {
font-family: var(--mono);
font-size: 50px;
color: var(--cyan);
}
.radii {
display: flex;
gap: 8px;
align-items: end;
}
.radii div {
background: #061822;
border: 1px solid var(--line);
}
.r1 {
width: 46px;
height: 46px;
border-radius: 6px;
}
.r2 {
width: 64px;
height: 64px;
border-radius: 10px;
}
.r3 {
width: 86px;
height: 86px;
border-radius: 16px;
}
.components {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.component {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 16px;
padding: 14px;
min-height: 150px;
}
.log {
font-family: var(--mono);
background: #02070a;
border-radius: 10px;
padding: 10px;
border: 1px solid var(--line);
font-size: 12px;
color: var(--muted);
margin-top: 8px;
}
.principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.principle {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 20px;
padding: 18px;
}
.principle b {
font-family: var(--mono);
color: var(--cyan);
}
@media (max-width: 1000px) {
.hero,
.screen-grid {
grid-template-columns: 1fr;
}
.system,
.components {
grid-template-columns: 1fr 1fr;
}
.principles {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.nav {
position: relative;
top: 0;
}
.nav div:last-child {
display: none;
}
.system,
.components {
grid-template-columns: 1fr;
}
.phone {
height: 650px;
}
.terminal {
padding: 20px;
}
h1 {
font-size: 44px;
}
}
</style>
</head>
<body>
<main class="wrap">
<nav class="nav">
<div class="brand">FightRate::SensorInstrument</div>
<div>
<a href="00-index.html">index</a><a href="#screens">screens</a
><a href="#system">system</a>
</div>
</nav>
<section class="hero">
<div class="terminal">
<div class="eyebrow">Direção 04 / telemetria BLE</div>
<h1>instrumento técnico, confiável, sem decoração inútil.</h1>
<p class="lead">
A melhor direção se a tela Sensor e a confiança na captura forem
diferenciais do app. Parece equipamento de medição, não aplicativo
de lifestyle.
</p>
<div class="cmd">
$ fightrate capture --sensor Magene-H003 --mode continuous
</div>
</div>
<div class="terminal">
<div class="eyebrow">Regra 60 / 30 / 10</div>
<div class="tokens">
<div class="token" style="background: #02070a">
60% console preto
</div>
<div class="token" style="background: #061118">
30% módulo técnico
</div>
<div class="token" style="background: #5be6ff; color: #021015">
10% sinal cyan
</div>
</div>
<p class="lead">
Verde = ok; âmbar = atenção; vermelho = falha. Azul é informação
secundária.
</p>
</div>
</section>
<section id="screens" class="section">
<h2>Mobile screens</h2>
<div class="screen-grid">
<div class="phone">
<div class="screen">
<div class="top">
<span>CAPTURE/READY</span><span>BLE OK</span>
</div>
<div class="big">H003</div>
<div class="grid2">
<div class="module"><b>RSSI</b><span>-58 dBm</span></div>
<div class="module"><b>BATT</b><span>84%</span></div>
<div class="module">
<b>HRM</b><span class="ok">notify</span>
</div>
<div class="module"><b>SAMPLES</b><span>0</span></div>
</div>
<div class="dock">
<button class="btn primary">START</button
><button class="btn">CHECK</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top">
<span>CAPTURE/RUN</span><span>00:42:18</span>
</div>
<div class="big">154<span class="unit">bpm</span></div>
<div class="scope">
<svg viewBox="0 0 280 120">
<path
d="M4 84 C30 82,42 46,70 58 S114 98,146 66 S188 28,220 48 S252 76,276 54"
/>
</svg>
</div>
<div class="grid2">
<div class="module"><b>AVG</b><span>146</span></div>
<div class="module"><b>PEAK</b><span>183</span></div>
<div class="module"><b>Z4/Z5</b><span>41%</span></div>
<div class="module"><b>DROP</b><span class="ok">0</span></div>
</div>
<div class="dock">
<button class="btn">MARK</button
><button class="btn primary">STOP</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>REPORT</span><span>SAVED</span></div>
<div class="big">2844</div>
<div class="row"><span>Samples</span><b class="ok">valid</b></div>
<div class="row"><span>Duration</span><b>47:12</b></div>
<div class="row"><span>Peak sustained</span><b>181</b></div>
<div class="row">
<span>Signal drops</span><b class="ok">0</b>
</div>
<div class="log">
report.source = local.sqlite<br />confidence = high
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>HISTORY</span><span>LOCAL DB</span></div>
<div class="row"><span>2026-06-10 sparring</span><b>96</b></div>
<div class="row"><span>2026-06-09 drill</span><b>54</b></div>
<div class="row"><span>2026-06-07 muay thai</span><b>110</b></div>
<div class="row"><span>2026-06-05 boxe</span><b>77</b></div>
<div class="scope">
<svg viewBox="0 0 280 120">
<path
d="M10 88 L42 78 L80 92 L116 50 L148 72 L188 38 L226 60 L268 44"
/>
</svg>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top">
<span>SENSOR PROFILE</span><span>GATT</span>
</div>
<div class="big">180D</div>
<div class="row">
<span>2A37 Measurement</span><b class="ok">notify</b>
</div>
<div class="row"><span>2A38 Body Location</span><b>read</b></div>
<div class="row"><span>180F Battery</span><b>read</b></div>
<div class="row">
<span>Device Info</span><b class="warn">maybe</b>
</div>
<div class="dock">
<button class="btn">SCAN</button
><button class="btn primary">LOG</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top">
<span>INSIGHT ENGINE</span><span>EXPLAIN</span>
</div>
<div class="big">LOAD</div>
<div class="module">
<b>Signal confidence</b
><span class="ok">high: 2.844 valid samples</span>
</div>
<div class="module">
<b>Training note</b
><span>high cardiac load; prioritize recovery</span>
</div>
<div class="module">
<b>Why</b><span>time in Z4/Z5 above personal baseline</span>
</div>
</div>
</div>
</div>
</section>
<section id="system" class="section">
<h2>Design system</h2>
<div class="system">
<div class="spec">
<div class="eyebrow">Cores</div>
<p class="lead">
Cyan representa sinal. Não usar para botões destrutivos. Verde,
amarelo e vermelho são semânticos.
</p>
</div>
<div class="spec">
<div class="eyebrow">Tipo</div>
<div class="type-big">2A37</div>
<p class="lead">
Monospace real para UUIDs, logs e dados técnicos.
</p>
</div>
<div class="spec">
<div class="eyebrow">Raios</div>
<div class="radii">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<p class="lead">Mais angular. Parece instrumento.</p>
</div>
<div class="spec">
<div class="eyebrow">Bordas</div>
<p class="lead">
Hairlines cyan escuras. Bordas são grade técnica, não decoração.
</p>
</div>
</div>
</section>
<section class="section">
<h2>Componentes</h2>
<div class="components">
<div class="component">
<div class="eyebrow">Command CTA</div>
<button class="btn primary">START</button
><button class="btn" style="margin-top: 8px">SECONDARY</button>
</div>
<div class="component">
<div class="eyebrow">GATT row</div>
<div class="row"><span>2A37</span><b class="ok">notify</b></div>
<div class="row"><span>2A19</span><b>read</b></div>
</div>
<div class="component">
<div class="eyebrow">Log</div>
<div class="log">connected=true<br />rssi=-61<br />mtu=default</div>
</div>
<div class="component">
<div class="eyebrow">Metric</div>
<div class="big" style="font-size: 42px">-61</div>
<span class="ok">stable</span>
</div>
<div class="component">
<div class="eyebrow">Alert</div>
<span class="bad">signal lost</span>
<div class="log">retry in 2s</div>
</div>
</div>
</section>
<section class="section">
<h2>Princípios</h2>
<div class="principles">
<div class="principle">
<b>Transparência técnica</b>
<p class="lead">
Mostrar o que o sensor expõe e o que o app está usando.
</p>
</div>
<div class="principle">
<b>Confiança</b>
<p class="lead">Dados têm status, origem e qualidade.</p>
</div>
<div class="principle">
<b>Risco</b>
<p class="lead">Pode parecer técnico demais para usuário casual.</p>
</div>
</div>
</section>
</main>
</body>
</html>
@@ -0,0 +1,653 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate Direction 05 — Minimal Performance</title>
<style>
:root {
--bg: #f3eee3;
--paper: #fffaf0;
--ink: #16130e;
--muted: #726a5d;
--line: #d8cdb9;
--accent: #11110f;
--sand: #e9ddc7;
--red: #c83a2a;
--green: #168a5a;
--amber: #d48a12;
--r-xs: 4px;
--r-sm: 9px;
--r-md: 14px;
--r-lg: 22px;
--r-xl: 30px;
--shadow: 0 28px 80px rgba(22, 19, 14, 0.1);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "New York", Georgia, serif;
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 14% 2%,
rgba(200, 58, 42, 0.12),
transparent 34%
),
linear-gradient(rgba(22, 19, 14, 0.035) 1px, transparent 1px);
background-size:
auto,
100% 34px;
}
.wrap {
width: min(1180px, calc(100% - 28px));
margin: auto;
padding: 34px 0 82px;
position: relative;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--line);
padding: 16px 0;
}
.nav a {
font-family: ui-sans-serif, system-ui, sans-serif;
color: var(--muted);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 12px;
margin-left: 16px;
}
.brand {
font-family: ui-sans-serif, system-ui, sans-serif;
font-weight: 950;
letter-spacing: -0.04em;
}
.hero {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 24px;
margin-top: 38px;
}
.hero-panel {
background: rgba(255, 250, 240, 0.72);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 32px;
box-shadow: var(--shadow);
}
.eyebrow {
font-family: ui-sans-serif, system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 11px;
color: var(--red);
font-weight: 900;
}
h1 {
font-size: clamp(52px, 9vw, 112px);
line-height: 0.86;
letter-spacing: -0.075em;
margin: 16px 0;
}
h2 {
font-size: 44px;
letter-spacing: -0.055em;
line-height: 0.96;
margin: 0 0 12px;
}
.lead {
font-family: ui-sans-serif, system-ui, sans-serif;
color: var(--muted);
font-size: 18px;
line-height: 1.55;
max-width: 720px;
}
.tokens {
display: grid;
grid-template-columns: 6fr 3fr 1fr;
gap: 8px;
margin-top: 24px;
}
.token {
border-radius: 18px;
padding: 16px;
min-height: 100px;
font-family: ui-sans-serif, system-ui, sans-serif;
font-weight: 900;
}
.btn {
border: 1px solid var(--ink);
background: var(--ink);
color: var(--paper);
border-radius: 999px;
padding: 14px 18px;
font-family: ui-sans-serif, system-ui, sans-serif;
font-weight: 900;
}
.btn.secondary {
background: transparent;
color: var(--ink);
}
.section {
margin-top: 34px;
}
.screen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.phone {
height: 590px;
background: #111;
border-radius: 40px;
padding: 9px;
box-shadow: var(--shadow);
}
.screen {
height: 100%;
border-radius: 32px;
background: var(--paper);
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
overflow: hidden;
}
.top {
display: flex;
justify-content: space-between;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
font-weight: 900;
}
.number {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 82px;
line-height: 0.84;
letter-spacing: -0.09em;
font-weight: 950;
}
.unit {
font-size: 17px;
color: var(--muted);
font-weight: 600;
letter-spacing: 0;
}
.rule-line {
height: 1px;
background: var(--line);
}
.chart {
height: 136px;
border-bottom: 1px solid var(--ink);
position: relative;
}
.chart svg {
width: 100%;
height: 100%;
}
.chart path {
fill: none;
stroke: var(--ink);
stroke-width: 3;
stroke-linecap: round;
}
.metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.metric {
border-top: 1px solid var(--line);
padding-top: 10px;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.metric b {
font-size: 24px;
}
.metric span {
display: block;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
font-weight: 900;
}
.dock {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dock .btn {
padding: 14px 8px;
}
.list {
display: grid;
gap: 0;
border-top: 1px solid var(--line);
}
.item {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
font-family: ui-sans-serif, system-ui, sans-serif;
}
.item span {
color: var(--muted);
font-size: 12px;
}
.note {
background: #f3eadb;
border-radius: 18px;
padding: 14px;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.system {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.spec {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 24px;
padding: 18px;
}
.spec h3 {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 22px;
letter-spacing: -0.04em;
margin: 8px 0;
}
.typebig {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 62px;
letter-spacing: -0.08em;
line-height: 0.86;
}
.radii {
display: flex;
gap: 9px;
align-items: end;
}
.radii div {
background: var(--sand);
border: 1px solid var(--line);
}
.r1 {
width: 48px;
height: 48px;
border-radius: 4px;
}
.r2 {
width: 68px;
height: 68px;
border-radius: 14px;
}
.r3 {
width: 92px;
height: 92px;
border-radius: 30px;
}
.components {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.component {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 22px;
padding: 14px;
min-height: 154px;
}
.field {
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px;
background: #fbf3e5;
color: var(--muted);
font-family: ui-sans-serif, system-ui, sans-serif;
margin-top: 10px;
}
.pill {
display: inline-flex;
border-radius: 999px;
border: 1px solid var(--line);
padding: 7px 10px;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.principle {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 24px;
padding: 20px;
}
.principle b {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 22px;
}
@media (max-width: 1000px) {
.hero,
.screen-grid {
grid-template-columns: 1fr;
}
.system,
.components {
grid-template-columns: 1fr 1fr;
}
.principles {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.nav div:last-child {
display: none;
}
.hero-panel {
padding: 22px;
}
.system,
.components {
grid-template-columns: 1fr;
}
.phone {
height: 650px;
}
h1 {
font-size: 60px;
}
}
</style>
</head>
<body>
<main class="wrap">
<nav class="nav">
<div class="brand">FightRate / Minimal Performance</div>
<div>
<a href="00-index.html">Índice</a><a href="#screens">Telas</a
><a href="#system">Sistema</a>
</div>
</nav>
<section class="hero">
<div class="hero-panel">
<div class="eyebrow">Direção 05 / premium minimal</div>
<h1>menos interface, mais verdade de treino.</h1>
<p class="lead">
Um app calmo e caro. Ideal se a marca quiser parecer precisa, madura
e confiável, sem parecer hospital nem dashboard corporativa.
</p>
<button class="btn">Iniciar captura</button>
<button class="btn secondary">Histórico</button>
</div>
<div class="hero-panel">
<div class="eyebrow">Regra 60 / 30 / 10</div>
<div class="tokens">
<div class="token" style="background: #fffaf0">
60% paper quente
</div>
<div class="token" style="background: #e9ddc7">30% areia</div>
<div class="token" style="background: #16130e; color: #fffaf0">
10% tinta
</div>
</div>
<p class="lead">
Vermelho e verde aparecem só como semântica, nunca como tema
inteiro.
</p>
</div>
</section>
<section id="screens" class="section">
<h2>Telas mobile</h2>
<div class="screen-grid">
<div class="phone">
<div class="screen">
<div class="top"><span>pronto</span><span>sensor ok</span></div>
<div class="number">--<span class="unit">bpm</span></div>
<div class="rule-line"></div>
<p class="lead">
Inicie a captura antes do treino. Todo o restante pode esperar.
</p>
<div class="metrics">
<div class="metric"><b>84%</b><span>bateria</span></div>
<div class="metric"><b>-58</b><span>rssi</span></div>
<div class="metric"><b>0</b><span>amostras</span></div>
</div>
<div class="dock">
<button class="btn">Iniciar</button
><button class="btn secondary">check-in</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>captura</span><span>42:18</span></div>
<div class="number">154<span class="unit">bpm</span></div>
<div class="chart">
<svg viewBox="0 0 280 130">
<path
d="M8 96 C36 88,44 54,76 61 S116 94,145 70 S190 38,222 50 S250 78,272 54"
/>
</svg>
</div>
<div class="metrics">
<div class="metric"><b>146</b><span>média</span></div>
<div class="metric"><b>183</b><span>pico</span></div>
<div class="metric"><b>41%</b><span>z4/z5</span></div>
</div>
<div class="dock">
<button class="btn secondary">Evento</button
><button
class="btn"
style="background: var(--red); border-color: var(--red)"
>
Parar
</button>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>resumo</span><span>salvo</span></div>
<div class="number">47<span class="unit">min</span></div>
<div class="list">
<div class="item">
<div>Tempo em carga<br /><span>Z4/Z5</span></div>
<b>28m</b>
</div>
<div class="item">
<div>Pico sustentado<br /><span>melhor trecho</span></div>
<b>181</b>
</div>
<div class="item">
<div>Recuperação<br /><span>estimada</span></div>
<b>18h</b>
</div>
</div>
<div class="note">
Carga alta controlada. Amanhã prefira técnica leve.
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top">
<span>histórico</span><span>4 semanas</span>
</div>
<div class="metrics">
<div class="metric"><b>11</b><span>treinos</span></div>
<div class="metric"><b>7h</b><span>total</span></div>
<div class="metric"><b>+8%</b><span>carga</span></div>
</div>
<div class="list">
<div class="item">
<div>Sparring<br /><span>Hoje · 47 min</span></div>
<b>96</b>
</div>
<div class="item">
<div>Muay Thai<br /><span>Seg · 61 min</span></div>
<b>110</b>
</div>
<div class="item">
<div>Boxe<br /><span>Sex · 42 min</span></div>
<b>77</b>
</div>
</div>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>sensor</span><span>ble</span></div>
<div class="number">-61<span class="unit">rssi</span></div>
<div class="list">
<div class="item">
<div>Heart Rate<br /><span>2A37</span></div>
<b>notify</b>
</div>
<div class="item">
<div>Battery<br /><span>2A19</span></div>
<b>read</b>
</div>
<div class="item">
<div>Body Sensor<br /><span>2A38</span></div>
<b>read</b>
</div>
</div>
<span class="pill">perfil estável</span>
</div>
</div>
<div class="phone">
<div class="screen">
<div class="top"><span>insight</span><span>curto</span></div>
<div class="number">18h<span class="unit">rec</span></div>
<p class="lead">
Carga alta. Você passou mais tempo em intensidade de luta que na
média recente.
</p>
<div class="note">
<b>Por que importa?</b><br />Ajuda a decidir se o próximo treino
deve ser duro ou técnico.
</div>
</div>
</div>
</div>
</section>
<section id="system" class="section">
<h2>Design system</h2>
<div class="system">
<div class="spec">
<div class="eyebrow">Cores</div>
<h3>quente, não fitness genérico</h3>
<p class="lead">
Evita verde neon, azul SaaS e gradiente artificial.
</p>
</div>
<div class="spec">
<div class="eyebrow">Tipo</div>
<div class="typebig">154</div>
<p class="lead">Números sans; títulos serifados editoriais.</p>
</div>
<div class="spec">
<div class="eyebrow">Raio</div>
<div class="radii">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<p class="lead">Raios elegantes. Não exagerar.</p>
</div>
<div class="spec">
<div class="eyebrow">Bordas</div>
<p class="lead">
Linhas finas e quentes. Pouca sombra. Muito respiro.
</p>
</div>
</div>
</section>
<section class="section">
<h2>Componentes</h2>
<div class="components">
<div class="component">
<div class="eyebrow">Botões</div>
<button class="btn">Primário</button
><button class="btn secondary" style="margin-top: 8px">
Secundário
</button>
</div>
<div class="component">
<div class="eyebrow">Campo</div>
<div class="field">Nome do treino</div>
<div class="field">Observação</div>
</div>
<div class="component">
<div class="eyebrow">Métrica</div>
<div class="number" style="font-size: 52px">96</div>
<span class="pill">trimp</span>
</div>
<div class="component">
<div class="eyebrow">Lista</div>
<div class="item">
<div>Sessão</div>
<b>47m</b>
</div>
<div class="item">
<div>Pico</div>
<b>181</b>
</div>
</div>
<div class="component">
<div class="eyebrow">Nota</div>
<div class="note">Texto curto. Uma conclusão por bloco.</div>
</div>
</div>
</section>
<section class="section">
<h2>Princípios</h2>
<div class="principles">
<div class="principle">
<b>Silêncio visual</b>
<p class="lead">Só o dado importante grita.</p>
</div>
<div class="principle">
<b>Marca premium</b>
<p class="lead">Bom para vender seriedade e maturidade.</p>
</div>
<div class="principle">
<b>Risco</b>
<p class="lead">
Pode parecer frio demais se não houver personalidade verbal.
</p>
</div>
</div>
</section>
</main>
</body>
</html>
@@ -0,0 +1,28 @@
# FightRate React Native Redesign — Direções de Design
Este pacote descarta a direção visual antiga do projeto para fins de exploração.
Não é implementação do app. É um conjunto de propostas profissionais para decidir o design system antes de reconstruir o FightRate em React Native.
## Arquivos
- `00-index.html` — visão geral comparativa das direções.
- `01-corner-command.html` — direção tática premium, estilo mesa de córner/treino real.
- `02-athlete-lab.html` — direção científica, limpa, laboratório de performance.
- `03-fight-night.html` — direção editorial/esportiva, energia de evento e combate.
- `04-sensor-instrument.html` — direção técnica, instrumentação BLE e telemetria.
- `05-minimal-performance.html` — direção minimalista premium, foco máximo em dados úteis.
## Regras para próxima etapa
1. Não portar o design antigo.
2. Não começar React Native antes de escolher uma direção visual.
3. Cada direção deve ser avaliada por:
- legibilidade durante treino;
- confiança visual;
- facilidade de virar marca;
- clareza de dados;
- qualidade em telas pequenas;
- viabilidade em React Native.
4. Round é secundário. O fluxo principal é captura contínua do treino.
5. O design system final deve virar tokens React Native: cores, tipografia, espaçamento, raio, bordas, elevação, estados, motion e componentes.
@@ -0,0 +1,544 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate — Design Directions v2</title>
<style>
:root {
--paper: #f4efe5;
--ink: #12100c;
--muted: #70695d;
--line: #d7cab7;
--red: #d33b2f;
--green: #13855d;
--blue: #0f6cff;
--night: #080705;
--r: 30px;
--shadow: 0 32px 100px rgba(18, 16, 12, 0.12);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family:
ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
sans-serif;
line-height: 1.42;
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 10% 0%,
rgba(211, 59, 47, 0.12),
transparent 34%
),
radial-gradient(
circle at 86% 12%,
rgba(19, 133, 93, 0.12),
transparent 30%
),
linear-gradient(rgba(18, 16, 12, 0.035) 1px, transparent 1px);
background-size:
auto,
auto,
100% 36px;
}
.wrap {
width: min(1240px, calc(100% - 28px));
margin: auto;
padding: 44px 0 86px;
position: relative;
}
.hero {
border: 1px solid var(--line);
border-radius: 38px;
background: rgba(255, 250, 241, 0.7);
padding: 34px;
box-shadow: var(--shadow);
backdrop-filter: blur(18px);
}
.eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.24em;
font-weight: 950;
color: var(--red);
}
h1 {
font-family: Georgia, serif;
font-size: clamp(54px, 10vw, 124px);
line-height: 0.82;
letter-spacing: -0.085em;
margin: 18px 0 20px;
max-width: 1080px;
}
p {
color: var(--muted);
font-size: 18px;
max-width: 820px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 28px;
}
.direction {
position: relative;
min-height: 620px;
border-radius: 34px;
border: 1px solid var(--line);
background: #fffaf1;
overflow: hidden;
box-shadow: 0 24px 70px rgba(18, 16, 12, 0.08);
}
.direction.dark {
background: #080705;
color: #f7ead8;
border-color: #30261b;
}
.direction.athlete {
background: #f7fbf6;
}
.direction:before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.08),
transparent 40%
);
}
.top {
padding: 24px;
}
.num {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
font-weight: 950;
}
.dark .num {
color: #b7a68a;
}
.direction h2 {
font-size: 44px;
line-height: 0.92;
letter-spacing: -0.06em;
margin: 10px 0 12px;
}
.direction p {
font-size: 15px;
}
.phone {
width: 245px;
height: 500px;
margin: 12px auto 0;
border-radius: 42px;
background: #0c0b09;
padding: 10px;
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
transform: rotate(-2deg);
}
.direction:nth-child(2) .phone {
transform: rotate(1.5deg);
}
.direction:nth-child(3) .phone {
transform: rotate(-1deg);
}
.screen {
height: 100%;
border-radius: 32px;
padding: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.dark .screen {
background: linear-gradient(180deg, #15100b, #080705);
color: #f8ead7;
}
.athlete .screen {
background: #fcfffc;
color: #12231b;
}
.editorial .screen {
background: #fff7e8;
color: #15120d;
}
.status {
display: flex;
justify-content: space-between;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 900;
opacity: 0.7;
}
.bpm {
font-size: 78px;
line-height: 0.85;
letter-spacing: -0.1em;
font-weight: 1000;
margin-top: 18px;
}
.unit {
font-size: 18px;
letter-spacing: 0;
opacity: 0.55;
}
.wave {
height: 140px;
margin-top: 18px;
border-radius: 22px;
position: relative;
overflow: hidden;
}
.dark .wave {
background: #21170f;
border: 1px solid #3b2b1e;
}
.athlete .wave {
background: #edf7f0;
border: 1px solid #d7e4dc;
}
.editorial .wave {
background: #f2e3cb;
border: 1px solid #decdb4;
}
.wave svg {
width: 100%;
height: 100%;
}
.wave path {
fill: none;
stroke: currentColor;
stroke-width: 4;
stroke-linecap: round;
}
.chips {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 18px;
}
.chip {
border-radius: 16px;
padding: 10px 8px;
font-size: 10px;
font-weight: 950;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
}
.dark .chip {
background: #24190f;
color: #ffbd49;
}
.athlete .chip {
background: #e7f5ed;
color: #08734c;
}
.editorial .chip {
background: #eadbc2;
color: #15120d;
}
.cta {
position: absolute;
left: 24px;
right: 24px;
bottom: 22px;
display: flex;
gap: 10px;
align-items: center;
}
.cta a {
flex: 1;
text-align: center;
text-decoration: none;
border-radius: 999px;
padding: 13px 12px;
font-weight: 950;
color: inherit;
border: 1px solid currentColor;
}
.cta a.primary {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.dark .cta a.primary {
background: #e23b2e;
border-color: #e23b2e;
color: white;
}
.athlete .cta a.primary {
background: #13855d;
border-color: #13855d;
color: white;
}
.matrix {
margin-top: 32px;
display: grid;
grid-template-columns: 1.25fr repeat(3, 1fr);
border: 1px solid var(--line);
border-radius: 28px;
overflow: hidden;
background: #fffaf1;
}
.matrix div {
padding: 16px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
font-size: 14px;
}
.matrix div:nth-child(4n) {
border-right: 0;
}
.matrix .head {
font-weight: 950;
background: #fff;
}
.recommend {
margin-top: 26px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 18px;
}
.note {
border: 1px solid var(--line);
border-radius: 28px;
background: #fffaf1;
padding: 22px;
box-shadow: 0 18px 50px rgba(18, 16, 12, 0.06);
}
.note b {
display: block;
font-size: 22px;
margin-bottom: 8px;
}
.note ul {
margin: 0;
padding-left: 20px;
color: var(--muted);
}
@media (max-width: 1040px) {
.grid,
.recommend {
grid-template-columns: 1fr;
}
.direction {
min-height: 650px;
}
.matrix {
grid-template-columns: 1fr;
}
.matrix div {
border-right: 0;
}
.phone {
width: 270px;
height: 540px;
}
}
@media (max-width: 620px) {
.wrap {
padding-top: 20px;
}
.hero {
padding: 22px;
}
h1 {
font-size: 56px;
}
.direction h2 {
font-size: 38px;
}
.phone {
width: 250px;
height: 520px;
}
.cta {
position: static;
margin: 20px 24px 24px;
}
}
</style>
</head>
<body>
<main class="wrap">
<section class="hero">
<div class="eyebrow">FightRate / React Native design directions v2</div>
<h1>Três caminhos fortes. Não cinco ideias fracas.</h1>
<p>
Esta versão substitui os exemplos anteriores. Cada direção agora é
pensada como base real de marca e design system para um app React
Native: captura contínua, histórico, sensor BLE e relatório
pós-treino.
</p>
</section>
<section class="grid">
<article class="direction dark">
<div class="top">
<div class="num">01 / recomendado para treino</div>
<h2>Corner Instrument</h2>
<p>
Equipamento de córner: escuro, intenso, legível, com cara de
ferramenta física. Melhor para a tela de captura ao vivo.
</p>
</div>
<div class="phone">
<div class="screen">
<div class="status">
<span>captura ativa</span><span>42:18</span>
</div>
<div class="bpm">154<span class="unit">bpm</span></div>
<div class="wave">
<svg viewBox="0 0 280 140">
<path
d="M8 98 C36 82,44 48,78 58 S120 102,150 70 S190 26,222 52 S250 88,272 48"
/>
</svg>
</div>
<div class="chips">
<span class="chip">Méd 146</span
><span class="chip">Pico 183</span
><span class="chip">Z4 41%</span>
</div>
</div>
</div>
<div class="cta">
<a class="primary" href="01-corner-instrument-v2.html"
>Abrir direção</a
>
</div>
</article>
<article class="direction athlete">
<div class="top">
<div class="num">02 / recomendado para app base</div>
<h2>Athlete OS</h2>
<p>
Sistema operacional do atleta: científico sem ser hospitalar,
excelente para histórico, relatórios e confiança nos dados.
</p>
</div>
<div class="phone">
<div class="screen">
<div class="status"><span>relatório</span><span>salvo</span></div>
<div class="bpm">96<span class="unit">trimp</span></div>
<div class="wave">
<svg viewBox="0 0 280 140">
<path
d="M8 100 C52 92,62 70,92 75 S134 106,162 72 S204 42,236 56 S256 76,272 54"
/>
</svg>
</div>
<div class="chips">
<span class="chip">28m carga</span
><span class="chip">18h rec</span><span class="chip">Alta</span>
</div>
</div>
</div>
<div class="cta">
<a class="primary" href="02-athlete-os-v2.html">Abrir direção</a>
</div>
</article>
<article class="direction editorial">
<div class="top">
<div class="num">03 / recomendado para marca</div>
<h2>Combat Editorial</h2>
<p>
Marca premium e editorial: minimalista, madura e memorável. Melhor
para identidade pública e experiência pós-treino.
</p>
</div>
<div class="phone">
<div class="screen">
<div class="status">
<span>semana</span><span>4 treinos</span>
</div>
<div class="bpm">+8<span class="unit">%</span></div>
<div class="wave">
<svg viewBox="0 0 280 140">
<path
d="M8 96 L42 80 L74 92 L116 58 L150 70 L190 42 L230 62 L272 50"
/>
</svg>
</div>
<div class="chips">
<span class="chip">Carga</span><span class="chip">Evolução</span
><span class="chip">Risco baixo</span>
</div>
</div>
</div>
<div class="cta">
<a class="primary" href="03-combat-editorial-v2.html"
>Abrir direção</a
>
</div>
</article>
</section>
<section class="matrix">
<div class="head">Critério</div>
<div class="head">Corner Instrument</div>
<div class="head">Athlete OS</div>
<div class="head">Combat Editorial</div>
<div>Melhor uso</div>
<div>Captura ao vivo</div>
<div>App inteiro / relatório</div>
<div>Marca / histórico premium</div>
<div>Energia</div>
<div>Alta</div>
<div>Média controlada</div>
<div>Baixa e sofisticada</div>
<div>Dados densos</div>
<div>Bom</div>
<div>Excelente</div>
<div>Bom</div>
<div>React Native</div>
<div>Viável</div>
<div>Muito viável</div>
<div>Muito viável</div>
<div>Risco</div>
<div>Ficar escuro demais</div>
<div>Ficar clínico demais</div>
<div>Ficar frio demais</div>
</section>
<section class="recommend">
<div class="note">
<b>Minha recomendação agora</b>
<ul>
<li>Base do app: <b>Athlete OS</b>.</li>
<li>Tela de captura: <b>Corner Instrument</b>.</li>
<li>
Identidade pública/relatórios compartilháveis: elementos de
<b>Combat Editorial</b>.
</li>
</ul>
</div>
<div class="note">
<b>Próxima decisão</b>
<p>
Escolher se o app deve parecer mais “equipamento de treino” ou
“sistema científico do atleta”. Depois disso eu crio o DESIGN.md
final e só então começa o Expo/React Native.
</p>
</div>
</section>
</main>
</body>
</html>
@@ -0,0 +1,831 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate v2 — Corner Instrument</title>
<style>
:root {
--bg: #070605;
--ink: #f8ead8;
--muted: #b9a98e;
--dim: #746754;
--panel: #12100c;
--panel2: #1d170f;
--line: #392d1e;
--red: #e23b2e;
--amber: #ffb43d;
--green: #34c77b;
--cream: #fff0dc;
--r1: 10px;
--r2: 16px;
--r3: 24px;
--r4: 36px;
--r5: 48px;
--shadow: 0 34px 110px rgba(0, 0, 0, 0.54);
--bezier: cubic-bezier(0.18, 0.9, 0.18, 1);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family:
ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
sans-serif;
line-height: 1.42;
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 12% -8%,
rgba(226, 59, 46, 0.36),
transparent 34%
),
radial-gradient(
circle at 86% 12%,
rgba(255, 180, 61, 0.14),
transparent 30%
),
linear-gradient(
115deg,
rgba(255, 255, 255, 0.045) 0 1px,
transparent 1px 20px
);
opacity: 0.9;
}
.wrap {
width: min(1260px, calc(100% - 28px));
margin: auto;
padding: 30px 0 90px;
position: relative;
}
.nav {
position: sticky;
top: 14px;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(18, 16, 12, 0.82);
backdrop-filter: blur(16px);
padding: 10px 12px 10px 18px;
}
.brand {
font-weight: 1000;
letter-spacing: -0.045em;
}
.brand span {
color: var(--red);
}
.nav a {
color: var(--muted);
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.17em;
margin-left: 16px;
}
.hero {
margin-top: 28px;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 18px;
}
.slab {
border: 1px solid var(--line);
border-radius: var(--r5);
background: linear-gradient(
145deg,
rgba(29, 23, 15, 0.96),
rgba(10, 8, 6, 0.98)
);
box-shadow: var(--shadow);
overflow: hidden;
position: relative;
}
.slab:before {
content: "";
position: absolute;
inset: 1px;
border-radius: calc(var(--r5) - 1px);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.pad {
padding: 34px;
}
.eyebrow {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--amber);
font-weight: 950;
}
.title {
font-size: clamp(58px, 10vw, 132px);
line-height: 0.76;
letter-spacing: -0.095em;
margin: 18px 0 20px;
font-weight: 1000;
}
.lead {
font-size: 18px;
color: var(--muted);
max-width: 780px;
}
.actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 26px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
border: 0;
border-radius: 999px;
background: var(--red);
color: white;
padding: 14px 18px;
font-weight: 1000;
text-transform: uppercase;
letter-spacing: 0.08em;
box-shadow: 0 18px 42px rgba(226, 59, 46, 0.32);
transition: transform 0.22s var(--bezier);
}
.btn:hover {
transform: translateY(-2px);
}
.btn.secondary {
background: transparent;
color: var(--ink);
border: 1px solid var(--line);
box-shadow: none;
}
.btn .dot {
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.15);
}
.color-strip {
display: grid;
grid-template-columns: 6fr 3fr 1fr;
gap: 8px;
margin-top: 20px;
}
.color {
min-height: 122px;
border-radius: 22px;
padding: 16px;
font-weight: 1000;
display: flex;
align-items: end;
}
.section {
margin-top: 28px;
}
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.section h2 {
font-size: 48px;
line-height: 0.88;
letter-spacing: -0.065em;
margin: 0;
}
.section p {
color: var(--muted);
}
.phone-wall {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.device {
height: 640px;
border-radius: 48px;
background: #030302;
padding: 10px;
border: 1px solid #3b2d1c;
box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
}
.screen {
height: 100%;
border-radius: 38px;
background: linear-gradient(180deg, #19130c, #0b0805);
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
overflow: hidden;
}
.topline {
display: flex;
justify-content: space-between;
color: var(--dim);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 950;
}
.bpm {
font-size: 82px;
line-height: 0.82;
letter-spacing: -0.1em;
font-weight: 1000;
}
.unit {
font-size: 18px;
letter-spacing: 0;
color: var(--muted);
}
.chart {
height: 136px;
border-radius: 24px;
background: linear-gradient(180deg, #251a10, #100c08);
border: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.chart:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(transparent 24px, rgba(255, 255, 255, 0.045) 25px),
linear-gradient(
90deg,
transparent 24px,
rgba(255, 255, 255, 0.045) 25px
);
background-size: 25px 25px;
}
.chart svg {
position: relative;
width: 100%;
height: 100%;
}
.chart path {
fill: none;
stroke: var(--red);
stroke-width: 4.5;
stroke-linecap: round;
filter: drop-shadow(0 0 12px rgba(226, 59, 46, 0.55));
}
.data-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.tile {
border: 1px solid var(--line);
border-radius: 18px;
background: #16110b;
padding: 12px;
}
.tile b {
display: block;
font-size: 24px;
letter-spacing: -0.05em;
}
.tile span {
font-size: 10px;
color: var(--muted);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 950;
}
.dock {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dock .btn {
justify-content: center;
padding: 14px 8px;
font-size: 11px;
}
.stop {
background: var(--cream);
color: #120b07;
box-shadow: none;
}
.tag-row {
display: flex;
gap: 7px;
flex-wrap: wrap;
}
.tag {
border-radius: 999px;
background: #251a10;
color: var(--amber);
padding: 7px 9px;
font-size: 10px;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.list {
display: grid;
gap: 8px;
}
.item {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
border-bottom: 1px solid var(--line);
padding: 10px 0;
}
.badge {
width: 38px;
height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--red);
font-weight: 1000;
}
.field {
border: 1px solid var(--line);
background: #0d0906;
border-radius: 16px;
padding: 12px;
color: var(--muted);
}
.system-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr 1fr;
gap: 18px;
}
.spec {
border: 1px solid var(--line);
border-radius: 30px;
background: rgba(18, 16, 12, 0.8);
padding: 22px;
}
.spec h3 {
font-size: 26px;
letter-spacing: -0.045em;
margin: 8px 0;
}
.scale {
display: grid;
gap: 10px;
}
.scale div {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
padding: 8px 0;
color: var(--muted);
}
.scale b {
color: var(--ink);
}
.radii {
display: flex;
gap: 10px;
align-items: end;
margin-top: 16px;
}
.radii i {
display: block;
background: #24190f;
border: 1px solid var(--line);
}
.ra {
width: 54px;
height: 54px;
border-radius: 10px;
}
.rb {
width: 72px;
height: 72px;
border-radius: 24px;
}
.rc {
width: 96px;
height: 96px;
border-radius: 40px;
}
.component-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.component {
min-height: 160px;
border: 1px solid var(--line);
border-radius: 24px;
background: #120f0b;
padding: 14px;
}
.motion {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.motion-card {
border: 1px solid var(--line);
border-radius: 26px;
background: #120f0b;
padding: 18px;
}
.motion-card b {
color: var(--amber);
}
@media (max-width: 1180px) {
.phone-wall {
grid-template-columns: repeat(2, 1fr);
}
.component-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.hero,
.system-grid,
.motion {
grid-template-columns: 1fr;
}
.section-head {
display: block;
}
.device {
height: 680px;
}
}
@media (max-width: 620px) {
.nav {
position: relative;
top: 0;
}
.nav div:last-child {
display: none;
}
.pad {
padding: 22px;
}
.title {
font-size: 64px;
}
.phone-wall,
.component-grid {
grid-template-columns: 1fr;
}
.device {
height: 700px;
}
}
</style>
</head>
<body>
<main class="wrap">
<nav class="nav">
<div class="brand">Fight<span>Rate</span> / Corner Instrument</div>
<div>
<a href="00-v2-index.html">v2 index</a><a href="#screens">telas</a
><a href="#system">sistema</a><a href="#components">componentes</a>
</div>
</nav>
<section class="hero">
<div class="slab pad">
<div class="eyebrow">Direção 01 / equipamento de córner</div>
<div class="title">treino ligado. celular esquecido.</div>
<p class="lead">
O app deve parecer uma peça de equipamento no canto do tatame:
forte, confiável e legível de longe. Poucos elementos. Dados
grandes. Ação primária óbvia.
</p>
<div class="actions">
<button class="btn">
Iniciar treino <span class="dot">↗</span></button
><button class="btn secondary">Ver relatório</button>
</div>
</div>
<div class="slab pad">
<div class="eyebrow">Tokens de marca</div>
<div class="color-strip">
<div class="color" style="background: #070605">60% preto lona</div>
<div class="color" style="background: #1d170f">
30% couro queimado
</div>
<div class="color" style="background: #e23b2e">10% golpe</div>
</div>
<p class="lead">
Âmbar sinaliza leitura auxiliar; vermelho é ação, pico ou risco.
Nada de azul SaaS, nada de verde fitness genérico.
</p>
</div>
</section>
<section id="screens" class="section">
<div class="section-head">
<div>
<h2>Telas principais</h2>
<p>O mesmo sistema aplicado a seis momentos reais do produto.</p>
</div>
</div>
<div class="phone-wall">
<div class="device">
<div class="screen">
<div class="topline">
<span>pré-treino</span><span>h003 ok</span>
</div>
<div class="bpm">--<span class="unit">bpm</span></div>
<p class="lead">
Coloque a cinta, toque uma vez e largue o celular.
</p>
<div class="tag-row">
<span class="tag">sensor pronto</span
><span class="tag">bateria 84%</span>
</div>
<div class="data-grid">
<div class="tile"><b>-58</b><span>rssi</span></div>
<div class="tile"><b>0</b><span>drops</span></div>
<div class="tile"><b>0</b><span>amostras</span></div>
</div>
<div class="dock">
<button class="btn">Iniciar</button
><button class="btn secondary">Check-in</button>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>captura ativa</span><span>42:18</span>
</div>
<div class="bpm">154<span class="unit">bpm</span></div>
<div class="chart">
<svg viewBox="0 0 280 140">
<path
d="M8 104 C36 86,44 46,78 60 S120 106,150 72 S190 28,222 54 S250 92,272 48"
/>
</svg>
</div>
<div class="data-grid">
<div class="tile"><b>146</b><span>média</span></div>
<div class="tile"><b>183</b><span>pico</span></div>
<div class="tile"><b>41%</b><span>Z4/Z5</span></div>
</div>
<div class="dock">
<button class="btn secondary">Evento</button
><button class="btn stop">Parar</button>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>pós-treino</span><span>salvo</span>
</div>
<div class="bpm">47<span class="unit">min</span></div>
<div class="tag-row">
<span class="tag">carga alta</span
><span class="tag">rec 18h</span>
</div>
<div class="list">
<div class="item">
<span class="badge">1</span>
<div>
Entrada em ritmo<br /><span style="color: var(--muted)"
>0-10 min</span
>
</div>
<b>138</b>
</div>
<div class="item">
<span class="badge">2</span>
<div>
Bloco mais intenso<br /><span style="color: var(--muted)"
>10-31 min</span
>
</div>
<b>181</b>
</div>
<div class="item">
<span class="badge">3</span>
<div>
Queda controlada<br /><span style="color: var(--muted)"
>31-47 min</span
>
</div>
<b>152</b>
</div>
</div>
<div class="dock">
<button class="btn">Relatório</button
><button class="btn secondary">Exportar</button>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>histórico</span><span>junho</span>
</div>
<div class="data-grid">
<div class="tile"><b>8</b><span>treinos</span></div>
<div class="tile"><b>5h</b><span>tempo</span></div>
<div class="tile"><b>+8%</b><span>carga</span></div>
</div>
<div class="list">
<div class="item">
<span class="badge">S</span>
<div>
Sparring<br /><span style="color: var(--muted)"
>Hoje · 47 min · pico 183</span
>
</div>
<b>96</b>
</div>
<div class="item">
<span class="badge">M</span>
<div>
Muay Thai<br /><span style="color: var(--muted)"
>Seg · 61 min · alta carga</span
>
</div>
<b>110</b>
</div>
<div class="item">
<span class="badge">B</span>
<div>
Boxe<br /><span style="color: var(--muted)"
>Sex · 42 min</span
>
</div>
<b>77</b>
</div>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>sensor</span><span>ble profile</span>
</div>
<div class="bpm">-61<span class="unit">rssi</span></div>
<div class="field">Heart Rate Service · 180D</div>
<div class="field">Measurement · 2A37 · notify</div>
<div class="field">Battery · 2A19 · read</div>
<div class="field">Body Sensor · 2A38 · read</div>
<div class="tag-row">
<span class="tag">perfil estável</span
><span class="tag">0 quedas</span>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>insight</span><span>explicável</span>
</div>
<div class="bpm">18h<span class="unit">rec</span></div>
<p class="lead">
Carga cardiovascular alta. Amanhã: técnica leve ou descanso
ativo.
</p>
<div class="tile">
<b>Por que importa?</b
><span>Você ficou acima da sua média recente em Z4/Z5.</span>
</div>
<div class="tile">
<b>Confiança</b
><span>2.844 amostras válidas. Sem quedas de sinal.</span>
</div>
</div>
</div>
</div>
</section>
<section id="system" class="section">
<h2>Design book visual</h2>
<div class="system-grid">
<div class="spec">
<div class="eyebrow">Cor</div>
<h3>Escuro com propósito</h3>
<p class="lead">
A tela ativa usa fundo escuro para reduzir distração no treino. O
vermelho não é decoração; é ação, intensidade e risco.
</p>
<div class="color-strip">
<div class="color" style="background: #070605">base</div>
<div class="color" style="background: #1d170f">surface</div>
<div class="color" style="background: #e23b2e">accent</div>
</div>
</div>
<div class="spec">
<div class="eyebrow">Tipografia</div>
<h3>Número primeiro</h3>
<div class="bpm" style="font-size: 72px">154</div>
<p class="lead">
Display condensado/forte para BPM. Labels pequenos, uppercase e
espaçados. Texto longo só no pós-treino.
</p>
</div>
<div class="spec">
<div class="eyebrow">Forma</div>
<h3>Material físico</h3>
<div class="radii">
<i class="ra"></i><i class="rb"></i><i class="rc"></i>
</div>
<p class="lead">
Painéis grandes com raio generoso; campos técnicos com raio médio;
badges redondos para estados.
</p>
</div>
</div>
</section>
<section id="components" class="section">
<h2>Componentes</h2>
<div class="component-grid">
<div class="component">
<div class="eyebrow">Primary button</div>
<button class="btn">Iniciar <span class="dot">↗</span></button
><button class="btn secondary" style="margin-top: 10px">
Secundário
</button>
</div>
<div class="component">
<div class="eyebrow">Stop button</div>
<button class="btn stop">Parar treino</button>
<p class="lead" style="font-size: 13px">
Contraste claro para ação crítica.
</p>
</div>
<div class="component">
<div class="eyebrow">Metric tile</div>
<div class="tile"><b>183</b><span>pico bpm</span></div>
</div>
<div class="component">
<div class="eyebrow">Sensor row</div>
<div class="field">2A37 · notify</div>
<div class="field">2A19 · read</div>
</div>
<div class="component">
<div class="eyebrow">Insight</div>
<div class="tile">
<b>Carga alta</b><span>reduza intensidade amanhã</span>
</div>
</div>
<div class="component">
<div class="eyebrow">Tag states</div>
<div class="tag-row">
<span class="tag">ok</span><span class="tag">z4</span
><span class="tag">rec</span>
</div>
</div>
</div>
</section>
<section class="section">
<h2>Motion e uso no React Native</h2>
<div class="motion">
<div class="motion-card">
<b>Captura</b>
<p class="lead">
Animação mínima: pulso discreto no status ativo e transições de
número. Nada de blur pesado.
</p>
</div>
<div class="motion-card">
<b>Histórico</b>
<p class="lead">
Entrada em lista com fade/translate curto. A densidade vem da
hierarquia, não de cards infinitos.
</p>
</div>
<div class="motion-card">
<b>Sensor</b>
<p class="lead">
Logs e características com expansão progressiva. Dados técnicos
precisam de ordem e monospace pontual.
</p>
</div>
</div>
</section>
</main>
</body>
</html>
@@ -0,0 +1,726 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate v2 — Athlete OS</title>
<style>
:root {
--bg: #f4f7f2;
--paper: #fefffc;
--ink: #102019;
--muted: #65766d;
--line: #d6e1d9;
--surface: #eaf3ed;
--green: #12875d;
--lime: #c9ef55;
--blue: #1769ff;
--red: #d84c3e;
--amber: #d98a15;
--r1: 10px;
--r2: 16px;
--r3: 24px;
--r4: 34px;
--shadow: 0 30px 90px rgba(16, 32, 25, 0.1);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family:
ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
sans-serif;
line-height: 1.45;
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(16, 32, 25, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(16, 32, 25, 0.04) 1px, transparent 1px),
radial-gradient(
circle at 82% 0%,
rgba(201, 239, 85, 0.34),
transparent 30%
);
background-size:
32px 32px,
32px 32px,
auto;
}
.wrap {
width: min(1260px, calc(100% - 28px));
margin: auto;
padding: 30px 0 90px;
position: relative;
}
.nav {
position: sticky;
top: 14px;
z-index: 4;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid var(--line);
border-radius: 22px;
background: rgba(254, 255, 252, 0.78);
backdrop-filter: blur(16px);
padding: 12px 16px;
}
.brand {
font-weight: 950;
letter-spacing: -0.045em;
}
.nav a {
color: var(--muted);
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.17em;
margin-left: 16px;
}
.hero {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 18px;
margin-top: 28px;
}
.panel {
border: 1px solid var(--line);
border-radius: 38px;
background: rgba(254, 255, 252, 0.86);
box-shadow: var(--shadow);
padding: 34px;
}
.eyebrow {
font-size: 11px;
letter-spacing: 0.23em;
text-transform: uppercase;
color: var(--green);
font-weight: 950;
}
.title {
font-size: clamp(56px, 9vw, 118px);
line-height: 0.8;
letter-spacing: -0.09em;
font-weight: 1000;
margin: 18px 0 20px;
}
.lead {
font-size: 18px;
color: var(--muted);
max-width: 800px;
}
.actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 26px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 18px;
background: var(--green);
color: white;
padding: 14px 18px;
font-weight: 950;
box-shadow: 0 16px 38px rgba(18, 135, 93, 0.22);
}
.btn.secondary {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
box-shadow: none;
}
.token-strip {
display: grid;
grid-template-columns: 6fr 3fr 1fr;
gap: 8px;
margin-top: 20px;
}
.token {
min-height: 116px;
border-radius: 20px;
padding: 16px;
display: flex;
align-items: end;
font-weight: 950;
}
.section {
margin-top: 30px;
}
.section h2 {
font-size: 48px;
line-height: 0.9;
letter-spacing: -0.065em;
margin: 0 0 12px;
}
.phone-wall {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.device {
height: 640px;
border-radius: 46px;
background: #111;
padding: 10px;
box-shadow: 0 24px 70px rgba(16, 32, 25, 0.18);
}
.screen {
height: 100%;
border-radius: 36px;
background: var(--paper);
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
overflow: hidden;
}
.topline {
display: flex;
justify-content: space-between;
color: var(--muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 950;
}
.metric-main {
font-size: 80px;
line-height: 0.84;
letter-spacing: -0.095em;
font-weight: 1000;
}
.unit {
font-size: 18px;
color: var(--muted);
letter-spacing: 0;
}
.chart {
height: 140px;
border-radius: 24px;
background: linear-gradient(180deg, #f8fff9, #edf7f0);
border: 1px solid var(--line);
overflow: hidden;
position: relative;
}
.chart:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(transparent 27px, rgba(16, 32, 25, 0.045) 28px),
linear-gradient(90deg, transparent 27px, rgba(16, 32, 25, 0.045) 28px);
background-size: 28px 28px;
}
.chart svg {
position: relative;
width: 100%;
height: 100%;
}
.chart path {
fill: none;
stroke: var(--green);
stroke-width: 4;
stroke-linecap: round;
}
.tile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.tile {
background: #f7fbf8;
border: 1px solid var(--line);
border-radius: 18px;
padding: 12px;
}
.tile b {
display: block;
font-size: 24px;
letter-spacing: -0.045em;
}
.tile span {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
font-weight: 950;
}
.zones {
display: grid;
grid-template-columns: 1fr 1.2fr 1.7fr 1.2fr 0.7fr;
height: 14px;
border-radius: 999px;
overflow: hidden;
}
.zones i:nth-child(1) {
background: #92d7ff;
}
.zones i:nth-child(2) {
background: #aee8c5;
}
.zones i:nth-child(3) {
background: #c9ef55;
}
.zones i:nth-child(4) {
background: #e7a83f;
}
.zones i:nth-child(5) {
background: #d84c3e;
}
.dock {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dock .btn {
padding: 14px 8px;
}
.table {
display: grid;
gap: 0;
border-top: 1px solid var(--line);
}
.row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.row span {
color: var(--muted);
}
.badge {
display: inline-flex;
width: max-content;
border-radius: 999px;
background: #e6f5ec;
color: #08734c;
padding: 7px 10px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 950;
}
.sensor {
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 13px;
}
.system-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 18px;
}
.spec {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 28px;
padding: 22px;
}
.spec h3 {
font-size: 26px;
letter-spacing: -0.045em;
margin: 8px 0;
}
.type-demo {
font-size: 72px;
line-height: 0.86;
letter-spacing: -0.09em;
font-weight: 1000;
}
.radii {
display: flex;
gap: 10px;
align-items: end;
}
.radii i {
display: block;
background: var(--surface);
border: 1px solid var(--line);
}
.ra {
width: 54px;
height: 54px;
border-radius: 10px;
}
.rb {
width: 72px;
height: 72px;
border-radius: 18px;
}
.rc {
width: 96px;
height: 96px;
border-radius: 30px;
}
.component-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.component {
min-height: 160px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
}
.field {
background: #f7fbf8;
border: 1px solid var(--line);
border-radius: 16px;
padding: 12px;
color: var(--muted);
margin-top: 10px;
}
.principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.principle {
background: var(--paper);
border: 1px solid var(--line);
border-left: 6px solid var(--green);
border-radius: 0 24px 24px 0;
padding: 20px;
}
.principle b {
font-size: 22px;
}
@media (max-width: 1180px) {
.phone-wall {
grid-template-columns: repeat(2, 1fr);
}
.component-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.hero,
.system-grid,
.principles {
grid-template-columns: 1fr;
}
.device {
height: 680px;
}
}
@media (max-width: 620px) {
.nav {
position: relative;
top: 0;
}
.nav div:last-child {
display: none;
}
.panel {
padding: 22px;
}
.title {
font-size: 64px;
}
.phone-wall,
.component-grid {
grid-template-columns: 1fr;
}
.device {
height: 700px;
}
}
</style>
</head>
<body>
<main class="wrap">
<nav class="nav">
<div class="brand">FightRate / Athlete OS</div>
<div>
<a href="00-v2-index.html">v2 index</a><a href="#screens">telas</a
><a href="#system">sistema</a><a href="#components">componentes</a>
</div>
</nav>
<section class="hero">
<div class="panel">
<div class="eyebrow">Direção 02 / sistema do atleta</div>
<div class="title">ciência de treino sem cara de hospital.</div>
<p class="lead">
A direção mais forte para o app inteiro. O atleta confia porque tudo
tem origem, contexto e explicação. É limpo, mas não vazio.
</p>
<div class="actions">
<button class="btn">Capturar treino</button
><button class="btn secondary">Abrir histórico</button>
</div>
</div>
<div class="panel">
<div class="eyebrow">Tokens de marca</div>
<div class="token-strip">
<div class="token" style="background: #fefffc">
60% paper clínico quente
</div>
<div class="token" style="background: #eaf3ed">
30% superfície lab
</div>
<div class="token" style="background: #12875d; color: white">
10% ação
</div>
</div>
<p class="lead">
Verde é estabilidade e ação primária. Azul só para técnica. Vermelho
só para alerta real.
</p>
</div>
</section>
<section id="screens" class="section">
<h2>Telas principais</h2>
<div class="phone-wall">
<div class="device">
<div class="screen">
<div class="topline">
<span>pronto</span><span>sensor ok</span>
</div>
<div class="metric-main">--<span class="unit">bpm</span></div>
<p class="lead">
A janela inteira do treino será registrada. Uma ação, nenhum
controle durante a luta.
</p>
<div class="tile-grid">
<div class="tile"><b>84%</b><span>bateria</span></div>
<div class="tile"><b>-58</b><span>rssi</span></div>
<div class="tile"><b>0</b><span>amostras</span></div>
</div>
<div class="dock">
<button class="btn">Iniciar</button
><button class="btn secondary">Check-in</button>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>captura ativa</span><span>42:18</span>
</div>
<div class="metric-main">154<span class="unit">bpm</span></div>
<div class="chart">
<svg viewBox="0 0 280 140">
<path
d="M8 100 C42 94,54 62,82 66 S122 98,154 74 S204 38,232 54 S254 78,274 56"
/>
</svg>
</div>
<div class="zones"><i></i><i></i><i></i><i></i><i></i></div>
<div class="tile-grid">
<div class="tile"><b>146</b><span>média</span></div>
<div class="tile"><b>183</b><span>pico</span></div>
<div class="tile"><b>41%</b><span>Z4/Z5</span></div>
</div>
<div class="dock">
<button class="btn secondary">Evento</button
><button class="btn" style="background: var(--red)">
Parar
</button>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>relatório</span><span>alta confiança</span>
</div>
<div class="metric-main">96<span class="unit">trimp</span></div>
<div class="table">
<div class="row"><span>Tempo em carga</span><b>28m</b></div>
<div class="row">
<span>Pico sustentado</span><b>181 bpm</b>
</div>
<div class="row">
<span>Recuperação sugerida</span><b>18h</b>
</div>
<div class="row"><span>Amostras válidas</span><b>2.844</b></div>
</div>
<span class="badge">carga alta controlada</span>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>histórico</span><span>4 semanas</span>
</div>
<div class="tile-grid">
<div class="tile"><b>11</b><span>treinos</span></div>
<div class="tile"><b>7h</b><span>tempo</span></div>
<div class="tile"><b>+8%</b><span>carga</span></div>
</div>
<div class="table">
<div class="row"><span>Sparring · hoje</span><b>96</b></div>
<div class="row"><span>Muay Thai · seg</span><b>110</b></div>
<div class="row"><span>Boxe · sex</span><b>77</b></div>
<div class="row"><span>Drill · qua</span><b>54</b></div>
</div>
<div class="chart">
<svg viewBox="0 0 280 140">
<path
d="M12 110 L46 94 L82 104 L118 62 L154 78 L194 44 L232 60 L270 48"
/>
</svg>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>sensor lab</span><span>gatt</span>
</div>
<div class="metric-main sensor">2A37</div>
<div class="table sensor">
<div class="row">
<span>Heart Rate Service</span><b>180D</b>
</div>
<div class="row"><span>Measurement</span><b>notify</b></div>
<div class="row"><span>Battery</span><b>read</b></div>
<div class="row"><span>Body Sensor</span><b>read</b></div>
<div class="row"><span>RSSI</span><b>-61</b></div>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>insights</span><span>explicável</span>
</div>
<div class="metric-main">18h<span class="unit">rec</span></div>
<p class="lead">
Você acumulou carga alta com sinal estável. Próximo treino:
técnica ou recuperação ativa.
</p>
<div class="tile">
<b>Por que importa?</b
><span
>Evita somar fadiga quando o corpo já respondeu com alta
intensidade.</span
>
</div>
<div class="tile">
<b>Base</b><span>Comparação com 4 semanas e 11 sessões.</span>
</div>
</div>
</div>
</div>
</section>
<section id="system" class="section">
<h2>Design book visual</h2>
<div class="system-grid">
<div class="spec">
<div class="eyebrow">Cor</div>
<h3>Confiança antes de impacto</h3>
<p class="lead">
O app base é claro. A captura pode escurecer se adotarmos o
híbrido com Corner Instrument.
</p>
<div class="token-strip">
<div class="token" style="background: #fefffc">paper</div>
<div class="token" style="background: #eaf3ed">surface</div>
<div class="token" style="background: #12875d; color: white">
action
</div>
</div>
</div>
<div class="spec">
<div class="eyebrow">Tipo</div>
<h3>Hierarquia clínica</h3>
<div class="type-demo">96</div>
<p class="lead">
Números grandes. Labels pequenos. Texto explicativo apenas onde
ajuda decisão.
</p>
</div>
<div class="spec">
<div class="eyebrow">Forma</div>
<h3>Raios médios</h3>
<div class="radii">
<i class="ra"></i><i class="rb"></i><i class="rc"></i>
</div>
<p class="lead">
Menos agressivo; mais confiável. Bordas sempre suaves e
funcionais.
</p>
</div>
</div>
</section>
<section id="components" class="section">
<h2>Componentes</h2>
<div class="component-grid">
<div class="component">
<div class="eyebrow">Button</div>
<button class="btn">Primário</button
><button class="btn secondary" style="margin-top: 10px">
Secundário
</button>
</div>
<div class="component">
<div class="eyebrow">Metric</div>
<div class="tile"><b>146</b><span>bpm médio</span></div>
</div>
<div class="component">
<div class="eyebrow">Zone bar</div>
<div class="zones" style="margin-top: 12px">
<i></i><i></i><i></i><i></i><i></i>
</div>
</div>
<div class="component">
<div class="eyebrow">Form</div>
<div class="field">Tipo de treino</div>
<div class="field">RPE 0-10</div>
</div>
<div class="component">
<div class="eyebrow">Sensor</div>
<div class="row sensor"><span>2A37</span><b>notify</b></div>
<div class="row sensor"><span>2A19</span><b>read</b></div>
</div>
<div class="component">
<div class="eyebrow">Insight</div>
<div class="tile">
<b>Carga alta</b><span>recomendação clara + base dos dados</span>
</div>
</div>
</div>
</section>
<section class="section">
<h2>Princípios</h2>
<div class="principles">
<div class="principle">
<b>Todo dado tem origem</b>
<p class="lead">
Amostras, sessão, comparação e confiança aparecem quando importam.
</p>
</div>
<div class="principle">
<b>Captura sem distração</b>
<p class="lead">O usuário não opera round no meio da luta.</p>
</div>
<div class="principle">
<b>Histórico denso</b>
<p class="lead">
Pós-treino aceita mais informação, desde que organizada.
</p>
</div>
</div>
</section>
</main>
</body>
</html>
@@ -0,0 +1,736 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate v2 — Combat Editorial</title>
<style>
:root {
--bg: #efe5d5;
--paper: #fff7e8;
--ink: #15110c;
--muted: #746a5d;
--line: #d8c6aa;
--black: #080705;
--red: #c93a2e;
--gold: #bd7a17;
--olive: #66724e;
--r1: 6px;
--r2: 14px;
--r3: 24px;
--r4: 34px;
--shadow: 0 32px 90px rgba(21, 17, 12, 0.12);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: Georgia, "Times New Roman", serif;
line-height: 1.42;
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 8% 0%,
rgba(201, 58, 46, 0.13),
transparent 34%
),
linear-gradient(rgba(21, 17, 12, 0.04) 1px, transparent 1px);
background-size:
auto,
100% 38px;
}
.wrap {
width: min(1260px, calc(100% - 28px));
margin: auto;
padding: 30px 0 90px;
position: relative;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--line);
padding: 18px 0;
position: sticky;
top: 0;
background: rgba(239, 229, 213, 0.86);
backdrop-filter: blur(14px);
z-index: 3;
}
.brand {
font-family: ui-sans-serif, system-ui, sans-serif;
font-weight: 950;
letter-spacing: -0.045em;
}
.nav a {
font-family: ui-sans-serif, system-ui, sans-serif;
color: var(--muted);
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.17em;
margin-left: 16px;
}
.hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 18px;
margin-top: 30px;
}
.editorial {
background: rgba(255, 247, 232, 0.74);
border: 1px solid var(--line);
border-radius: 34px;
padding: 34px;
box-shadow: var(--shadow);
}
.eyebrow {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--red);
font-weight: 950;
}
.title {
font-size: clamp(58px, 10vw, 130px);
line-height: 0.78;
letter-spacing: -0.085em;
margin: 18px 0 20px;
}
.lead {
font-family: ui-sans-serif, system-ui, sans-serif;
color: var(--muted);
font-size: 18px;
max-width: 790px;
}
.actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 26px;
}
.btn {
border: 1px solid var(--black);
border-radius: 999px;
background: var(--black);
color: var(--paper);
padding: 14px 18px;
font-family: ui-sans-serif, system-ui, sans-serif;
font-weight: 950;
}
.btn.secondary {
background: transparent;
color: var(--ink);
}
.token-strip {
display: grid;
grid-template-columns: 6fr 3fr 1fr;
gap: 8px;
margin-top: 20px;
}
.token {
min-height: 116px;
border-radius: 20px;
padding: 16px;
display: flex;
align-items: end;
font-family: ui-sans-serif, system-ui, sans-serif;
font-weight: 950;
}
.section {
margin-top: 32px;
}
.section h2 {
font-size: 48px;
line-height: 0.9;
letter-spacing: -0.065em;
margin: 0 0 12px;
}
.phone-wall {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.device {
height: 640px;
border-radius: 44px;
background: #111;
padding: 10px;
box-shadow: 0 30px 90px rgba(21, 17, 12, 0.22);
}
.screen {
height: 100%;
border-radius: 34px;
background: var(--paper);
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
overflow: hidden;
}
.topline {
font-family: ui-sans-serif, system-ui, sans-serif;
display: flex;
justify-content: space-between;
color: var(--muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 950;
}
.display {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 80px;
line-height: 0.84;
letter-spacing: -0.1em;
font-weight: 1000;
}
.unit {
font-size: 18px;
letter-spacing: 0;
color: var(--muted);
}
.rule {
height: 1px;
background: var(--ink);
opacity: 0.22;
}
.chart {
height: 140px;
border-bottom: 2px solid var(--ink);
position: relative;
}
.chart:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 28px;
height: 1px;
background: var(--line);
box-shadow:
0 28px 0 var(--line),
0 56px 0 var(--line);
}
.chart svg {
position: relative;
width: 100%;
height: 100%;
}
.chart path {
fill: none;
stroke: var(--ink);
stroke-width: 3.5;
stroke-linecap: round;
}
.metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.metric {
border-top: 1px solid var(--line);
padding-top: 10px;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.metric b {
font-size: 24px;
}
.metric span {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
font-weight: 950;
}
.dock {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dock .btn {
padding: 14px 8px;
}
.list {
display: grid;
border-top: 1px solid var(--line);
}
.item {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
border-bottom: 1px solid var(--line);
padding: 14px 0;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.item small {
display: block;
color: var(--muted);
font-size: 12px;
}
.note {
background: #f1e4cf;
border: 1px solid var(--line);
border-radius: 22px;
padding: 14px;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.pill {
display: inline-flex;
width: max-content;
border-radius: 999px;
border: 1px solid var(--line);
padding: 7px 10px;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 950;
}
.system-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 18px;
}
.spec {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 28px;
padding: 22px;
}
.spec h3 {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 26px;
letter-spacing: -0.045em;
margin: 8px 0;
}
.type-demo {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 72px;
line-height: 0.86;
letter-spacing: -0.09em;
font-weight: 1000;
}
.radii {
display: flex;
gap: 10px;
align-items: end;
}
.radii i {
display: block;
background: #eadcc5;
border: 1px solid var(--line);
}
.ra {
width: 54px;
height: 54px;
border-radius: 6px;
}
.rb {
width: 72px;
height: 72px;
border-radius: 16px;
}
.rc {
width: 96px;
height: 96px;
border-radius: 30px;
}
.component-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.component {
min-height: 160px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 24px;
padding: 14px;
}
.field {
border: 1px solid var(--line);
border-radius: 16px;
padding: 12px;
background: #fbf0dc;
color: var(--muted);
font-family: ui-sans-serif, system-ui, sans-serif;
margin-top: 10px;
}
.principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.principle {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 28px;
padding: 20px;
}
.principle b {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 22px;
}
.share-card {
border-radius: 28px;
background: var(--black);
color: var(--paper);
padding: 18px;
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.share-card .display {
font-size: 58px;
}
.share-card .lead {
color: #bea98c;
font-size: 14px;
}
@media (max-width: 1180px) {
.phone-wall {
grid-template-columns: repeat(2, 1fr);
}
.component-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.hero,
.system-grid,
.principles {
grid-template-columns: 1fr;
}
.device {
height: 680px;
}
}
@media (max-width: 620px) {
.nav {
position: relative;
}
.nav div:last-child {
display: none;
}
.editorial {
padding: 22px;
}
.title {
font-size: 64px;
}
.phone-wall,
.component-grid {
grid-template-columns: 1fr;
}
.device {
height: 700px;
}
}
</style>
</head>
<body>
<main class="wrap">
<nav class="nav">
<div class="brand">FightRate / Combat Editorial</div>
<div>
<a href="00-v2-index.html">v2 index</a><a href="#screens">telas</a
><a href="#system">sistema</a><a href="#components">componentes</a>
</div>
</nav>
<section class="hero">
<div class="editorial">
<div class="eyebrow">Direção 03 / marca premium</div>
<div class="title">
relatório de treino como editorial de performance.
</div>
<p class="lead">
Essa direção deixa o FightRate com cara de marca madura: menos neon,
menos dashboard, mais publicação premium de dados pessoais. Ideal
para histórico, relatório e compartilhamento.
</p>
<div class="actions">
<button class="btn">Ver semana</button
><button class="btn secondary">Abrir captura</button>
</div>
</div>
<div class="editorial">
<div class="eyebrow">Tokens de marca</div>
<div class="token-strip">
<div class="token" style="background: #fff7e8">
60% papel quente
</div>
<div class="token" style="background: #e8d8bd">
30% areia editorial
</div>
<div class="token" style="background: #15110c; color: #fff7e8">
10% tinta
</div>
</div>
<p class="lead">
Vermelho é assinatura e alerta. Dourado é conquista. A interface não
precisa gritar para parecer forte.
</p>
</div>
</section>
<section id="screens" class="section">
<h2>Telas principais</h2>
<div class="phone-wall">
<div class="device">
<div class="screen">
<div class="topline">
<span>captura pronta</span><span>h003</span>
</div>
<div class="display">--<span class="unit">bpm</span></div>
<div class="rule"></div>
<p class="lead">
Comece antes do treino. O app some; o dado fica.
</p>
<div class="metrics">
<div class="metric"><b>84%</b><span>bateria</span></div>
<div class="metric"><b>-58</b><span>rssi</span></div>
<div class="metric"><b>0</b><span>drops</span></div>
</div>
<div class="dock">
<button class="btn">Iniciar</button
><button class="btn secondary">Check-in</button>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline"><span>ao vivo</span><span>42:18</span></div>
<div class="display">154<span class="unit">bpm</span></div>
<div class="chart">
<svg viewBox="0 0 280 140">
<path
d="M8 98 C42 88,52 62,82 68 S122 98,154 74 S204 44,232 58 S254 76,274 54"
/>
</svg>
</div>
<div class="metrics">
<div class="metric"><b>146</b><span>média</span></div>
<div class="metric"><b>183</b><span>pico</span></div>
<div class="metric"><b>41%</b><span>z4/z5</span></div>
</div>
<div class="dock">
<button class="btn secondary">Evento</button
><button
class="btn"
style="background: var(--red); border-color: var(--red)"
>
Parar
</button>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>relatório</span><span>salvo</span>
</div>
<div class="display">47<span class="unit">min</span></div>
<div class="list">
<div class="item">
<div>Tempo em carga<small>Z4/Z5</small></div>
<b>28m</b>
</div>
<div class="item">
<div>Pico sustentado<small>melhor bloco</small></div>
<b>181</b>
</div>
<div class="item">
<div>Recuperação<small>estimativa</small></div>
<b>18h</b>
</div>
</div>
<div class="note">
Carga alta, mas sinal limpo. Bom treino para avaliar pressão
sustentada.
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>histórico</span><span>junho</span>
</div>
<div class="display">+8<span class="unit">%</span></div>
<div class="metrics">
<div class="metric"><b>11</b><span>treinos</span></div>
<div class="metric"><b>7h</b><span>tempo</span></div>
<div class="metric"><b>3</b><span>picos</span></div>
</div>
<div class="list">
<div class="item">
<div>Sparring<small>hoje · 47 min</small></div>
<b>96</b>
</div>
<div class="item">
<div>Muay Thai<small>seg · 61 min</small></div>
<b>110</b>
</div>
<div class="item">
<div>Boxe<small>sex · 42 min</small></div>
<b>77</b>
</div>
</div>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline"><span>sensor</span><span>ble</span></div>
<div class="display">-61<span class="unit">rssi</span></div>
<div class="list">
<div class="item">
<div>Heart Rate<small>2A37</small></div>
<b>notify</b>
</div>
<div class="item">
<div>Battery<small>2A19</small></div>
<b>read</b>
</div>
<div class="item">
<div>Body Sensor<small>2A38</small></div>
<b>read</b>
</div>
</div>
<span class="pill">perfil estável</span>
</div>
</div>
<div class="device">
<div class="screen">
<div class="topline">
<span>share</span><span>fight report</span>
</div>
<div class="share-card">
<div>
<div class="display">181</div>
<p class="lead">
pico do treino · 47 min · carga alta controlada
</p>
</div>
<span class="pill">FightRate Report</span>
</div>
<p class="lead">
Essa direção funciona muito bem para cards compartilháveis e
marca.
</p>
</div>
</div>
</div>
</section>
<section id="system" class="section">
<h2>Design book visual</h2>
<div class="system-grid">
<div class="spec">
<div class="eyebrow">Cor</div>
<h3>Papel, tinta, assinatura</h3>
<p class="lead">
Mais editorial que aplicativo fitness. Reduz ruído e aumenta valor
percebido.
</p>
<div class="token-strip">
<div class="token" style="background: #fff7e8">paper</div>
<div class="token" style="background: #e8d8bd">sand</div>
<div class="token" style="background: #15110c; color: #fff7e8">
ink
</div>
</div>
</div>
<div class="spec">
<div class="eyebrow">Tipo</div>
<h3>Display contido</h3>
<div class="type-demo">+8</div>
<p class="lead">
Serif para títulos da marca; sans pesada para números. Contraste
sem carnaval.
</p>
</div>
<div class="spec">
<div class="eyebrow">Forma</div>
<h3>Premium sem espuma</h3>
<div class="radii">
<i class="ra"></i><i class="rb"></i><i class="rc"></i>
</div>
<p class="lead">
Raios limpos. Linhas finas. Poucas sombras. Muita intenção.
</p>
</div>
</div>
</section>
<section id="components" class="section">
<h2>Componentes</h2>
<div class="component-grid">
<div class="component">
<div class="eyebrow">Button</div>
<button class="btn">Primário</button
><button class="btn secondary" style="margin-top: 10px">
Secundário
</button>
</div>
<div class="component">
<div class="eyebrow">Metric</div>
<div class="metric"><b>183</b><span>pico</span></div>
</div>
<div class="component">
<div class="eyebrow">Field</div>
<div class="field">Nome do treino</div>
<div class="field">Observação</div>
</div>
<div class="component">
<div class="eyebrow">List row</div>
<div class="item">
<div>Sessão<small>47 min</small></div>
<b>96</b>
</div>
</div>
<div class="component">
<div class="eyebrow">Insight</div>
<div class="note">Uma conclusão. Uma explicação. Uma ação.</div>
</div>
<div class="component">
<div class="eyebrow">Share card</div>
<div class="share-card" style="min-height: 130px">
<div class="display" style="font-size: 42px">181</div>
<span class="pill">pico</span>
</div>
</div>
</div>
</section>
<section class="section">
<h2>Princípios</h2>
<div class="principles">
<div class="principle">
<b>Pouco, mas pesado</b>
<p class="lead">Cada elemento precisa merecer espaço.</p>
</div>
<div class="principle">
<b>Marca antes de interface</b>
<p class="lead">
Ideal para transformar FightRate em produto reconhecível.
</p>
</div>
<div class="principle">
<b>Captura simples</b>
<p class="lead">
Pode usar Corner Instrument na captura para mais energia.
</p>
</div>
</div>
</section>
</main>
</body>
</html>
@@ -0,0 +1,38 @@
# FightRate React Native Redesign — v2
Status: **direção escolhida**
A direção oficial para seguir é:
```text
01 — Corner Instrument
```
Arquivo visual de referência:
```text
01-corner-instrument-v2.html
```
Design system canônico:
```text
../../../../FIGHTRATE_DESIGN_SYSTEM.md
```
## Decisão
Vamos seguir com o FightRate como **equipamento de córner / instrumento de captura**.
A experiência deve ser escura, forte, legível e direta. O app não deve parecer dashboard genérico, SaaS, app fitness comum ou coleção de cards.
## Direções não escolhidas
- `02-athlete-os-v2.html` fica apenas como referência de clareza de dados.
- `03-combat-editorial-v2.html` fica apenas como referência futura para relatórios compartilháveis.
Nenhuma dessas duas é base visual principal neste momento.
## Próxima fase
Antes de codar React Native, usar `FIGHTRATE_DESIGN_SYSTEM.md` como contrato visual e transformar os tokens em tema Expo/React Native.