Kaleido-Life.com 2026Apr10

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "primary": {
      "base": {
        "$value": "#008081",
        "$type": "color",
        "$description": "Primary Teal — core brand color from logo and brand guide"
      },
      "dark": {
        "$value": "#003535",
        "$type": "color",
        "$description": "Deep Teal — darkest brand shade, used for backgrounds and text"
      },
      "light": {
        "$value": "#22FFB0",
        "$type": "color",
        "$description": "Mint Green — bright accent from brand palette"
      },
      "hover": {
        "$value": "#009999",
        "$type": "color",
        "$description": "Teal hover state — slightly lighter than base"
      },
      "active": {
        "$value": "#006666",
        "$type": "color",
        "$description": "Teal active/pressed state"
      },
      "muted": {
        "$value": "#00808133",
        "$type": "color",
        "$description": "Teal at 20% opacity for subtle backgrounds"
      }
    },
    "accent": {
      "magenta": {
        "$value": "#FF70FF",
        "$type": "color",
        "$description": "Magenta Pink — secondary accent from brand palette"
      },
      "lime": {
        "$value": "#D9FA09",
        "$type": "color",
        "$description": "Neon Lime/Chartreuse — CTA accent from brand palette"
      },
      "limeHover": {
        "$value": "#C4E208",
        "$type": "color",
        "$description": "Lime hover state — slightly darker"
      },
      "mint": {
        "$value": "#22FFB0",
        "$type": "color",
        "$description": "Mint Green — matches primary.light, used for gradient endpoints"
      },
      "gold": {
        "$value": "#D9FA09",
        "$type": "color",
        "$description": "Maps to lime — used as highlight/CTA accent"
      }
    },
    "background": {
      "dark": {
        "$value": "#0A1A1B",
        "$type": "color",
        "$description": "Near-black dark background — derived from brand guide dark slides"
      },
      "darkAlt": {
        "$value": "#003535",
        "$type": "color",
        "$description": "Deep teal background — from brand palette"
      },
      "card": {
        "$value": "#0D2626",
        "$type": "color",
        "$description": "Dark card surface with teal undertone"
      },
      "elevated": {
        "$value": "#143333",
        "$type": "color",
        "$description": "Elevated card/modal surface"
      },
      "light": {
        "$value": "#C5E0DC",
        "$type": "color",
        "$description": "Light mint/teal tint — from brand guide section dividers"
      },
      "white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "White background for light-mode sections"
      },
      "input": {
        "$value": "#0F2D2D",
        "$type": "color",
        "$description": "Input field background — dark with teal tint"
      },
      "overlay": {
        "$value": "#003535E6",
        "$type": "color",
        "$description": "Deep teal overlay at 90% opacity"
      }
    },
    "text": {
      "primary": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Primary text on dark backgrounds"
      },
      "secondary": {
        "$value": "#B0D4D4",
        "$type": "color",
        "$description": "Secondary text — teal-tinted off-white"
      },
      "tertiary": {
        "$value": "#6B9A9A",
        "$type": "color",
        "$description": "Tertiary/muted text"
      },
      "inverse": {
        "$value": "#003535",
        "$type": "color",
        "$description": "Text on light/lime backgrounds"
      },
      "onLime": {
        "$value": "#0A1A1B",
        "$type": "color",
        "$description": "Dark text specifically for lime CTA buttons"
      }
    },
    "border": {
      "default": {
        "$value": "#1A4040",
        "$type": "color",
        "$description": "Default border — dark teal"
      },
      "subtle": {
        "$value": "#0F2D2D",
        "$type": "color",
        "$description": "Subtle border — barely visible"
      },
      "focus": {
        "$value": "#22FFB0",
        "$type": "color",
        "$description": "Focus ring — mint green for accessibility"
      },
      "accent": {
        "$value": "#008081",
        "$type": "color",
        "$description": "Accent border — primary teal"
      }
    },
    "status": {
      "success": {
        "$value": "#22FFB0",
        "$type": "color",
        "$description": "Success — mint green"
      },
      "warning": {
        "$value": "#D9FA09",
        "$type": "color",
        "$description": "Warning — neon lime"
      },
      "error": {
        "$value": "#FF4466",
        "$type": "color",
        "$description": "Error — warm red"
      },
      "info": {
        "$value": "#008081",
        "$type": "color",
        "$description": "Info — primary teal"
      }
    },
    "neutral": {
      "0": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "White"
      },
      "1": {
        "$value": "#F0F5F5",
        "$type": "color",
        "$description": "Near-white with teal tint"
      },
      "2": {
        "$value": "#C5E0DC",
        "$type": "color",
        "$description": "Light teal tint"
      },
      "3": {
        "$value": "#6B9A9A",
        "$type": "color",
        "$description": "Mid teal grey"
      },
      "4": {
        "$value": "#3A6666",
        "$type": "color",
        "$description": "Dark teal grey"
      },
      "5": {
        "$value": "#1A4040",
        "$type": "color",
        "$description": "Very dark teal"
      },
      "6": {
        "$value": "#0D2626",
        "$type": "color",
        "$description": "Near-black teal"
      },
      "7": {
        "$value": "#0A1A1B",
        "$type": "color",
        "$description": "Darkest background"
      }
    }
  },
  "gradient": {
    "logoTeal": {
      "$value": "linear-gradient(90deg, #008181, #00FFA8)",
      "$type": "gradient",
      "$description": "Logo gradient — teal to green (from SVG linearGradient)"
    },
    "mintToMagenta": {
      "$value": "linear-gradient(135deg, #22FFB0, #FF70FF)",
      "$type": "gradient",
      "$description": "Accent gradient — mint to magenta"
    },
    "fullSpectrum": {
      "$value": "linear-gradient(90deg, #003535, #008081, #22FFB0, #D9FA09)",
      "$type": "gradient",
      "$description": "Full brand spectrum sweep"
    },
    "tealToLime": {
      "$value": "linear-gradient(90deg, #008081, #D9FA09)",
      "$type": "gradient",
      "$description": "CTA gradient — teal to lime"
    },
    "darkTeal": {
      "$value": "linear-gradient(180deg, #0A1A1B, #003535)",
      "$type": "gradient",
      "$description": "Dark vertical fade — page sections"
    },
    "heroBg": {
      "$value": "radial-gradient(ellipse at 60% 30%, #00808140, transparent 70%), radial-gradient(ellipse at 20% 80%, #22FFB020, transparent 60%), #0A1A1B",
      "$type": "gradient",
      "$description": "Hero section ambient glow effect"
    },
    "cardGlow": {
      "$value": "linear-gradient(135deg, #00808120, #22FFB010, transparent)",
      "$type": "gradient",
      "$description": "Subtle card shine effect"
    },
    "headingTeal": {
      "$value": "linear-gradient(90deg, #008081, #22FFB0)",
      "$type": "gradient",
      "$description": "Heading text gradient — teal to mint"
    },
    "headingMagenta": {
      "$value": "linear-gradient(90deg, #FF70FF, #22FFB0)",
      "$type": "gradient",
      "$description": "Heading text gradient — magenta to mint"
    },
    "headingLime": {
      "$value": "linear-gradient(90deg, #D9FA09, #22FFB0)",
      "$type": "gradient",
      "$description": "Heading text gradient — lime to mint"
    }
  },
  "typography": {
    "fontFamily": {
      "heading": {
        "$value": "'Owners Wide', 'Impact', 'Arial Black', sans-serif",
        "$type": "fontFamily",
        "$description": "Owners Wide Black — brand headline font (ALL CAPS only)"
      },
      "body": {
        "$value": "'Sora', 'Inter', -apple-system, sans-serif",
        "$type": "fontFamily",
        "$description": "Sora — brand body font (Regular + Medium)"
      },
      "mono": {
        "$value": "'JetBrains Mono', 'Fira Code', monospace",
        "$type": "fontFamily",
        "$description": "Monospace for code/data elements"
      }
    },
    "fontSize": {
      "xs": {
        "$value": "0.75rem",
        "$type": "dimension",
        "$description": "12px — fine print"
      },
      "sm": {
        "$value": "0.875rem",
        "$type": "dimension",
        "$description": "14px — captions"
      },
      "base": {
        "$value": "1rem",
        "$type": "dimension",
        "$description": "16px — body text"
      },
      "md": {
        "$value": "1.125rem",
        "$type": "dimension",
        "$description": "18px — larger body"
      },
      "lg": {
        "$value": "1.25rem",
        "$type": "dimension",
        "$description": "20px — subheadings"
      },
      "xl": {
        "$value": "1.5rem",
        "$type": "dimension",
        "$description": "24px — section headings"
      },
      "2xl": {
        "$value": "2rem",
        "$type": "dimension",
        "$description": "32px — page headings"
      },
      "3xl": {
        "$value": "2.5rem",
        "$type": "dimension",
        "$description": "40px — hero subtext"
      },
      "4xl": {
        "$value": "3.5rem",
        "$type": "dimension",
        "$description": "56px — hero headline mobile"
      },
      "5xl": {
        "$value": "4.5rem",
        "$type": "dimension",
        "$description": "72px — hero headline desktop"
      },
      "display": {
        "$value": "6rem",
        "$type": "dimension",
        "$description": "96px — display/statement text"
      }
    },
    "fontWeight": {
      "regular": {
        "$value": "400",
        "$type": "fontWeight",
        "$description": "Sora Regular — body text"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight",
        "$description": "Sora Medium — emphasis"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight",
        "$description": "Sora SemiBold — subheadings"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "$description": "Sora Bold — strong emphasis"
      },
      "black": {
        "$value": "900",
        "$type": "fontWeight",
        "$description": "Owners Wide Black — headlines"
      }
    },
    "lineHeight": {
      "tight": {
        "$value": "0.95",
        "$type": "number",
        "$description": "Headline leading — tighter than auto per brand guide"
      },
      "snug": {
        "$value": "1.1",
        "$type": "number",
        "$description": "Subheading leading"
      },
      "base": {
        "$value": "1.5",
        "$type": "number",
        "$description": "Body text leading"
      },
      "relaxed": {
        "$value": "1.75",
        "$type": "number",
        "$description": "Long-form reading"
      }
    },
    "letterSpacing": {
      "tightHeadline": {
        "$value": "-0.02em",
        "$type": "dimension",
        "$description": "Headlines — auto/tight per brand guide"
      },
      "normal": {
        "$value": "0em",
        "$type": "dimension",
        "$description": "Body — auto per brand guide"
      },
      "wide": {
        "$value": "0.05em",
        "$type": "dimension",
        "$description": "Caps labels"
      },
      "wider": {
        "$value": "0.1em",
        "$type": "dimension",
        "$description": "Small caps / tags"
      }
    },
    "headlineRules": {
      "caseRule": {
        "$value": "uppercase",
        "$type": "string",
        "$description": "Headlines MUST be ALL CAPS per brand guide"
      },
      "alignment": {
        "$value": "left",
        "$type": "string",
        "$description": "Left-aligned preferred; center okay sparingly for digital"
      },
      "styling": {
        "$value": "multi-color gradients on single words, outlines to deemphasize, overlaps, textural/layered",
        "$type": "string",
        "$description": "Brand guide headline styling rules"
      }
    }
  },
  "spacing": {
    "0": {
      "$value": "0px",
      "$type": "dimension"
    },
    "1": {
      "$value": "4px",
      "$type": "dimension"
    },
    "2": {
      "$value": "8px",
      "$type": "dimension"
    },
    "3": {
      "$value": "12px",
      "$type": "dimension"
    },
    "4": {
      "$value": "16px",
      "$type": "dimension"
    },
    "5": {
      "$value": "20px",
      "$type": "dimension"
    },
    "6": {
      "$value": "24px",
      "$type": "dimension"
    },
    "8": {
      "$value": "32px",
      "$type": "dimension"
    },
    "10": {
      "$value": "40px",
      "$type": "dimension"
    },
    "12": {
      "$value": "48px",
      "$type": "dimension"
    },
    "16": {
      "$value": "64px",
      "$type": "dimension"
    },
    "20": {
      "$value": "80px",
      "$type": "dimension"
    },
    "24": {
      "$value": "96px",
      "$type": "dimension"
    },
    "32": {
      "$value": "128px",
      "$type": "dimension"
    },
    "40": {
      "$value": "160px",
      "$type": "dimension"
    }
  },
  "borderRadius": {
    "none": {
      "$value": "0px",
      "$type": "dimension"
    },
    "sm": {
      "$value": "6px",
      "$type": "dimension"
    },
    "md": {
      "$value": "12px",
      "$type": "dimension"
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension"
    },
    "xl": {
      "$value": "24px",
      "$type": "dimension"
    },
    "2xl": {
      "$value": "32px",
      "$type": "dimension"
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Pill shape — used for CTAs and tags per brand guide"
    }
  },
  "shadow": {
    "subtle": {
      "$value": "0 1px 3px rgba(0,53,53,0.12)",
      "$type": "shadow"
    },
    "default": {
      "$value": "0 4px 12px rgba(0,53,53,0.15)",
      "$type": "shadow"
    },
    "elevated": {
      "$value": "0 8px 32px rgba(0,53,53,0.2)",
      "$type": "shadow"
    },
    "glowTeal": {
      "$value": "0 0 24px rgba(0,128,129,0.4)",
      "$type": "shadow",
      "$description": "Teal glow for hover states"
    },
    "glowMint": {
      "$value": "0 0 24px rgba(34,255,176,0.3)",
      "$type": "shadow",
      "$description": "Mint glow for focus/CTA"
    },
    "glowMagenta": {
      "$value": "0 0 24px rgba(255,112,255,0.3)",
      "$type": "shadow",
      "$description": "Magenta glow accent"
    },
    "glowLime": {
      "$value": "0 0 24px rgba(217,250,9,0.3)",
      "$type": "shadow",
      "$description": "Lime glow for primary CTAs"
    }
  },
  "transition": {
    "fast": {
      "$value": "150ms ease-out",
      "$type": "string"
    },
    "default": {
      "$value": "250ms ease-in-out",
      "$type": "string"
    },
    "slow": {
      "$value": "400ms ease-in-out",
      "$type": "string"
    },
    "spring": {
      "$value": "500ms cubic-bezier(0.34, 1.56, 0.64, 1)",
      "$type": "string",
      "$description": "Bouncy spring for playful Gen Z interactions"
    }
  },
  "breakpoint": {
    "mobile": {
      "$value": "480px",
      "$type": "dimension"
    },
    "mobileLandscape": {
      "$value": "640px",
      "$type": "dimension"
    },
    "tablet": {
      "$value": "768px",
      "$type": "dimension"
    },
    "desktop": {
      "$value": "1024px",
      "$type": "dimension"
    },
    "wide": {
      "$value": "1280px",
      "$type": "dimension"
    },
    "ultrawide": {
      "$value": "1536px",
      "$type": "dimension"
    }
  },
  "effect": {
    "grain": {
      "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E\")",
      "$type": "string",
      "$description": "Grain texture overlay — per brand guide styling rules (tangible textures, grain overlays)"
    },
    "glassmorphism": {
      "$value": "backdrop-filter: blur(16px); background: rgba(0,53,53,0.6); border: 1px solid rgba(0,128,129,0.2);",
      "$type": "string",
      "$description": "Glass card effect matching app mockup aesthetic"
    }
  },
  "logo": {
    "svgPrimary": {
      "$value": "Kaleido-Life_Logo_Final_Primary_FullColor.svg",
      "$type": "string",
      "$description": "Primary full-color logo — horizontal with brandmark + wordmark"
    },
    "svgBrandmark": {
      "$value": "Kaleido-Life_Logo_Final_BrandMark_FullColor.svg",
      "$type": "string",
      "$description": "Standalone hexagonal brandmark"
    },
    "svgWhite": {
      "$value": "Kaleido-Life_Logo_Final_Primary_White.svg",
      "$type": "string",
      "$description": "White variant for dark backgrounds"
    },
    "animatedGif": {
      "$value": "Kaleido Life logo animation.GIF",
      "$type": "string",
      "$description": "Animated logo — 2.9MB, use sparingly (hero only)"
    },
    "gradientStops": {
      "$value": [
        "#008181",
        "#00FFA8"
      ],
      "$type": "array",
      "$description": "Logo gradient stops — outer ring: teal→green, inner ring: reverse"
    },
    "textColors": {
      "kaleido": {
        "$value": "#013536",
        "$type": "color",
        "$description": "Wordmark 'Kaleido' — deep teal"
      },
      "life": {
        "$value": "#008081",
        "$type": "color",
        "$description": "Wordmark 'Life' — primary teal"
      }
    }
  }
}