@maggioli-design-system/design-tokens/dist/css/colors-hex-tones.css

This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.

/*
@magma-design-system/design-tokens v13.7.1
Generated by Style Dictionary
Do not edit directly
Generated at Tue, 03 Jun 2025 08:08:46 GMT
*/

:root {
  --tone-slate-01: #1c222a;
  --tone-slate-02: #212932;
  --tone-slate-03: #364151;
  --tone-slate-04: #47556a;
  --tone-slate-05: #5f738f;
  --tone-slate-06: #95a4b8;
  --tone-slate-07: #cfd5df;
  --tone-slate-08: #e2e6ec;
  --tone-slate-09: #f1f3f6;
  --tone-slate-10: #f7f8fa;
  --tone-slate: #ffffff;
  --tone-grey-01: #1f2126;
  --tone-grey-02: #25282e;
  --tone-grey-03: #3b4049;
  --tone-grey-04: #4e5560;
  --tone-grey-05: #697282;
  --tone-grey-06: #9ca3af;
  --tone-grey-07: #d2d5da;
  --tone-grey-08: #e6e7ea;
  --tone-grey-09: #f2f3f5;
  --tone-grey-10: #f8f8f9;
  --tone-grey: #ffffff;
  --tone-zinc-01: #212125;
  --tone-zinc-02: #28282c;
  --tone-zinc-03: #404046;
  --tone-zinc-04: #54545c;
  --tone-zinc-05: #70707c;
  --tone-zinc-06: #a1a1aa;
  --tone-zinc-07: #d4d4d8;
  --tone-zinc-08: #e6e6e8;
  --tone-zinc-09: #f3f3f4;
  --tone-zinc-10: #f8f8f9;
  --tone-zinc: #ffffff;
  --tone-neutral-01: #212121;
  --tone-neutral-02: #282828;
  --tone-neutral-03: #404040;
  --tone-neutral-04: #545454;
  --tone-neutral-05: #717171;
  --tone-neutral-06: #a2a2a2;
  --tone-neutral-07: #d4d4d4;
  --tone-neutral-08: #e7e7e7;
  --tone-neutral-09: #f3f3f3;
  --tone-neutral-10: #f8f8f8;
  --tone-neutral: #ffffff;
  --tone-stone-01: #232120;
  --tone-stone-02: #2a2826;
  --tone-stone-03: #44403d;
  --tone-stone-04: #59534f;
  --tone-stone-05: #78706c;
  --tone-stone-06: #a7a19d;
  --tone-stone-07: #d7d4d2;
  --tone-stone-08: #e8e6e5;
  --tone-stone-09: #f4f3f2;
  --tone-stone-10: #f9f8f8;
  --tone-stone: #ffffff;
}

:root.pref-theme-dark {
  --tone-slate-01: #dde1e8;
  --tone-slate-02: #d2d8e1;
  --tone-slate-03: #abb6c7;
  --tone-slate-04: #8c9cb3;
  --tone-slate-05: #657b98;
  --tone-slate-06: #424f63;
  --tone-slate-07: #232b35;
  --tone-slate-08: #181d24;
  --tone-slate-09: #0e1115;
  --tone-slate-10: #07090b;
  --tone-slate: #000000;
  --tone-grey-01: #dee1e5;
  --tone-grey-02: #d4d7dd;
  --tone-grey-03: #b1b6c0;
  --tone-grey-04: #949ba8;
  --tone-grey-05: #707a8a;
  --tone-grey-06: #484f5a;
  --tone-grey-07: #272b31;
  --tone-grey-08: #1b1d21;
  --tone-grey-09: #0e0f11;
  --tone-grey-10: #08090a;
  --tone-grey: #000000;
  --tone-zinc-01: #e0e0e3;
  --tone-zinc-02: #d7d7db;
  --tone-zinc-03: #b5b5bd;
  --tone-zinc-04: #9a9aa4;
  --tone-zinc-05: #797985;
  --tone-zinc-06: #4e4e57;
  --tone-zinc-07: #2a2a2e;
  --tone-zinc-08: #1c1c1f;
  --tone-zinc-09: #111113;
  --tone-zinc-10: #090909;
  --tone-zinc: #000000;
  --tone-neutral-01: #e1e1e1;
  --tone-neutral-02: #d8d8d8;
  --tone-neutral-03: #b5b5b5;
  --tone-neutral-04: #9b9b9b;
  --tone-neutral-05: #7a7a7a;
  --tone-neutral-06: #4e4e4e;
  --tone-neutral-07: #2b2b2b;
  --tone-neutral-08: #1d1d1d;
  --tone-neutral-09: #0f0f0f;
  --tone-neutral-10: #090909;
  --tone-neutral: #000000;
  --tone-stone-01: #e2e0df;
  --tone-stone-02: #dad7d6;
  --tone-stone-03: #b9b5b1;
  --tone-stone-04: #a09a96;
  --tone-stone-05: #7f7872;
  --tone-stone-06: #534e4a;
  --tone-stone-07: #2d2a29;
  --tone-stone-08: #1e1c1b;
  --tone-stone-09: #100f0f;
  --tone-stone-10: #090908;
  --tone-stone: #000000;
}

@media (prefers-color-scheme: dark) {
  :root.pref-theme-system {
    --tone-slate-01: #dde1e8;
    --tone-slate-02: #d2d8e1;
    --tone-slate-03: #abb6c7;
    --tone-slate-04: #8c9cb3;
    --tone-slate-05: #657b98;
    --tone-slate-06: #424f63;
    --tone-slate-07: #232b35;
    --tone-slate-08: #181d24;
    --tone-slate-09: #0e1115;
    --tone-slate-10: #07090b;
    --tone-slate: #000000;
    --tone-grey-01: #dee1e5;
    --tone-grey-02: #d4d7dd;
    --tone-grey-03: #b1b6c0;
    --tone-grey-04: #949ba8;
    --tone-grey-05: #707a8a;
    --tone-grey-06: #484f5a;
    --tone-grey-07: #272b31;
    --tone-grey-08: #1b1d21;
    --tone-grey-09: #0e0f11;
    --tone-grey-10: #08090a;
    --tone-grey: #000000;
    --tone-zinc-01: #e0e0e3;
    --tone-zinc-02: #d7d7db;
    --tone-zinc-03: #b5b5bd;
    --tone-zinc-04: #9a9aa4;
    --tone-zinc-05: #797985;
    --tone-zinc-06: #4e4e57;
    --tone-zinc-07: #2a2a2e;
    --tone-zinc-08: #1c1c1f;
    --tone-zinc-09: #111113;
    --tone-zinc-10: #090909;
    --tone-zinc: #000000;
    --tone-neutral-01: #e1e1e1;
    --tone-neutral-02: #d8d8d8;
    --tone-neutral-03: #b5b5b5;
    --tone-neutral-04: #9b9b9b;
    --tone-neutral-05: #7a7a7a;
    --tone-neutral-06: #4e4e4e;
    --tone-neutral-07: #2b2b2b;
    --tone-neutral-08: #1d1d1d;
    --tone-neutral-09: #0f0f0f;
    --tone-neutral-10: #090909;
    --tone-neutral: #000000;
    --tone-stone-01: #e2e0df;
    --tone-stone-02: #dad7d6;
    --tone-stone-03: #b9b5b1;
    --tone-stone-04: #a09a96;
    --tone-stone-05: #7f7872;
    --tone-stone-06: #534e4a;
    --tone-stone-07: #2d2a29;
    --tone-stone-08: #1e1c1b;
    --tone-stone-09: #100f0f;
    --tone-stone-10: #090908;
    --tone-stone: #000000;
  }
}