Lancer Notes
Design Guidelines
Build 6510

Design Guidelines

The complete design system for Lancer Notes — including all tokens, component patterns, spacing scales, and visual language that make up the application's interface.

Colors

All colors are defined as CSS custom properties on :root and overridden under html.dark-mode.

Accent / Brand

Accent Primary --color-accent-primary #007acc
Accent Hover --color-accent-hover #005a9e
Accent Darker --color-accent-darker #003f6e
Status Bar --color-status-bar-bg #005a9e

Backgrounds

BG Primary --color-bg-primary #f0f0f0 / #181a1b
BG Secondary --color-bg-secondary #fff / #101214
BG Tertiary --color-bg-tertiary #f8f8f8 / #23272a
BG Hover --color-bg-hover #e8e8e8 / #2d3136
Menu BG --color-menu-bg #e0e0e0 / #141617

Text

Text Primary --color-text-primary #111 / #e0e0e0
Text Secondary --color-text-secondary #222 / #ddd
Text Muted --color-text-muted #666 / #888
Text Disabled --color-text-disabled #6b6b6b / #a0a0a0

Borders

Border Light--color-border-light#eee / #333
Border Primary--color-border-primary#ddd / #444
Border Secondary--color-border-secondary#ccc / #555
Border Dark--color-border-dark#999 / #666

Semantic

Success--color-success#22c55e
Danger--color-danger#cc0000
Match BG--color-match-bg#fffb91
Match Current--color-match-current-bg#ffcf66

Typography

The app uses Segoe UI as the primary UI font and a monospace stack for the editor and code blocks.

UI Font — Segoe UI

Body / Default — 14–15px, line-height 1.5

The quick brown fox jumps over the lazy dog. Lancer Notes — Build 6510.

Small UI text — 12–13px

Status bar · Dropdown labels · Toolbar buttons · Pane headers

Menu items — 13–14px, font-weight 600

File    Edit    View    Insert    Format    Help

Editor / Code Font — Monospace Stack

Editor — 14px, line-height 1.5

# Heading 1
**Bold** _Italic_ `inline code`
> Blockquote text here

Code blocks — 14px, line-height 1.45
function greet(name) {
  return `Hello, ${name}!`;
}

Preview Markdown Headings

Preview heading scale
H1 — 2em
H2 — 1.5em
H3 — 1.3em
H4 — 1.1em
H5 — 1em
H6 — 0.9em

Spacing Scale

A compact 5-step scale covering all padding, gap, and margin needs.

--space-xs
4px
--space-sm
8px
--space-md
12px
--space-lg
16px
--space-xl
20px

Shadows

Four elevation levels from subtle cards to modal overlays.

sm

--shadow-sm

Tooltips, swatch cards

md

--shadow-md

Dialogs, dropdowns

lg

--shadow-lg

Menus, submenus

xl

--shadow-xl

Fullscreen popup

Border Radius

Four radius values used consistently across all interactive elements.

--radius-sm
3px
Code blocks, cells
--radius-md
4px
Buttons, inputs
--radius-lg
6px
Dropdowns, menus
--radius-xl
10px
Fullscreen popups

Transitions

Three speed levels for hover, open/close, and theme-switch animations. Hover the cards to feel the difference.

Fast
--transition-fast · 0.2s
Medium
--transition-medium · 0.25s
Slow
--transition-slow · 0.3s

Z-Index Scale

Named layers prevent stacking order conflicts between components.

Variable Value Used for
--z-dropdown-menu100Menu bar dropdowns & submenus
--z-flag-menu104Find & Replace flag picker
--z-history-menu105Find & Replace history dropdown
--z-popup-overlay999Dialog backdrop overlay
--z-dialog1000Modal dialogs (alert, confirm, go-to-line)
--z-find-replace1003Find & Replace bar + Zoom toolbar
--z-fullscreen-popup2000Help / Changelog fullscreen overlay
--z-animation10000Checkmark SVG animations

Scrollbar

Custom 10px webkit scrollbar with a 2px border gap matching the track background for a "floating" thumb effect.

Thumb opacity: rgba(0,0,0,0.25) light · rgba(255,255,255,0.18) dark  |  Width: --scrollbar-width: 10px
Scroll me ↓
Line 2 · scrollbar demo
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9 · end of demo content

Toolbar Buttons

Inline formatting buttons inside the menu bar — transparent by default, highlighted on hover.

Toolbar button states
  • Padding: 6px 12px (icon-only: 6px 6px)
  • Icon size inside toolbar: 18px × 18px (overrides global 24px)
  • Hover: --color-bg-hover background
  • Active/pressed: --color-bg-active background
  • Disabled: no opacity change; cursor: not-allowed

Status Bar

A solid accent-colored bar at the bottom of the app showing editor state.

Status bar
Markdown Editor · Lancer Notes Ln 42, Col 18  |  1,240 words  |  UTF-8
  • Background: --color-status-bar-bg (#005a9e)
  • Text: always white (#fff)
  • Font size: 12px, padding: 4px 16px

Dialogs

Modal dialogs (alert, confirm, input) use a shared .generic-dialog pattern with a backdrop overlay.

Dialog example

Unsaved Changes

You have unsaved changes. Do you want to save before closing?

  • Background: --color-dialog-bg
  • Appears centered via translate(-50%, -50%) with scale-in animation
  • Backdrop: #popup-overlay at z-index 999, rgba(0,0,0,0.5)
  • Primary button: --color-accent-primary background, white text
  • Fixed width: .dialog-400 { width: 400px }

Find & Replace

A floating bar that appears at top or bottom of the editor with search highlights.

Text match highlights

The editor supports find and replace. Navigate with prev/next to jump to the current match, and use the flag menu to toggle case-sensitive, whole-word, or regex find modes.

  • Bar z-index: --z-find-replace: 1003
  • Match: --color-match-bg (#fffb91 / #3a3a2a)
  • Current match: --color-match-current-bg (#ffcf66 / #5a4b1a)
  • Compact mode collapses the Replace row via max-height animation
  • Position can be top or bottom; flag menu and history dropdown switch accordingly

Preview Content

The rendered Markdown pane mirrors GitHub-style document presentation.

Pane header
PREVIEW

Pane header: bg --color-bg-tertiary, 12px bold muted text.

Blockquote
This is a blockquote. It has a left border colored --color-blockquote-border and muted text.
Table
Feature Light Mode Dark Mode
Header bg#f8f8f8#1e2225
Even row#f8f8f8#16181a
Border#ddd#444
Code block
const greeting = (name) => `Hello, ${name}!`;
console.log(greeting('Lancer Notes'));

Table Grid Selector

5×5 grid for visually picking table dimensions before insertion.

Table grid picker (hover cells to see selection)
3 × 2
Cells: 24×24px, --color-bg-tertiary bg, --color-border-secondary border
Hover / selected: --color-accent-primary bg + border
Active: 0.8 opacity + glow shadow

Icons

Lancer Notes uses Material Symbols Rounded (ligature font) for all UI icons.

Icon sizes used in the app
menu 16px
Menu icons
edit 18px
Toolbar
compress 20px
Compact toggle
dark_mode 24px
Default

The .material-symbols-rounded class fixes width to match font-size and sets overflow:hidden to prevent ligature text flash (FOUC).