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,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.