/* Bosun brand tokens, in Atlassian Design System's semantic shape. Two things are doing separate jobs here and it is worth being precise about which is which. ADS supplies the *structure*: the token names, the spacing scale, the component anatomy in app.css. That is the part worth keeping -- it is a coherent, well-tested system and rewriting it would buy nothing. docs/brand supplies the *values*: the palette, the typeface, the radii. Those are Bosun's, they are marked high-fidelity, and they win. This is exactly the swap the token layer was built to make cheap: the guidelines changed and one file changed with them. So `--ds-text` no longer holds Atlassian's ink, it holds Bosun's. The name stays because 1,300 lines of app.css refer to it and because the name describes a role, not a colour. Never write a hex in app.css; there is a test asserting it. Palette (docs/brand/README.md): monochrome plus one accent, and never a second accent. Bosun Blue #1B6FF2 links, primary buttons, the mark, active nav Ink #14171C text, dark surfaces Slate #55606E secondary text Mist #E1E7EF borders, dividers Paper #F9FBFD page backgrounds White #FFFFFF cards, surfaces Error red #D14343 destructive and error only */ /* Schibsted Grotesk, self-hosted. A variable font: one file spans 400-700, so the three weights the brand uses cost two requests in total (latin and latin-ext) rather than six. Self-hosted rather than linked from Google. The brand names Google Fonts as the source, not as a runtime dependency, and every page in this product is behind a login -- sending a request to a third party on each of them, with the referrer attached, is not a thing to do for a typeface we are allowed to serve ourselves. It also keeps a strict CSP possible. SIL Open Font License 1.1; the licence ships alongside at fonts/OFL.txt as it requires. */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/schibsted-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ------------------------------------------------------- brand palette */ --bosun-blue: #1B6FF2; --bosun-ink: #14171C; --bosun-slate: #55606E; --bosun-mist: #E1E7EF; --bosun-paper: #F9FBFD; --bosun-white: #FFFFFF; --bosun-error: #D14343; /* Derived, not invented: tints and shades of the six above, used for hovers and fills. Nothing here is a new hue -- mixing keeps that honest and keeps a dark theme a matter of this file alone. */ --bosun-blue-dark: color-mix(in srgb, var(--bosun-blue) 86%, black); /* ADS's pressed step. The design uses it for the label of an active nav item, where the wash behind it needs the text to carry more weight. */ --bosun-blue-darker: color-mix(in srgb, var(--bosun-blue) 66%, black); --bosun-blue-wash: color-mix(in srgb, var(--bosun-blue) 8%, white); --bosun-blue-wash-strong: color-mix(in srgb, var(--bosun-blue) 16%, white); --bosun-ink-wash: color-mix(in srgb, var(--bosun-ink) 5%, white); --bosun-ink-wash-strong: color-mix(in srgb, var(--bosun-ink) 9%, white); --bosun-error-wash: color-mix(in srgb, var(--bosun-error) 10%, white); /* Avatar fills. People still have to be told apart at a glance, and the obvious way -- a hue per person -- is six accents, which the brand forbids outright. This is the same job done with weight: the accent, the ink, and steps between them. All carry white initials at full contrast. */ --bosun-avatar-1: var(--bosun-blue); --bosun-avatar-2: var(--bosun-ink); --bosun-avatar-3: var(--bosun-slate); --bosun-avatar-4: var(--bosun-blue-dark); --bosun-avatar-5: color-mix(in srgb, var(--bosun-slate) 62%, var(--bosun-ink)); /* ---------------------------------------------------------- text */ --ds-text: #172B4D; --ds-text-subtle: #44546F; --ds-text-subtlest: #626F86; --ds-text-inverse: var(--bosun-white); --ds-text-disabled: #091E424F; --ds-text-brand: var(--bosun-blue); --ds-text-selected: var(--bosun-blue); --ds-text-selected-pressed: var(--bosun-blue-darker); --ds-text-danger: var(--bosun-error); --ds-link: var(--bosun-blue); /* Status colours, within a one-accent palette. ADS distinguishes states by hue -- orange, teal, green, red. The brand forbids a second accent, so state is carried by weight instead: blue for the thing asking for attention, slate for the thing that is not ours to act on, and the wash of each behind it. Red stays, because the palette keeps it for destructive and error, which is what it marks. The three thread states never need to be told apart by colour alone anyway -- each lozenge is labelled -- so this loses nothing but the hue, and the hue was not ours to spend. */ --ds-text-warning: var(--bosun-slate); --ds-text-success: var(--bosun-blue); --ds-text-accent-blue: var(--bosun-blue); --ds-text-accent-orange: var(--bosun-blue); --ds-text-accent-teal: var(--bosun-slate); --ds-text-accent-gray: var(--bosun-slate); --ds-text-accent-green: var(--bosun-blue); /* ---------------------------------------------------------- surface */ --ds-surface: var(--bosun-white); --ds-surface-sunken: #F7F8F9; --ds-surface-raised: var(--bosun-white); --ds-surface-overlay: var(--bosun-white); --ds-surface-hovered: #F7F8F9; --ds-surface-pressed: #F1F2F4; /* The tint step, one below sunken. The design bundle separates the two: sunken is the application ground, tint is what rails, outbound messages and inline blocks sit on so they read as set into the page rather than laid on it. Same value ADS gives the pressed state. */ --ds-surface-tint: #F1F2F4; /* ---------------------------------------------------------- background */ --ds-background-neutral: #091E420F; --ds-background-neutral-hovered: #091E4224; --ds-background-neutral-subtle-hovered: #091E420F; --ds-background-selected: var(--bosun-blue-wash); --ds-background-selected-hovered: var(--bosun-blue-wash-strong); --ds-background-selected-pressed: var(--bosun-blue-wash-strong); --ds-background-brand-bold: var(--bosun-blue); --ds-background-brand-bold-hovered: var(--bosun-blue-dark); --ds-background-input: var(--bosun-white); --ds-background-input-hovered: var(--bosun-paper); --ds-background-danger: var(--bosun-error-wash); --ds-background-accent-blue-subtlest: var(--bosun-blue-wash); --ds-background-accent-orange-subtlest: var(--bosun-blue-wash); --ds-background-accent-teal-subtlest: var(--bosun-ink-wash); --ds-background-accent-gray-subtlest: var(--bosun-ink-wash); --ds-background-accent-red-subtlest: var(--bosun-error-wash); --ds-background-accent-magenta-subtlest: var(--bosun-ink-wash); --ds-background-accent-green-subtlest: var(--bosun-blue-wash); /* ---------------------------------------------------------- border */ --ds-border: #091E4224; --ds-border-bold: #758195; --ds-border-input: #091E4224; --ds-border-focused: var(--bosun-blue); --ds-border-width: 1px; --ds-border-width-selected: 2px; --ds-border-width-focused: 2px; /* ---------------------------------------------------------- icon */ --ds-icon: #172B4D; --ds-icon-subtle: #626F86; /* The error-string block. Dark, so a literal SMTP rejection reads as something copied out of a log rather than as body copy, and the first line is red because it is the line someone is matching against what their own server said. At the root rather than on the docs surface: the same block appears on the campaign page for the same error, and a component that renders unstyled depending on which page it lands on is worse than one that never moves. */ --ds-surface-terminal: color-mix(in srgb, var(--bosun-ink) 94%, var(--bosun-slate)); --ds-text-terminal: color-mix(in srgb, var(--bosun-white) 72%, var(--bosun-ink)); --ds-text-terminal-error: color-mix(in srgb, var(--bosun-error) 72%, white); /* ---------------------------------------------------------- elevation */ --ds-shadow-raised: 0 1px 2px color-mix(in srgb, var(--bosun-ink) 8%, transparent); --ds-shadow-overlay: 0 8px 24px color-mix(in srgb, var(--bosun-ink) 14%, transparent); --ds-shadow-overflow: 0 0 8px color-mix(in srgb, var(--bosun-ink) 10%, transparent); /* ---------------------------------------------------------- space */ /* ADS's spacing scale, kept: the brand does not specify one, and this is what every rule in app.css is built on. */ --ds-space-0: 0px; --ds-space-025: 2px; --ds-space-050: 4px; --ds-space-075: 6px; --ds-space-100: 8px; --ds-space-125: 10px; --ds-space-150: 12px; --ds-space-200: 16px; --ds-space-250: 20px; --ds-space-300: 24px; --ds-space-400: 32px; --ds-space-500: 40px; --ds-space-600: 48px; --ds-space-800: 64px; --ds-space-1000: 80px; /* ---------------------------------------------------------- radius */ /* Brand: cards 8px, buttons 6px. The names keep their ADS roles -- small is the control radius, medium the container radius. */ --ds-radius-xsmall: 4px; --ds-radius-small: 6px; --ds-radius-medium: 8px; --ds-radius-large: 8px; --ds-radius-xlarge: 12px; --ds-radius-full: 9999px; /* ---------------------------------------------------------- type */ /* The brand face, named separately from the body face. They are the same thing on every product screen and on the marketing pages, and deliberately different on the documentation pages, which run on the system stack. The wordmark stays Schibsted everywhere -- it is the logo -- so it needs a name that the docs scope does not override. See the .site-docs block at the foot of this file. */ --ds-font-family-brand: 'Schibsted Grotesk', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, 'Helvetica Neue', sans-serif; /* Product UI runs on the system stack, per docs/brand: "ADS default type stack in product UI; Schibsted Grotesk is reserved for brand surfaces (marketing, wordmark, emails)." The marketing shell sets the brand face back on itself; see .site at the foot of this file. */ --ds-font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --ds-font-family-code: ui-monospace, Menlo, 'Segoe UI Mono', 'Ubuntu Mono', monospace; /* Brand weights: 400 body, 500 headings, 700 display and wordmark. */ --ds-font-weight-regular: 400; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 500; --ds-font-weight-bold: 700; /* Tracking cannot ride in the `font` shorthand, so it is its own token. */ --ds-font-tracking-heading: -0.01em; --ds-font-tracking-display: -0.02em; /* ADS's type scale, which is what the system stack is drawn for. */ --ds-font-body: normal var(--ds-font-weight-regular) 14px/20px var(--ds-font-family-body); --ds-font-body-large: normal var(--ds-font-weight-regular) 16px/24px var(--ds-font-family-body); --ds-font-body-small: normal var(--ds-font-weight-regular) 12px/16px var(--ds-font-family-body); --ds-font-heading-xxsmall: normal var(--ds-font-weight-bold) 12px/16px var(--ds-font-family-body); --ds-font-heading-xsmall: normal var(--ds-font-weight-bold) 14px/20px var(--ds-font-family-body); --ds-font-heading-small: normal var(--ds-font-weight-bold) 16px/20px var(--ds-font-family-body); --ds-font-heading-medium: normal var(--ds-font-weight-medium) 20px/24px var(--ds-font-family-body); --ds-font-heading-large: normal var(--ds-font-weight-medium) 24px/28px var(--ds-font-family-body); --ds-font-display: normal var(--ds-font-weight-bold) 35px/40px var(--ds-font-family-body); } /* ========================================================== public site The marketing, docs and legal pages. Three visual languages that must not blend, per docs/design/README.md, and the token layer is where that gets enforced rather than left to whoever writes the next page. .site marketing -- the brand as stated: Schibsted, paper ground, Bosun Blue on links, buttons and the mark. .site-docs documentation -- near-monochrome on white, system type, blue on links only. These pages carry the SEO strategy and work *because* they read as documentation rather than as a funnel, so the restraint is functional, not aesthetic. .site-legal plainest -- one column, wide margins, nothing else. Nothing below is a new value invented here; all of it is either an existing brand token or a figure stated in the design bundle. */ :root { /* Urgency red, and it is worth being explicit that this is a third colour in a palette that allows one accent plus error red. docs/brand reserves --bosun-error for destructive and error. The founding counter is neither -- it is scarcity, and the design bundle specifies its own red for it, warmer and darker than the error red so the two do not read as the same signal. It stays out of :root's semantic tokens and is only reachable inside .site below, so no product surface can pick it up by accident. */ --bosun-urgent: #D3372B; --bosun-urgent-dark: #B42318; --bosun-urgent-wash: color-mix(in srgb, var(--bosun-urgent) 6%, white); --bosun-urgent-border: color-mix(in srgb, var(--bosun-urgent) 30%, white); } /* Sign-in is a brand surface, not a product screen. The design bundle makes the distinction itself: seven of its eight screens declare ADS neutrals, and Sign In declares the Bosun ones — paper ground, Ink text, Mist lines — under a 25px Schibsted wordmark. It is the front door rather than the interface, so it takes the brand like marketing does. The type stack stays the system one here: the design sets Schibsted on the wordmark alone. */ .auth { --ds-text: var(--bosun-ink); --ds-text-subtle: var(--bosun-slate); --ds-text-subtlest: var(--bosun-slate); --ds-surface-sunken: var(--bosun-paper); --ds-border: var(--bosun-mist); --ds-border-input: color-mix(in srgb, var(--bosun-slate) 21%, var(--bosun-mist)); --ds-icon: var(--bosun-ink); --ds-icon-subtle: var(--bosun-slate); } /* The marketing shell puts the brand back. :root is now the product: ADS neutrals and the system stack, per docs/brand. Marketing is the brand surface -- Schibsted, Ink, Slate, Mist, Paper -- so it restates them here rather than the other way round. That is the direction docs/brand asks for, and it means a product screen inherits the right thing by default and a brand surface opts in. Every composed font token is restated, not just the family: a custom property is substituted where it is *declared*, so --ds-font-body resolves against :root's family and inherits already flattened. Redefining the family alone changes nothing. */ .site { --ds-font-family-body: var(--ds-font-family-brand); --ds-font-body: normal var(--ds-font-weight-regular) 15px/24px var(--ds-font-family-body); --ds-font-body-large: normal var(--ds-font-weight-regular) 16px/26px var(--ds-font-family-body); --ds-font-body-small: normal var(--ds-font-weight-regular) 13px/18px var(--ds-font-family-body); --ds-font-heading-xxsmall: normal var(--ds-font-weight-medium) 13px/18px var(--ds-font-family-body); --ds-font-heading-xsmall: normal var(--ds-font-weight-medium) 15px/22px var(--ds-font-family-body); --ds-font-heading-small: normal var(--ds-font-weight-medium) 17px/24px var(--ds-font-family-body); --ds-font-heading-medium: normal var(--ds-font-weight-medium) 20px/26px var(--ds-font-family-body); --ds-font-heading-large: normal var(--ds-font-weight-medium) 26px/32px var(--ds-font-family-body); --ds-font-display: normal var(--ds-font-weight-bold) 44px/48px var(--ds-font-family-body); --ds-text: var(--bosun-ink); --ds-text-subtle: var(--bosun-slate); --ds-text-subtlest: var(--bosun-slate); --ds-text-disabled: color-mix(in srgb, var(--bosun-slate) 50%, white); --ds-surface-sunken: var(--bosun-paper); --ds-surface-hovered: var(--bosun-paper); --ds-surface-pressed: var(--bosun-mist); --ds-background-neutral: var(--bosun-ink-wash); --ds-background-neutral-hovered: var(--bosun-ink-wash-strong); --ds-border: var(--bosun-mist); --ds-border-bold: var(--bosun-slate); --ds-icon: var(--bosun-ink); --ds-icon-subtle: var(--bosun-slate); color: var(--ds-text); font: var(--ds-font-body-large); --ds-text-urgent: var(--bosun-urgent-dark); --ds-background-urgent-bold: var(--bosun-urgent); --ds-background-urgent-subtlest: var(--bosun-urgent-wash); --ds-border-urgent: var(--bosun-urgent-border); /* The empty half of the founding counter, which is a mist that has been warmed towards the taken half rather than a neutral grey. */ --ds-background-urgent-empty: color-mix(in srgb, var(--bosun-urgent) 9%, var(--bosun-mist)); } /* The docs type stack. Every composed font token is restated, not just the family, and the reason is the finding recorded in the ADS pilot above: a custom property is substituted where it is *declared*. --ds-font-body resolves against :root's family and inherits downward already flattened, so redefining the family alone changes nothing and the page renders in Schibsted while looking like it was meant to. Sizes are a touch larger than product UI: these are read on a phone at someone else's desk while they are being talked through a fix. Legal pages share the stack. They are documents too, and the one thing that would look wrong on a set of terms is the marketing typeface. */ .site-docs, .site-legal { background: var(--bosun-white); color: var(--ds-text); --ds-font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --ds-font-body: normal var(--ds-font-weight-regular) 16px/26px var(--ds-font-family-body); --ds-font-body-large: normal var(--ds-font-weight-regular) 17px/28px var(--ds-font-family-body); --ds-font-body-small: normal var(--ds-font-weight-regular) 14px/22px var(--ds-font-family-body); --ds-font-heading-xxsmall: normal var(--ds-font-weight-bold) 14px/20px var(--ds-font-family-body); --ds-font-heading-xsmall: normal var(--ds-font-weight-bold) 15px/22px var(--ds-font-family-body); --ds-font-heading-small: normal var(--ds-font-weight-bold) 17px/24px var(--ds-font-family-body); --ds-font-heading-medium: normal var(--ds-font-weight-bold) 21px/28px var(--ds-font-family-body); --ds-font-heading-large: normal var(--ds-font-weight-bold) 27px/34px var(--ds-font-family-body); --ds-font-display: normal var(--ds-font-weight-bold) 32px/40px var(--ds-font-family-body); font: var(--ds-font-body); /* Documentation is white, not paper: it should look like a manual page and not like a section of the marketing site. */ --ds-surface-sunken: var(--bosun-white); }