@deriv-com/dds-marketing

Components and design tokens from the Deriv Design System, for marketing sites — landing pages, pricing, sign-up.

Working with an AI agent? Point it at AGENTS.md in this package. It is the short version of everything below and says which of the .llm/ documents to open.

It has two kinds of component: core components — Button, Navbar, Card, Link, the form controls and the rest — and blocks, the bands a page is built from: LandingHero, ProductHero and PageHeader to open a page, and FeatureSplit, FeatureBullets and FeatureScroll for the sections under it. AGENTS.md lists every one of them with a line on when to reach for it. Product apps want @deriv-com/dds-product.

Install

npm install @deriv-com/dds-marketing

React 19 is a peer dependency, so install it alongside if your app does not already have it:

npm install react react-dom

The Quill icon set comes with the package — there is nothing else to install.

Use

Import the stylesheet once, at the root of your app. It defines every token this package's components bind to — without it they render unstyled.

import '@deriv-com/dds-marketing/marketing.css'

Then put data-dds-context="marketing" on whatever wraps the components — the app root, or the section, if marketing and product live on one page. Component rules are published only inside that scope, because both packages emit classes like .dds-button and one would otherwise paint the other. Without it the components render unstyled too.

Then import components by name:

import { Button, LandingHero } from '@deriv-com/dds-marketing'

export function Home() {
  return (
    <div data-dds-context="marketing">
      <LandingHero
        title="Trade smarter with Deriv"
        description="Access 250+ markets with tight spreads and powerful tools."
        actions={<Button href="/signup">Get started free</Button>}
      />
    </div>
  )
}

Each component brings its own stylesheet with it, so nothing else needs importing.

Icons

Every Quill icon is re-exported from @deriv-com/dds-marketing/icons, under the name Quill gives it:

import { Icon } from '@deriv-com/dds-marketing'
import { CircleCheckSolidIcon } from '@deriv-com/dds-marketing/icons'
import { UsdIcon } from '@deriv-com/dds-marketing/icons/currency'

<Icon label="Verified"><CircleCheckSolidIcon /></Icon>

Each Quill group has a subpath of its own — accounts, app-stores, currency, flag, illustrative, markets, social, system and trade. Production builds tree-shake either form to the icons you use; a dev server does not, so the group subpaths keep it from loading all ~1,850 at once. Raw SVG files are not re-exported; for those, install @deriv-com/quill-icons-web and use its svg/ folder.

An app that already imports from @deriv-com/quill-icons-web keeps working. It is the same module, so the two can be mixed while you migrate — but drop the direct dependency when you are done, or pin it to the range this package uses, so the app does not bundle two copies.

Fonts

The system is designed for Inter (all text) and Red Hat Mono (code). marketing.css names them but cannot carry them — if nothing loads the fonts, every role silently falls back to the system typeface, and any weight the page is missing gets faked by the browser. Pick one of the two paths:

Let the package supply them. One import next to marketing.css:

import '@deriv-com/dds-marketing/fonts.css'
import '@deriv-com/dds-marketing/marketing.css'

This self-hosts both faces from the package (variable-weight WOFF2, subset per script, ~260 KB total across all scripts — a page only downloads the subsets its text uses). Both fonts are under the SIL Open Font License; the licenses ship in dist/fonts/.

Load them yourself. If your app already hosts the fonts — next/font, Fontsource, or your own @font-face — skip fonts.css and point the two family variables at what you loaded:

:root {
  --font-family-sans: var(--your-inter-variable), system-ui, sans-serif;
  --font-family-mono: var(--your-mono-variable), ui-monospace, monospace;
}

Every type role reads its family from these two variables, so this redirects the whole system at once. Load weights 400–700 for Inter (a variable font covers this in one file); a missing weight does not fall back visibly — the browser synthesises a faux bold instead.

Light and dark, and a viewport axis

marketing.css defines both themes. Dark is selected by data-theme="dark" on any ancestor — usually <html>:

<html data-theme="dark">
  <body>
    <div data-dds-context="marketing">  <!-- dark, from here down -->

The theme attribute and the context attribute are independent, and the theme may sit above the scope, on the same element, or below it. There is no provider and no second import.

Marketing does carry a mobile viewport axis: seven roles take different values below 768px, applied automatically and overridable with data-dds-viewport="mobile" or "desktop" when a page renders a device frame inside a wider window.

Documentation

• AGENTS.md — the front door: setup, the rules that span components, and what this package currently has.
• .llm/rules.md — the constraints no single component can state.
• .llm/tokens.md — the token vocabulary, including the mobile viewport axis above.

Versioning

Pre-1.0. Minor versions may contain breaking changes while the component surface settles; pin an exact version if that matters to you.