{
  "name": "Sivali Design System",
  "version": 1,
  "color": {
    "themes": [
      {
        "id": "current",
        "name": "Current"
      },
      {
        "id": "modern",
        "name": "Modernisation"
      }
    ],
    "tokens": [
      {
        "name": "black",
        "value": "#121212",
        "usage": "Brand black. Deepest ink, for photography overlays and print; UI text uses text-heading."
      },
      {
        "name": "white",
        "value": "#FFFFFF",
        "usage": "Page and card ground; all text, icons and the logo on indigo, teal and dark fills."
      },
      {
        "name": "neutral-700",
        "value": "#201F24",
        "usage": "Heading text (text-heading). 16.4:1 on white."
      },
      {
        "name": "neutral-600",
        "value": "#39383C",
        "usage": "Body text (text-body). 11.6:1 on white, 10.7:1 on neutral-50."
      },
      {
        "name": "neutral-500",
        "value": "#545356",
        "usage": "Secondary text on white and neutral-50 where muted is too light."
      },
      {
        "name": "neutral-400",
        "value": "#707072",
        "usage": "Muted text: captions, hints, placeholders (text-muted). 4.9:1 on white, 4.5:1 on neutral-50."
      },
      {
        "name": "neutral-300",
        "value": "#8E8D90",
        "usage": "Disabled text and decorative icons only; below 4.5:1 on white."
      },
      {
        "name": "neutral-200",
        "value": "#ADADAE",
        "usage": "Input and select borders (border-strong)."
      },
      {
        "name": "neutral-100",
        "value": "#DBDBDC",
        "usage": "Hairlines, card borders and dividers (border-default)."
      },
      {
        "name": "neutral-50",
        "value": "#F5F5F5",
        "usage": "Subtle section and tag background (surface-subtle)."
      },
      {
        "name": "primary-700",
        "value": "#393987",
        "usage": "Footer background and primary button hover/press. Text on it is white (10:1)."
      },
      {
        "name": "primary-600",
        "value": "#39399B",
        "usage": "Brand indigo: primary buttons, links, active nav, indigo section bands, eyebrows on white. White text 9.4:1."
      },
      {
        "name": "primary-500",
        "value": "#4848BA",
        "usage": "Info state; Modernisation theme primary action. White text 7.2:1."
      },
      {
        "name": "primary-400",
        "value": "#5C5CE8",
        "usage": "Brighter indigo for illustration and charts; not for text on white below 24px."
      },
      {
        "name": "primary-300",
        "value": "#7F7FF4",
        "usage": "Light indigo for illustration, charts and specimen outlines; decorative only."
      },
      {
        "name": "primary-200",
        "value": "#95A5FF",
        "usage": "Card hover border."
      },
      {
        "name": "primary-100",
        "value": "#C7CFFF",
        "usage": "The focus-ring tint and decorative lines or glows on indigo. Not for text: every text on indigo is white."
      },
      {
        "name": "primary-50",
        "value": "#EBEEFF",
        "usage": "Brand-soft tint behind indigo text and icons: icon tiles, active nav, secondary hover (surface-brand-soft)."
      },
      {
        "name": "aux-700",
        "value": "#015B6A",
        "usage": "Deep teal: the only dark auxiliary shade. Text and icons on mint (6.4:1 on aux-600)."
      },
      {
        "name": "aux-600",
        "value": "#ADFCB9",
        "usage": "Brand mint: the single accent. Hero CTA fill, eyebrows and icons on indigo (7.8:1 on primary-600). Never text on white (1.2:1)."
      },
      {
        "name": "aux-500",
        "value": "#C8FFD0",
        "usage": "Accent button hover."
      },
      {
        "name": "aux-400",
        "value": "#D5FFDB",
        "usage": "Mint tint for illustration and highlights behind aux-700 text."
      },
      {
        "name": "aux-300",
        "value": "#E3FFE7",
        "usage": "Mint tint for illustration and highlights behind aux-700 text."
      },
      {
        "name": "aux-200",
        "value": "#EBFFEE",
        "usage": "Mint tint for illustration and highlights behind aux-700 text."
      },
      {
        "name": "aux-100",
        "value": "#F1FFF3",
        "usage": "Accent-soft background behind aux-700 text: accent tags (surface-accent-soft). 7.5:1."
      },
      {
        "name": "aux-50",
        "value": "#F5FFF7",
        "usage": "Lightest mint wash for large background areas."
      },
      {
        "name": "brand-indigo",
        "value": "{primary-600}",
        "usage": "The brand indigo by role; the logo mark colour."
      },
      {
        "name": "brand-cyan",
        "value": "{aux-600}",
        "usage": "The brand accent by role (named cyan in the source, mint in practice)."
      },
      {
        "name": "text-heading",
        "value": {
          "current": "{neutral-700}",
          "modern": "#14142B"
        },
        "usage": "Headings and form labels, on surface-page, surface-subtle and surface-card in both themes (15:1 and up)."
      },
      {
        "name": "text-body",
        "value": {
          "current": "{neutral-600}",
          "modern": "#3B3B52"
        },
        "usage": "Body copy, on surface-page, surface-subtle, surface-card and surface-brand-soft in both themes (9.7:1 and up)."
      },
      {
        "name": "text-muted",
        "value": {
          "current": "{neutral-400}",
          "modern": "#6E6E87"
        },
        "usage": "Captions, hints, placeholders, on surface-page and surface-card (4.7:1 and up in both themes). Current theme also on surface-subtle (4.5:1); Modernisation theme falls to 4.4:1 on surface-subtle and 4.3:1 on surface-brand-soft, kept from the source."
      },
      {
        "name": "text-inverse",
        "value": "{white}",
        "usage": "Text and icons on surface-brand, action-primary and primary-700 fills (9.4:1 and up; 7.2:1 on the Modernisation action fill)."
      },
      {
        "name": "text-on-accent",
        "value": "{aux-700}",
        "usage": "Text and icons on a mint fill: surface-accent, action-accent and their hover (6.4:1 and up)."
      },
      {
        "name": "text-link",
        "value": "{primary-600}",
        "usage": "Inline links on surface-page and surface-card (9.4:1); hover goes to action-primary-hover."
      },
      {
        "name": "surface-page",
        "value": {
          "current": "{white}",
          "modern": "#FAFAFE"
        },
        "usage": "Page background."
      },
      {
        "name": "surface-subtle",
        "value": {
          "current": "{neutral-50}",
          "modern": "#F1F2FA"
        },
        "usage": "Alternate section bands, ghost-button hover, subtle cards and neutral tags."
      },
      {
        "name": "surface-card",
        "value": {
          "current": "{white}",
          "modern": "#FFFFFF"
        },
        "usage": "Cards, inputs and selects."
      },
      {
        "name": "surface-brand",
        "value": {
          "current": "{primary-600}",
          "modern": "#2A2A7A"
        },
        "usage": "Indigo section bands and brand cards; all text in text-inverse (white), eyebrows and icons in aux-600, the logo in its white version."
      },
      {
        "name": "surface-brand-soft",
        "value": {
          "current": "{primary-50}",
          "modern": "#EBEEFF"
        },
        "usage": "Icon tiles, active nav item, secondary-button hover, brand tags."
      },
      {
        "name": "surface-accent",
        "value": "{aux-600}",
        "usage": "Mint fill for the single hero CTA and highlights; text in text-on-accent."
      },
      {
        "name": "surface-accent-soft",
        "value": "{aux-100}",
        "usage": "Accent tags; text in aux-700."
      },
      {
        "name": "border-default",
        "value": {
          "current": "{neutral-100}",
          "modern": "rgba(20,20,43,.08)"
        },
        "usage": "Card borders, header bottom rule, dividers, neutral tag outline. Decorative; not a control boundary."
      },
      {
        "name": "border-strong",
        "value": {
          "current": "{neutral-200}",
          "modern": "rgba(20,20,43,.16)"
        },
        "usage": "Input, select and outline-tag borders. Kept from the source below 3:1 (2.2:1 on white current, 1.4:1 modern); pair with a label."
      },
      {
        "name": "border-brand",
        "value": "{primary-600}",
        "usage": "Indigo outline for selected and emphasised elements."
      },
      {
        "name": "action-primary",
        "value": {
          "current": "{primary-600}",
          "modern": "#4848BA"
        },
        "usage": "Primary button fill, secondary button text and border, focused input border; label in text-inverse."
      },
      {
        "name": "action-primary-hover",
        "value": {
          "current": "{primary-700}",
          "modern": "#39399B"
        },
        "usage": "Primary button hover; link hover."
      },
      {
        "name": "action-primary-active",
        "value": {
          "current": "{primary-700}",
          "modern": "#393987"
        },
        "usage": "Primary button press."
      },
      {
        "name": "action-accent",
        "value": "{aux-600}",
        "usage": "Accent (mint) button fill: one hero CTA per view; label in text-on-accent."
      },
      {
        "name": "action-accent-hover",
        "value": "{aux-500}",
        "usage": "Accent button hover."
      },
      {
        "name": "success",
        "value": "#1E8E3E",
        "usage": "Success state and the Do label. 4.2:1 on white: text at 24px+ or bold 19px+, or with an icon. Differs from danger by hue more than lightness: always add a word or icon."
      },
      {
        "name": "warning",
        "value": "#B7791F",
        "usage": "Warning state. 3.6:1 on white: text at 24px+ or bold 19px+, or icons; kept from the source."
      },
      {
        "name": "danger",
        "value": "#C62828",
        "usage": "Error text and input error border, the Don't label. 5.6:1 on white. Always pair with a word or icon."
      },
      {
        "name": "info",
        "value": "{primary-500}",
        "usage": "Info state. 7.2:1 on white."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "heading": "'Ubuntu',system-ui,sans-serif",
      "body": "'Open Sans',system-ui,sans-serif",
      "mono": "'Ubuntu Mono',ui-monospace,monospace"
    },
    "groups": [
      {
        "name": "Headings",
        "family": "heading",
        "styles": [
          {
            "name": "h1",
            "fontSize": "40px",
            "lineHeight": "48px",
            "fontWeight": 500,
            "sample": "Your Cloud, Your Way",
            "usage": "Page title, one per page."
          },
          {
            "name": "h2",
            "fontSize": "32px",
            "lineHeight": "40px",
            "fontWeight": 500,
            "sample": "Cloud Technology Enabler",
            "usage": "Section headings, under an eyebrow."
          },
          {
            "name": "h3",
            "fontSize": "24px",
            "lineHeight": "32px",
            "fontWeight": 500,
            "sample": "Trusted expertise, rooted in community",
            "usage": "Sub-section headings."
          },
          {
            "name": "title",
            "fontSize": "20px",
            "lineHeight": "28px",
            "fontWeight": 500,
            "sample": "Maintenance Support",
            "usage": "Card titles."
          },
          {
            "name": "subtitle",
            "fontSize": "18px",
            "lineHeight": "24px",
            "fontWeight": 500,
            "sample": "Contact us",
            "usage": "Footer column headings, small headings."
          }
        ]
      },
      {
        "name": "Body",
        "family": "body",
        "styles": [
          {
            "name": "body1",
            "fontSize": "16px",
            "lineHeight": "24px",
            "fontWeight": 400,
            "sample": "We help systems integrators, MSPs, telcos and universities adopt open-source cloud with confidence.",
            "usage": "Default body copy and lead paragraphs."
          },
          {
            "name": "body2",
            "fontSize": "14px",
            "lineHeight": "22px",
            "fontWeight": 400,
            "sample": "Canonical, Coriolis, Trilio and Nextcloud, delivered by a team that has been part of digital transformation since 1999.",
            "usage": "Card copy, form text, nav and button labels (Medium 500 there)."
          },
          {
            "name": "caption",
            "fontSize": "12px",
            "lineHeight": "18px",
            "fontWeight": 400,
            "sample": "Grand Slipi Tower Lt. 42, Jakarta Barat",
            "usage": "Captions, hints, tags, copyright; the eyebrow is this size in Medium, uppercase, tracked --eyebrow-tracking."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Nav item gap, tight icon nudges."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Button icon gap, tag and button row gap, footer link stack."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Card stack gap, input horizontal padding, small button padding."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Footer logo stack gap, grid gaps."
      },
      {
        "name": "space-5",
        "value": "20px",
        "usage": "Medium button horizontal padding."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "Card padding, page gutter, card grid gap."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "Header logo-to-nav gap, footer bottom padding."
      },
      {
        "name": "space-10",
        "value": "40px",
        "usage": "Footer column gap."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "Large gaps between blocks inside a section."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "Footer top padding."
      },
      {
        "name": "space-20",
        "value": "80px",
        "usage": "Section vertical padding on the site."
      },
      {
        "name": "space-24",
        "value": "96px",
        "usage": "Largest section spacing."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-sm",
        "value": "4px",
        "usage": "Small marks and chips."
      },
      {
        "name": "radius-md",
        "value": "8px",
        "usage": "Buttons, inputs, selects, nav items, social tiles. Modernisation theme: 10px (components/bundle.css)."
      },
      {
        "name": "radius-lg",
        "value": "12px",
        "usage": "Icon tiles in cards, logo panels, value tiles. Modernisation theme: 16px."
      },
      {
        "name": "radius-xl",
        "value": "16px",
        "usage": "Cards. Modernisation theme: 20px."
      },
      {
        "name": "radius-2xl",
        "value": "24px",
        "usage": "Large panels. Modernisation theme: 28px."
      },
      {
        "name": "radius-full",
        "value": "999px",
        "usage": "Tags and pills."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-none",
        "value": "none",
        "usage": "Flat surfaces: brand cards, bands."
      },
      {
        "name": "shadow-xs",
        "value": {
          "current": "0 1px 2px rgba(18,18,18,.06)",
          "modern": "0 1px 2px rgba(20,20,43,.04),0 0 0 1px rgba(20,20,43,.05)"
        },
        "usage": "Resting cards."
      },
      {
        "name": "shadow-sm",
        "value": {
          "current": "0 2px 6px rgba(18,18,18,.08)",
          "modern": "0 4px 12px rgba(20,20,43,.06),0 0 0 1px rgba(20,20,43,.05)"
        },
        "usage": "Raised panels; Modernisation glass surfaces."
      },
      {
        "name": "shadow-md",
        "value": {
          "current": "0 8px 24px rgba(57,57,155,.10)",
          "modern": "0 12px 32px rgba(57,57,155,.12)"
        },
        "usage": "Card hover lift (indigo-tinted)."
      },
      {
        "name": "shadow-lg",
        "value": "0 16px 48px rgba(57,57,155,.14)",
        "usage": "Deepest elevation in the scale; not used by the current components."
      }
    ]
  }
}