Files
transcript/design/transcript-design-exploration.html
T
evandrodevbr 06aaeeaf79 wip: snapshot das alterações não commitadas (2026-10-20)
Origem: D:/Documents/Github/transcript
Arquivos omitidos (segredos, bancos de dados, logs, >50 MB): 2
2026-10-20 00:50:17 -03:00

2429 lines
75 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Transcript — Exploração de Design</title>
<style>
:root {
color-scheme: dark;
--page-bg: #07070a;
--ink: #f7f3ee;
--muted: rgba(247, 243, 238, 0.62);
--faint: rgba(247, 243, 238, 0.34);
--hair: rgba(255, 255, 255, 0.1);
--hair-strong: rgba(255, 255, 255, 0.18);
--brand: #d3a784;
--brand-strong: #e9be95;
--green: #7fc99c;
--red: #e58a82;
--ease: cubic-bezier(0.32, 0.72, 0, 1);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
background: var(--page-bg);
color: var(--ink);
}
body {
font-family:
"Geist",
"Plus Jakarta Sans",
"Inter var",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
background:
radial-gradient(
circle at 18% 0%,
rgba(211, 167, 132, 0.17),
transparent 34rem
),
radial-gradient(
circle at 92% 16%,
rgba(127, 201, 156, 0.1),
transparent 28rem
),
linear-gradient(180deg, #0d0c10 0%, #050506 100%);
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.055;
z-index: 30;
background-image:
linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: radial-gradient(circle at 50% 20%, black, transparent 72%);
}
button,
input,
textarea {
font: inherit;
color: inherit;
}
button {
border: 0;
background: transparent;
cursor: pointer;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.page-shell {
width: min(1400px, calc(100vw - 40px));
margin: 0 auto;
padding: 34px 0 56px;
}
.hero {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 28px;
align-items: end;
margin-bottom: 24px;
}
.hero-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
width: max-content;
padding: 6px 10px;
border: 1px solid rgba(233, 190, 149, 0.24);
border-radius: 999px;
background: rgba(233, 190, 149, 0.08);
color: var(--brand-strong);
font-size: 11px;
font-weight: 720;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.hero h1 {
max-width: 860px;
margin: 14px 0 10px;
font-size: clamp(36px, 5vw, 76px);
line-height: 0.89;
letter-spacing: -0.075em;
font-weight: 760;
}
.hero p {
margin: 0;
max-width: 680px;
color: var(--muted);
font-size: 15px;
line-height: 1.65;
}
.hero-note {
justify-self: end;
max-width: 420px;
padding: 16px 18px;
border-radius: 24px;
border: 1px solid var(--hair);
background: rgba(255, 255, 255, 0.045);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 24px 80px rgba(0, 0, 0, 0.22);
color: rgba(247, 243, 238, 0.74);
font-size: 13px;
line-height: 1.55;
}
.toolbar {
position: sticky;
top: 12px;
z-index: 20;
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
margin: 26px 0 24px;
padding: 10px;
border: 1px solid var(--hair);
border-radius: 28px;
background: rgba(10, 10, 12, 0.74);
backdrop-filter: blur(24px) saturate(170%);
box-shadow:
0 18px 70px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.tabs {
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tab {
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
color: rgba(247, 243, 238, 0.62);
white-space: nowrap;
transition:
transform 160ms var(--ease),
background 180ms var(--ease),
color 180ms var(--ease);
}
.tab:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--ink);
}
.tab[aria-selected="true"] {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.13),
rgba(255, 255, 255, 0.055)
);
color: var(--ink);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.state-controls {
display: flex;
gap: 6px;
padding: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.state-button {
min-height: 30px;
padding: 0 10px;
border-radius: 999px;
color: var(--muted);
font-size: 12px;
}
.state-button.is-active {
background: rgba(211, 167, 132, 0.18);
color: var(--brand-strong);
}
.stage {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 26px;
align-items: start;
}
.variant-copy {
min-height: 460px;
padding: 26px;
border-radius: 34px;
border: 1px solid var(--hair);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.065),
rgba(255, 255, 255, 0.028)
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 32px 100px rgba(0, 0, 0, 0.28);
}
.variant-copy h2 {
margin: 0 0 10px;
font-size: clamp(30px, 4vw, 54px);
line-height: 0.94;
letter-spacing: -0.055em;
font-weight: 760;
}
.variant-copy .intent {
margin: 0 0 22px;
max-width: 760px;
color: var(--muted);
font-size: 15px;
line-height: 1.7;
}
.principles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}
.principle {
padding: 14px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.075);
background: rgba(0, 0, 0, 0.18);
}
.principle strong {
display: block;
margin-bottom: 6px;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-strong);
}
.principle span {
color: rgba(247, 243, 238, 0.68);
font-size: 13px;
line-height: 1.45;
}
.mockup-rail {
display: grid;
place-items: center;
position: sticky;
top: 104px;
}
.window-frame {
width: 380px;
height: 460px;
position: relative;
overflow: hidden;
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.13);
background: #08080a;
box-shadow:
0 36px 110px rgba(0, 0, 0, 0.55),
0 0 0 10px rgba(255, 255, 255, 0.026);
isolation: isolate;
}
.mockup-label {
margin-top: 12px;
color: var(--faint);
font-size: 12px;
text-align: center;
}
.icon {
width: 15px;
height: 15px;
display: inline-block;
vertical-align: -3px;
stroke: currentColor;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-thin {
stroke-width: 1.35;
}
.mark {
display: block;
object-fit: contain;
}
/* ------------------------------------------------------------------
0. CLONE ATUAL — classes e valores copiados/adaptados do app atual.
------------------------------------------------------------------ */
.current-root {
--font-sans:
"Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", sans-serif;
--font-mono:
"JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo,
Consolas, monospace;
--color-bg-base: #0a0a0c;
--color-bg-elevated: rgba(28, 26, 32, 0.72);
--color-bg-elevated-strong: rgba(34, 31, 38, 0.86);
--color-bg-input: rgba(14, 13, 16, 0.7);
--color-border-soft: rgba(255, 255, 255, 0.08);
--color-border-strong: rgba(255, 255, 255, 0.16);
--color-fg-primary: #f5f3f0;
--color-fg-secondary: rgba(245, 243, 240, 0.72);
--color-fg-muted: rgba(245, 243, 240, 0.5);
--color-fg-subtle: rgba(245, 243, 240, 0.32);
--color-accent: #d3a784;
--color-accent-strong: #e9be95;
--color-accent-soft: rgba(211, 167, 132, 0.18);
--color-success: #7fc99c;
--color-success-soft: rgba(127, 201, 156, 0.18);
--color-danger: #e58a82;
--color-danger-soft: rgba(229, 138, 130, 0.18);
--shadow-elevated:
0 24px 80px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
--radius-pill: 999px;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: var(--font-sans);
font-size: 13px;
background:
radial-gradient(
circle at 12% 0%,
rgba(211, 167, 132, 0.14),
transparent 24rem
),
radial-gradient(
circle at 88% 100%,
rgba(127, 201, 156, 0.06),
transparent 28rem
),
linear-gradient(180deg, #0e0d10 0%, #07070a 100%);
}
.current-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: 7px 8px 6px;
min-height: 48px;
background: linear-gradient(
180deg,
rgba(34, 31, 38, 0.82) 0%,
rgba(12, 11, 15, 0.58) 100%
);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(28px) saturate(160%);
}
.current-drag {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1 1 auto;
min-width: 0;
padding-left: 6px;
}
.current-brand {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 4px 10px 4px 5px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.current-mark-shell {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(
circle at 36% 28%,
rgba(233, 190, 149, 0.22),
transparent 58%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0.025)
);
border: 1px solid rgba(233, 190, 149, 0.18);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
flex: 0 0 auto;
}
.current-mark {
width: 23px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.26));
}
.current-title {
margin: 0;
font-size: 0.9rem;
font-weight: 720;
letter-spacing: -0.025em;
color: var(--color-fg-primary);
white-space: nowrap;
}
.current-controls {
display: flex;
align-items: center;
gap: 2px;
}
.current-control {
width: 30px;
height: 30px;
border-radius: 8px;
color: var(--color-fg-secondary);
display: grid;
place-items: center;
transition:
background-color 120ms ease,
color 120ms ease,
transform 120ms ease;
}
.current-control:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--color-fg-primary);
}
.current-control.close:hover {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.current-main {
flex: 1 1 auto;
min-height: 0;
margin: 10px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
border-radius: 22px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.075);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.055),
0 18px 52px rgba(0, 0, 0, 0.18);
}
.current-status-row {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 22px;
}
.current-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
background: var(--color-success-soft);
color: var(--color-success);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
}
.current-status::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
}
.design-state-recording .current-status {
background: var(--color-danger-soft);
color: var(--color-danger);
animation: currentPulse 1.6s ease-in-out infinite;
}
.design-state-overlay .current-status,
.design-state-settings .current-status {
background: var(--color-accent-soft);
color: var(--color-accent-strong);
}
@keyframes currentPulse {
50% {
opacity: 0.55;
}
}
.current-content {
display: flex;
flex-direction: column;
gap: 10px;
padding: 8px;
border-radius: 18px;
background: rgba(5, 5, 7, 0.24);
border: 1px solid rgba(255, 255, 255, 0.045);
}
.current-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.current-record {
grid-column: span 2;
min-height: 48px;
padding: 0 var(--space-4);
border-radius: 14px;
font-weight: 720;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
background: linear-gradient(
180deg,
rgba(255, 223, 195, 0.98) 0%,
rgba(211, 167, 132, 0.98) 45%,
rgba(174, 118, 82, 0.98) 100%
);
color: #1a1108;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.38),
0 12px 30px rgba(211, 167, 132, 0.22),
0 2px 0 rgba(0, 0, 0, 0.24);
}
.design-state-recording .current-record {
background: linear-gradient(180deg, #e58a82 0%, #c46a64 100%);
color: #1a0606;
box-shadow:
0 0 0 2px rgba(229, 138, 130, 0.4),
0 6px 20px rgba(229, 138, 130, 0.32);
}
.current-hotkey {
margin-left: 8px;
padding-left: 10px;
border-left: 1px solid rgba(26, 17, 8, 0.25);
font-size: 0.72rem;
font-weight: 500;
color: rgba(26, 17, 8, 0.55);
font-family: var(--font-mono);
}
.current-secondary,
.current-ghost {
min-height: 34px;
padding: 0 10px;
border-radius: 12px;
font-weight: 650;
font-size: 0.74rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.current-secondary {
background: rgba(255, 255, 255, 0.07);
color: var(--color-fg-primary);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
.current-ghost {
background: rgba(255, 255, 255, 0.025);
color: var(--color-fg-secondary);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.current-message {
margin: 0;
min-height: 1.1rem;
color: var(--color-fg-muted);
font-size: 0.74rem;
line-height: 1.4;
}
.current-more {
display: flex;
gap: 6px;
flex-wrap: wrap;
opacity: 0;
max-height: 0;
overflow: hidden;
transition:
opacity 180ms ease,
max-height 220ms ease;
}
.design-state-text .current-more {
opacity: 1;
max-height: 80px;
}
.current-editor-wrap {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 0;
opacity: 0;
overflow: hidden;
transition:
max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 220ms ease;
}
.design-state-text .current-editor-wrap {
max-height: 240px;
opacity: 1;
}
.current-editor-label {
color: var(--color-fg-secondary);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.current-editor {
width: 100%;
height: 146px;
resize: none;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--color-border-soft);
background: var(--color-bg-input);
color: var(--color-fg-primary);
font-size: 0.85rem;
line-height: 1.5;
backdrop-filter: blur(8px);
}
.current-diagnostics {
margin-top: 4px;
border-top: 1px solid var(--color-border-soft);
padding-top: 8px;
}
.current-details {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--color-border-soft);
color: var(--color-fg-muted);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.current-overlay {
display: none;
}
.design-state-overlay .current-topbar,
.design-state-overlay .current-main,
.design-state-overlay .current-settings {
display: none;
}
.design-state-overlay .current-root {
background:
radial-gradient(
circle at 20% 0%,
rgba(211, 167, 132, 0.18),
transparent 16rem
),
linear-gradient(180deg, rgba(18, 16, 20, 0.92), rgba(8, 8, 10, 0.88));
}
.design-state-overlay .current-overlay {
display: grid;
grid-template-columns: 54px 1fr minmax(118px, auto);
align-items: center;
gap: 14px;
height: 100%;
padding: 13px 18px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 26px;
background:
radial-gradient(
circle at 16% 18%,
rgba(233, 190, 149, 0.14),
transparent 22rem
),
linear-gradient(180deg, rgba(18, 16, 20, 0.88), rgba(7, 7, 10, 0.92));
box-shadow:
0 22px 70px rgba(0, 0, 0, 0.52),
inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.current-orb {
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(
circle at 36% 25%,
rgba(255, 224, 199, 0.2),
transparent 58%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0.025)
);
border: 1px solid rgba(233, 190, 149, 0.18);
box-shadow:
0 0 0 8px rgba(211, 167, 132, 0.08),
0 14px 34px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
animation: dictationPulse 1150ms ease-in-out infinite;
}
.current-orb img {
width: 34px;
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
}
.current-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 48px;
min-width: 0;
}
.current-wave span {
width: 4px;
height: 12px;
border-radius: 999px;
background: linear-gradient(
180deg,
var(--color-accent-strong),
var(--color-accent)
);
opacity: 0.78;
transform-origin: center;
animation: waveformDance 840ms ease-in-out infinite;
animation-delay: calc(var(--i) * -54ms);
}
.current-dictation-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.current-dictation-text strong {
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
white-space: nowrap;
}
.current-dictation-text span {
max-width: 145px;
font-size: 0.72rem;
line-height: 1.25;
color: var(--color-fg-muted);
}
@keyframes waveformDance {
0%,
100% {
transform: scaleY(0.42);
opacity: 0.42;
}
50% {
transform: scaleY(2.35);
opacity: 1;
}
}
@keyframes dictationPulse {
50% {
box-shadow:
0 0 0 14px rgba(211, 167, 132, 0.04),
0 18px 42px rgba(211, 167, 132, 0.38);
}
}
.current-settings {
display: none;
}
.design-state-settings .current-settings {
position: absolute;
inset: 0;
z-index: 5;
display: grid;
place-items: center;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(18px);
}
.current-panel {
width: min(340px, 92%);
max-height: 86%;
display: flex;
flex-direction: column;
border-radius: 16px;
border: 1px solid var(--color-border-soft);
background: var(--color-bg-elevated-strong);
box-shadow: var(--shadow-elevated);
overflow: hidden;
}
.current-panel header,
.current-panel footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--color-border-soft);
}
.current-panel footer {
justify-content: flex-end;
gap: 6px;
border-top: 1px solid var(--color-border-soft);
border-bottom: 0;
}
.current-panel h2 {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
}
.current-panel-body {
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 10px;
overflow: auto;
}
.current-panel h3 {
margin: 0;
font-size: 0.7rem;
color: var(--color-fg-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.current-panel p {
margin: 0;
font-size: 0.74rem;
line-height: 1.5;
color: var(--color-fg-muted);
}
.current-input {
width: 100%;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--color-border-soft);
background: var(--color-bg-input);
color: var(--color-fg-primary);
font-size: 0.8rem;
}
/* Shared variant helpers */
.app-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.brand-lockup {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.brand-orb {
display: grid;
place-items: center;
border-radius: 50%;
flex: 0 0 auto;
}
.brand-orb img {
object-fit: contain;
}
.app-title {
margin: 0;
white-space: nowrap;
}
.top-actions {
display: flex;
gap: 4px;
}
.tiny-icon {
width: 30px;
height: 30px;
border-radius: 10px;
display: grid;
place-items: center;
}
.pill {
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 999px;
white-space: nowrap;
}
.pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 10px currentColor;
}
.primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 16px;
font-weight: 760;
}
.mini-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.muted-line {
color: rgba(247, 243, 238, 0.52);
font-size: 12px;
line-height: 1.45;
}
/* 1. Satin Refinement */
.satin {
padding: 10px;
background:
radial-gradient(
circle at 15% -10%,
rgba(233, 190, 149, 0.19),
transparent 170px
),
linear-gradient(180deg, #101014, #07070a);
font-family: "Geist", "Plus Jakarta Sans", sans-serif;
}
.satin .app-top {
height: 48px;
padding: 0 2px 8px;
}
.satin .brand-orb {
width: 34px;
height: 34px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.025)
);
border: 1px solid rgba(233, 190, 149, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.satin .brand-orb img {
width: 24px;
}
.satin .app-title {
font-size: 15px;
letter-spacing: -0.04em;
font-weight: 760;
}
.satin .tiny-icon {
color: rgba(247, 243, 238, 0.62);
background: rgba(255, 255, 255, 0.035);
}
.satin .panel {
height: 392px;
padding: 12px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.085);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
display: flex;
flex-direction: column;
gap: 12px;
}
.satin .pill {
width: max-content;
padding: 5px 11px;
background: rgba(127, 201, 156, 0.14);
color: #8fd8ad;
font-size: 12px;
font-weight: 700;
}
.satin .hero-card {
padding: 14px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.23);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.satin .hero-card strong {
display: block;
font-size: 20px;
line-height: 1.05;
letter-spacing: -0.05em;
margin-bottom: 7px;
}
.satin .primary {
min-height: 54px;
background: linear-gradient(180deg, #ffe1c8, #d3a784 55%, #ae7652);
color: #1a1108;
box-shadow:
0 16px 34px rgba(211, 167, 132, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.satin .mini {
min-height: 38px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.065);
border: 1px solid rgba(255, 255, 255, 0.08);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 700;
}
.satin textarea {
flex: 1;
min-height: 0;
resize: none;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
background: rgba(14, 13, 16, 0.62);
padding: 12px;
color: #f5f3f0;
line-height: 1.5;
}
/* 2. Command Deck */
.deck {
padding: 12px;
background:
radial-gradient(
circle at 82% 8%,
rgba(127, 201, 156, 0.16),
transparent 130px
),
#060708;
font-family: "JetBrains Mono", "SF Mono", monospace;
}
.deck .app-top {
height: 44px;
}
.deck .brand-orb {
width: 30px;
height: 30px;
border-radius: 10px;
background: #101414;
border: 1px solid rgba(127, 201, 156, 0.22);
}
.deck .brand-orb img {
width: 22px;
}
.deck .app-title {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #dff7e8;
}
.deck .tiny-icon {
width: 28px;
height: 28px;
border: 1px solid rgba(127, 201, 156, 0.12);
color: #9ad8b2;
}
.deck .terminal {
height: 392px;
border-radius: 18px;
border: 1px solid rgba(127, 201, 156, 0.2);
background: linear-gradient(
180deg,
rgba(7, 14, 12, 0.94),
rgba(3, 6, 6, 0.96)
);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.deck .pill {
padding: 4px 9px;
background: rgba(127, 201, 156, 0.11);
color: #8ee4ae;
border: 1px solid rgba(127, 201, 156, 0.18);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.deck .readout {
padding: 14px;
border-radius: 14px;
border: 1px solid rgba(127, 201, 156, 0.13);
background: repeating-linear-gradient(
0deg,
rgba(127, 201, 156, 0.035),
rgba(127, 201, 156, 0.035) 1px,
transparent 1px,
transparent 6px
);
}
.deck .readout h3 {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.15;
letter-spacing: -0.03em;
font-family: "Geist", sans-serif;
color: #effff5;
}
.deck .wave {
display: flex;
align-items: end;
gap: 5px;
height: 64px;
padding: 10px;
border-radius: 14px;
background: rgba(127, 201, 156, 0.055);
}
.deck .wave span {
flex: 1;
border-radius: 999px;
background: linear-gradient(180deg, #b4ffd0, #48a96f);
height: calc(16px + var(--h) * 1px);
opacity: 0.78;
}
.deck .primary {
min-height: 48px;
border: 1px solid rgba(127, 201, 156, 0.28);
background: #baf7cf;
color: #04100a;
font-family: "Geist", sans-serif;
}
.deck .mini {
min-height: 34px;
border: 1px solid rgba(127, 201, 156, 0.14);
border-radius: 12px;
display: grid;
place-items: center;
color: #a7d7b8;
font-size: 11px;
}
/* 3. Aurora */
.aurora {
padding: 12px;
background:
radial-gradient(
circle at 20% 5%,
rgba(130, 103, 255, 0.24),
transparent 145px
),
radial-gradient(
circle at 90% 90%,
rgba(211, 167, 132, 0.2),
transparent 170px
),
#070711;
font-family: "Plus Jakarta Sans", "Geist", sans-serif;
}
.aurora .glass {
height: 436px;
padding: 12px;
border-radius: 28px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.095),
rgba(255, 255, 255, 0.032)
);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.11),
0 22px 60px rgba(0, 0, 0, 0.32);
display: flex;
flex-direction: column;
gap: 12px;
}
.aurora .brand-orb {
width: 36px;
height: 36px;
background: conic-gradient(
from 210deg,
#e9be95,
#8a78ff,
#7fc99c,
#e9be95
);
padding: 1px;
}
.aurora .brand-orb img {
width: 31px;
height: 31px;
border-radius: 50%;
padding: 4px;
background: #080812;
}
.aurora .app-title {
font-size: 15px;
font-weight: 800;
letter-spacing: -0.04em;
}
.aurora .tiny-icon {
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.055);
}
.aurora .pill {
padding: 5px 10px;
color: #e9be95;
background: rgba(233, 190, 149, 0.12);
font-size: 11px;
font-weight: 800;
}
.aurora .focus {
flex: 1;
display: grid;
place-items: center;
text-align: center;
padding: 18px;
border-radius: 24px;
background:
radial-gradient(
circle at 50% 40%,
rgba(233, 190, 149, 0.17),
transparent 130px
),
rgba(0, 0, 0, 0.18);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.aurora .focus h3 {
margin: 0 0 8px;
font-size: 30px;
line-height: 0.92;
letter-spacing: -0.075em;
}
.aurora .ring {
width: 128px;
height: 128px;
margin: 0 auto 18px;
border-radius: 50%;
display: grid;
place-items: center;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.14),
rgba(255, 255, 255, 0.035)
);
border: 1px solid rgba(255, 255, 255, 0.13);
box-shadow:
0 0 0 10px rgba(233, 190, 149, 0.04),
0 0 80px rgba(138, 120, 255, 0.22);
}
.aurora .ring img {
width: 74px;
filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.35));
}
.aurora .primary {
min-height: 50px;
background: #f7d3b3;
color: #1a1108;
}
/* 4. Studio */
.studio {
padding: 12px;
background: #ebe3d7;
color: #17130f;
font-family: "Fraunces", "Georgia", serif;
}
.studio .paper {
height: 436px;
border-radius: 24px;
background: #f7f0e7;
border: 1px solid rgba(23, 19, 15, 0.12);
box-shadow: 0 24px 70px rgba(23, 19, 15, 0.24);
overflow: hidden;
display: flex;
flex-direction: column;
}
.studio .app-top {
height: 56px;
padding: 0 12px;
border-bottom: 1px solid rgba(23, 19, 15, 0.09);
}
.studio .brand-orb {
width: 34px;
height: 34px;
background: #17130f;
}
.studio .brand-orb img {
width: 25px;
}
.studio .app-title {
font-size: 18px;
letter-spacing: -0.04em;
}
.studio .tiny-icon {
color: rgba(23, 19, 15, 0.58);
}
.studio .body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.studio .pill {
width: max-content;
padding: 5px 10px;
background: #17130f;
color: #f7f0e7;
font-family: "Geist", sans-serif;
font-size: 11px;
font-weight: 750;
}
.studio h3 {
margin: 0;
font-size: 28px;
line-height: 0.96;
letter-spacing: -0.065em;
}
.studio textarea {
flex: 1;
border: 1px solid rgba(23, 19, 15, 0.12);
border-radius: 18px;
resize: none;
padding: 14px;
color: #17130f;
background: #fffaf4;
font:
15px/1.55 "Geist",
sans-serif;
}
.studio .primary {
min-height: 48px;
background: #17130f;
color: #f7f0e7;
font-family: "Geist", sans-serif;
}
.studio .mini {
min-height: 34px;
border: 1px solid rgba(23, 19, 15, 0.12);
border-radius: 14px;
display: grid;
place-items: center;
font:
700 12px "Geist",
sans-serif;
}
/* 5. Local Core */
.core {
padding: 11px;
background:
radial-gradient(
circle at 8% 0%,
rgba(233, 190, 149, 0.14),
transparent 160px
),
#09090d;
font-family: "Geist", sans-serif;
}
.core .surface {
height: 438px;
border-radius: 26px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.07),
rgba(255, 255, 255, 0.025)
);
border: 1px solid rgba(255, 255, 255, 0.11);
}
.core .brand-orb {
width: 34px;
height: 34px;
background: #101014;
border: 1px solid rgba(233, 190, 149, 0.18);
}
.core .brand-orb img {
width: 25px;
}
.core .app-title {
font-size: 15px;
font-weight: 780;
letter-spacing: -0.045em;
}
.core .tiny-icon {
background: rgba(255, 255, 255, 0.04);
color: rgba(247, 243, 238, 0.68);
}
.core .model-card {
padding: 14px;
border-radius: 22px;
background: linear-gradient(
135deg,
rgba(127, 201, 156, 0.12),
rgba(233, 190, 149, 0.08)
);
border: 1px solid rgba(255, 255, 255, 0.09);
}
.core .model-card small {
color: #9fe3ba;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 10px;
font-weight: 800;
}
.core .model-card h3 {
margin: 8px 0 6px;
font-size: 25px;
line-height: 0.96;
letter-spacing: -0.065em;
}
.core .metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
}
.core .metric {
padding: 10px 8px;
border-radius: 16px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.core .metric strong {
display: block;
font-size: 16px;
}
.core .metric span {
color: rgba(247, 243, 238, 0.5);
font-size: 10px;
}
.core .primary {
min-height: 52px;
background: #9fe3ba;
color: #07110b;
}
.core .mini {
min-height: 36px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.055);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 700;
}
/* 6. Floating Overlay */
.floaty {
padding: 0;
background: transparent;
display: grid;
place-items: end center;
}
.floaty .bar {
width: 360px;
height: 112px;
margin-bottom: 22px;
border-radius: 30px;
padding: 14px 18px;
display: grid;
grid-template-columns: 52px 1fr 118px;
align-items: center;
gap: 14px;
background:
radial-gradient(
circle at 15% 10%,
rgba(233, 190, 149, 0.18),
transparent 190px
),
linear-gradient(180deg, rgba(18, 16, 20, 0.92), rgba(7, 7, 10, 0.94));
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
0 28px 90px rgba(0, 0, 0, 0.62),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floaty .brand-orb {
width: 52px;
height: 52px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.025)
);
border: 1px solid rgba(233, 190, 149, 0.22);
box-shadow: 0 0 0 9px rgba(211, 167, 132, 0.08);
}
.floaty .brand-orb img {
width: 36px;
}
.floaty .wave {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 54px;
}
.floaty .wave span {
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, #f2c9a7, #d3a784);
height: calc(10px + var(--h) * 1px);
animation: waveformDance 850ms var(--ease) infinite;
animation-delay: calc(var(--i) * -48ms);
}
.floaty strong {
display: block;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.floaty em {
display: block;
margin-top: 4px;
color: rgba(247, 243, 238, 0.54);
font-style: normal;
font-size: 11px;
line-height: 1.25;
}
.floaty .hintbox {
padding: 9px 10px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(255, 255, 255, 0.045);
font-size: 11px;
color: rgba(247, 243, 238, 0.68);
line-height: 1.25;
}
.variant-panel {
display: none;
}
.variant-panel.is-active {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 26px;
align-items: start;
}
@media (max-width: 960px) {
.hero,
.variant-panel.is-active {
grid-template-columns: 1fr;
}
.hero-note {
justify-self: stretch;
}
.mockup-rail {
position: static;
}
.toolbar {
grid-template-columns: 1fr;
}
.state-controls {
overflow-x: auto;
}
.principles {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<svg
aria-hidden="true"
style="position: absolute; width: 0; height: 0; overflow: hidden"
>
<symbol id="i-settings" viewBox="0 0 24 24">
<path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" />
<path
d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .92V20.5a2 2 0 0 1-4 0v-.18a1.7 1.7 0 0 0-1-.92 1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.92-1H3.5a2 2 0 0 1 0-4h.18a1.7 1.7 0 0 0 .92-1 1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.92V3.5a2 2 0 0 1 4 0v.18a1.7 1.7 0 0 0 1 .92 1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.12.38.45.7.92 1h.18a2 2 0 0 1 0 4h-.18a1.7 1.7 0 0 0-.92 1Z"
/>
</symbol>
<symbol id="i-minus" viewBox="0 0 24 24"><path d="M5 12h14" /></symbol>
<symbol id="i-x" viewBox="0 0 24 24">
<path d="M18 6 6 18M6 6l12 12" />
</symbol>
<symbol id="i-mic" viewBox="0 0 24 24">
<path d="M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3Z" />
<path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3" />
</symbol>
<symbol id="i-copy" viewBox="0 0 24 24">
<rect x="9" y="9" width="11" height="11" rx="2" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</symbol>
<symbol id="i-arrow" viewBox="0 0 24 24">
<path d="M5 12h14M13 5l7 7-7 7" />
</symbol>
<symbol id="i-save" viewBox="0 0 24 24">
<path
d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z"
/>
<path d="M17 21v-8H7v8M7 3v5h8" />
</symbol>
<symbol id="i-trash" viewBox="0 0 24 24">
<path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
</symbol>
</svg>
<main class="page-shell" id="studio" data-state="text">
<section class="hero" aria-labelledby="page-title">
<div>
<div class="hero-kicker"><span>Transcript UI lab</span></div>
<h1 id="page-title">
Clone atual + 6 direções para decidir sem retrabalho.
</h1>
<p>
O primeiro painel é uma reprodução fiel do design atual do
aplicativo. Os outros seis são propostas de evolução, mantendo o
produto compacto, escuro, rápido e coerente com o logo/mark atual.
</p>
</div>
<aside class="hero-note">
<strong>Como usar:</strong> escolha uma aba, alterne os estados e
compare a clareza de gravação, texto transcrito, configurações e
overlay. Todos os exemplos usam HTML/CSS/JS puro e o asset real
<code>assets/brand/mark.png</code>.
</aside>
</section>
<nav class="toolbar" aria-label="Variações de design">
<div class="tabs" role="tablist">
<button
class="tab"
role="tab"
aria-selected="true"
data-target="current"
>
00 · Clone atual
</button>
<button
class="tab"
role="tab"
aria-selected="false"
data-target="satin"
>
01 · Satin refinement
</button>
<button
class="tab"
role="tab"
aria-selected="false"
data-target="deck"
>
02 · Command deck
</button>
<button
class="tab"
role="tab"
aria-selected="false"
data-target="aurora"
>
03 · Aurora dictation
</button>
<button
class="tab"
role="tab"
aria-selected="false"
data-target="studio-paper"
>
04 · Studio paper
</button>
<button
class="tab"
role="tab"
aria-selected="false"
data-target="core"
>
05 · Local core
</button>
<button
class="tab"
role="tab"
aria-selected="false"
data-target="floaty"
>
06 · Overlay first
</button>
</div>
<div class="state-controls" aria-label="Estados do app">
<button class="state-button" data-state="idle">Pronto</button>
<button class="state-button" data-state="recording">Gravando</button>
<button class="state-button is-active" data-state="text">
Com texto
</button>
<button class="state-button" data-state="overlay">Overlay</button>
<button class="state-button" data-state="settings">Config</button>
</div>
</nav>
<section class="variant-panel is-active" data-panel="current">
<article class="variant-copy">
<h2>00 · Clone atual, sem reinterpretar.</h2>
<p class="intent">
Reprodução do app atual: janela 380×460, topbar frameless, marca
circular, painel principal translúcido, botão de gravação âmbar,
ações em grid, editor expansível e overlay de ditado. Esta versão
serve como baseline visual para comparação.
</p>
<div class="principles">
<div class="principle">
<strong>Fidelidade</strong
><span
>Cores, raios, pesos, espaçamentos e hierarquia copiados do CSS
atual.</span
>
</div>
<div class="principle">
<strong>Estados</strong
><span
>Use os botões de estado para conferir texto, overlay e
configurações.</span
>
</div>
<div class="principle">
<strong>Marca</strong
><span>Usa o mesmo mark transparente que está na UI atual.</span>
</div>
<div class="principle">
<strong>Decisão</strong
><span
>Escolha esta opção se quisermos apenas ajustes cirúrgicos sem
redesign.</span
>
</div>
</div>
</article>
<aside class="mockup-rail">
<div class="window-frame">
<div class="current-root design-state-text" data-mockup>
<header class="current-topbar">
<div class="current-drag">
<button class="current-control" aria-label="Configurações">
<svg class="icon"><use href="#i-settings" /></svg>
</button>
<div class="current-brand">
<span class="current-mark-shell"
><img
class="mark current-mark"
src="../assets/brand/mark.png"
alt="Logo do Transcript"
/></span>
<h1 class="current-title">Transcript</h1>
</div>
</div>
<div class="current-controls">
<button class="current-control">
<svg class="icon"><use href="#i-minus" /></svg></button
><button class="current-control close">
<svg class="icon"><use href="#i-x" /></svg>
</button>
</div>
</header>
<section class="current-main">
<div class="current-status-row">
<span class="current-status">Pronto</span>
</div>
<div class="current-content">
<div class="current-actions">
<button class="current-record">
<svg class="icon"><use href="#i-mic" /></svg
><span>Gravar</span
><span class="current-hotkey"
>Ctrl+Shift+Space</span
></button
><button class="current-secondary">
<svg class="icon"><use href="#i-copy" /></svg
>Copiar</button
><button class="current-secondary">
<svg class="icon"><use href="#i-arrow" /></svg
>Inserir</button
><button class="current-ghost">
<svg class="icon"><use href="#i-save" /></svg
>Salvar</button
><button class="current-ghost">
<svg class="icon"><use href="#i-trash" /></svg>Limpar
</button>
</div>
<p class="current-message">Transcrição local concluída.</p>
<div class="current-more">
<button class="current-secondary">Continuar</button
><button class="current-ghost">Regravar</button
><button class="current-ghost">Expandir</button>
</div>
</div>
<div class="current-editor-wrap">
<label class="current-editor-label">Texto transcrito</label
><textarea class="current-editor">
Esta é uma prévia do texto transcrito. O campo expande somente quando há conteúdo, mantendo o app compacto no estado inicial.</textarea
>
</div>
<div class="current-diagnostics">
<span class="current-details">› Detalhes</span>
</div>
</section>
<section class="current-overlay">
<span class="current-orb"
><img src="../assets/brand/mark.png" alt=""
/></span>
<div class="current-wave">
<span style="--i: 0"></span><span style="--i: 1"></span
><span style="--i: 2"></span><span style="--i: 3"></span
><span style="--i: 4"></span><span style="--i: 5"></span
><span style="--i: 6"></span><span style="--i: 7"></span
><span style="--i: 8"></span><span style="--i: 9"></span
><span style="--i: 10"></span><span style="--i: 11"></span>
</div>
<div class="current-dictation-text">
<strong>Ouvindo</strong
><span>Pressione o atalho de novo para inserir</span>
</div>
</section>
<section class="current-settings">
<div class="current-panel">
<header>
<h2>Configurações</h2>
<button class="current-control">
<svg class="icon"><use href="#i-x" /></svg>
</button>
</header>
<div class="current-panel-body">
<h3>API compatível com OpenAI</h3>
<p>Configure endpoint, modelo e api_key opcional.</p>
<input
class="current-input"
value="http://localhost:8022/v1/audio/transcriptions"
/><input
class="current-input"
value="alefiury/parakeet-tdt"
/><input class="current-input" value="pt" />
<h3>Atalho de teclado</h3>
<input class="current-input" value="Ctrl+Shift+Space" />
</div>
<footer>
<button class="current-ghost">Cancelar</button
><button class="current-secondary">Salvar</button>
</footer>
</div>
</section>
</div>
</div>
<div class="mockup-label">Baseline visual atual · 380×460</div>
</aside>
</section>
<section class="variant-panel" data-panel="satin">
<article class="variant-copy">
<h2>01 · Satin refinement.</h2>
<p class="intent">
Mesma estrutura do app atual, mas com refinamento de densidade,
melhor contraste de cards e uma área de texto mais “produto
premium”. É a evolução mais segura: quase sem risco de quebrar fluxo
mental do usuário.
</p>
<div class="principles">
<div class="principle">
<strong>Melhor escolha</strong
><span
>Recomendado se queremos subir qualidade sem mudar o
comportamento.</span
>
</div>
<div class="principle">
<strong>UX</strong
><span
>Menos ruído, hierarquia de status mais clara e botões mais
previsíveis.</span
>
</div>
<div class="principle">
<strong>Implementação</strong
><span
>Baixo esforço: reaproveita a estrutura atual com tokens
melhores.</span
>
</div>
<div class="principle">
<strong>Risco</strong
><span>Muito baixo; mantém o app compacto e familiar.</span>
</div>
</div>
</article>
<aside class="mockup-rail">
<div class="window-frame satin" data-mockup>
<div class="app-top">
<div class="brand-lockup">
<span class="brand-orb"
><img src="../assets/brand/mark.png" alt=""
/></span>
<h1 class="app-title">Transcript</h1>
</div>
<div class="top-actions">
<button class="tiny-icon">
<svg class="icon"><use href="#i-settings" /></svg></button
><button class="tiny-icon">
<svg class="icon"><use href="#i-minus" /></svg></button
><button class="tiny-icon">
<svg class="icon"><use href="#i-x" /></svg>
</button>
</div>
</div>
<section class="panel">
<span class="pill">Pronto</span>
<div class="hero-card">
<strong>Ditado local pronto para inserir.</strong
><span class="muted-line"
>Whisper Base está disponível offline. Pressione o atalho e
fale naturalmente.</span
>
</div>
<button class="primary">
<svg class="icon"><use href="#i-mic" /></svg>Gravar
<span style="opacity: 0.55; font-family: monospace"
>Ctrl+Shift+Space</span
>
</button>
<div class="mini-grid">
<button class="mini">Copiar</button
><button class="mini">Inserir</button
><button class="mini">Salvar</button
><button class="mini">Limpar</button>
</div>
<textarea>
Esta versão mantém o mesmo fluxo, mas deixa o editor mais confortável e fácil de ler.</textarea
>
</section>
</div>
<div class="mockup-label">Evolução direta do design atual</div>
</aside>
</section>
<section class="variant-panel" data-panel="deck">
<article class="variant-copy">
<h2>02 · Command deck.</h2>
<p class="intent">
Direção mais “power user”: parece uma ferramenta nativa para quem
usa atalho o tempo todo. Traz status técnico local/API de forma
discreta e deixa o botão de ditado como comando principal.
</p>
<div class="principles">
<div class="principle">
<strong>Tom</strong
><span
>Terminal premium, técnico, rápido, ideal para app de
produtividade.</span
>
</div>
<div class="principle">
<strong>Clareza</strong
><span
>Ótimo para mostrar local/offline, latência e modelo ativo sem
poluir.</span
>
</div>
<div class="principle">
<strong>UX</strong
><span>Favorece usuários avançados e atalhos globais.</span>
</div>
<div class="principle">
<strong>Risco</strong
><span
>Visual menos “macio”; pode parecer mais developer tool.</span
>
</div>
</div>
</article>
<aside class="mockup-rail">
<div class="window-frame deck" data-mockup>
<div class="app-top">
<div class="brand-lockup">
<span class="brand-orb"
><img src="../assets/brand/mark.png" alt=""
/></span>
<h1 class="app-title">TRANSCRIPT</h1>
</div>
<div class="top-actions">
<button class="tiny-icon">
<svg class="icon icon-thin">
<use href="#i-settings" />
</svg></button
><button class="tiny-icon">
<svg class="icon icon-thin"><use href="#i-x" /></svg>
</button>
</div>
</div>
<section class="terminal">
<span class="pill">LOCAL / WHISPER BASE</span>
<div class="readout">
<h3>Ready for global dictation</h3>
<p class="muted-line">
Audio path armed · insert via clipboard paste · no API
required.
</p>
</div>
<div class="wave">
<span style="--h: 10"></span><span style="--h: 32"></span
><span style="--h: 18"></span><span style="--h: 45"></span
><span style="--h: 26"></span><span style="--h: 38"></span
><span style="--h: 14"></span><span style="--h: 31"></span>
</div>
<button class="primary">START_CAPTURE</button>
<div class="mini-grid">
<button class="mini">COPY</button
><button class="mini">PASTE</button
><button class="mini">LOGS</button
><button class="mini">RESET</button>
</div>
</section>
</div>
<div class="mockup-label">Mais técnico e orientado a atalho</div>
</aside>
</section>
<section class="variant-panel" data-panel="aurora">
<article class="variant-copy">
<h2>03 · Aurora dictation.</h2>
<p class="intent">
Mais emocional e memorável: transforma o ato de gravar em foco
central, com orb grande, marca forte e sensação de áudio vivo. Bom
se quisermos que o app pareça mais “AI assistant” e menos
utilitário.
</p>
<div class="principles">
<div class="principle">
<strong>Impacto</strong
><span
>Visual mais marcante para screenshots, README e
marketing.</span
>
</div>
<div class="principle">
<strong>Interação</strong
><span
>O estado de gravação fica impossível de não perceber.</span
>
</div>
<div class="principle">
<strong>Marca</strong
><span
>A marca vira elemento central sem virar “cartão branco”.</span
>
</div>
<div class="principle">
<strong>Risco</strong
><span
>Mais mudança de layout, exige cuidado para não parecer
decorativo demais.</span
>
</div>
</div>
</article>
<aside class="mockup-rail">
<div class="window-frame aurora" data-mockup>
<section class="glass">
<div class="app-top">
<div class="brand-lockup">
<span class="brand-orb"
><img src="../assets/brand/mark.png" alt=""
/></span>
<h1 class="app-title">Transcript</h1>
</div>
<div class="top-actions">
<button class="tiny-icon">
<svg class="icon"><use href="#i-settings" /></svg></button
><button class="tiny-icon">
<svg class="icon"><use href="#i-x" /></svg>
</button>
</div>
</div>
<span class="pill">Ouvindo</span>
<div class="focus">
<div>
<div class="ring">
<img src="../assets/brand/mark.png" alt="" />
</div>
<h3>Fale agora.</h3>
<p class="muted-line">
Pressione Ctrl+Shift+Space novamente para transcrever e
inserir.
</p>
</div>
</div>
<button class="primary">Parar e inserir</button>
</section>
</div>
<div class="mockup-label">Mais expressivo e “AI assistant”</div>
</aside>
</section>
<section class="variant-panel" data-panel="studio-paper">
<article class="variant-copy">
<h2>04 · Studio paper.</h2>
<p class="intent">
Uma direção clara e editorial: menos glass, mais leitura, mais
“documento”. É a melhor se o foco principal for revisar e editar o
texto transcrito com conforto, mantendo um contraste elegante.
</p>
<div class="principles">
<div class="principle">
<strong>Leitura</strong
><span
>Excelente para textos longos e revisão pós-transcrição.</span
>
</div>
<div class="principle">
<strong>Contraste</strong
><span
>Modo claro controlado, útil para acessibilidade e uso
diurno.</span
>
</div>
<div class="principle">
<strong>Personalidade</strong
><span
>Menos comum no ecossistema de apps de AI, mais editorial.</span
>
</div>
<div class="principle">
<strong>Risco</strong
><span
>Afasta do dark glass atual; pode parecer outro produto.</span
>
</div>
</div>
</article>
<aside class="mockup-rail">
<div class="window-frame studio" data-mockup>
<section class="paper">
<header class="app-top">
<div class="brand-lockup">
<span class="brand-orb"
><img src="../assets/brand/mark.png" alt=""
/></span>
<h1 class="app-title">Transcript</h1>
</div>
<div class="top-actions">
<button class="tiny-icon">
<svg class="icon"><use href="#i-settings" /></svg></button
><button class="tiny-icon">
<svg class="icon"><use href="#i-x" /></svg>
</button>
</div>
</header>
<div class="body">
<span class="pill">Texto pronto</span>
<h3>Ditado virou rascunho editável.</h3>
<textarea>
Esta direção prioriza conforto de leitura, revisão e cópia. Ideal se o app passar a ser usado para notas maiores.</textarea
><button class="primary">Gravar continuação</button>
<div class="mini-grid">
<button class="mini">Copiar</button
><button class="mini">Inserir</button>
</div>
</div>
</section>
</div>
<div class="mockup-label">Editorial, claro e focado em leitura</div>
</aside>
</section>
<section class="variant-panel" data-panel="core">
<article class="variant-copy">
<h2>05 · Local core.</h2>
<p class="intent">
Design orientado ao novo diferencial do app: transcrição local
embutida. Mostra claramente que há um modelo offline, latência
esperada e fallback de API, sem transformar isso em painel técnico
demais.
</p>
<div class="principles">
<div class="principle">
<strong>Produto</strong
><span
>Comunica “sem Docker/API” como valor principal do app.</span
>
</div>
<div class="principle">
<strong>Confiança</strong
><span
>Ajuda o usuário a saber se está usando local, API ou
fallback.</span
>
</div>
<div class="principle">
<strong>UX</strong
><span>Bom para onboarding e redução de suporte.</span>
</div>
<div class="principle">
<strong>Risco</strong
><span
>Mais informação na tela; precisa manter modo compacto.</span
>
</div>
</div>
</article>
<aside class="mockup-rail">
<div class="window-frame core" data-mockup>
<section class="surface">
<div class="app-top">
<div class="brand-lockup">
<span class="brand-orb"
><img src="../assets/brand/mark.png" alt=""
/></span>
<h1 class="app-title">Transcript</h1>
</div>
<div class="top-actions">
<button class="tiny-icon">
<svg class="icon"><use href="#i-settings" /></svg></button
><button class="tiny-icon">
<svg class="icon"><use href="#i-x" /></svg>
</button>
</div>
</div>
<article class="model-card">
<small>Offline ativo</small>
<h3>Whisper Base local está pronto.</h3>
<p class="muted-line">
Transcreve no próprio computador. API continua como fallback
opcional.
</p>
</article>
<div class="metrics">
<div class="metric">
<strong>PT-BR</strong><span>idioma</span>
</div>
<div class="metric">
<strong>0 API</strong><span>chave</span>
</div>
<div class="metric">
<strong>base</strong><span>modelo</span>
</div>
</div>
<button class="primary">
<svg class="icon"><use href="#i-mic" /></svg>Gravar localmente
</button>
<div class="mini-grid">
<button class="mini">Copiar</button
><button class="mini">Inserir</button
><button class="mini">Modelo</button
><button class="mini">Detalhes</button>
</div>
</section>
</div>
<div class="mockup-label">Valor do offline fica explícito</div>
</aside>
</section>
<section class="variant-panel" data-panel="floaty">
<article class="variant-copy">
<h2>06 · Overlay first.</h2>
<p class="intent">
Direção baseada no caso de uso principal: apertar atalho em qualquer
app, ditar e inserir. Em vez de pensar primeiro na janela principal,
esta versão prioriza a barra flutuante como “produto principal”.
</p>
<div class="principles">
<div class="principle">
<strong>Hotkey</strong
><span
>O fluxo global fica mais claro, elegante e menos
intrusivo.</span
>
</div>
<div class="principle">
<strong>Foco</strong
><span
>Ideal para usuários que quase nunca abrem a janela
completa.</span
>
</div>
<div class="principle">
<strong>Polimento</strong
><span>Overlay vira assinatura visual do app.</span>
</div>
<div class="principle">
<strong>Risco</strong
><span
>Não resolve sozinho a tela de configurações/editor; precisa
combinar com outra direção.</span
>
</div>
</div>
</article>
<aside class="mockup-rail">
<div class="window-frame floaty" data-mockup>
<section class="bar">
<span class="brand-orb"
><img src="../assets/brand/mark.png" alt=""
/></span>
<div class="wave">
<span style="--i: 0; --h: 8"></span
><span style="--i: 1; --h: 24"></span
><span style="--i: 2; --h: 34"></span
><span style="--i: 3; --h: 16"></span
><span style="--i: 4; --h: 40"></span
><span style="--i: 5; --h: 22"></span
><span style="--i: 6; --h: 30"></span
><span style="--i: 7; --h: 14"></span>
</div>
<div>
<strong>Ouvindo</strong
><em>Solte a fala. Atalho de novo insere.</em>
</div>
</section>
<div class="hintbox">
Overlay compacto, sempre no rodapé, sem roubar atenção do app
ativo.
</div>
</div>
<div class="mockup-label">
Barra global como experiência principal
</div>
</aside>
</section>
</main>
<script>
const studio = document.querySelector("#studio");
const tabs = Array.from(document.querySelectorAll(".tab"));
const panels = Array.from(document.querySelectorAll(".variant-panel"));
const stateButtons = Array.from(
document.querySelectorAll(".state-button"),
);
const stateMap = {
idle: {
label: "Pronto",
record: "Gravar",
message: "Pronto para gravar.",
},
recording: {
label: "Gravando",
record: "Parar",
message: "Gravando… pressione o atalho novamente para finalizar.",
},
text: {
label: "Pronto",
record: "Gravar",
message: "Transcrição local concluída.",
},
overlay: {
label: "Transcrevendo",
record: "Transcrevendo…",
message: "Overlay ativo.",
},
settings: {
label: "Pronto",
record: "Gravar",
message: "Configurações abertas.",
},
};
function syncState(state) {
studio.dataset.state = state;
document.querySelectorAll("[data-mockup]").forEach((mockup) => {
mockup.classList.remove(
"design-state-idle",
"design-state-recording",
"design-state-text",
"design-state-overlay",
"design-state-settings",
);
mockup.classList.add("design-state-" + state);
});
const current = stateMap[state] || stateMap.text;
const status = document.querySelector(".current-status");
const record = document.querySelector(".current-record span");
const message = document.querySelector(".current-message");
if (status) status.textContent = current.label;
if (record) record.textContent = current.record;
if (message) message.textContent = current.message;
stateButtons.forEach((button) =>
button.classList.toggle("is-active", button.dataset.state === state),
);
}
tabs.forEach((tab) => {
tab.addEventListener("click", () => {
const target = tab.dataset.target;
tabs.forEach((item) =>
item.setAttribute("aria-selected", String(item === tab)),
);
panels.forEach((panel) =>
panel.classList.toggle("is-active", panel.dataset.panel === target),
);
});
});
stateButtons.forEach((button) =>
button.addEventListener("click", () => syncState(button.dataset.state)),
);
syncState("text");
</script>
</body>
</html>