Update app.py

app.py

@@ -596,14 +596,14 @@ def generate(prompt, control_image, seed, random_seed, progress=gr.Progress(trac
 
     gallery = [(img1, "Uppercase"), (img2, "Lowercase"), (img3, "Punctuation")]
     preview = _render_preview(otf_path, font_name)
-    status = f"<span class='dot'></span> <b>{font_name}</b> &nbsp;·&nbsp; seed <code>{seed}</code>"
+    status = f"<span class='dot'></span> <b>{font_name}</b><span class='sep'>/</span>seed <code>{seed}</code>"
     return gallery, preview, otf_path, status
 
 
 # =============================================================================
 # OPTIONAL CUSTOM TITLE FONT
 # Drop your own font in the repo as one of these names and the hero title will
-# use it (otherwise it falls back to Fraunces):
+# use it (otherwise it falls back to the Helvetica/Archivo grotesque stack):
 #   title.otf / title.ttf / title.woff2 / title.woff   (or under assets/)
 # =============================================================================
 def _load_title_font():
@@ -626,136 +626,241 @@ def _load_title_font():
                 f"src: url(data:{mime[ext]};base64,{b64}) format('{fmt[ext]}');"
                 "font-weight: 100 900; font-style: normal; font-display: swap;}"
             )
-            return face, "'TitleFont', 'Fraunces', Georgia, serif"
-    return "", "'Fraunces', Georgia, serif"
+            return face, "'TitleFont', 'Helvetica Neue', Helvetica, 'Archivo', Arial, sans-serif"
+    return "", "'Helvetica Neue', Helvetica, 'Archivo', Arial, sans-serif"
 
 TITLE_FONT_FACE, TITLE_FAMILY = _load_title_font()
 
 # =============================================================================
-# THEME — type-foundry / specimen-sheet look (paper + ink + vermillion)
+# THEME — International Typographic Style (white / black / Swiss red)
 # =============================================================================
 THEME = gr.themes.Base(
     primary_hue=gr.themes.colors.red,
-    neutral_hue=gr.themes.colors.stone,
-    font=[gr.themes.GoogleFont("Instrument Sans"), "ui-sans-serif", "sans-serif"],
+    neutral_hue=gr.themes.colors.gray,
+    radius_size=gr.themes.sizes.radius_none,
+    font=["Helvetica Neue", "Helvetica", gr.themes.GoogleFont("Archivo"), "Arial", "sans-serif"],
     font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
 ).set(
-    body_background_fill="#EFE9DD",
-    body_background_fill_dark="#EFE9DD",
-    body_text_color="#1A1815",
-    body_text_color_dark="#1A1815",
-    body_text_color_subdued="#6E6A60",
-    body_text_color_subdued_dark="#6E6A60",
-    background_fill_primary="#FAF6EE",
-    background_fill_primary_dark="#FAF6EE",
-    background_fill_secondary="#F1EBDF",
-    background_fill_secondary_dark="#F1EBDF",
-    block_background_fill="#FAF6EE",
-    block_background_fill_dark="#FAF6EE",
-    block_border_color="#DAD3C4",
-    block_border_color_dark="#DAD3C4",
+    body_background_fill="#FFFFFF",
+    body_background_fill_dark="#FFFFFF",
+    body_text_color="#000000",
+    body_text_color_dark="#000000",
+    body_text_color_subdued="#6B6B6B",
+    body_text_color_subdued_dark="#6B6B6B",
+    background_fill_primary="#FFFFFF",
+    background_fill_primary_dark="#FFFFFF",
+    background_fill_secondary="#F4F4F4",
+    background_fill_secondary_dark="#F4F4F4",
+    block_background_fill="#FFFFFF",
+    block_background_fill_dark="#FFFFFF",
+    block_border_color="#D8D8D8",
+    block_border_color_dark="#D8D8D8",
     block_border_width="1px",
-    block_label_text_color="#6E6A60",
-    block_label_text_color_dark="#6E6A60",
-    block_label_background_fill="#FAF6EE",
-    block_label_background_fill_dark="#FAF6EE",
-    block_title_text_color="#1A1815",
-    block_title_text_color_dark="#1A1815",
-    block_radius="3px",
+    block_label_text_color="#000000",
+    block_label_text_color_dark="#000000",
+    block_label_background_fill="#FFFFFF",
+    block_label_background_fill_dark="#FFFFFF",
+    block_title_text_color="#000000",
+    block_title_text_color_dark="#000000",
+    block_radius="0px",
+    block_shadow="none",
+    block_shadow_dark="none",
     input_background_fill="#FFFFFF",
     input_background_fill_dark="#FFFFFF",
-    input_border_color="#DAD3C4",
-    input_border_color_dark="#DAD3C4",
-    input_border_color_focus="#FF5128",
-    input_border_color_focus_dark="#FF5128",
-    button_primary_background_fill="#FF5128",
-    button_primary_background_fill_dark="#FF5128",
-    button_primary_background_fill_hover="#E8431F",
-    button_primary_background_fill_hover_dark="#E8431F",
-    button_primary_text_color="#FFF7F0",
-    button_primary_text_color_dark="#FFF7F0",
-    button_primary_border_color="#FF5128",
-    button_primary_border_color_dark="#FF5128",
+    input_border_color="#000000",
+    input_border_color_dark="#000000",
+    input_border_color_focus="#E30613",
+    input_border_color_focus_dark="#E30613",
+    input_shadow="none",
+    input_shadow_dark="none",
+    input_shadow_focus="none",
+    input_shadow_focus_dark="none",
+    shadow_drop="none",
+    shadow_drop_lg="none",
+    button_primary_background_fill="#E30613",
+    button_primary_background_fill_dark="#E30613",
+    button_primary_background_fill_hover="#000000",
+    button_primary_background_fill_hover_dark="#000000",
+    button_primary_text_color="#FFFFFF",
+    button_primary_text_color_dark="#FFFFFF",
+    button_primary_border_color="#E30613",
+    button_primary_border_color_dark="#E30613",
+    button_secondary_background_fill="#FFFFFF",
+    button_secondary_background_fill_dark="#FFFFFF",
+    button_secondary_text_color="#000000",
+    button_secondary_text_color_dark="#000000",
+    button_secondary_border_color="#000000",
+    button_secondary_border_color_dark="#000000",
 )
 
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;1,9..144,900&family=JetBrains+Mono:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+    --ink: #000000;
+    --paper: #FFFFFF;
+    --red: #E30613;
+    --grey: #6B6B6B;
+    --hairline: #D8D8D8;
+    --grotesk: 'Helvetica Neue', Helvetica, 'Archivo', Arial, sans-serif;
+    --mono: 'JetBrains Mono', ui-monospace, monospace;
+}
 
 .gradio-container {
     max-width: 100% !important;
     width: 100% !important;
     margin: 0 !important;
-    padding-left: clamp(16px, 4vw, 56px) !important;
-    padding-right: clamp(16px, 4vw, 56px) !important;
-    background:
-        radial-gradient(1100px 520px at 92% -12%, rgba(255,81,40,0.10), transparent 60%),
-        radial-gradient(820px 460px at -8% 112%, rgba(255,81,40,0.05), transparent 55%) !important;
+    padding-left: clamp(20px, 5vw, 72px) !important;
+    padding-right: clamp(20px, 5vw, 72px) !important;
+    background: var(--paper) !important;
+}
+
+/* Kill every radius and shadow — flat ink on paper */
+.gradio-container *,
+.gradio-container *::before,
+.gradio-container *::after {
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
 }
 
