/* * tokens.css — the design system, ported. * * Two sources, and where they disagree the rule below says which wins. * * THE APP (docs/DESIGN_SYSTEM.md, Modera/Assets.xcassets/DesignSystem). * Every colour here is the light value of the corresponding SwiftUI colour * set, taken from the asset catalogue rather than eyeballed. The names are * the app's semantic names, so a screen asks what a thing IS and never what * it looks like. This is the whole system inside the tool. * * MODERA.STUDIO. The marketing site's own ground, rule colour and display * face. This is the chrome: the bar at the top, the wordmark, the one * display line on the landing. It is what makes this page read as part of * that site rather than as an app screenshot on a white background. * * WHERE THEY MEET. The site's sand (#f4ede2) and the app's paper (#F7F4F0) are * four points apart in hue and both warm, so the page uses the app's — the * subject of every screen here is a render, and the render was lit and graded * against that ground. The site's burnt orange (#b8651a) and the app's accent * (#FF6A25) are NOT reconciled: the site's is a text colour on a marketing * page and the app's is the one action colour in the product. The action * colour wins wherever there is an action, because that is what the accent * budget below protects. * * THE ACCENT BUDGET IS THE ONE RULE THAT SURVIVES THE PORT INTACT. Exactly one * accent element per screen, attached to the single most important action. * Never a border, never decoration, never a selected state. `.ds-primary` is * the only class in this file that may be accent-coloured, there is exactly * one of them on screen at a time, and `src/ui.js` warns in the console when a * second appears — the same non-fatal named warning the app prints. * * MODERN MODE. The app ships light, dark and an orthogonal "modern" toggle; * this page is light modern, which is what was asked for. Modern is one idea: * the ground stops being flat, and everything standing on it is glass. So * `--ground-*` paints a warm key out of the top trailing corner and a far * corner falling away from it, and `.ds-panel` is material over that rather * than an opaque card. Both halves or neither — glass over a flat ground reads * as grey, which is the failure the app's `DSSubstrate` exists to make * unspellable. */ :root { /* ─── Colour: the app's palette, light values ─── */ --base: #f4ede2; /* dsBase the page. The site's paper. */ --surface: #ffffff; /* dsSurface cards, sheets, panels */ --surface-raised: #ffffff; /* dsSurfaceRaised */ --surface-sunken: #ede8e1; /* dsSurfaceSunken wells, image placeholders */ --scene-backdrop: #f1ede7; /* dsSceneBackdrop the ground a render sits on */ --edge: #e4ded7; /* dsEdge hairlines, sparingly */ --text: #1a1815; /* dsTextPrimary the site's ink */ --text-secondary: #6e6358; /* dsTextSecondary the site's muted */ --on-accent: #ffffff; /* dsOnAccent */ --accent: #ff6a25; /* dsAccent identical in both schemes */ --accent-deep: #d94a10; /* dsAccentDeep modern's gradient end */ --accent-glow: rgba(255, 106, 37, 0.38); /* dsAccentGlow */ --scrim: rgba(0, 0, 0, 0.55); --shadow: rgba(42, 32, 24, 0.14); /* dsShadow, warm black */ /* Drop indicator, for the room editor's blocked / clear states. */ --drop-clear: #4fa8e8; /* dsDropClear */ --drop-blocked: #e04b45; /* dsDropBlocked */ /* ─── Modern mode ─── */ --light-key: rgba(255, 201, 138, 0.42); /* dsLightKey, top trailing */ --light-floor: rgba(201, 138, 147, 0.24); /* dsLightFloor, far corner */ --glass-tint: rgba(255, 246, 236, 0.42); /* dsGlassTint */ --glass-sheen: rgba(255, 255, 255, 0.30); /* dsGlassSheen, the rim */ --specular: rgba(255, 250, 244, 0.52); /* dsSpecular */ --glass-blur: 22px; /* * ─── Liquid glass ─── * * Modern mode says the ground stops being flat and everything standing on * it is glass. These five tokens are what make the glass read as a MATERIAL * WITH THICKNESS rather than as a blurred rectangle, and each one is a * property real glass has: * * EDGES CATCH LIGHT UNEVENLY. A sheet of glass is brightest along the * edge nearest the light and darkest along the far one. One rim at a * uniform opacity is the tell of a CSS panel; a rim that travels from * bright to nothing across the shape is the tell of an object. * * THICKNESS BENDS WHAT IS BEHIND IT. A real edge refracts, so the ground * showing through near the border is displaced relative to the middle. * `--glass-edge-warp` is how much a panel's border layer is scaled and * blurred against its own fill to fake that displacement. * * LIGHT POOLS INSIDE IT. Glass over a lit ground carries a soft interior * gradient from the direction of the key, not a flat wash. * * The values are restrained on purpose. Past about 0.4 on the sheen this * stops looking like glass and starts looking like a filter, and the type * sitting on it loses contrast — which is the one thing the modern ground * was bounded at both ends to protect. */ --glass-fill: linear-gradient( 150deg, rgba(255, 252, 246, 0.58) 0%, rgba(255, 246, 236, 0.40) 42%, rgba(252, 240, 232, 0.46) 100%); --glass-rim: linear-gradient( 145deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.22) 26%, rgba(255, 255, 255, 0) 52%, rgba(255, 244, 230, 0.30) 100%); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(190, 168, 148, 0.16); --glass-edge-warp: 1.6px; --glass-saturate: 1.7; /* ─── modera.studio chrome ─── */ /* * Taken from the site's own stylesheet so the bar at the top is the same bar. * `--site-accent` is the site's burnt orange, which is NOT the app's accent: * the app's `--accent` mirrors the iOS palette and stays as it is. The only * thing wearing the site's accent is the current-page dash in the bar, which * is the site's mark rather than the app's. */ --site-rule: #d8cdb9; --site-rule-soft: #e7dcc6; --site-ink-quiet: #8c8174; --site-accent: #b8651a; /* ─── Type ─── */ /* * One family in the product, as the app has it: weight and size carry the * whole hierarchy and nothing is bold. Cormorant appears only in the site * chrome and on the landing's one display line — the site's voice, in the * site's places. */ --body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --display-face: 'Cormorant Garamond', Georgia, serif; /* DS.Typography. Size / weight / tracking, exactly as the app's tokens. */ --type-display: 300 34px/1.15 var(--body); --track-display: -0.9px; --type-title: 300 30px/1.2 var(--body); --track-title: -0.6px; --type-heading: 400 22px/1.3 var(--body); --track-heading: -0.3px; --type-body-large: 400 17px/1.45 var(--body); --track-body-large: -0.1px; --type-body: 400 15px/1.5 var(--body); --track-body: 0; --type-label: 500 15px/1.3 var(--body); --track-label: 0; --type-caption: 400 13px/1.4 var(--body); --track-caption: 0; --type-price: 400 16px/1.3 var(--body); --track-price: 0; /* ─── Spacing: DS.Space, a 4pt grid. No 2 and no 6, deliberately. ─── */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 28px; --space-xxl: 40px; --space-xxxl: 56px; --screen-margin: 20px; /* type and controls */ --content-margin: 16px; /* content that IS the subject — narrower on purpose */ --grid-gutter: 12px; --section-gap: 28px; --text-gap: 4px; --thumbnail: 72px; /* ─── Radius: DS.Radius. A radius per element kind, never one everywhere. ─── */ --radius-control: 999px; --radius-card: 18px; --radius-thumbnail: 12px; --radius-scene: 22px; --radius-sheet: 28px; --radius-marker: 8px; /* ─── Motion: DS.Motion. Two curves and no more. ─── */ --motion-transition: 340ms cubic-bezier(0.22, 1, 0.36, 1); --motion-tap: 160ms cubic-bezier(0.33, 1, 0.68, 1); /* One surface arriving. Slower and softer than a tap, because a panel that * slides in at tap speed reads as a jump. Used only where a step replaces * a step — this is the sequence's own motion, not decoration on every * element, which is the failure the app's DS.Motion has exactly two curves * to avoid. */ --motion-arrive: 460ms cubic-bezier(0.16, 1, 0.3, 1); /* ─── Elevation: DS.Elevation. Three levels and no more. ─── */ --elevation-card: 0 5px 12px var(--shadow); --elevation-floating: 0 12px 24px var(--shadow); /* Modern splits elevation in two: a contact shadow and an ambient one. */ --elevation-card-modern: 0 1px 2px rgba(42, 32, 24, 0.10), 0 6px 16px rgba(42, 32, 24, 0.10); --elevation-floating-modern: 0 2px 4px rgba(42, 32, 24, 0.10), 0 14px 34px rgba(42, 32, 24, 0.13), 0 34px 72px rgba(42, 32, 24, 0.08); /* ─── Layout ─── */ --breakpoint-wide: 700px; /* DS.Breakpoint.wide. The one breakpoint. */ --panel-column: 420px; /* dsContentColumn: a step is one column of instruction and one action under it, and it stops there rather than running the width of a laptop. */ --site-max: 1320px; --ratio-scene: 4 / 3; /* DS.Ratio.scene */ } /* * The ground. * * Classic is flat `--base`. Modern is `--base` plus a warm key out of the top * trailing corner and a far corner falling away from it — the arithmetic is * the app's `DSModernSurface`, and the point of bounding it at both ends is * that `--text` and `--text-secondary` clear their contrast thresholds * everywhere on it, including where the glass above is thinnest. */ body { background: radial-gradient(120% 90% at 100% 0%, var(--light-key) 0%, transparent 62%), radial-gradient(110% 80% at 0% 100%, var(--light-floor) 0%, transparent 58%), var(--base); background-attachment: fixed; color: var(--text); font: var(--type-body); letter-spacing: var(--track-body); }