@skaile/brand 0.1.0

package/README.md

@@ -0,0 +1,25 @@
+# @skaile/brand
+
+The single source of truth for the Skaile brand: design tokens, CSS custom
+properties, a Tailwind preset, and brand assets (logo, icon, identity).
+
+## Surfaces
+
+- `@skaile/brand/brand.css` — raw CSS custom properties (`--color-*`), dark, the
+  marketing/website surface (gradient, persona avatars, spacing/shadow scales).
+- `@skaile/brand/theme.css` — shadcn-semantic CSS variables, light + dark, the
+  app surface (platform, store).
+- `@skaile/brand/tailwind-preset` — Tailwind preset bound to `theme.css` vars.
+- `@skaile/brand/tokens` — canonical `tokens.json`.
+- `@skaile/brand/assets/*` — `skaile-logo.svg`, `skaile-icon.svg`, `favicon.svg`, `identity.md`.
+
+## Quick start
+
+```css
+/* App (platform/store), Tailwind v4 */
+@import '@skaile/brand/theme.css';
+```
+```ts
+// Marketing (Astro) — plain CSS asset import
+import '@skaile/brand/brand.css'
+```

package/assets/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none">
+  <rect width="200" height="200" rx="40" fill="#7300FF"/>
+  <path
+    d="M60 60C60 45 72 33 87 33H140C147 33 153 39 153 46C153 53 147 59 140 59H60C45 59 33 71 33 86C33 101 45 113 60 113H113C128 113 140 125 140 139C140 154 128 166 113 166H60C52 166 46 160 46 152C46 145 52 139 60 139H140C154 139 166 127 166 113C166 98 154 86 140 86H87C72 86 60 74 60 60Z"
+    stroke="#FFFFFF"
+    stroke-width="11"
+  />
+</svg>

package/assets/identity.md

@@ -0,0 +1,164 @@
+---
+status: approved
+mood: 'modern depth — enterprise trust through a single violet mark on a dark canvas'
+mode: both
+default_mode: dark
+last_updated: 2026-05-14
+---
+
+# Skaile Brand Identity
+
+## Aesthetic Direction
+
+Modern depth. Skaile is an enterprise AI workspace — the visual language reads as serious, modern, and restrained. The site, the platform, and the deck system share one canvas: dark slate surfaces with a soft radial purple ambient behind hero sections, and a single violet mark carrying everything that reads as "Skaile".
+
+The brand is deliberately mono-color. One violet, one canvas, generous whitespace. No signature gradient, no competing accents, no warm/cool dual palette.
+
+The brand avoids two extremes:
+
+- **Too corporate:** Light backgrounds, generic blue, stock photos, dense layouts — reads as legacy software.
+- **Too neon-tech:** Cyber green, harsh saturation, monospace-everything — alienates business buyers.
+
+Skaile sits in the modern-product band (Linear, Vercel, Astro) with restraint as the memorable element.
+
+## Color Palette
+
+### Brand Story
+
+Violet is the platform's voice — depth, intelligence, authority. The dark canvas with its soft purple radial ambient is the stage. Restraint is the signature. Where other tools chase polychrome decoration, Skaile uses one color confidently.
+
+### Colors
+
+| Token            | Light Mode | Dark Mode | Usage                                                  |
+| ---------------- | ---------- | --------- | ------------------------------------------------------ |
+| Primary          | `#7300FF`  | `#9B40FF` | Headings, links, primary CTAs, hero highlights, active states |
+| Primary bright   | `#9B40FF`  | `#BC52EE` | Hover states, accent borders, highlight markers        |
+| Background       | `#FAFAF9`  | `#13151A` | Page background                                        |
+| Surface          | `#FFFFFF`  | `#1A1C22` | Cards, panels                                          |
+| Surface raised   | `#FFFFFF`  | `#23262D` | Elevated content, popovers, command palette            |
+| Ambient purple   | -          | `#1B1A3F` | Radial fade center behind hero sections                |
+| Text             | `#1C1917`  | `#F4F4F5` | Primary text                                           |
+| Text muted       | `#78716C`  | `#A1A1AA` | Labels, secondary text                                 |
+| Text dim         | `#A8A29E`  | `#71717A` | Timestamps, captions                                   |
+| Border           | `#E7E5E4`  | `#2E303A` | Dividers, input borders                                |
+| Border strong    | `#D6D3D1`  | `#3D404A` | Card borders, separators with weight                   |
+| Error            | `#DC2626`  | `#EF4444` | Destructive actions                                    |
+| Success          | `#059669`  | `#10B981` | Completed states                                       |
+| Warning          | `#D97706`  | `#F59E0B` | Caution states                                         |
+
+### Ambient Background
+
+```
+radial-gradient(71.92% 191.69% at 50% 50%, #1B1A3F 0%, #000 100%)
+```
+
+This is the only gradient in the brand. It's an **atmospheric backdrop**, not a brand mark. Painted behind hero sections at low intensity to give the dark canvas a soft purple undertone. It must read as ambient atmosphere — never as a logo, mark, or CTA fill.
+
+### Color Usage Rules
+
+- **Violet (~10%)** is the only brand color. It carries headings, links, CTAs, focus rings, active nav, brand marks. If only one color is visible in a UI region, it should be violet.
+- **Dark slate neutrals (~85%)** carry surfaces, body text, borders. Cool, neutral undertone — not warm stone, not pure black.
+- **Ambient purple (~5%)** sits behind hero sections only. Never use it as a foreground fill.
+- **Reserve hot saturation.** Status colors (error/success/warning) are functional, not brand. They should not appear at brand scale in marketing surfaces.
+
+### Decorative Palette (Not Brand)
+
+Marketing components sometimes use decorative blob illustrations inside cards (e.g., the Deliverable section uses `#FF5D01 -> #D8377E` and `#4F39FA -> #BC52EE` blobs). These are **illustration-only**. They are not part of the brand and must not appear on:
+
+- CTAs, buttons, links, or any interactive element
+- Headings or body text
+- Logos, brand marks, or document chrome
+- Slide titles, deck accents, or PDF headers
+
+If a deck or doc needs visual variety beyond violet, prefer typographic weight, whitespace, or surface elevation — not new colors.
+
+## Typography
+
+### Heading: Plus Jakarta Sans
+
+Bold (700) and semibold (600). Geometric sans-serif with subtly rounded terminals — modern, confident, distinct from the Inter-everywhere SaaS norm. Used for page titles, section headers, card titles, hero text.
+
+### Body: Inter
+
+Regular (400) and medium (500). The gold standard for UI legibility. Used for body text, form labels, table cells, navigation, descriptions.
+
+### Mono: JetBrains Mono
+
+Regular (400). For code, schemas, terminal output, technical logs.
+
+### Typographic Treatment
+
+- Tight tracking on display sizes (`-0.04em` to `-0.02em`).
+- Wide tracking (`0.2em`) on small uppercase eyebrows and section labels.
+- Two font weights per screen max.
+- Hero highlights: solid violet fill (`var(--color-brand)` = `#7300FF`), no gradient.
+
+## Spatial System
+
+- **Base unit:** 8px grid
+- **Spacing scale:** 4, 8, 12, 16, 24, 32, 48, 64, 96, 128
+- **Page max width:** 1600px with `clamp(16px, 4vw, 48px)` gutters
+- **Density:** Generous whitespace — content breathes. More editorial than dashboard-dense.
+
+## Border Radius
+
+- **Default:** `6px`
+- **Small (badges, tags):** `4px`
+- **Large (cards, modals):** `8px`
+- **Extra large (hero cards, feature blocks):** `12px` to `20px`
+- **Full (avatars, pill buttons):** `9999px`
+
+## Elevation & Shadows
+
+Shadows on dark surfaces use deep, cool casts. The `glow` is reserved for hero moments and tints violet, not white.
+
+- **sm:** `0 1px 2px rgba(0, 0, 0, 0.4)` — subtle lift
+- **md:** `0 4px 12px rgba(0, 0, 0, 0.45)` — modals, dropdowns
+- **lg:** `0 12px 32px rgba(0, 0, 0, 0.55)` — elevated overlays
+- **glow:** `0 0 60px rgba(155, 64, 255, 0.25)` — hero CTA halo, featured cards
+
+## Atmosphere
+
+Dark, violet-mono, depth through layering. The atmosphere comes from:
+
+- Dark slate surfaces stacked with subtle elevation differences (`#13151A` -> `#1A1C22` -> `#23262D`).
+- A radial purple ambient at the base of hero sections (`#1B1A3F` -> `#000`).
+- Solid violet as the single recurring brand mark.
+- Generous whitespace — content never crowds.
+
+## The Memorable Element
+
+**Violet on dark.** A single saturated violet (`#7300FF` light / `#9B40FF` dark) used confidently for every brand moment — hero highlights, primary CTAs, headings, active states — against a dark slate canvas with a soft radial purple backdrop.
+
+Restraint is the signature. Where other AI tools chase polychrome gradients, Skaile uses one color. That confidence is what makes the brand recognizable at a glance.
+
+- **Violet = the brand** (every CTA, link, heading, highlight)
+- **Dark slate = the canvas** (everything else)
+- **Ambient purple = the atmosphere** (hero backdrop only)
+
+## Tone of Voice
+
+- **Confident, not arrogant.** "Your expertise, skaile'd." Not "We've revolutionized work."
+- **Clear, not dumbed-down.** Respect the business buyer's intelligence without requiring technical literacy.
+- **Direct, not verbose.** Business users value their time. One sentence beats three.
+- **Warm, not casual.** Professional warmth — no Slack-style emoji culture.
+
+## Do's and Don'ts
+
+### Do
+
+- Lead with dark mode in marketing and product surfaces.
+- Use solid violet (`#7300FF` light / `#9B40FF` dark) for every brand moment.
+- Use Plus Jakarta Sans for headings, Inter for body.
+- Use cool dark slate neutrals (`#13151A` -> `#23262D`) for surfaces.
+- Stack elevation with brightness, not heavy shadows.
+- Let whitespace and typography carry hierarchy.
+
+### Don't
+
+- Use gradients on brand marks, CTAs, or highlighted text — the brand is mono-violet now.
+- Use orange, pink, or magenta as standalone brand colors — they are decorative-only illustration palette, not brand.
+- Use teal, amber, or stone-gray accents — they belong to the previous brand.
+- Apply the radial ambient fade outside hero backdrops — it is not a CTA fill.
+- Use more than two font weights on a single screen.
+- Introduce new colors to create variety in decks — use whitespace, weight, and elevation instead.

