diff --git a/webapp/src/styles.css b/webapp/src/styles.css index 3dd0475..c817b75 100644 --- a/webapp/src/styles.css +++ b/webapp/src/styles.css @@ -810,6 +810,101 @@ h4 { background: transparent; } +/* Typography refinement: stronger scan targets for dense vault/admin surfaces. */ +body { + font-family: var(--font-sans); + font-size: var(--font-base); + font-weight: 400; +} + +button, +input, +select, +textarea { + font: inherit; +} + +.side-link, +.side-group-trigger, +.side-sub-link, +.tree-btn, +.mobile-settings-link, +.backup-destination-item, +.backup-browser-entry, +.sort-menu-item, +.create-menu-item, +.nav-layout-option { + font-size: var(--font-sm); + font-weight: 600; + letter-spacing: 0; +} + +.side-link.active, +.side-group-trigger.active, +.side-sub-link.active, +.tree-btn.active, +.mobile-tab.active, +.mobile-settings-link.active, +.nav-layout-option.active { + font-weight: 700; +} + +.sidebar-title, +.list-count, +.field > span, +.table th, +.dialog-warning-kicker, +.backup-recommendation-group-title { + font-weight: 700; + letter-spacing: 0; +} + +.list-title { + color: var(--text); + font-size: var(--font-base); + font-weight: 600; + letter-spacing: 0; +} + +.list-sub, +.detail-sub, +.backup-destination-meta, +.totp-code-username, +.field-help, +.settings-field-note { + font-size: var(--font-sm); + line-height: var(--leading-snug); +} + +.btn, +.input, +.search-input, +.user-chip, +.network-status-badge { + font-weight: 600; + letter-spacing: 0; +} + +.btn-primary, +.btn-danger, +.btn.full, +.topbar-actions .btn, +.network-status-badge { + font-weight: 700; +} + +.card h4, +.settings-module h3, +.section-head h3, +.section-head h4, +.detail-title, +.totp-code-name, +.backup-destination-name, +.mobile-sidebar-title { + font-weight: 700; + letter-spacing: 0; +} + .toast-item, .dialog-card { border-radius: var(--radius-lg); diff --git a/webapp/src/styles/base.css b/webapp/src/styles/base.css index ee7654d..6ae2213 100644 --- a/webapp/src/styles/base.css +++ b/webapp/src/styles/base.css @@ -8,11 +8,12 @@ body, @apply m-0 h-full w-full p-0; color: var(--text); background: var(--bg-accent); - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; + font-family: var(--font-sans); font-size: var(--font-base); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); - font-feature-settings: 'liga' 1, 'kern' 1; + font-feature-settings: 'liga' 1, 'kern' 1, 'calt' 1; + font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -33,8 +34,8 @@ body.dialog-open { } h1, h2, h3, h4, h5, h6 { - font-weight: 600; - letter-spacing: var(--tracking-tight); + font-weight: 700; + letter-spacing: 0; line-height: var(--leading-tight); margin: 0; } diff --git a/webapp/src/styles/tokens.css b/webapp/src/styles/tokens.css index 0192700..1a35dcc 100644 --- a/webapp/src/styles/tokens.css +++ b/webapp/src/styles/tokens.css @@ -46,16 +46,22 @@ --dur-slow: 350ms; --actions-gap: clamp(5px, calc((100vw - 520px) * 1), 10px); + /* Typography Families */ + --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', + 'Noto Sans CJK SC', 'Noto Sans SC', Arial, sans-serif; + --font-mono: 'SFMono-Regular', 'Cascadia Code', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace; + /* Typography Scale */ --font-xs: 11px; - --font-sm: 13px; - --font-base: 14px; - --font-md: 15px; - --font-lg: 16px; - --font-xl: 18px; - --font-2xl: 20px; - --font-3xl: 24px; - --font-4xl: 28px; + --font-sm: 14px; + --font-base: 15px; + --font-md: 16px; + --font-lg: 17px; + --font-xl: 19px; + --font-2xl: 21px; + --font-3xl: 25px; + --font-4xl: 29px; /* Line Heights */ --leading-tight: 1.25; @@ -65,11 +71,11 @@ --leading-loose: 1.75; /* Letter Spacing */ - --tracking-tighter: -0.02em; - --tracking-tight: -0.01em; + --tracking-tighter: 0; + --tracking-tight: 0; --tracking-normal: 0; - --tracking-wide: 0.01em; - --tracking-wider: 0.02em; + --tracking-wide: 0; + --tracking-wider: 0; /* Spacing Scale */ --space-1: 4px;