-/* Hero */
-#hero { padding: 10px 0 14px; border-bottom: 1px solid #DAD3C4; margin-bottom: 14px; }
-#hero .kicker {
-    font-family: 'JetBrains Mono', monospace;
-    text-transform: uppercase; letter-spacing: 0.34em;
-    font-size: 10px; color: #FF5128; margin: 0 0 8px;
+/* =========================================================================
+   MASTHEAD — wordmark left, tabular meta right, heavy rule below
+   ========================================================================= */
+#hero { padding: 22px 0 0; margin-bottom: 18px; }
+#hero .masthead {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: 32px;
+    flex-wrap: wrap;
+    border-bottom: 4px solid var(--ink);
+    padding-bottom: 18px;
 }
 #hero h1 {
     font-family: __TITLE_FAMILY__;
-    font-weight: 900; font-size: clamp(34px, 6vw, 64px);
-    line-height: 0.9; letter-spacing: -0.03em; margin: 0; color: #1A1815;
+    font-weight: 700;
+    font-size: clamp(44px, 8.5vw, 108px);
+    line-height: 0.82;
+    letter-spacing: -0.05em;
+    margin: 0;
+    color: var(--ink);
 }
-#hero h1 em { font-style: italic; color: #FF5128; }
-#hero .tag {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px; line-height: 1.6; letter-spacing: 0.02em;
-    color: #6E6A60; margin-top: 10px; max-width: 680px;
+#hero h1 .stop { color: var(--red); }
+#hero .meta {
+    font-family: var(--grotesk);
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    line-height: 1;
+    color: var(--ink);
+    min-width: 280px;
+    flex: 0 1 340px;
 }
