/* ===================================================================== JPS Design System — Core Tokens Praxis Dr. med. Jan Philipp Scacchi, Bern Facharzt FMH für Orthopädie und Traumatologie · Schulter und Ellenbogen ===================================================================== */ /* Webfont — Mulish (Google Fonts substitute for the geometric humanist sans used in the original logo). Inter is paired as a UI fallback. */ @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap'); :root { /* ---------------------------------------------------------------- COLOR — Brand Drawn directly from the logo. Use sparingly. The brand reads calm + clinical; saturation lives only in the two semicircles. ---------------------------------------------------------------- */ --jps-ink: #2A3D4E; /* primary navy, the wordmark colour */ --jps-ink-soft: #3C5063; /* slightly lifted ink for long body */ --jps-steel: #8595A5; /* subtitle / supportive blue-grey */ --jps-blue: #B5C5D3; /* soft blue — left semicircle */ --jps-blue-tint: #DCE3EB; /* 35 % blue on bone — section wash */ --jps-taupe: #D5C8BD; /* warm taupe — right semicircle */ --jps-taupe-tint: #ECE5DE; /* 40 % taupe on bone — cards */ /* ---------------------------------------------------------------- COLOR — Neutrals (warm-cool balanced, never pure grey) ---------------------------------------------------------------- */ --jps-bone: #FAF8F5; /* page background */ --jps-paper: #FFFFFF; /* card / sheet */ --jps-mist: #F2F0EC; /* alternate band */ --jps-line: #E4E0DA; /* hairline borders */ --jps-line-strong:#CCC6BD; /* stronger borders, dividers */ --jps-mute: #6B7886; /* muted body */ --jps-mute-2: #9AA4B0; /* placeholder, helper text */ /* ---------------------------------------------------------------- COLOR — Semantic ---------------------------------------------------------------- */ --jps-success: #5E8B6B; /* heilung — sage healing green */ --jps-warning: #C28A4D; /* cautious amber, never neon */ --jps-danger: #B05656; /* terracotta clinical red */ --jps-info: #6B86A6; /* deeper blue for notes */ /* ---------------------------------------------------------------- COLOR — Semantic role aliases (preferred for components) ---------------------------------------------------------------- */ --fg-1: var(--jps-ink); --fg-2: var(--jps-ink-soft); --fg-3: var(--jps-mute); --fg-4: var(--jps-mute-2); --bg-1: var(--jps-bone); --bg-2: var(--jps-paper); --bg-3: var(--jps-mist); --line-1: var(--jps-line); --line-2: var(--jps-line-strong); --accent: var(--jps-ink); --accent-soft: var(--jps-blue); --accent-warm: var(--jps-taupe); /* ---------------------------------------------------------------- TYPOGRAPHY — Families Mulish is the working substitute for the wordmark's geometric humanist sans. Cormorant Garamond is reserved for editorial pull-quotes / case-story callouts and is OPTIONAL. ---------------------------------------------------------------- */ --font-sans: "Mulish", "Avenir Next", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Cormorant Garamond", "Georgia", serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* ---------------------------------------------------------------- TYPOGRAPHY — Type ramp (1.250 minor third, anchored at 16) ---------------------------------------------------------------- */ --fs-xs: 12px; --lh-xs: 1.45; --fs-sm: 14px; --lh-sm: 1.5; --fs-base: 16px; --lh-base: 1.6; --fs-md: 18px; --lh-md: 1.55; --fs-lg: 22px; --lh-lg: 1.4; --fs-xl: 28px; --lh-xl: 1.3; --fs-2xl: 36px; --lh-2xl: 1.2; --fs-3xl: 48px; --lh-3xl: 1.1; --fs-4xl: 64px; --lh-4xl: 1.05; --fs-5xl: 88px; --lh-5xl: 1.0; /* Letter-spacing — the wordmark is loose; titles use slight tracking */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.18em; /* Weights */ --fw-thin: 200; --fw-light: 300; --fw-regular:400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ---------------------------------------------------------------- SPACING — 4px base. Use --s-* tokens everywhere. ---------------------------------------------------------------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ---------------------------------------------------------------- RADII — Generous, never sharp. The semicircles inform the system. ---------------------------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-2xl: 32px; --r-pill: 999px; /* ---------------------------------------------------------------- SHADOWS — Soft, low-contrast. Clinical, never dramatic. ---------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(42, 61, 78, 0.04); --shadow-sm: 0 2px 6px rgba(42, 61, 78, 0.05), 0 1px 2px rgba(42, 61, 78, 0.03); --shadow-md: 0 8px 24px rgba(42, 61, 78, 0.07), 0 2px 6px rgba(42, 61, 78, 0.04); --shadow-lg: 0 24px 56px rgba(42, 61, 78, 0.10), 0 6px 14px rgba(42, 61, 78, 0.05); --shadow-inset: inset 0 0 0 1px var(--line-1); /* ---------------------------------------------------------------- MOTION — Restrained. Eases are gentle. Anything > 320ms is rare. ---------------------------------------------------------------- */ --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 320ms; /* ---------------------------------------------------------------- LAYOUT ---------------------------------------------------------------- */ --container: 1200px; --container-md: 880px; --container-sm: 640px; } /* ===================================================================== Semantic element rules Drop colors_and_type.css into a page and these defaults already reflect the JPS voice without component CSS. ===================================================================== */ html, body { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { color: var(--fg-1); font-family: var(--font-sans); font-weight: var(--fw-light); /* the wordmark itself is light */ letter-spacing: var(--tracking-tight); margin: 0 0 var(--s-4) 0; text-wrap: balance; } h1 { font-size: var(--fs-4xl); line-height: var(--lh-4xl); } h2 { font-size: var(--fs-3xl); line-height: var(--lh-3xl); } h3 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-regular); } h4 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-regular); } h5 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-medium); } h6 { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--fw-semi); letter-spacing: var(--tracking-wide); text-transform: none; } p { margin: 0 0 var(--s-4) 0; color: var(--fg-2); font-size: var(--fs-md); line-height: var(--lh-md); text-wrap: pretty; max-width: 64ch; } .eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--jps-steel); } .lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--fg-2); font-weight: var(--fw-light); } .pullquote { font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-regular); font-size: var(--fs-2xl); line-height: 1.3; color: var(--fg-1); } a { color: var(--jps-ink); text-decoration: none; border-bottom: 1px solid var(--jps-blue); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } a:hover { border-bottom-color: var(--jps-ink); } small, .caption { font-size: var(--fs-sm); color: var(--fg-3); } code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg-1); } code { background: var(--bg-3); padding: 0.1em 0.35em; border-radius: var(--r-sm); } hr { border: 0; border-top: 1px solid var(--line-1); margin: var(--s-8) 0; } ::selection { background: var(--jps-blue); color: var(--jps-ink); }