/* ============================================================================ Skha Workspace — Design Tokens ---------------------------------------------------------------------------- Provenance is marked on every token group: [OBSERVED] Taken directly from the live Skha website (skha.co.id), read from the site's own CSS custom properties and logo asset in Aug 2026. [ADAPTED] A product-interface adaptation of an observed brand cue. The marketing site is not an application; these values translate the brand into enterprise UI density, contrast and restraint. [SEMANTIC] Generic interface semantics (status, elevation, spacing). Not Skha brand colours and not claimed as such. Nothing in the [ADAPTED] or [SEMANTIC] groups should be described to a client as an official Skha brand colour. ========================================================================== */ :root { /* --- [OBSERVED] Core brand --------------------------------------------- --color-header-middle-bg / --color-footer-bg / --color-content-secondary on skha.co.id all resolve to #13274c. It is the dominant Skha dark. */ --skha-navy: #13274c; --skha-navy-deep: #0f1f33; /* site --color-darker-dark-blue */ /* [OBSERVED] The three graduating blues of the Skha logo mark, sampled from the official logo PNG palette. */ --skha-blue-dark: #1e64b0; --skha-blue-mid: #368fce; /* site --color-mid-blue #388fce */ --skha-blue-light: #69c6f0; /* [OBSERVED] Secondary site colours */ --skha-blue-link: #499ad2; --skha-red: #e04562; --skha-ink: #1a1a1a; /* site --color-alt-content-link */ --skha-warm-gray: #777771; /* site's warm neutral */ /* --- [ADAPTED] Product brand roles -------------------------------------- The site uses navy as a large background field. In an application, navy is used for the vertical navigation rail and for display type, while the darkest logo blue carries interactive intent. */ --brand-primary: var(--skha-blue-dark); --brand-primary-strong: #17518f; --brand-primary-soft: #eaf1f9; --brand-accent: var(--skha-blue-mid); --brand-navy: var(--skha-navy); --brand-navy-deep: var(--skha-navy-deep); /* --- [ADAPTED] Surfaces ------------------------------------------------- Warm off-white rather than pure white app field, echoing the warm grey (#777771) the site pairs with navy. Keeps long reading sessions calm. */ --bg-app: #f6f6f4; --bg-surface: #ffffff; --bg-subtle: #fafaf8; --bg-sunken: #f1f1ee; --bg-rail: var(--skha-navy); --bg-rail-deep: var(--skha-navy-deep); /* --- [ADAPTED] Text ----------------------------------------------------- */ --text-primary: #16181c; --text-secondary: #4a4f57; --text-muted: #767b84; --text-faint: #9aa0a8; --text-on-navy: #ffffff; --text-on-navy-muted: rgba(255, 255, 255, 0.62); --text-on-brand: #ffffff; /* --- [ADAPTED] Borders -------------------------------------------------- */ --border-default: #e3e3df; --border-subtle: #ededea; --border-strong: #cfd0cb; --border-rail: rgba(255, 255, 255, 0.13); --border-focus: var(--skha-blue-mid); /* --- [SEMANTIC] Status -------------------------------------------------- Generic interface semantics. Never used as the only carrier of meaning — every status pairs colour with a written label and a glyph. */ --status-success: #1f7a52; --status-success-bg: #e8f4ee; --status-warning: #9a6413; --status-warning-bg: #fbf1de; --status-danger: #a3323f; --status-danger-bg: #fbeced; --status-info: var(--skha-blue-dark); --status-info-bg: var(--brand-primary-soft); --status-neutral: #5c6069; --status-neutral-bg: #f0f0ed; /* --- [SEMANTIC] Radius -------------------------------------------------- The marketing site uses 25–50px pills. That is a marketing-page idiom; an enterprise surface needs a modest, functional radius. */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 5px; --radius-lg: 7px; --radius-pill: 100px; /* --- [SEMANTIC] Elevation ---------------------------------------------- */ --shadow-subtle: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.06); --shadow-drawer: -8px 0 28px rgba(16, 24, 40, 0.09); --shadow-modal: 0 16px 48px rgba(16, 24, 40, 0.22); --shadow-popover: 0 6px 20px rgba(16, 24, 40, 0.12); /* --- [OBSERVED] Typography --------------------------------------------- Site: --h1-font-family: Ambit (weight 400, text-transform none) --font-family: 'Open Sans', 16px / 25px, weight 400 Ambit is loaded locally from assets/brand/. The fallback stack is a deliberate near-match so the prototype degrades gracefully. */ --font-display: "Ambit", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* --- [ADAPTED] Type scale ---------------------------------------------- Rebased for 1600x900 screenshot legibility. Body copy never below 13px; the site's 55px display sizes are marketing-scale and are not carried in. */ --fs-display: 25px; --fs-h1: 20px; --fs-h2: 16px; --fs-h3: 14.5px; --fs-body: 13.5px; --fs-body-sm: 13px; --fs-label: 12px; --fs-micro: 11px; --lh-tight: 1.22; --lh-snug: 1.4; --lh-body: 1.56; --tracking-caps: 0.07em; /* --- [SEMANTIC] Spacing rhythm — 4px base ------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; /* --- [SEMANTIC] Shell metrics ------------------------------------------ */ --rail-w: 236px; --topbar-h: 60px; --stagebar-h: 44px; --rail-w-collapsed: 236px; /* --- [SEMANTIC] Motion — restrained, no bounce ------------------------- */ --ease: cubic-bezier(0.32, 0.72, 0.34, 1); --dur-fast: 120ms; --dur-base: 160ms; --dur-slow: 220ms; } /* Ambit — the Skha display face, served locally so the prototype opens offline by double-click. Licensed to Skha; see README. */ @font-face { font-family: "Ambit"; src: url("../assets/brand/Ambit-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Ambit"; src: url("../assets/brand/Ambit-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* Open Sans — the Skha body face (Apache 2.0, redistributable). Variable weight axis 300–800, latin subset. */ @font-face { font-family: "Open Sans"; src: url("../assets/brand/OpenSans-Variable.woff2") format("woff2-variations"); font-weight: 300 800; font-style: normal; font-display: swap; }