-#hero .tag b { color: #1A1815; font-weight: 600; }
+#hero .meta .row {
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+    padding: 7px 0;
+    border-top: 1px solid var(--ink);
+}
+#hero .meta .row:first-child { border-top: none; }
+#hero .meta .k { color: var(--grey); }
+#hero .meta .v { text-align: right; }
 
-/* Section eyebrow labels */
+/* =========================================================================
+   SECTION HEADS — red index, black rule
+   ========================================================================= */
 .eyebrow {
-    font-family: 'JetBrains Mono', monospace !important;
-    text-transform: uppercase; letter-spacing: 0.22em;
-    font-size: 10px !important; color: #9A9486 !important; margin: 4px 0 2px !important;
+    font-family: var(--grotesk) !important;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    font-size: 11px !important;
+    font-weight: 700 !important;
+    color: var(--ink) !important;
+    border-top: 2px solid var(--ink);
+    padding-top: 8px !important;
+    margin: 0 0 6px !important;
 }
+.eyebrow .idx { color: var(--red); margin-right: 12px; }
 
-/* Component labels in mono */
+/* Component labels */
 .gradio-container label span,
 .gradio-container .gr-check-radio label span {
-    font-family: 'JetBrains Mono', monospace !important;
-    letter-spacing: 0.06em; font-size: 11px !important; color: #6E6A60 !important;
+    font-family: var(--grotesk) !important;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    font-size: 10px !important;
+    font-weight: 500 !important;
+    color: var(--ink) !important;
+}
+
+/* Inputs: ink rules on paper */
+.gradio-container textarea,
+.gradio-container input[type='text'],
+.gradio-container input[type='number'] {
+    font-family: var(--grotesk) !important;
+    font-size: 14px !important;
+    border: 1px solid var(--ink) !important;
+    background: var(--paper) !important;
+}
+.gradio-container textarea:focus,
+.gradio-container input:focus {
+    border-color: var(--red) !important;
+    outline: 2px solid var(--red) !important;
+    outline-offset: -1px;
 }
 
-/* Primary CTA */
+/* Primary CTA — red plate, uppercase, no ornament */
 .go-btn {
     text-transform: uppercase !important;
-    letter-spacing: 0.16em !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-weight: 600 !important;
+    letter-spacing: 0.22em !important;
+    font-family: var(--grotesk) !important;
+    font-weight: 700 !important;
     font-size: 12px !important;
-    border-radius: 3px !important;
-    min-height: 44px !important;
-    box-shadow: 0 8px 22px -12px rgba(255,81,40,0.7) !important;
-    transition: transform .12s ease, box-shadow .2s ease !important;
+    min-height: 48px !important;
+    border: none !important;
+    transition: background-color .12s ease !important;
 }
