platform-admin/boc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ddfe99f9f2a921ceca113f933086ba4a1ee9be57
boc/design/landvex-tokens.css
T
Bernt bae705aa97 ARCHITECTURE: NFC roadmap, edge AI, audit logging 
- Add NFC ePassport roadmap (ICAO 9303, eIDAS)
- Add TensorFlow.js edge face detection (BlazeFace)
- Add structured audit logger (GDPR-compliant)
- Risk scoring support

Part of KYC Apple Native UX v1.1.0
2026-06-29 16:24:48 +00:00

190 lines
8.2 KiB
CSS
Raw Blame History

/**
* Landvex Design Tokens
* German Enterprise / Siemens-vibes
* Precision, clarity, systematic structure
*
* Usage: Import this file first, then apply tokens in component CSS.
* All values are CSS custom properties — never hardcode raw values.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');
:root {
/* ─── GRAYSCALE (Light theme — white → deep carbon) ─────────────────────── */
--lv-white: #FFFFFF;
--lv-gray-50: #F7F7F7; /* Page background */
--lv-gray-100: #EFEFEF; /* Subtle surface tint */
--lv-gray-200: #DEDEDE; /* Separator lines (thin) */
--lv-gray-400: #9A9A9A; /* Muted / secondary text */
--lv-gray-600: #5A5A5A; /* Caption / label text */
--lv-gray-800: #222222; /* Primary text */
--lv-deep-carbon: #111111; /* Display headlines */
/* ─── ACCENT COLORS ──────────────────────────────────────────────────────── */
--lv-enterprise-blue: #1B4FBF; /* Primary — links, CTAs, active states */
--lv-enterprise-dark: #0F2E6E; /* Hover / pressed state for blue */
--lv-accent-secondary: #3A3A3A; /* Secondary — dark borders, icon fills */
/* Accent with alpha */
--lv-blue-10: rgba(27, 79, 191, 0.10);
--lv-blue-20: rgba(27, 79, 191, 0.20);
/* ─── SEMANTIC COLORS ────────────────────────────────────────────────────── */
--lv-bg: var(--lv-white);
--lv-bg-surface: var(--lv-gray-50);
--lv-bg-subtle: var(--lv-gray-100);
--lv-text-primary: var(--lv-gray-800);
--lv-text-display: var(--lv-deep-carbon);
--lv-text-muted: var(--lv-gray-600);
--lv-text-placeholder: var(--lv-gray-400);
--lv-text-link: var(--lv-enterprise-blue);
--lv-border: var(--lv-gray-200);
--lv-border-strong: var(--lv-gray-400);
--lv-border-accent: var(--lv-enterprise-blue);
/* ─── 8PX BASE GRID ──────────────────────────────────────────────────────── */
--lv-grid-base: 8px;
/* Spacing — all multiples of 8px grid base */
--lv-space-1: 8px; /* 1 unit */
--lv-space-2: 16px; /* 2 units */
--lv-space-3: 24px; /* 3 units */
--lv-space-4: 32px; /* 4 units */
--lv-space-5: 40px; /* 5 units */
--lv-space-6: 48px; /* 6 units */
--lv-space-8: 64px; /* 8 units */
--lv-space-10: 80px; /* 10 units */
--lv-space-12: 96px; /* 12 units */
--lv-space-16: 128px; /* 16 units */
/* Legacy aliases (sm/md/lg) */
--lv-space-sm: var(--lv-space-1);
--lv-space-md: var(--lv-space-3);
--lv-space-lg: var(--lv-space-6);
/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
/* Font stacks */
--lv-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--lv-font-serif: 'IBM Plex Serif', 'Georgia', 'Times New Roman', serif;
--lv-font-mono: 'IBM Plex Mono', 'Courier New', monospace;
/* Type scale — LOCKED, same breakpoints as quiXzoom */
--lv-text-xs: 12px;
--lv-text-sm: 16px;
--lv-text-md: 24px;
--lv-text-lg: 48px;
--lv-text-xl: 64px;
/* Font weights */
--lv-weight-light: 300;
--lv-weight-regular: 400;
--lv-weight-medium: 500;
--lv-weight-semibold: 600;
--lv-weight-bold: 700;
/* Line heights — high density, enterprise-grade readability */
--lv-leading-tight: 1.2; /* Display headlines */
--lv-leading-snug: 1.35; /* Section headings */
--lv-leading-base: 1.55; /* Body text (signature Landvex value) */
--lv-leading-relaxed: 1.7; /* Long-form editorial */
/* Letter spacing */
--lv-tracking-tight: -0.01em; /* Large display */
--lv-tracking-normal: 0em;
--lv-tracking-wide: 0.04em; /* Labels, caps */
--lv-tracking-widest: 0.10em; /* Overline / eyebrow */
/* ─── SEPARATOR LINES ────────────────────────────────────────────────────── */
/* Thin horizontal rules — core visual grammar of Landvex */
--lv-separator: 1px solid var(--lv-border);
--lv-separator-strong: 1px solid var(--lv-border-strong);
--lv-separator-accent: 2px solid var(--lv-enterprise-blue);
/* ─── EASING ──────────────────────────────────────────────────────────────── */
/* Precise, measured — no drama */
--lv-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--lv-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--lv-ease-in: cubic-bezier(0.4, 0, 1, 1);
/* Duration */
--lv-duration-fast: 120ms;
--lv-duration-base: 200ms;
--lv-duration-slow: 350ms;
/* ─── BORDER RADIUS ──────────────────────────────────────────────────────── */
/* Enterprise: minimal rounding, precision-first */
--lv-radius-none: 0px;
--lv-radius-sm: 2px;
--lv-radius-md: 4px;
--lv-radius-lg: 8px;
--lv-radius-pill: 9999px;
/* ─── SHADOW SYSTEM ──────────────────────────────────────────────────────── */
/* Light-theme shadows — subtle, structural, never decorative */
--lv-shadow-none: none;
--lv-shadow-xs:
0 1px 2px rgba(0, 0, 0, 0.06),
0 0 1px rgba(0, 0, 0, 0.04);
--lv-shadow-sm:
0 1px 3px rgba(0, 0, 0, 0.08),
0 1px 2px rgba(0, 0, 0, 0.05);
--lv-shadow-md:
0 4px 8px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.05),
0 0 1px rgba(0, 0, 0, 0.04);
--lv-shadow-lg:
0 8px 24px rgba(0, 0, 0, 0.08),
0 4px 8px rgba(0, 0, 0, 0.05),
0 0 1px rgba(0, 0, 0, 0.04);
/* Focused / interactive — blue outline */
--lv-shadow-focus:
0 0 0 3px var(--lv-blue-20);
/* ─── GRID / LAYOUT ──────────────────────────────────────────────────────── */
--lv-container-sm: 640px;
--lv-container-md: 960px;
--lv-container-lg: 1200px;
--lv-container-xl: 1440px;
--lv-column-gap: var(--lv-space-3); /* 24px gutter */
--lv-columns: 12;
/* ─── Z-INDEX SCALE ──────────────────────────────────────────────────────── */
--lv-z-base: 0;
--lv-z-raised: 10;
--lv-z-overlay: 100;
--lv-z-modal: 200;
--lv-z-toast: 300;
/* ─── TRANSITIONS ────────────────────────────────────────────────────────── */
--lv-transition-color:
color var(--lv-duration-fast) var(--lv-ease-standard),
background var(--lv-duration-fast) var(--lv-ease-standard),
border-color var(--lv-duration-fast) var(--lv-ease-standard);
--lv-transition-transform:
transform var(--lv-duration-base) var(--lv-ease-standard);
--lv-transition-shadow:
box-shadow var(--lv-duration-base) var(--lv-ease-standard);
}
/* ─── UTILITY: APPLY LIGHT THEME ─────────────────────────────────────────── */
.lv-theme {
background-color: var(--lv-bg);
color: var(--lv-text-primary);
font-family: var(--lv-font-sans);
font-size: var(--lv-text-sm);
line-height: var(--lv-leading-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
Reference in New Issue View Git Blame Copy Permalink