source

---
name: Pastel
description:
  A fresh, energetic workspace built on coral, mint, and sky — warm gradients
  that feel alive without screaming.
mode: light
colors:
  background: "#FFF8F5"
  surface: "#FFFFFF"
  ink: "#1A1614"
  ink-muted: "#8A7F7A"
  primary: "#FF6B4A"
  on-primary: "#FFFFFF"
  accent: "#FF6B4A"
  muted: "#8A7F7A"
  muted-foreground: "#8A7F7A"
  border: "#F0E8E4"
  link: "{colors.accent}"
typography:
  body:
    family: "Inter, ui-sans-serif, system-ui, sans-serif"
    size: "15px"
    weight: 400
    lineHeight: 1.6
  h1:
    family: "Plus Jakarta Sans, Inter, ui-sans-serif, sans-serif"
    size: "48px"
    weight: 800
    lineHeight: 1.1
  h2:
    family: "Plus Jakarta Sans, Inter, ui-sans-serif, sans-serif"
    size: "30px"
    weight: 700
    lineHeight: 1.2
  h3:
    family: "Plus Jakarta Sans, Inter, ui-sans-serif, sans-serif"
    size: "18px"
    weight: 600
    lineHeight: 1.35
  mono:
    family: "JetBrains Mono, ui-monospace, monospace"
    size: "13px"
    weight: 400
    lineHeight: 1.7
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "40px"
  "2xl": "72px"
rounded:
  sm: "6px"
  md: "12px"
  lg: "20px"
  xl: "32px"
  full: "9999px"
shadows:
  card: "0 2px 12px rgba(255,107,74,0.07), 0 1px 3px rgba(26,22,20,0.05)"
  elevated: "0 8px 32px rgba(255,107,74,0.12), 0 2px 8px rgba(26,22,20,0.06)"
  glow: "0 0 28px rgba(255,107,74,0.22)"
  subtle: "0 1px 4px rgba(26,22,20,0.05)"
components:
  button-primary:
    background: "linear-gradient(135deg, #FF8C6B 0%, #FF6B4A 60%, #FF4567 100%)"
    color: "#FFFFFF"
    fontFamily: "Plus Jakarta Sans, Inter, sans-serif"
    fontSize: "14px"
    fontWeight: "700"
    radius: "12px"
    paddingX: "22px"
    paddingY: "11px"
    uppercase: "false"
    letterSpacing: "0.01em"
    shadow: "0 4px 16px rgba(255,107,74,0.32)"
  button-secondary:
    background: "rgba(255,255,255,0.8)"
    color: "#FF6B4A"
    border: "1px solid #F0E8E4"
    fontWeight: "600"
    radius: "12px"
    paddingX: "22px"
    paddingY: "11px"
  agent-chip:
    background: "linear-gradient(135deg, #D6F5EE 0%, #C8EDFF 100%)"
    color: "#1A7A60"
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: "11px"
    fontWeight: "600"
    radius: "6px"
    paddingX: "10px"
    paddingY: "4px"
    uppercase: "true"
    letterSpacing: "0.07em"
  card:
    background: "rgba(255,255,255,0.80)"
    border: "1px solid rgba(240,232,228,0.95)"
    radius: "20px"
    shadow: "0 2px 12px rgba(255,107,74,0.07), 0 1px 3px rgba(26,22,20,0.05)"
    padding: "28px"
  hero-gradient:
    background:
      "linear-gradient(135deg, #FFEEE9 0%, #FFF5E0 35%, #E6FAF5 70%, #E0F2FF
      100%)"
  sidebar:
    background: "rgba(255,248,245,0.90)"
    width: "240px"
    borderRight: "1px solid rgba(240,232,228,0.9)"
  badge-ai:
    background: "linear-gradient(135deg, #AAEEDD 0%, #A8DCFF 100%)"
    color: "#0F5C48"
    fontWeight: "600"
    fontSize: "11px"
    radius: "9999px"
    paddingX: "10px"
    paddingY: "3px"
  tag-human:
    background: "linear-gradient(135deg, #FFE0D6 0%, #FFECD6 100%)"
    color: "#B03A1E"
    fontWeight: "600"
    fontSize: "11px"
    radius: "9999px"
    paddingX: "10px"
    paddingY: "3px"
atmosphere:
  mood:
    "Warm coral meets cool mint and sky — energetic, human, and fresh without
    being loud."
  gradientPalette:
    "Hero: peach to butter to mint to sky. CTA: coral to rose. AI presence: mint
    to sky. Human presence: peach to butter."
  texture:
    "Soft glassmorphism surfaces on a warm off-white base. No noise. Gradients
    are gentle washes, not neon blasts."
  motion: "Smooth 220ms ease-in-out. Subtle lift on hover."
---

## Overview

A light-mode pastel variant of the Guilde kit. Warm off-white canvas, coral
accent, mint and sky gradients for AI presence — energetic but not loud. Pair
with Plus Jakarta Sans for display weight and JetBrains Mono for machine-side
affordances.

## Colors

- Warm off-white background (`#FFF8F5`) — soft, never sterile.
- Pure white surfaces (`#FFFFFF`) — cards float with subtle glow shadows.
- Warm near-black ink (`#1A1614`) — pulls toward sepia, not blue.
- Coral accent (`#FF6B4A`) — primary CTAs and active states.
- Mint and sky for AI presence (`#D6F5EE` → `#C8EDFF` gradient).
- Peach and butter for human presence (`#FFE0D6` → `#FFECD6` gradient).

## Typography

- **Plus Jakarta Sans** for headings — modern geometric with confident weight.
- **Inter** for body — neutral, dependable.
- **JetBrains Mono** for agent chips and code — signals "the machine is
  speaking".

## Usage

Reach for Pastel Modern when the surface should feel optimistic and fresh —
marketing landings, onboarding, product tours. Use the gradients sparingly on
accent elements; let the warm off-white canvas do the heavy lifting.