package/assets/skaile-icon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none">
+  <rect width="200" height="200" rx="40" fill="#7300FF"/>
+  <path
+    d="M60 60C60 45 72 33 87 33H140C147 33 153 39 153 46C153 53 147 59 140 59H60C45 59 33 71 33 86C33 101 45 113 60 113H113C128 113 140 125 140 139C140 154 128 166 113 166H60C52 166 46 160 46 152C46 145 52 139 60 139H140C154 139 166 127 166 113C166 98 154 86 140 86H87C72 86 60 74 60 60Z"
+    stroke="#FFFFFF"
+    stroke-width="11"
+  />
+</svg>

package/assets/skaile-logo.svg

@@ -0,0 +1,14 @@
+<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 664 198.305" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="LOGO">
+<rect id="Rectangle 27" width="198.304" height="198.305" rx="39.6609" fill="var(--fill-0, #7300FF)"/>
+<path id="Vector 29" d="M59.4923 59.4915C59.4923 44.8887 71.3302 33.0508 85.933 33.0508H138.814C146.115 33.0508 152.034 38.9698 152.034 46.2712C152.034 53.5725 146.115 59.4915 138.814 59.4915H59.4924C44.8896 59.4915 33.0517 71.3294 33.0517 85.9322C33.0517 100.535 44.8896 112.373 59.4924 112.373H112.421C126.997 112.373 138.814 124.19 138.814 138.766C138.814 153.38 126.94 165.212 112.326 165.159L59.6341 164.97C52.4294 164.945 46.6025 159.097 46.6025 151.892C46.6025 144.669 52.458 138.814 59.681 138.814H138.814C153.417 138.814 165.255 126.976 165.255 112.373C165.255 97.7701 153.417 85.9322 138.814 85.9322H85.933C71.3302 85.9322 59.4923 74.0943 59.4923 59.4915Z" stroke="var(--stroke-0, white)" stroke-width="11.2373"/>
+<g id="Vector">
+<mask id="path-3-outside-1_0_4" maskUnits="userSpaceOnUse" x="247.883" y="30.3262" width="417" height="131" fill="black">
+<rect fill="white" x="247.883" y="30.3262" width="417" height="131"/>
+<path d="M311.696 80.2675C313.419 83.461 311.404 87.2003 307.923 88.2262C304.65 89.1912 301.231 87.3821 299.284 84.5795C299.098 84.3129 298.907 84.0473 298.709 83.7828C297.254 81.7492 295.263 80.0744 292.736 78.7585C290.209 77.4425 286.974 76.7846 283.03 76.7846C277.632 76.7846 273.133 78.0805 269.534 80.6725C265.973 83.2245 264.193 86.4744 264.193 90.4221C264.193 93.9312 265.418 96.7026 267.869 98.7362C270.319 100.77 274.148 102.464 279.355 103.821L292.449 107.17C300.336 109.164 306.213 112.214 310.08 116.322C313.946 120.389 315.88 125.633 315.88 132.053C315.88 137.316 314.425 142.022 311.515 146.168C308.644 150.315 304.624 153.586 299.455 155.978C294.286 158.37 288.275 159.567 281.422 159.567C272.425 159.567 264.978 157.533 259.082 153.466C254.842 150.541 251.72 146.647 249.717 141.783C248.346 138.452 250.609 134.932 254.095 134.024C257.756 133.071 261.341 135.413 263.316 138.639C264.489 140.557 265.949 142.149 267.696 143.417C271.142 145.889 275.641 147.126 281.192 147.126C287.51 147.126 292.525 145.73 296.239 142.939C299.991 140.107 301.867 136.718 301.867 132.77C301.867 129.58 300.795 126.908 298.651 124.755C296.507 122.562 293.214 120.927 288.773 119.85L274.071 116.261C265.993 114.268 260.058 111.177 256.268 106.99C252.516 102.764 250.64 97.4802 250.64 91.1399C250.64 85.956 252.037 81.3703 254.832 77.3828C257.665 73.3952 261.513 70.2649 266.375 67.992C271.276 65.7191 276.828 64.5826 283.03 64.5826C291.76 64.5826 298.613 66.5764 303.59 70.564C306.942 73.2287 309.644 76.4632 311.696 80.2675ZM348.917 124.157L348.687 106.692H351.443L388.238 67.6856C389.386 66.4687 390.985 65.7789 392.658 65.7789C397.996 65.7789 400.74 72.168 397.064 76.0387L365.687 109.084H364.538L348.917 124.157ZM343.059 157.653C339.316 157.653 336.282 154.619 336.282 150.876V41.9312C336.282 38.1884 339.316 35.1543 343.059 35.1543C346.802 35.1543 349.836 38.1884 349.836 41.9312V150.876C349.836 154.619 346.802 157.653 343.059 157.653ZM395.739 157.653C393.594 157.653 391.573 156.649 390.277 154.939L357.876 112.194L367.524 102.385L401.194 146.65C404.626 151.162 401.408 157.653 395.739 157.653ZM447.565 159.806C441.975 159.806 436.902 158.709 432.346 156.516C427.79 154.283 424.172 151.073 421.492 146.886C418.812 142.659 417.472 137.555 417.472 131.574C417.472 126.311 418.467 122.044 420.458 118.774C422.449 115.464 425.11 112.872 428.441 110.998C431.772 109.124 435.447 107.728 439.467 106.811C443.526 105.854 447.603 105.097 451.7 104.538C457.06 103.821 461.406 103.282 464.736 102.923C468.106 102.525 470.556 101.867 472.087 100.95C473.657 100.032 474.442 98.4371 474.442 96.1642V95.6858C474.442 89.7841 472.892 85.1984 469.791 81.9286C466.727 78.6588 462.076 77.0238 455.835 77.0238C449.364 77.0238 444.292 78.4993 440.616 81.4501C439.004 82.7444 437.602 84.077 436.409 85.4481C434.001 88.2176 430.184 89.9042 426.744 88.6246C423.057 87.253 421.163 83.0344 423.301 79.7316C425.006 77.0977 426.968 74.8792 429.188 73.0761C433.055 69.926 437.266 67.7328 441.822 66.4966C446.417 65.2206 450.934 64.5826 455.375 64.5826C458.209 64.5826 461.463 64.9415 465.139 65.6593C468.852 66.3371 472.432 67.7527 475.878 69.906C479.362 72.0593 482.253 75.3092 484.55 79.6557C486.847 84.0021 487.996 89.824 487.996 97.1213V150.876C487.996 154.619 484.962 157.653 481.219 157.653C477.476 157.653 474.442 154.619 474.442 150.876V145.211H473.753C472.834 147.205 471.303 149.339 469.159 151.611C467.015 153.885 464.162 155.819 460.601 157.413C457.041 159.008 452.695 159.806 447.565 159.806ZM449.632 147.126C454.992 147.126 459.511 146.029 463.186 143.836C466.9 141.643 469.695 138.811 471.571 135.342C473.485 131.873 474.442 128.224 474.442 124.396V111.477C473.868 112.194 472.604 112.852 470.652 113.451C468.738 114.009 466.517 114.507 463.99 114.946C461.502 115.344 459.07 115.703 456.696 116.023C454.361 116.302 452.466 116.541 451.011 116.74C447.488 117.219 444.196 117.996 441.133 119.073C438.108 120.11 435.658 121.685 433.782 123.798C431.944 125.871 431.025 128.703 431.025 132.292C431.025 137.196 432.767 140.905 436.251 143.417C439.773 145.889 444.234 147.126 449.632 147.126ZM519.511 157.653C515.768 157.653 512.734 154.619 512.734 150.876V72.5558C512.734 68.813 515.768 65.7789 519.511 65.7789C523.253 65.7789 526.287 68.813 526.287 72.5558V150.876C526.287 154.619 523.253 157.653 519.511 157.653ZM519.625 50.4666C516.983 50.4666 514.706 49.5295 512.791 47.6553C510.915 45.7812 509.977 43.5282 509.977 40.8964C509.977 38.2646 510.915 36.0116 512.791 34.1374C514.706 32.2633 516.983 31.3262 519.625 31.3262C522.267 31.3262 524.526 32.2633 526.402 34.1374C528.316 36.0116 529.274 38.2646 529.274 40.8964C529.274 43.5282 528.316 45.7812 526.402 47.6553C524.526 49.5295 522.267 50.4666 519.625 50.4666ZM557.888 35.1543C561.631 35.1543 564.665 38.1884 564.665 41.9312V150.876C564.665 154.619 561.631 157.653 557.888 157.653C554.145 157.653 551.111 154.619 551.111 150.876V41.9312C551.111 38.1884 554.145 35.1543 557.888 35.1543ZM626.474 159.567C617.975 159.567 610.642 157.613 604.479 153.705C598.353 149.757 593.624 144.255 590.293 137.196C587.001 130.099 585.354 121.844 585.354 112.434C585.354 103.023 587.001 94.7287 590.293 87.5511C593.624 80.3336 598.257 74.711 604.191 70.6836C610.164 66.6163 617.132 64.5826 625.096 64.5826C629.69 64.5826 634.227 65.3801 638.707 66.9751C643.186 68.5702 647.264 71.1621 650.939 74.7509C654.615 78.2999 657.544 83.0052 659.726 88.867C661.909 94.7287 663 101.946 663 110.519C663 113.823 660.322 116.501 657.019 116.501H595.003V104.299H649.216C649.216 99.115 648.221 94.4895 646.23 90.4221C644.278 86.3548 641.482 83.1448 637.845 80.7921C634.246 78.4394 629.996 77.2631 625.096 77.2631C619.698 77.2631 615.026 78.6588 611.083 81.4501C607.177 84.2015 604.172 87.7903 602.066 92.2166C599.961 96.6427 598.908 101.388 598.908 106.452V114.587C598.908 121.525 600.056 127.407 602.354 132.232C604.689 137.017 607.924 140.666 612.059 143.177C616.194 145.65 620.999 146.886 626.474 146.886C630.034 146.886 633.251 146.368 636.122 145.331C639.032 144.255 641.54 142.659 643.646 140.546C644.308 139.868 644.924 139.14 645.491 138.359C647.671 135.363 651.3 133.342 654.856 134.381C658.587 135.472 660.793 139.454 658.876 142.834C657.712 144.885 656.311 146.794 654.672 148.561C651.418 152.031 647.398 154.741 642.612 156.695C637.826 158.61 632.447 159.567 626.474 159.567Z"/>
+</mask>
+<path d="M311.696 80.2675C313.419 83.461 311.404 87.2003 307.923 88.2262C304.65 89.1912 301.231 87.3821 299.284 84.5795C299.098 84.3129 298.907 84.0473 298.709 83.7828C297.254 81.7492 295.263 80.0744 292.736 78.7585C290.209 77.4425 286.974 76.7846 283.03 76.7846C277.632 76.7846 273.133 78.0805 269.534 80.6725C265.973 83.2245 264.193 86.4744 264.193 90.4221C264.193 93.9312 265.418 96.7026 267.869 98.7362C270.319 100.77 274.148 102.464 279.355 103.821L292.449 107.17C300.336 109.164 306.213 112.214 310.08 116.322C313.946 120.389 315.88 125.633 315.88 132.053C315.88 137.316 314.425 142.022 311.515 146.168C308.644 150.315 304.624 153.586 299.455 155.978C294.286 158.37 288.275 159.567 281.422 159.567C272.425 159.567 264.978 157.533 259.082 153.466C254.842 150.541 251.72 146.647 249.717 141.783C248.346 138.452 250.609 134.932 254.095 134.024C257.756 133.071 261.341 135.413 263.316 138.639C264.489 140.557 265.949 142.149 267.696 143.417C271.142 145.889 275.641 147.126 281.192 147.126C287.51 147.126 292.525 145.73 296.239 142.939C299.991 140.107 301.867 136.718 301.867 132.77C301.867 129.58 300.795 126.908 298.651 124.755C296.507 122.562 293.214 120.927 288.773 119.85L274.071 116.261C265.993 114.268 260.058 111.177 256.268 106.99C252.516 102.764 250.64 97.4802 250.64 91.1399C250.64 85.956 252.037 81.3703 254.832 77.3828C257.665 73.3952 261.513 70.2649 266.375 67.992C271.276 65.7191 276.828 64.5826 283.03 64.5826C291.76 64.5826 298.613 66.5764 303.59 70.564C306.942 73.2287 309.644 76.4632 311.696 80.2675ZM348.917 124.157L348.687 106.692H351.443L388.238 67.6856C389.386 66.4687 390.985 65.7789 392.658 65.7789C397.996 65.7789 400.74 72.168 397.064 76.0387L365.687 109.084H364.538L348.917 124.157ZM343.059 157.653C339.316 157.653 336.282 154.619 336.282 150.876V41.9312C336.282 38.1884 339.316 35.1543 343.059 35.1543C346.802 35.1543 349.836 38.1884 349.836 41.9312V150.876C349.836 154.619 346.802 157.653 343.059 157.653ZM395.739 157.653C393.594 157.653 391.573 156.649 390.277 154.939L357.876 112.194L367.524 102.385L401.194 146.65C404.626 151.162 401.408 157.653 395.739 157.653ZM447.565 159.806C441.975 159.806 436.902 158.709 432.346 156.516C427.79 154.283 424.172 151.073 421.492 146.886C418.812 142.659 417.472 137.555 417.472 131.574C417.472 126.311 418.467 122.044 420.458 118.774C422.449 115.464 425.11 112.872 428.441 110.998C431.772 109.124 435.447 107.728 439.467 106.811C443.526 105.854 447.603 105.097 451.7 104.538C457.06 103.821 461.406 103.282 464.736 102.923C468.106 102.525 470.556 101.867 472.087 100.95C473.657 100.032 474.442 98.4371 474.442 96.1642V95.6858C474.442 89.7841 472.892 85.1984 469.791 81.9286C466.727 78.6588 462.076 77.0238 455.835 77.0238C449.364 77.0238 444.292 78.4993 440.616 81.4501C439.004 82.7444 437.602 84.077 436.409 85.4481C434.001 88.2176 430.184 89.9042 426.744 88.6246C423.057 87.253 421.163 83.0344 423.301 79.7316C425.006 77.0977 426.968 74.8792 429.188 73.0761C433.055 69.926 437.266 67.7328 441.822 66.4966C446.417 65.2206 450.934 64.5826 455.375 64.5826C458.209 64.5826 461.463 64.9415 465.139 65.6593C468.852 66.3371 472.432 67.7527 475.878 69.906C479.362 72.0593 482.253 75.3092 484.55 79.6557C486.847 84.0021 487.996 89.824 487.996 97.1213V150.876C487.996 154.619 484.962 157.653 481.219 157.653C477.476 157.653 474.442 154.619 474.442 150.876V145.211H473.753C472.834 147.205 471.303 149.339 469.159 151.611C467.015 153.885 464.162 155.819 460.601 157.413C457.041 159.008 452.695 159.806 447.565 159.806ZM449.632 147.126C454.992 147.126 459.511 146.029 463.186 143.836C466.9 141.643 469.695 138.811 471.571 135.342C473.485 131.873 474.442 128.224 474.442 124.396V111.477C473.868 112.194 472.604 112.852 470.652 113.451C468.738 114.009 466.517 114.507 463.99 114.946C461.502 115.344 459.07 115.703 456.696 116.023C454.361 116.302 452.466 116.541 451.011 116.74C447.488 117.219 444.196 117.996 441.133 119.073C438.108 120.11 435.658 121.685 433.782 123.798C431.944 125.871 431.025 128.703 431.025 132.292C431.025 137.196 432.767 140.905 436.251 143.417C439.773 145.889 444.234 147.126 449.632 147.126ZM519.511 157.653C515.768 157.653 512.734 154.619 512.734 150.876V72.5558C512.734 68.813 515.768 65.7789 519.511 65.7789C523.253 65.7789 526.287 68.813 526.287 72.5558V150.876C526.287 154.619 523.253 157.653 519.511 157.653ZM519.625 50.4666C516.983 50.4666 514.706 49.5295 512.791 47.6553C510.915 45.7812 509.977 43.5282 509.977 40.8964C509.977 38.2646 510.915 36.0116 512.791 34.1374C514.706 32.2633 516.983 31.3262 519.625 31.3262C522.267 31.3262 524.526 32.2633 526.402 34.1374C528.316 36.0116 529.274 38.2646 529.274 40.8964C529.274 43.5282 528.316 45.7812 526.402 47.6553C524.526 49.5295 522.267 50.4666 519.625 50.4666ZM557.888 35.1543C561.631 35.1543 564.665 38.1884 564.665 41.9312V150.876C564.665 154.619 561.631 157.653 557.888 157.653C554.145 157.653 551.111 154.619 551.111 150.876V41.9312C551.111 38.1884 554.145 35.1543 557.888 35.1543ZM626.474 159.567C617.975 159.567 610.642 157.613 604.479 153.705C598.353 149.757 593.624 144.255 590.293 137.196C587.001 130.099 585.354 121.844 585.354 112.434C585.354 103.023 587.001 94.7287 590.293 87.5511C593.624 80.3336 598.257 74.711 604.191 70.6836C610.164 66.6163 617.132 64.5826 625.096 64.5826C629.69 64.5826 634.227 65.3801 638.707 66.9751C643.186 68.5702 647.264 71.1621 650.939 74.7509C654.615 78.2999 657.544 83.0052 659.726 88.867C661.909 94.7287 663 101.946 663 110.519C663 113.823 660.322 116.501 657.019 116.501H595.003V104.299H649.216C649.216 99.115 648.221 94.4895 646.23 90.4221C644.278 86.3548 641.482 83.1448 637.845 80.7921C634.246 78.4394 629.996 77.2631 625.096 77.2631C619.698 77.2631 615.026 78.6588 611.083 81.4501C607.177 84.2015 604.172 87.7903 602.066 92.2166C599.961 96.6427 598.908 101.388 598.908 106.452V114.587C598.908 121.525 600.056 127.407 602.354 132.232C604.689 137.017 607.924 140.666 612.059 143.177C616.194 145.65 620.999 146.886 626.474 146.886C630.034 146.886 633.251 146.368 636.122 145.331C639.032 144.255 641.54 142.659 643.646 140.546C644.308 139.868 644.924 139.14 645.491 138.359C647.671 135.363 651.3 133.342 654.856 134.381C658.587 135.472 660.793 139.454 658.876 142.834C657.712 144.885 656.311 146.794 654.672 148.561C651.418 152.031 647.398 154.741 642.612 156.695C637.826 158.61 632.447 159.567 626.474 159.567Z" fill="var(--fill-0, #7300FF)"/>
+<path d="M311.696 80.2675C313.419 83.461 311.404 87.2003 307.923 88.2262C304.65 89.1912 301.231 87.3821 299.284 84.5795C299.098 84.3129 298.907 84.0473 298.709 83.7828C297.254 81.7492 295.263 80.0744 292.736 78.7585C290.209 77.4425 286.974 76.7846 283.03 76.7846C277.632 76.7846 273.133 78.0805 269.534 80.6725C265.973 83.2245 264.193 86.4744 264.193 90.4221C264.193 93.9312 265.418 96.7026 267.869 98.7362C270.319 100.77 274.148 102.464 279.355 103.821L292.449 107.17C300.336 109.164 306.213 112.214 310.08 116.322C313.946 120.389 315.88 125.633 315.88 132.053C315.88 137.316 314.425 142.022 311.515 146.168C308.644 150.315 304.624 153.586 299.455 155.978C294.286 158.37 288.275 159.567 281.422 159.567C272.425 159.567 264.978 157.533 259.082 153.466C254.842 150.541 251.72 146.647 249.717 141.783C248.346 138.452 250.609 134.932 254.095 134.024C257.756 133.071 261.341 135.413 263.316 138.639C264.489 140.557 265.949 142.149 267.696 143.417C271.142 145.889 275.641 147.126 281.192 147.126C287.51 147.126 292.525 145.73 296.239 142.939C299.991 140.107 301.867 136.718 301.867 132.77C301.867 129.58 300.795 126.908 298.651 124.755C296.507 122.562 293.214 120.927 288.773 119.85L274.071 116.261C265.993 114.268 260.058 111.177 256.268 106.99C252.516 102.764 250.64 97.4802 250.64 91.1399C250.64 85.956 252.037 81.3703 254.832 77.3828C257.665 73.3952 261.513 70.2649 266.375 67.992C271.276 65.7191 276.828 64.5826 283.03 64.5826C291.76 64.5826 298.613 66.5764 303.59 70.564C306.942 73.2287 309.644 76.4632 311.696 80.2675ZM348.917 124.157L348.687 106.692H351.443L388.238 67.6856C389.386 66.4687 390.985 65.7789 392.658 65.7789C397.996 65.7789 400.74 72.168 397.064 76.0387L365.687 109.084H364.538L348.917 124.157ZM343.059 157.653C339.316 157.653 336.282 154.619 336.282 150.876V41.9312C336.282 38.1884 339.316 35.1543 343.059 35.1543C346.802 35.1543 349.836 38.1884 349.836 41.9312V150.876C349.836 154.619 346.802 157.653 343.059 157.653ZM395.739 157.653C393.594 157.653 391.573 156.649 390.277 154.939L357.876 112.194L367.524 102.385L401.194 146.65C404.626 151.162 401.408 157.653 395.739 157.653ZM447.565 159.806C441.975 159.806 436.902 158.709 432.346 156.516C427.79 154.283 424.172 151.073 421.492 146.886C418.812 142.659 417.472 137.555 417.472 131.574C417.472 126.311 418.467 122.044 420.458 118.774C422.449 115.464 425.11 112.872 428.441 110.998C431.772 109.124 435.447 107.728 439.467 106.811C443.526 105.854 447.603 105.097 451.7 104.538C457.06 103.821 461.406 103.282 464.736 102.923C468.106 102.525 470.556 101.867 472.087 100.95C473.657 100.032 474.442 98.4371 474.442 96.1642V95.6858C474.442 89.7841 472.892 85.1984 469.791 81.9286C466.727 78.6588 462.076 77.0238 455.835 77.0238C449.364 77.0238 444.292 78.4993 440.616 81.4501C439.004 82.7444 437.602 84.077 436.409 85.4481C434.001 88.2176 430.184 89.9042 426.744 88.6246C423.057 87.253 421.163 83.0344 423.301 79.7316C425.006 77.0977 426.968 74.8792 429.188 73.0761C433.055 69.926 437.266 67.7328 441.822 66.4966C446.417 65.2206 450.934 64.5826 455.375 64.5826C458.209 64.5826 461.463 64.9415 465.139 65.6593C468.852 66.3371 472.432 67.7527 475.878 69.906C479.362 72.0593 482.253 75.3092 484.55 79.6557C486.847 84.0021 487.996 89.824 487.996 97.1213V150.876C487.996 154.619 484.962 157.653 481.219 157.653C477.476 157.653 474.442 154.619 474.442 150.876V145.211H473.753C472.834 147.205 471.303 149.339 469.159 151.611C467.015 153.885 464.162 155.819 460.601 157.413C457.041 159.008 452.695 159.806 447.565 159.806ZM449.632 147.126C454.992 147.126 459.511 146.029 463.186 143.836C466.9 141.643 469.695 138.811 471.571 135.342C473.485 131.873 474.442 128.224 474.442 124.396V111.477C473.868 112.194 472.604 112.852 470.652 113.451C468.738 114.009 466.517 114.507 463.99 114.946C461.502 115.344 459.07 115.703 456.696 116.023C454.361 116.302 452.466 116.541 451.011 116.74C447.488 117.219 444.196 117.996 441.133 119.073C438.108 120.11 435.658 121.685 433.782 123.798C431.944 125.871 431.025 128.703 431.025 132.292C431.025 137.196 432.767 140.905 436.251 143.417C439.773 145.889 444.234 147.126 449.632 147.126ZM519.511 157.653C515.768 157.653 512.734 154.619 512.734 150.876V72.5558C512.734 68.813 515.768 65.7789 519.511 65.7789C523.253 65.7789 526.287 68.813 526.287 72.5558V150.876C526.287 154.619 523.253 157.653 519.511 157.653ZM519.625 50.4666C516.983 50.4666 514.706 49.5295 512.791 47.6553C510.915 45.7812 509.977 43.5282 509.977 40.8964C509.977 38.2646 510.915 36.0116 512.791 34.1374C514.706 32.2633 516.983 31.3262 519.625 31.3262C522.267 31.3262 524.526 32.2633 526.402 34.1374C528.316 36.0116 529.274 38.2646 529.274 40.8964C529.274 43.5282 528.316 45.7812 526.402 47.6553C524.526 49.5295 522.267 50.4666 519.625 50.4666ZM557.888 35.1543C561.631 35.1543 564.665 38.1884 564.665 41.9312V150.876C564.665 154.619 561.631 157.653 557.888 157.653C554.145 157.653 551.111 154.619 551.111 150.876V41.9312C551.111 38.1884 554.145 35.1543 557.888 35.1543ZM626.474 159.567C617.975 159.567 610.642 157.613 604.479 153.705C598.353 149.757 593.624 144.255 590.293 137.196C587.001 130.099 585.354 121.844 585.354 112.434C585.354 103.023 587.001 94.7287 590.293 87.5511C593.624 80.3336 598.257 74.711 604.191 70.6836C610.164 66.6163 617.132 64.5826 625.096 64.5826C629.69 64.5826 634.227 65.3801 638.707 66.9751C643.186 68.5702 647.264 71.1621 650.939 74.7509C654.615 78.2999 657.544 83.0052 659.726 88.867C661.909 94.7287 663 101.946 663 110.519C663 113.823 660.322 116.501 657.019 116.501H595.003V104.299H649.216C649.216 99.115 648.221 94.4895 646.23 90.4221C644.278 86.3548 641.482 83.1448 637.845 80.7921C634.246 78.4394 629.996 77.2631 625.096 77.2631C619.698 77.2631 615.026 78.6588 611.083 81.4501C607.177 84.2015 604.172 87.7903 602.066 92.2166C599.961 96.6427 598.908 101.388 598.908 106.452V114.587C598.908 121.525 600.056 127.407 602.354 132.232C604.689 137.017 607.924 140.666 612.059 143.177C616.194 145.65 620.999 146.886 626.474 146.886C630.034 146.886 633.251 146.368 636.122 145.331C639.032 144.255 641.54 142.659 643.646 140.546C644.308 139.868 644.924 139.14 645.491 138.359C647.671 135.363 651.3 133.342 654.856 134.381C658.587 135.472 660.793 139.454 658.876 142.834C657.712 144.885 656.311 146.794 654.672 148.561C651.418 152.031 647.398 154.741 642.612 156.695C637.826 158.61 632.447 159.567 626.474 159.567Z" stroke="var(--stroke-0, #7300FF)" stroke-width="2" mask="url(#path-3-outside-1_0_4)"/>
+</g>
+</g>
+</svg>

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@skaile/brand",
+  "version": "0.1.0",
+  "description": "Skaile brand: design tokens, CSS custom properties, Tailwind preset, and brand assets",
+  "license": "UNLICENSED",
+  "type": "module",
+  "publishConfig": { "access": "public" },
+  "exports": {
+    ".": "./src/index.ts",
+    "./tokens": "./src/tokens.json",
+    "./brand.css": "./src/css/brand.css",
+    "./theme.css": "./src/css/theme.css",
+    "./tailwind-preset": "./src/tailwind-preset.ts",
+    "./assets/*": "./assets/*"
+  },
+  "files": ["src", "assets", "!src/**/*.test.ts"],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
+  }
+}

