/** * TiyanHost — Design Tokens * * The single source of truth for every colour, size and spacing value in this * theme. Values are measurements taken from the current live site (see * _TIYANHOST-THEME-PROJECT/reference/design-tokens.txt); no third-party CSS is * reproduced here. * * RULE: this is the ONLY file in the theme allowed to contain a literal colour. * Everything else must reference these variables via var(). * * Dark mode is intentionally not implemented (disabled in production). To add it * later, redefine these same names under :root[data-theme="dark"] — no component * CSS should need to change. */ :root { /* --------------------------------------------------------------- 1. Colour — brand primary (blue) --------------------------------------------------------------- */ --brand-primary: #1062fe; --brand-primary-lighter: #009AFF; --brand-primary-lighter-2: #B3CCFF; --brand-primary-lighter-3: #D6E4FF; --brand-primary-lighter-4: #F1F5FE; --brand-primary-darker: #003CB2; --brand-primary-gradient-start:#1966FF; --brand-primary-gradient-end: #009AFF; /* Colour — brand secondary (deep blue) */ --brand-secondary: #083fbf; --brand-secondary-lighter: #667b9e; --brand-secondary-darker: #08349B; --brand-secondary-gradient-start:#08349B; --brand-secondary-gradient-end: #083fbf; /* Colour — status */ --brand-success: #36C055; --brand-success-darker: #2d9f46; --brand-success-lighter: #70d786; --brand-success-lighter-2: #cff2d7; --brand-success-lighter-3: #dbf5e1; --brand-success-lighter-4: #e7f8eb; --brand-warning: #ffaa00; --brand-warning-darker: #d68f00; --brand-warning-lighter: #ffc552; --brand-warning-lighter-2: #ffeecc; --brand-warning-lighter-3: #fff3db; --brand-warning-lighter-4: #fff8eb; --brand-danger: #d92632; --brand-danger-darker: #b6202a; --brand-danger-lighter: #e56c74; --brand-danger-lighter-2: #f7d4d6; --brand-danger-lighter-3: #fae1e2; --brand-danger-lighter-4: #fceeef; --brand-info: #1062fe; --brand-info-darker: #015abe; --brand-info-lighter: #6298fe; --brand-info-lighter-2: #B3CCFF; --brand-info-lighter-3: #D6E4FF; /* Colour — greys */ --gray-darker: #17191C; /* headings */ --gray-base: #7c8088; /* body text */ --gray-lighter: #8c8f96; --gray-lighter-2: #babec7; --gray-lighter-3: #DEE0E3; /* borders */ --gray-lighter-4: #E9EAEC; --gray-faded: #F7F7F8; /* page background */ --gray-icons: #ACAFB9; --gray-icons-hover:#1062fe; --color-white: #fff; /* --------------------------------------------------------------- 2. THE signature gradients — blue to purple These are TiyanHost's actual visual identity. Do not substitute. --------------------------------------------------------------- */ --gradient-stop-blue: #0045a2; --gradient-stop-purple: #a644e5; /* hero */ --gradient-stop-violet: #7045cb; /* sidebar panel */ --gradient-hero: linear-gradient(75deg, var(--gradient-stop-blue) 10%, var(--gradient-stop-purple)); --gradient-sidebar-panel: linear-gradient(139deg, var(--gradient-stop-blue) 8%, var(--gradient-stop-violet)); /* Brand accent used by .plan-note on the live site */ --brand-plan-note: #103680; /* --------------------------------------------------------------- 3. Typography --------------------------------------------------------------- */ --font-family-base: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-size-xs: 12px; --line-height-xs: 18px; --font-size-sm: 13px; --line-height-sm: 20px; --font-size-base: 14px; --line-height-base: 24px; --font-size-md: 15px; --line-height-md: 24px; --font-size-lg: 17px; --line-height-lg: 28px; --font-size-xlg: 20px; --line-height-xlg: 32px; --font-size-xxlg: 24px; --line-height-xxlg: 40px; --font-size-h1: 48px; --font-size-h2: 40px; --font-size-h3: 32px; --line-height-h3: 40px; --font-size-h4: 26px; --line-height-h4: 34px; --font-size-h5: 20px; --line-height-h5: 28px; --font-size-h6: 17px; --line-height-h6: 24px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Text colours */ --text-body-color: var(--gray-base); --text-heading-color: var(--gray-darker); --text-lighter-color: var(--gray-lighter); --text-faded-color: var(--gray-lighter-2); --text-primary-color: var(--brand-primary); /* Text on dark / gradient backgrounds */ --text-secondary-body-color: hsla(0, 0%, 100%, 0.92); --text-secondary-lighter-color: hsla(0, 0%, 100%, 0.80); --text-secondary-faded-color: hsla(0, 0%, 100%, 0.56); --text-secondary-heading-color: var(--color-white); /* --------------------------------------------------------------- 4. Spacing — 8px base unit. Use the scale, never arbitrary values. --------------------------------------------------------------- */ --spacing-1x: 8px; --spacing-2x: calc(2 * var(--spacing-1x)); /* 16px */ --spacing-3x: calc(3 * var(--spacing-1x)); /* 24px */ --spacing-4x: calc(4 * var(--spacing-1x)); /* 32px */ --spacing-5x: calc(5 * var(--spacing-1x)); /* 40px */ --spacing-6x: calc(6 * var(--spacing-1x)); /* 48px */ --spacing-7x: calc(7 * var(--spacing-1x)); /* 56px */ --spacing-8x: calc(8 * var(--spacing-1x)); /* 64px */ --spacing-9x: calc(9 * var(--spacing-1x)); /* 72px */ --spacing-10x: calc(10 * var(--spacing-1x)); /* 80px */ --spacing-11x: calc(11 * var(--spacing-1x)); /* 88px */ --spacing-12x: calc(12 * var(--spacing-1x)); /* 96px */ --spacing-13x: calc(13 * var(--spacing-1x)); /* 104px */ --spacing-14x: calc(14 * var(--spacing-1x)); /* 112px */ --spacing-15x: calc(15 * var(--spacing-1x)); /* 120px */ --spacing-16x: calc(16 * var(--spacing-1x)); /* 128px */ /* Half step, for icon gaps inside buttons */ --spacing-half: 4px; /* --------------------------------------------------------------- 5. Containers --------------------------------------------------------------- */ --container-sm-max-width: 540px; --container-md-max-width: 720px; --container-lg-max-width: 960px; --container-xl-max-width: 1288px; /* main content width */ --container-gutter: var(--spacing-2x); /* --------------------------------------------------------------- 6. Radius & borders --------------------------------------------------------------- */ --border-radius-none: 0px; --border-radius-xs: 3px; /* buttons */ --border-radius-sm: 4px; /* nav links */ --border-radius-base: 6px; /* panels / cards */ --border-radius-lg: 8px; --border-radius-xlg: 12px; --border-width-base: 1px; --border-color-base: var(--gray-lighter-3); /* --------------------------------------------------------------- 7. Shadows — soft, wide and low-opacity. Do not harden these. --------------------------------------------------------------- */ --box-shadow-xs: 0 1px 1px rgba(0, 0, 0, .05); --box-shadow-sm: 0 0 1px rgba(0, 0, 0, .10), 0 2px 16px rgba(0, 0, 0, .08); --box-shadow-base: 0 0 1px rgba(0, 0, 0, .10), 0 2px 24px rgba(0, 0, 0, .08); --box-shadow-lg: 0 0 1px rgba(0, 0, 0, .12), 0 8px 32px rgba(0, 0, 0, .08); --box-shadow-xlg: 0 0 1px rgba(0, 0, 0, .12), 0 16px 40px rgba(0, 0, 0, .16); /* --------------------------------------------------------------- 8. Buttons — note the 3px radius against the 6px panel radius. That contrast is deliberate and part of the look. --------------------------------------------------------------- */ --btn-border-width: var(--border-width-base); --btn-box-shadow: none; --btn-border-radius: var(--border-radius-xs); --btn-base-font-size: 14px; --btn-base-font-weight: 500; --btn-sm-font-size: 13px; --btn-sm-font-weight: 500; --btn-xs-font-size: 12px; --btn-xs-font-weight: 400; --btn-icon-spacing: 6px; --btn-spacing-between: var(--spacing-2x); /* --------------------------------------------------------------- 9. Motion --------------------------------------------------------------- */ --transition-base: .15s ease-in-out; }