/* * OISIF GRAPHICAL BIBLE — Design Tokens * ====================================== * * The canonical Oisif visual language. Import this file into any app * that needs to look like it belongs in the Oisif ecosystem. * * USAGE: * * * This file imports Doto from Google Fonts automatically. * No additional font imports needed. * * EMBEDDING: * Apps embedded as iframes in the semantic zoom board import this * file to share the visual language while staying fully isolated. * The iframe provides DOM/JS isolation. The tokens provide unity. * * RULES: * - Backgrounds: --oisif-bg for page, --oisif-surface for panels * - Depth: hybrid shadows (raised/inset), never borders * - Display text: var(--oisif-font-display) — Doto, uppercase, letter-spacing 2-3px * - Body text: var(--oisif-font-body) — Courier New * - Radius: 1-2px (almost sharp — the Oisif signature) * - Hover: brighter shadow * - Active: inset shadow (pressed) * - Noise: optional but recommended (see Noise section below) * - Colors: pure grays for base, warm accent, muted pastels for categories * * NODE TYPES (for semantic zoom board): * T(id, label, opts) — Category node (circle, has children) * L(id, label, content) — Leaf node (card, has markdown content) * E(id, label, url) — Embed node (card, has iframe to external app) */ @import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap'); :root { /* ── Colors ─────────────────────────────────────────────── */ --oisif-bg: #0a0a0a; /* page background — near black */ --oisif-fg: #e4e4e4; /* primary text */ --oisif-dim: #6b6b6b; /* secondary text, labels */ --oisif-accent: #c8bfa9; /* warm gold — primary accent */ --oisif-surface: #0e0e0e; /* elevated panels, cards, bars */ /* Semantic / category colors */ --oisif-color-method: #c8bfa9; --oisif-color-products: #7eb8da; --oisif-color-projects: #a8d8a8; --oisif-color-lab: #d4a8d4; --oisif-color-about: #da9a7e; /* Text hierarchy */ --oisif-text-muted: #8b8b8b; /* body text in panels */ --oisif-text-hint: rgba(255, 255, 255, 0.28); /* subtle labels, tertiary text */ --oisif-text-sep: rgba(255, 255, 255, 0.08); /* separators, dividers */ /* Overlay */ --oisif-overlay: rgba(10, 10, 10, 0.85); /* backdrop for modals/readers */ /* ── Typography ─────────────────────────────────────────── */ --oisif-font-display: 'Doto', monospace; /* headers, labels, UI chrome */ --oisif-font-body: 'Courier New', monospace; /* body text, code, inputs */ --oisif-font-size: 10px; --oisif-font-size-sm: 8px; --oisif-font-size-xs: 7px; --oisif-font-size-lg: 12px; --oisif-font-size-xl: 14px; --oisif-font-size-xxl: 15px; --oisif-letter-spacing: 1px; --oisif-letter-spacing-md: 2px; --oisif-letter-spacing-lg: 3px; /* ── Geometry ────────────────────────────────────────────── */ --oisif-radius: 1px; --oisif-radius-lg: 2px; --oisif-grid-size: 28px; /* ── Shadow System (Neumorphic Core) ────────────────────── */ /* Edge highlight/shadow primitives */ --oisif-h-light: rgba(255, 255, 255, 0.07); --oisif-h-dark: rgba(0, 0, 0, 0.6); /* Raised element — panels, cards */ --oisif-shadow-out: 6px 6px 14px rgba(0, 0, 0, 0.5), -4px -4px 12px rgba(255, 255, 255, 0.025), inset 1px 1px 0 var(--oisif-h-light), inset -1px -1px 0 var(--oisif-h-dark); /* Inset element — wells, recessed areas */ --oisif-shadow-in: inset 4px 4px 10px rgba(0, 0, 0, 0.5), inset -4px -4px 10px rgba(255, 255, 255, 0.02), inset 1px 1px 0 var(--oisif-h-dark), inset -1px -1px 0 var(--oisif-h-light); /* Small raised — compact elements */ --oisif-shadow-out-sm: 3px 3px 8px rgba(0, 0, 0, 0.45), -3px -3px 8px rgba(255, 255, 255, 0.02), inset 1px 1px 0 var(--oisif-h-light), inset -1px -1px 0 var(--oisif-h-dark); /* Small inset — compact recessed areas */ --oisif-shadow-in-sm: inset 2px 2px 6px rgba(0, 0, 0, 0.45), inset -2px -2px 6px rgba(255, 255, 255, 0.02), inset 1px 1px 0 var(--oisif-h-dark), inset -1px -1px 0 var(--oisif-h-light); /* Button raised — resting state */ --oisif-btn-out: 4px 4px 10px rgba(0, 0, 0, 0.45), -3px -3px 8px rgba(255, 255, 255, 0.02), inset 1px 1px 0 var(--oisif-h-light), inset -1px -1px 0 var(--oisif-h-dark), inset 2px 2px 0 rgba(255, 255, 255, 0.03), inset -2px -2px 0 rgba(0, 0, 0, 0.3); /* Button pressed — active state */ --oisif-btn-in: inset 3px 3px 6px rgba(0, 0, 0, 0.5), inset -3px -3px 6px rgba(255, 255, 255, 0.015), inset 1px 1px 0 var(--oisif-h-dark), inset -1px -1px 0 var(--oisif-h-light), inset 2px 2px 0 rgba(0, 0, 0, 0.25), inset -2px -2px 0 rgba(255, 255, 255, 0.02); /* ── Noise Texture ──────────────────────────────────────── */ /* * Apply as a ::after pseudo-element on body or a container: * * body::after { * content: ''; * position: fixed; * inset: 0; * opacity: var(--oisif-noise-opacity); * background-image: var(--oisif-noise); * background-size: var(--oisif-noise-size); * pointer-events: none; * z-index: 9998; * } */ --oisif-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --oisif-noise-size: 256px; --oisif-noise-opacity: 0.02; /* ── Dot Grid ───────────────────────────────────────────── */ /* * Apply as background on a grid layer: * * .grid { * background-image: radial-gradient(circle, var(--oisif-dim) 0.5px, transparent 0.5px); * background-size: var(--oisif-grid-size) var(--oisif-grid-size); * opacity: 0.03; * } */ /* ── Transitions ────────────────────────────────────────── */ --oisif-transition-fast: 0.15s ease; --oisif-transition: 0.2s ease; }