package/src/css/brand.css

@@ -0,0 +1,139 @@
+/*
+ * brand.css — Skaile marketing/website surface (raw CSS custom properties).
+ * Canonical source for the website's dark, gradient-forward brand.
+ * Single theme (dark), modeled on the astro.build palette.
+ */
+
+@custom-media --bp-md (min-width: 768px); /* tablet portrait */
+@custom-media --bp-lg (min-width: 1024px); /* tablet landscape / small laptop */
+@custom-media --bp-xl (min-width: 1280px); /* desktop */
+
+:root {
+  /* ── colors ─────────────────────────────────────────────────────────── */
+  --color-bg: #13151a;
+  --color-bg-raised: #1a1c22;
+  --color-surface: #23262d;
+  --color-surface-raised: #2a2d36;
+  --color-border: #2e303a;
+  --color-border-strong: #3d404a;
+
+  --color-text: #f4f4f5;
+  --color-text-muted: #a1a1aa;
+  --color-text-dim: #777777;
+
+  /* brand — signature orange → magenta → purple gradient */
+  --color-brand-orange: #ff5d01;
+  --color-brand-pink: #d8377e;
+  --color-brand: #7300ff;
+  --color-brand-purple: #1b1a3f;
+
+  --color-accent: var(--color-brand);
+  --color-accent-soft: rgba(188, 82, 238, 0.16);
+
+  /* status */
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+
+  /* chat / agent — used by the carousel transcript and any future
+   * conversation surface. Border aliases the brand purple so the two
+   * stay in lockstep if `--color-brand` ever shifts. */
+  --color-agent-bg: #15142f;
+  --color-agent-border: var(--color-brand);
+
+  /* chat / user personas — each artifact in the carousel is owned by
+   * one of these 7 users; their bg/border drives the avatar disc and
+   * message bubble in the transcript below the carousel. Pastel
+   * fill, saturated outline. Pair the matching `-bg` and `-border`
+   * tokens; the bubble component reads them via CSS variables. */
+  --color-user-1-bg: #95ffcf;
+  --color-user-1-border: #56bf89;
+  --color-user-2-bg: #d495ff;
+  --color-user-2-border: #bd59ff;
+  --color-user-3-bg: #95b6ff;
+  --color-user-3-border: #568bff;
+  --color-user-4-bg: #f1eaa5;
+  --color-user-4-border: #d2c339;
+  --color-user-5-bg: #ff9596;
+  --color-user-5-border: #c75254;
+  --color-user-6-bg: #ffb595;
+  --color-user-6-border: #bc623b;
+  --color-user-7-bg: #ff95e3;
+  --color-user-7-border: #ca4ea9;
+
+  /* ── gradients ──────────────────────────────────────────────────────── */
+  --gradient-brand: linear-gradient(
+    135deg,
+    var(--color-brand-orange) 0%,
+    var(--color-brand-pink) 50%,
+    var(--color-brand) 100%
+  );
+  --gradient-brand-soft: linear-gradient(
+    135deg,
+    rgba(255, 93, 1, 0.18) 0%,
+    rgba(216, 55, 126, 0.18) 50%,
+    rgba(188, 82, 238, 0.18) 100%
+  );
+  --gradient-fade-bg: radial-gradient(
+    71.92% 191.69% at 50% 50%,
+    var(--color-brand-purple) 0%,
+    #000 100%
+  );
+
+  /* ── typography ─────────────────────────────────────────────────────── */
+  --font-heading:
+    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+  --font-body:
+    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 2rem;
+  --text-4xl: 2.5rem;
+  --text-5xl: clamp(2.5rem, 6vw, 4.5rem);
+  --text-display: clamp(3rem, 7vw, 5rem);
+
+  --leading-tight: 1.1;
+  --leading-snug: 1.3;
+  --leading-normal: 1.55;
+
+  --tracking-tight: -0.04em;
+  --tracking-snug: -0.02em;
+  --tracking-wide: 0.2em;
+
+  /* ── radius ─────────────────────────────────────────────────────────── */
+  --radius-sm: 4px;
+  --radius: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+
+  /* ── spacing scale ──────────────────────────────────────────────────── */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 64px;
+  --space-9: 96px;
+  --space-10: 128px;
+
+  /* ── shadows ────────────────────────────────────────────────────────── */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
+  --shadow-glow: 0 0 60px rgba(188, 82, 238, 0.25);
+
+  /* ── layout ─────────────────────────────────────────────────────────── */
+  --page-max: 1600px;
+  --page-gutter: clamp(16px, 4vw, 48px);
+  --topbar-height: 36px;
+}

