{
  "name": "Doppla",
  "version": "1.0.1",
  "releaseDate": "2026-10-18",
  "draft": false,
  "color": {
    "brand": {
      "red": {
        "value": "#C15E3D",
        "role": "Input. The rear block in the mark. Accent only.",
        "cmyk": "cmyk(0 51 68 24)",
        "pantone": {
          "coated": "not yet matched \u2014 confirm before print use",
          "uncoated": "not yet matched \u2014 confirm before print use"
        }
      },
      "blue": {
        "value": "#1D6E8F",
        "role": "Output. The front block in the mark. Primary action and current state.",
        "cmyk": "cmyk(80 23 0 44)",
        "pantone": {
          "coated": "not yet matched \u2014 confirm before print use",
          "uncoated": "not yet matched \u2014 confirm before print use"
        }
      }
    },
    "neutral": {
      "ink": {
        "value": "#15151A",
        "role": "Body text; monochrome mark on light surfaces.",
        "cmyk": "cmyk(19 19 0 90)"
      },
      "slate": {
        "value": "#6B7280",
        "role": "Secondary text, captions, metadata.",
        "cmyk": "cmyk(16 11 0 50)"
      },
      "paper": {
        "value": "#FFFFFF",
        "role": "Primary background.",
        "cmyk": "cmyk(0 0 0 0)"
      },
      "cream": {
        "value": "#F7F3EC",
        "role": "Warm alternate background.",
        "cmyk": "cmyk(0 2 4 3)"
      },
      "hairline": {
        "value": "#DADAD5",
        "role": "Rules, dividers, input borders.",
        "cmyk": "cmyk(0 0 2 15)"
      }
    },
    "dark": {
      "base": {
        "value": "#17171A",
        "role": "Dark-mode page background."
      },
      "panel": {
        "value": "#1D1D21",
        "role": "Dark-mode raised surface."
      },
      "text": {
        "value": "#F4F3F0",
        "role": "Dark-mode body text."
      },
      "slate": {
        "value": "#8A8A8F",
        "role": "Dark-mode secondary text."
      },
      "hairline": {
        "value": "rgba(255, 255, 255, 0.10)",
        "role": "Dark-mode rules and dividers."
      }
    },
    "notes": [
      "Red and blue are not interchangeable: red is always input, blue always output.",
      "Use brand colours as accents, never as large page fills.",
      "Red is not the error colour. Choose a separate red for destructive and error states.",
      "On a brand-colour background, switch to the white monochrome mark."
    ]
  },
  "typography": {
    "family": {
      "sans": {
        "value": "Poppins",
        "licence": "SIL Open Font License 1.1",
        "files": "fonts/ in this package"
      },
      "mono": {
        "value": "JetBrains Mono, IBM Plex Mono",
        "role": "Code and identifiers."
      }
    },
    "weight": {
      "light": {
        "value": 300,
        "role": "Display and large headings"
      },
      "regular": {
        "value": 400,
        "role": "Body copy"
      },
      "medium": {
        "value": 500,
        "role": "UI labels, table headers"
      }
    },
    "scale": {
      "display": {
        "size": "48px",
        "lineHeight": 1.15,
        "weight": 300,
        "tracking": "-0.01em"
      },
      "h1": {
        "size": "36px",
        "lineHeight": 1.2,
        "weight": 300,
        "tracking": "-0.01em"
      },
      "h2": {
        "size": "28px",
        "lineHeight": 1.25,
        "weight": 400
      },
      "h3": {
        "size": "20px",
        "lineHeight": 1.35,
        "weight": 500
      },
      "body": {
        "size": "16px",
        "lineHeight": 1.6,
        "weight": 400
      },
      "small": {
        "size": "14px",
        "lineHeight": 1.5,
        "weight": 400
      },
      "caption": {
        "size": "12px",
        "lineHeight": 1.45,
        "weight": 400
      }
    },
    "notes": [
      "The wordmark is drawn artwork, not Poppins. Never re-set it in a typeface.",
      "Sentence case everywhere. No all-caps, no letterspaced labels.",
      "Avoid Bold (700) \u2014 it reads as urgency, which is off-tone.",
      "Body copy stays under 75 characters per line."
    ]
  },
  "space": {
    "base": "4px",
    "scale": [
      "4px",
      "8px",
      "12px",
      "16px",
      "24px",
      "32px",
      "48px",
      "64px",
      "96px"
    ],
    "sectionPadding": {
      "desktop": "64px to 96px",
      "mobile": "32px to 48px"
    },
    "contentMaxWidth": "1200px"
  },
  "radius": {
    "card": "8px",
    "control": "6px",
    "pill": "9999px"
  },
  "elevation": {
    "default": "none \u2014 separate surfaces with a hairline rule or a background change",
    "floating": "0 4px 16px rgba(21, 21, 26, 0.10) \u2014 menus, dialogs, and toasts only"
  },
  "logo": {
    "artboard": 64,
    "redBlock": {
      "x": 6,
      "y": 6,
      "width": 39,
      "height": 52
    },
    "blueBlock": {
      "x": 25,
      "y": 6,
      "width": 33,
      "height": 52
    },
    "cornerRadius": 10,
    "hole": {
      "cx": 32,
      "cy": 32,
      "r": 12
    },
    "layering": "The blue block is always drawn in front of the red block. This never inverts.",
    "gradient": {
      "lightnessShift": 0.065,
      "appliesTo": "Colour mode only. Monochrome modes and the loader stay flat; the reveal fades the gradient in once the blocks land."
    },
    "monochromeRedOpacity": 0.55,
    "clearSpace": "0.5x the mark's width on every side",
    "minWidth": {
      "mark": "16px",
      "lockup_horizontal": "100px",
      "lockup_stacked": "64px"
    },
    "lockupHorizontal": {
      "wordmark_size": 0.594,
      "gap": 0.225
    },
    "lockupStacked": {
      "wordmark_size": 0.469,
      "gap": 0.16
    },
    "wordmark": {
      "construction": "Circles and straight lines. Not a typeface; never re-set in one.",
      "unitsPerEm": 1000,
      "xHeight": 546,
      "bowlOuterDiameter": 546,
      "ascender": 740,
      "descender": -258,
      "advance": {
        "d": 675,
        "o": 643,
        "p": 675,
        "l": 237,
        "a": 675
      },
      "sidebearing": {
        "d": 48,
        "o": 48,
        "p": 80,
        "l": 80,
        "a": 48
      },
      "strokeAsFractionOfXHeight": {
        "light": 0.124,
        "regular": 0.14,
        "medium": 0.198
      },
      "weightInLockup": "regular",
      "weightAlone": "light"
    }
  },
  "dataVisualisation": {
    "series": [
      {
        "name": "Doppla Blue",
        "light": "#1D6E8F",
        "dark": "#1D6E8F"
      },
      {
        "name": "Ochre",
        "light": "#BD871C",
        "dark": "#BD871C"
      },
      {
        "name": "Indigo",
        "light": "#4F54A0",
        "dark": "#686FBD"
      },
      {
        "name": "Sage",
        "light": "#569459",
        "dark": "#68A76A"
      },
      {
        "name": "Plum",
        "light": "#823B7D",
        "dark": "#984F92"
      },
      {
        "name": "Teal",
        "light": "#06999A",
        "dark": "#2AA9A9"
      }
    ],
    "sequential": {
      "ends": [
        "Less",
        "More"
      ],
      "light": [
        "#DBEFF9",
        "#B1D4E6",
        "#83B6D0",
        "#4D93B3",
        "#1D6E8F",
        "#0A5470",
        "#053E53"
      ],
      "dark": [
        "#16323E",
        "#1A485C",
        "#1F637F",
        "#2B7EA1",
        "#529CBF",
        "#82BAD5",
        "#B4D7E9"
      ]
    },
    "diverging": {
      "poles": [
        "Plum",
        "Ochre"
      ],
      "ends": [
        "Below",
        "Baseline",
        "Above"
      ],
      "light": [
        "#70306C",
        "#9C6496",
        "#C8A4C3",
        "#E7E4DF",
        "#D7B98B",
        "#C18E35",
        "#976213"
      ],
      "dark": [
        "#A15E9C",
        "#774272",
        "#4F314C",
        "#282623",
        "#543E1A",
        "#886116",
        "#BA882E"
      ]
    },
    "status": {
      "good": {
        "name": "Good",
        "role": "Healthy, complete, or passing.",
        "light": "#2A904B",
        "dark": "#45B164"
      },
      "warning": {
        "name": "Warning",
        "role": "Needs attention soon; nothing has failed yet.",
        "light": "#E6B731",
        "dark": "#ECBD3A"
      },
      "serious": {
        "name": "Serious",
        "role": "Partly failing; needs attention now.",
        "light": "#ED9831",
        "dark": "#F3A44A"
      },
      "critical": {
        "name": "Critical",
        "role": "Failed, destructive, or an error.",
        "light": "#A8002C",
        "dark": "#F97F95"
      }
    },
    "surfaces": {
      "light": "#FFFFFF",
      "dark": "#17171A"
    },
    "notes": [
      "Assign series colours in order, every time, and never cycle them. A seventh series folds into Other rather than taking a new colour.",
      "Doppla Blue is always the first series. Doppla Red is never a chart colour: it means input, and in a chart it would read as a warning.",
      "Give every chart with two or more series a legend, and label lines directly where there is room, so identity never rests on colour alone.",
      "Text stays in ink and slate; colour belongs to the mark it labels.",
      "Status colours are reserved for state and always appear with an icon and a word.",
      "Set charts on Paper in light mode and on the dark base in dark mode; the values are checked against those two surfaces."
    ]
  },
  "iconography": {
    "family": "Material Symbols Rounded",
    "url": "https://fonts.google.com/icons",
    "licence": "Apache License 2.0",
    "axes": {
      "FILL": 1,
      "wght": 400,
      "GRAD": 0,
      "opsz": {
        "min": 20,
        "max": 48
      }
    },
    "grid": 24,
    "padding": 2,
    "sizes": [
      20,
      24,
      40,
      48
    ],
    "status": {
      "good": "check_circle",
      "warning": "warning",
      "serious": "indeterminate_check_box",
      "critical": "dangerous"
    },
    "inlay": {
      "states": [
        "warning",
        "serious"
      ],
      "colour": "#15151A",
      "mode": "light"
    }
  },
  "coBranding": {
    "description": "Two arrangements: joint material, with a hairline rule between the two logos, and a partner's own material, where Doppla follows smaller under a short label.",
    "joint": {
      "rule": {
        "light": "#DADAD5",
        "dark": "rgba(255, 255, 255, 0.10)"
      },
      "ruleWeight": 0.016,
      "gap": 0.5,
      "partnerHeight": 1.0
    },
    "endorsement": {
      "label": "Works with",
      "labelColour": {
        "light": "#6B7280",
        "dark": "#8A8A8F"
      },
      "labelWeight": 300,
      "labelSize": 0.3,
      "labelGap": 0.2,
      "markScale": 0.6,
      "gap": 1.25
    },
    "notes": [
      "Lengths are fractions of the Doppla mark's width, except partnerHeight, a multiple of the height of the mark's blocks, and endorsement gap, in partner logo heights.",
      "In joint material the rule is as tall as the mark's blocks, and each logo keeps the mark's clear space (gap) from it.",
      "In a partner's own material the label sits above the lockup, aligned with the left edge of the blocks. markScale is the height of the blocks as a fraction of the partner logo's height."
    ]
  },
  "supergraphic": {
    "description": "The mark enlarged past the frame and set in two tones of the background, so only the seam and the hole show. For page backgrounds; text sits to the left of the rear block.",
    "tones": {
      "light": {
        "ground": "#F7F3EC",
        "rear": "#EAE7E2",
        "front": "#DEDCD9"
      },
      "dark": {
        "ground": "#17171A",
        "rear": "#232326",
        "front": "#2F2F32"
      }
    },
    "formats": {
      "header": {
        "width": 1600,
        "height": 840,
        "scale": 1.5,
        "rearLeft": 0.525,
        "use": "Blog and article headers"
      },
      "slide": {
        "width": 1920,
        "height": 1080,
        "scale": 1.4,
        "rearLeft": 0.51,
        "use": "Title and section slides"
      },
      "banner": {
        "width": 2400,
        "height": 480,
        "scale": 3.6,
        "rearLeft": 0.455,
        "use": "Docs and page banners"
      }
    },
    "notes": [
      "scale is the mark's artboard as a multiple of the canvas height; rearLeft is the rear block's left edge as a fraction of the canvas width. The mark is always centred vertically.",
      "Never in the brand colours, never mirrored or rotated, and never re-cropped from one format to fit another."
    ]
  },
  "motion": {
    "reveal": {
      "name": "Converge",
      "blockDuration": "650ms",
      "blockEasing": "cubic-bezier(0.2, 0.7, 0.2, 1)",
      "offsetsUnit": "mark widths",
      "redFrom": -0.67,
      "blueFrom": 2.45,
      "blueStartsAt": "wordmark end",
      "blueFadeDuration": "263ms",
      "holeDelay": "650ms",
      "holeDuration": "190ms",
      "holeEasing": "cubic-bezier(0, 0, 0.58, 1)",
      "wordmarkDelay": "650ms",
      "wordmarkDuration": "400ms",
      "wordmarkEasing": "ease-out",
      "usage": "Once per session at most. Never on a loop or on every route change.",
      "reducedMotion": "Render the resolved lockup with no animation."
    },
    "loader": {
      "name": "Two walls: the hole bounces off both, then sweeps through each colour",
      "loop": true,
      "bounceWallLeft": 13,
      "bounceWallRight": 37,
      "bounceDuration": "956ms",
      "bounceAOvershootCurve": "cubic-bezier(0.34, 1.4, 0.64, 1)",
      "bounceBOvershootCurve": "cubic-bezier(0.45, 0.3, 0.55, 1.3)",
      "entrySweepFraction": 0.8,
      "blueRightEdge": 58,
      "holePinOffset": 7,
      "loaderRedWidth": 52,
      "usage": "Buttons, inline rows, full-page loading states. Loops until the wait ends.",
      "reducedMotion": "Freeze on the resting frame (blue at 13, hole at 20) rather than animating."
    },
    "ui": {
      "fast": "120ms ease-out \u2014 hovers, focus rings",
      "default": "200ms ease-out \u2014 expands, reveals",
      "slow": "320ms cubic-bezier(0.4, 0, 0.2, 1) \u2014 dialogs, page transitions"
    }
  }
}