-.go-btn:hover { transform: translateY(-1px); }
+.go-btn:hover { background: var(--ink) !important; }
+.go-btn:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 2px; }
 
-/* Compaction — keep everything on one screen */
-#hero ~ .row, .gradio-container .gap { gap: 10px !important; }
+/* Compaction — single-screen fit */
+#hero ~ .row, .gradio-container .gap { gap: 12px !important; }
 .gradio-container .padded, .gradio-container .block { padding: 10px !important; }
-.eyebrow { margin: 0 0 0 !important; }
+.gradio-container .block { border-color: var(--hairline) !important; }
 
 /* Status line */
 .status-line { min-height: 22px; }
 .status-line p {
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 13px !important; color: #1A1815 !important; margin: 0 !important;
+    font-family: var(--grotesk) !important;
+    font-size: 13px !important;
+    color: var(--ink) !important;
+    margin: 0 !important;
+    letter-spacing: 0.02em;
+}
+.status-line b { font-weight: 700; }
+.status-line code {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--ink);
+    background: transparent;
 }
-.status-line code { color: #FF5128; background: transparent; }
+.status-line .sep { color: var(--grey); margin: 0 8px; }
 .status-line .dot {
-    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
-    background: #FF5128; margin-right: 8px;
-    box-shadow: 0 0 10px rgba(255,81,40,0.6);
+    display: inline-block;
+    width: 9px; height: 9px;
+    background: var(--red);
+    margin-right: 10px;
+    vertical-align: baseline;
+}
+
+/* Progress bar in red, flat */
+.gradio-container .progress-bar { background: var(--red) !important; }
+
+@media (prefers-reduced-motion: reduce) {
+    .gradio-container * { transition: none !important; animation: none !important; }
 }
 
 footer { display: none !important; }
@@ -768,19 +873,20 @@ with gr.Blocks(title="Typotopia", theme=THEME, css=CSS) as demo:
     gr.HTML(
         """
         <div id="hero">
-          <p class="kicker">Generative type foundry</p>
-          <h1>Typo<em>topia</em></h1>
-          <p class="tag">
-            From a single <b>prompt</b> or a <b>control image</b> to a complete OpenType file.
-            FLUX.2-klein + custom LoRAs on <b>ZeroGPU</b> &rarr; potrace vectorization
-            &rarr; fontTools assembly with pure-vector kerning.
-          </p>
+          <div class="masthead">
+            <h1>Typotopia<span class="stop">.</span></h1>
+            <div class="meta">
+              <div class="row"><span class="k">Input</span><span class="v">Prompt / Control image</span></div>
+              <div class="row"><span class="k">Model</span><span class="v">FLUX.2-klein + LoRA</span></div>
+              <div class="row"><span class="k">Output</span><span class="v">OpenType · GPOS kerning</span></div>
+            </div>
+          </div>
         </div>
         """
     )
     with gr.Row(equal_height=False):
         with gr.Column(scale=1):
-            gr.HTML("<p class='eyebrow'>01 — Brief</p>")
+            gr.HTML("<p class='eyebrow'><span class='idx'>01</span>Brief</p>")
             prompt = gr.Textbox(
                 label="Prompt",
                 placeholder="e.g. a bold geometric sans inspired by brutalist concrete signage",
@@ -792,7 +898,7 @@ with gr.Blocks(title="Typotopia", theme=THEME, css=CSS) as demo:
                 random_seed = gr.Checkbox(label="Random seed", value=True)
             btn = gr.Button("Generate font", variant="primary", elem_classes=["go-btn"])
         with gr.Column(scale=1):
-            gr.HTML("<p class='eyebrow'>02 — Specimen</p>")
+            gr.HTML("<p class='eyebrow'><span class='idx'>02</span>Specimen</p>")
             status = gr.HTML(elem_classes=["status-line"])
             otf_file = gr.File(label="Download .otf", height=80)
             preview = gr.Image(label="Preview", type="pil", height=160)