package/src/css/theme.css

@@ -0,0 +1,169 @@
+/**
+ * Skaile Brand Theme -- CSS custom properties
+ *
+ * Source of truth: tokens.json (from brand design in Figma)
+ *
+ * Usage:
+ *   @import '@skaile/theme/css';
+ *
+ * Provides light and dark mode via .light / .dark classes on <html>.
+ * Falls back to light mode on :root.
+ *
+ * Brand color: #7300FF (Skaile purple)
+ * Dark mode adopts the website (dev/marketing) canonical palette; light mode preserved.
+ */
+
+/* ---------------------------------------------------------------------------
+ * Light mode (default)
+ * ------------------------------------------------------------------------- */
+
+:root,
+:root[data-theme="light"],
+.light {
+  --color-scheme: light;
+
+  /* Core palette */
+  --background: hsl(210 40% 98%);
+  --foreground: hsl(222 47% 11%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222 47% 11%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(222 47% 11%);
+  --primary: hsl(267 100% 50%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(210 40% 96%);
+  --secondary-foreground: hsl(215 16% 47%);
+  --muted: hsl(210 40% 96%);
+  --muted-foreground: hsl(215 16% 47%);
+  --accent: hsl(210 40% 96%);
+  --accent-foreground: hsl(222 47% 11%);
+  --destructive: hsl(0 72.2% 50.6%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(214 32% 91%);
+  --input: hsl(214 32% 91%);
+  --ring: hsl(267 100% 50%);
+
+  /* Skaile-specific */
+  --color-success: hsl(161.4 93.5% 30.4%);
+  --color-success-foreground: hsl(0 0% 100%);
+  --color-warning: hsl(32.1 94.6% 43.7%);
+  --color-warning-foreground: hsl(222 47% 11%);
+  --color-ai-accent: hsl(37.7 92.1% 50.2%);
+  --color-primary-bright: hsl(267 100% 63%);
+  --color-surface: hsl(0 0% 100%);
+
+  /* Chart palette */
+  --chart-1: hsl(267 100% 50%);
+  --chart-2: hsl(267 100% 63%);
+  --chart-3: hsl(271 91% 65%);
+  --chart-4: hsl(37.7 92.1% 50.2%);
+  --chart-5: hsl(161.4 93.5% 30.4%);
+
+  /* Sidebar */
+  --sidebar: hsl(0 0% 100%);
+  --sidebar-foreground: hsl(222 47% 11%);
+  --sidebar-primary: hsl(267 100% 50%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(267 100% 97%);
+  --sidebar-accent-foreground: hsl(267 100% 50%);
+  --sidebar-border: hsl(214 32% 91%);
+  --sidebar-ring: hsl(267 100% 50%);
+
+  /* Typography */
+  --font-sans: "Inter", sans-serif;
+  --font-serif: "Plus Jakarta Sans", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+  --font-heading: "Plus Jakarta Sans", sans-serif;
+  --font-body: "Inter", sans-serif;
+
+  /* Layout */
+  --radius: 0.375rem;
+  --spacing: 0.25rem;
+
+  /* Shadows */
+  --shadow-2xs: 0 1px 2px 0px hsl(222 47% 11% / 0.03);
+  --shadow-xs: 0 1px 2px 0px hsl(222 47% 11% / 0.05);
+  --shadow-sm: 0 1px 2px 0px hsl(222 47% 11% / 0.05);
+  --shadow: 0 4px 6px 0px hsl(222 47% 11% / 0.07);
+  --shadow-md: 0 4px 6px 0px hsl(222 47% 11% / 0.07);
+  --shadow-lg: 0 10px 15px 0px hsl(222 47% 11% / 0.1);
+  --shadow-xl: 0 20px 25px -5px hsl(222 47% 11% / 0.1);
+  --shadow-2xl: 0 25px 50px -12px hsl(222 47% 11% / 0.25);
+}
+
+/* ---------------------------------------------------------------------------
+ * Dark mode
+ * ------------------------------------------------------------------------- */
+
+:root[data-theme="dark"],
+.dark {
+  --color-scheme: dark;
+
+  /* Core palette — adopted from the website (dev/marketing) canonical dark */
+  --background: #13151a;
+  --foreground: #f4f4f5;
+  --card: #1a1c22;
+  --card-foreground: #f4f4f5;
+  --popover: #1a1c22;
+  --popover-foreground: #f4f4f5;
+  --primary: #7300ff;
+  --primary-foreground: #ffffff;
+  --secondary: #23262d;
+  --secondary-foreground: #f4f4f5;
+  --muted: #1a1c22;
+  --muted-foreground: #a1a1aa;
+  --accent: #2a2d36;
+  --accent-foreground: #f4f4f5;
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: #ffffff;
+  --border: #2e303a;
+  --input: #2e303a;
+  --ring: #7300ff;
+
+  /* Skaile-specific */
+  --color-success: hsl(160.1 84.1% 39.4%);
+  --color-success-foreground: #ffffff;
+  --color-warning: hsl(37.7 92.1% 50.2%);
+  --color-warning-foreground: #13151a;
+  --color-ai-accent: hsl(43.3 96.4% 56.3%);
+  --color-primary-bright: #9b40ff;
+  --color-surface: #23262d;
+
+  /* Chart palette */
+  --chart-1: #7300ff;
+  --chart-2: #9b40ff;
+  --chart-3: #bc52ee;
+  --chart-4: #f59e0b;
+  --chart-5: #10b981;
+
+  /* Sidebar */
+  --sidebar: #13151a;
+  --sidebar-foreground: #f4f4f5;
+  --sidebar-primary: #7300ff;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #1b1a3f;
+  --sidebar-accent-foreground: #9b40ff;
+  --sidebar-border: #2e303a;
+  --sidebar-ring: #7300ff;
+
+  /* Typography */
+  --font-sans: "Inter", sans-serif;
+  --font-serif: "Plus Jakarta Sans", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+  --font-heading: "Plus Jakarta Sans", sans-serif;
+  --font-body: "Inter", sans-serif;
+
+  /* Layout (same as light) */
+  --radius: 0.375rem;
+  --spacing: 0.25rem;
+
+  /* Shadows (darker for dark mode) */
+  --shadow-2xs: 0 1px 2px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 2px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { skaileTailwindPreset } from './tailwind-preset.ts'
+export { default as tokens } from './tokens.json' with { type: 'json' }

package/src/tailwind-preset.ts

@@ -0,0 +1,72 @@
+/**
+ * Skaile Tailwind CSS preset.
+ *
+ * Provides the Skaile color palette as Tailwind theme extensions using
+ * CSS custom properties. Works with Tailwind CSS v3 and v4.
+ *
+ * Usage (Tailwind v3 config):
+ *   import { skaileTailwindPreset } from '@skaile/brand/tailwind-preset'
+ *   export default { presets: [skaileTailwindPreset] }
+ *
+ * Usage (Tailwind v4 CSS):
+ *   @import '@skaile/brand/theme.css';
+ *   (tokens are automatically available as CSS variables)
+ *
+ * @docLink packages/theme/dev-guide#tailwind-preset
+ */
+
+export const skaileTailwindPreset = {
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        card: { DEFAULT: "var(--card)", foreground: "var(--card-foreground)" },
+        popover: { DEFAULT: "var(--popover)", foreground: "var(--popover-foreground)" },
+        primary: {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
+          bright: "var(--color-primary-bright)",
+        },
+        secondary: { DEFAULT: "var(--secondary)", foreground: "var(--secondary-foreground)" },
+        muted: { DEFAULT: "var(--muted)", foreground: "var(--muted-foreground)" },
+        accent: { DEFAULT: "var(--accent)", foreground: "var(--accent-foreground)" },
+        destructive: { DEFAULT: "var(--destructive)", foreground: "var(--destructive-foreground)" },
+        success: { DEFAULT: "var(--color-success)", foreground: "var(--color-success-foreground)" },
+        warning: { DEFAULT: "var(--color-warning)", foreground: "var(--color-warning-foreground)" },
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        surface: "var(--color-surface)",
+        "ai-accent": "var(--color-ai-accent)",
+        chart: {
+          1: "var(--chart-1)",
+          2: "var(--chart-2)",
+          3: "var(--chart-3)",
+          4: "var(--chart-4)",
+          5: "var(--chart-5)",
+        },
+        sidebar: {
+          DEFAULT: "var(--sidebar)",
+          foreground: "var(--sidebar-foreground)",
+          primary: "var(--sidebar-primary)",
+          "primary-foreground": "var(--sidebar-primary-foreground)",
+          accent: "var(--sidebar-accent)",
+          "accent-foreground": "var(--sidebar-accent-foreground)",
+          border: "var(--sidebar-border)",
+          ring: "var(--sidebar-ring)",
+        },
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)"],
+        serif: ["var(--font-serif)"],
+        mono: ["var(--font-mono)"],
+        heading: ["var(--font-heading)"],
+        body: ["var(--font-body)"],
+      },
+      borderRadius: {
+        DEFAULT: "var(--radius)",
+      },
+    },
+  },
+};

package/src/tokens.json

@@ -0,0 +1,44 @@
+{
+  "brand": {
+    "purple": "#7300ff",
+    "purple_bright": "#9b40ff",
+    "purple_soft": "#bc52ee",
+    "gradient": { "from": "#ff5d01", "via": "#d8377e", "to": "#7300ff" }
+  },
+  "fonts": {
+    "heading": "Plus Jakarta Sans",
+    "body": "Inter",
+    "mono": "JetBrains Mono"
+  },
+  "radius": { "sm": "4px", "DEFAULT": "8px", "lg": "12px", "xl": "20px", "full": "9999px" },
+  "status": { "success": "#10b981", "warning": "#f59e0b", "error": "#ef4444" },
+  "palettes": {
+    "marketing-dark": {
+      "bg": "#13151a",
+      "bg-raised": "#1a1c22",
+      "surface": "#23262d",
+      "surface-raised": "#2a2d36",
+      "border": "#2e303a",
+      "border-strong": "#3d404a",
+      "text": "#f4f4f5",
+      "text-muted": "#a1a1aa",
+      "text-dim": "#777777"
+    },
+    "platform-dark": {
+      "background": "#13151a",
+      "card": "#1a1c22",
+      "popover": "#1a1c22",
+      "surface": "#23262d",
+      "secondary": "#23262d",
+      "muted": "#1a1c22",
+      "accent": "#2a2d36",
+      "foreground": "#f4f4f5",
+      "muted-foreground": "#a1a1aa",
+      "border": "#2e303a",
+      "primary": "#7300ff",
+      "primary-bright": "#9b40ff",
+      "ring": "#7300ff",
+      "sidebar-accent": "#1b1a3f"
+    }
+  }
+}