From 674f4e1cd4d9a271ba76b466b2cda69af745134b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stig-=C3=98rjan=20Smelror?= Date: Tue, 19 May 2026 21:56:11 +0200 Subject: [PATCH] style(ui): remove uppercase text and refine typography Remove text-transform: uppercase from headings, buttons, labels, and navigation. Reduce letter-spacing throughout for a cleaner look. Replace text-stroke outline effects with solid colors. Remove decorative hero background blocks and scanline animation. Simplify hover effects on logo and buttons. --- public/styles/global.css | 149 +++++++-------------------------------- src/pages/docs.astro | 51 +++++++------- src/pages/index.astro | 60 ++++++++-------- 3 files changed, 80 insertions(+), 180 deletions(-) diff --git a/public/styles/global.css b/public/styles/global.css index f4c7853..e655141 100644 --- a/public/styles/global.css +++ b/public/styles/global.css @@ -1,6 +1,6 @@ /* ===== CSS Variables ===== */ :root { - /* Core Colors - High Contrast Terminal Aesthetic */ + /* Core Colors */ --color-bg: #0f0f0f; --color-bg-secondary: #151515; --color-bg-elevated: #1a1a1a; @@ -113,8 +113,8 @@ a { } .logo:hover .logo-image { - filter: drop-shadow(0 0 8px rgba(0, 221, 119, 0.4)); - transform: scale(1.05); + filter: drop-shadow(0 0 4px rgba(0, 221, 119, 0.3)); + transform: scale(1.03); } .logo-line-1, @@ -131,9 +131,7 @@ a { } .logo-line-2 { - color: transparent; - -webkit-text-stroke: 1.5px var(--color-text); - text-stroke: 1.5px var(--color-text); + color: var(--color-text-secondary); } .logo:hover .logo-line-1 { @@ -141,8 +139,7 @@ a { } .logo:hover .logo-line-2 { - -webkit-text-stroke: 1.5px var(--color-accent); - text-stroke: 1.5px var(--color-accent); + color: var(--color-accent); } .nav { @@ -154,8 +151,7 @@ a { color: var(--color-text-secondary); font-weight: 600; font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.02em; position: relative; } @@ -188,8 +184,7 @@ a { font-family: var(--font-mono); font-weight: 700 !important; font-size: 0.85rem !important; - text-transform: uppercase !important; - letter-spacing: 0.08em !important; + letter-spacing: 0.02em !important; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } @@ -216,58 +211,7 @@ a { } .hero-bg-elements { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; - z-index: 0; -} - -.hero-block { - position: absolute; - background: linear-gradient(135deg, var(--color-accent) 0%, transparent 100%); - opacity: 0.05; -} - -.hero-block-1 { - top: -20%; - right: -10%; - width: 60%; - height: 80%; - transform: rotate(15deg); -} - -.hero-block-2 { - bottom: -30%; - left: -15%; - width: 50%; - height: 70%; - transform: rotate(-25deg); - background: linear-gradient(135deg, var(--color-accent-alt) 0%, transparent 100%); -} - -.scanline { display: none; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 100%; - background: repeating-linear-gradient( - 0deg, - rgba(0, 221, 119, 0.02) 0px, - transparent 2px, - transparent 4px - ); - pointer-events: none; - animation: scanline 10s linear infinite; -} - -@keyframes scanline { - 0% { transform: translateY(0); } - 100% { transform: translateY(20px); } } .hero-content { @@ -280,9 +224,8 @@ a { font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-accent); - letter-spacing: 0.2em; + letter-spacing: 0.1em; margin-bottom: var(--space-md); - text-transform: uppercase; } .hero-title { @@ -296,7 +239,6 @@ a { font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; - text-transform: uppercase; } .title-line-1 { @@ -304,9 +246,7 @@ a { } .title-line-2 { - color: transparent; - -webkit-text-stroke: 2px var(--color-text); - text-stroke: 2px var(--color-text); + color: var(--color-text-secondary); } .title-accent { @@ -331,8 +271,7 @@ a { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; padding: 0.4rem 0.8rem; border: 1px solid var(--color-border); background: var(--color-bg-secondary); @@ -367,8 +306,7 @@ a { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; border: 2px solid var(--color-accent); position: relative; overflow: hidden; @@ -414,8 +352,7 @@ a { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; border: 2px solid var(--color-border); background: transparent; transition: all 0.3s ease; @@ -436,8 +373,7 @@ section { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent); - letter-spacing: 0.2em; - text-transform: uppercase; + letter-spacing: 0.15em; margin-bottom: var(--space-md); } @@ -445,7 +381,6 @@ section { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; line-height: 1.1; - text-transform: uppercase; letter-spacing: -0.02em; } @@ -465,8 +400,7 @@ section { } .showcase-card .feature-num { - -webkit-text-stroke: 1px var(--color-accent-blue); - text-stroke: 1px var(--color-accent-blue); + color: var(--color-accent-blue); } .showcase-card .feature-tag { @@ -524,8 +458,7 @@ section { padding: 0.75rem 1.5rem; border: 2px solid var(--color-accent-blue); background: rgba(0, 212, 255, 0.1); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; font-weight: 700; } @@ -703,9 +636,7 @@ section { font-family: var(--font-mono); font-size: 3rem; font-weight: 900; - color: transparent; - -webkit-text-stroke: 1px var(--color-accent); - text-stroke: 1px var(--color-accent); + color: var(--color-text-tertiary); line-height: 1; margin-bottom: var(--space-md); } @@ -714,7 +645,6 @@ section { font-size: 2rem; font-weight: 800; margin-bottom: var(--space-md); - text-transform: uppercase; letter-spacing: -0.01em; } @@ -734,7 +664,7 @@ section { background: var(--color-accent); color: var(--color-bg); font-weight: 700; - letter-spacing: 0.1em; + letter-spacing: 0.05em; } .feature-row { @@ -780,8 +710,7 @@ section { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-sm); - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0; } .feature-item p { @@ -795,8 +724,7 @@ section { } .feature-highlight .feature-num { - -webkit-text-stroke: 1px var(--color-accent-alt); - text-stroke: 1px var(--color-accent-alt); + color: var(--color-text-tertiary); } .feature-highlight::before { @@ -827,8 +755,7 @@ section { font-weight: 900; color: var(--color-bg); text-align: center; - letter-spacing: 0.1em; - text-transform: uppercase; + letter-spacing: 0.05em; } /* ===== Architecture Section ===== */ @@ -938,7 +865,6 @@ section { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--space-md); - text-transform: uppercase; letter-spacing: 0.02em; } @@ -1020,7 +946,6 @@ section { font-weight: 900; line-height: 1; margin-bottom: var(--space-xl); - text-transform: uppercase; letter-spacing: -0.02em; } @@ -1058,8 +983,7 @@ section { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-secondary); - letter-spacing: 0.15em; - text-transform: uppercase; + letter-spacing: 0.1em; margin-bottom: var(--space-sm); } @@ -1089,8 +1013,7 @@ section { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; } .pricing-action { @@ -1104,8 +1027,7 @@ section { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; transition: all 0.3s ease; position: relative; overflow: hidden; @@ -1167,7 +1089,6 @@ section { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; line-height: 1.1; - text-transform: uppercase; letter-spacing: -0.02em; } @@ -1231,7 +1152,6 @@ section { .platform-name { font-size: 1.75rem; font-weight: 800; - text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: var(--space-xs); } @@ -1248,8 +1168,7 @@ section { font-size: 0.7rem; color: var(--color-text-tertiary); margin-top: var(--space-xs); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; } .platform-action { @@ -1257,8 +1176,7 @@ section { font-size: 0.85rem; font-weight: 700; color: var(--color-accent); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; transition: all 0.3s ease; } @@ -1322,8 +1240,7 @@ section { font-family: var(--font-mono); margin-bottom: var(--space-md); color: var(--color-accent); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; } .footer-section p { @@ -1478,17 +1395,9 @@ section { } /* ===== Animations & Effects ===== */ -@keyframes pulse-glow { - 0%, 100% { - box-shadow: 0 0 15px rgba(0, 221, 119, 0.2); - } - 50% { - box-shadow: 0 0 25px rgba(0, 221, 119, 0.4); - } -} .feature-primary:hover { - animation: pulse-glow 2s infinite; + box-shadow: 0 0 20px rgba(0, 221, 119, 0.12); } /* Reduced motion support */ @@ -1500,8 +1409,4 @@ section { animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } - - .scanline { - animation: none; - } } diff --git a/src/pages/docs.astro b/src/pages/docs.astro index cccbcbe..1decf69 100644 --- a/src/pages/docs.astro +++ b/src/pages/docs.astro @@ -10,7 +10,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
User Guide

- DOCUMENTATION + Documentation Get Started

@@ -24,11 +24,11 @@ import BaseLayout from '../layouts/BaseLayout.astro';

-
01 // The Concept
+
The Concept

AI-Native Editor

-
CORE_PRINCIPLE
+
Core Principle

Zaguán Blade is not just a text editor with a chat sidebar. It is designed from the ground up to allow an AI agent to "live" inside your editor. @@ -60,7 +60,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';

-
02 // Getting Started
+
Getting Started

Quick Start Guide

@@ -98,7 +98,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
-
03 // The Interface
+
The Interface

Interface Overview

@@ -119,7 +119,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
💻

Center Stage

- EDITOR + Editor

High-performance CodeMirror 6 editor with syntax highlighting. Diff Blocks appear inline when the AI proposes changes.

@@ -128,7 +128,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
🤖

Right Panel

- AI_ASSISTANT + AI Assistant
  • Chat - Main communication channel
    • @@ -141,7 +141,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
    ⌨️

    Bottom Panel

    - TERMINAL + Terminal

    Integrated terminal for running commands. The AI can see and interact with this terminal when executing commands.

@@ -152,7 +152,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
-
04 // Keyboard Shortcuts
+
Keyboard Shortcuts

Keyboard Shortcuts

@@ -206,7 +206,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
-
05 // @ Commands
+
Commands

Special Commands

Type @ in the chat input to access these special commands:

@@ -226,7 +226,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
-
06 // Working with AI
+
Working with AI

AI Collaboration

@@ -260,7 +260,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
-
07 // Chat Modes
+
Chat Modes

Chat Modes

Zaguán Blade supports two chat modes accessible from the Command Center:

@@ -284,7 +284,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
-
08 // Settings
+
Settings

Configuration

@@ -342,7 +342,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
🧠

Context Tab

- PER-PROJECT + Per-project
  • Max Context Tokens - Control context sent to AI (2K-32K)
    • @@ -370,7 +370,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
    -
    09 // Project Instructions
    +
    Project Instructions

    Teach the AI About Your Project

    @@ -403,7 +403,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
    -
    10 // Editor Features
    +
    Editor Features

    Additional Features

    @@ -440,7 +440,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
    -
    11 // Screenshot Capture
    +
    Screenshot Capture

    Screenshot Capture

    Attach screenshots to your chat messages to give the AI visual context. Access capture options from the Feature Menu (grid icon) in the Command Center.

    @@ -478,7 +478,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
    -
    12 // Privacy & Data
    +
    Privacy & Data

    Privacy

    @@ -509,7 +509,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
    -
    13 // Local AI System Prompts
    +
    Local AI System Prompts

    Custom System Prompts

    @@ -586,7 +586,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
    -
    14 // Tool Calls Reference
    +
    Tool Calls Reference

    Tool Calls Reference

    @@ -611,7 +611,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
    -
    15 // Known Bugs
    +
    Known Bugs

    Known Issues

    As an alpha release, there are some known limitations and bugs we're actively working on:

    @@ -650,11 +650,11 @@ import BaseLayout from '../layouts/BaseLayout.astro';
    -
    16 // Support & Feedback
    +
    Support & Feedback

    Alpha Release

    - FEATURE_INCOMPLETE + Alpha

    We define "Alpha" as "Feature incomplete, but good enough to be useful." @@ -740,7 +740,6 @@ import BaseLayout from '../layouts/BaseLayout.astro'; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1.1; - text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: var(--space-xl); } @@ -867,9 +866,7 @@ import BaseLayout from '../layouts/BaseLayout.astro'; font-family: var(--font-mono); font-size: 3rem; font-weight: 900; - color: transparent; - -webkit-text-stroke: 1px var(--color-accent); - text-stroke: 1px var(--color-accent); + color: var(--color-accent); line-height: 1; margin-bottom: var(--space-md); } diff --git a/src/pages/index.astro b/src/pages/index.astro index 3824bf1..ba22e1a 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -15,17 +15,17 @@ const version = pkg.version ?? "";

    -
    LOCAL-FIRST AI CODE EDITOR
    +
    Local-First AI Code Editor

    - YOUR CODE STAYS YOURS. - CLOUD WHEN YOU WANT IT. + Your code stays yours. + Cloud when you want it.

    - LOCAL-FIRST + Local-First / - NO API KEY REQUIRED + No API Key Required / - ANY MODEL PROVIDER + Any Model Provider

    Most AI editors ship your context to a server you don't control. @@ -37,9 +37,9 @@ const version = pkg.version ?? "";

    - [ START WITH LOCAL AI → ] + Get Started with Local AI - [ SEE BENCHMARK → ] + View Benchmarks
    @@ -58,7 +58,7 @@ const version = pkg.version ?? "";
    -
    01 // Why Blade
    +
    Why Blade

    Why Another Editor
    Exists

    @@ -79,7 +79,7 @@ const version = pkg.version ?? "";
    -

    THE LIGHTWEIGHT DIFFERENCE

    +

    The Lightweight Difference

    Engineers trust metrics. Here is what idle resource usage looks like:

    @@ -106,7 +106,7 @@ const version = pkg.version ?? "";
    -

    NOT FOR EVERYONE

    +

    Not for Everyone

    • → @@ -130,15 +130,14 @@ const version = pkg.version ?? "";
      -
      02 // Workflow
      +
      Workflow

      What It's Actually
      Good At

      -
      01
      -

      WHAT IT'S ACTUALLY GOOD AT

      +

      What It's Actually Good At

      • + Refactoring across multiple files.
      • + Updating changelogs and build configs.
        • @@ -147,8 +146,7 @@ const version = pkg.version ?? "";
      -
      02
      -

      TYPICAL FLOW IN BLADE

      +

      Typical Flow in Blade

      1. Ask for change.
      2. AI calls project tools.
        3. @@ -162,7 +160,7 @@ const version = pkg.version ?? "";

        Zaguán Blade is under heavy development. Expect rapid updates, occasional breaking changes, and a fast feedback loop as we build toward v1.0.0. @@ -174,12 +172,12 @@ const version = pkg.version ?? "";

        -
        03 // Architecture
        +
        Architecture
        1
        -
        ACTIVE
        +
        Active

        Zaguán Blade (UI)

        Tauri v2 + Vite + React
        User interface only.
        Lightning fast.

        @@ -189,7 +187,7 @@ const version = pkg.version ?? "";
        2
        -
        ACTIVE
        +
        Active

        zcoderd (AI daemon)

        Go server
        State management
        Tool execution & AI

        @@ -199,7 +197,7 @@ const version = pkg.version ?? "";
        3
        -
        ACTIVE
        +
        Active

        Model Provider

        Local or remote.
        Ollama, Anthropic, OpenAI, etc.
        You choose.

        @@ -212,16 +210,16 @@ const version = pkg.version ?? "";
        -
        04 // Subscription Model
        -

        ZAGUÁN AI
        REQUIRED

        +
        Subscription Model
        +

        Zaguán AI
        Required

        -
        WITHOUT SUBSCRIPTION
        +
        Without Subscription
        Manual edits, no AI features
        -
        WITH SUBSCRIPTION
        +
        With Subscription
        AI tool calls, code review, multi-model access
        @@ -243,18 +241,18 @@ const version = pkg.version ?? "";
        -
        05 // Download Blade
        +
        Download Blade

        Get Blade
        for Your OS

        🪟
        -
        WINDOWS
        +
        Windows
        v{version} / x64, arm64
        MSI, EXE
        -
        DOWNLOAD →
        +
        Download →
         @@ -264,17 +262,17 @@ const version = pkg.version ?? "";
        v{version} / arm64 (Apple Silicon)
        DMG, TAR.GZ
        -
        DOWNLOAD →
        +
        Download →
        🐧
        -
        LINUX
        +
        Linux
        v{version} / amd64
        DEB, RPM, AppImage
        -
        DOWNLOAD →
        +
        Download →