turso___style_reference:
  info: "> Terminal glow in a server closet — the mint LED on a rack of dark steel."

  theme: "dark"

  info: "Turso operates in a deep-space developer console aesthetic: near-black canvas with subtle teal undertones, a single vivid mint accent that acts as the system's 'powered on' signal, and a secondary electric magenta for beta/experimental framing. The interface stays quiet and typographic — white text on dark surfaces carries the content — while color appears only as functional punctuation for headings, badges, primary actions, and the thin colored borders that define product cards. Components feel light and terminal-like: pill buttons, thin outlined cards with a one-pixel gradient edge, monospace-flecked code snippets, and flat surfaces without drop-shadow elevation. The result reads as an infrastructure product designed by people who think in terminals — restrained, confident, and unmistakably dark."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Deep Space | `#0d1318` | `--color-deep-space` | Page background, deepest canvas layer, link-on-light contrast |"
    info: "| Obsidian | `#121b1f` | `--color-obsidian` | Hero and large content surface, slightly lifted from canvas |"
    info: "| Carbon Teal | `#162129` | `--color-carbon-teal` | Card surface, button hover backgrounds, elevated containers |"
    info: "| Slate Drift | `#283945` | `--color-slate-drift` | Subtle borders, dividers, muted panel borders, ghost button surfaces |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Primary text, icon strokes, button text, nav labels |"
    info: "| Ash Gray | `#c5cace` | `--color-ash-gray` | Secondary text, link default state, muted body |"
    info: "| Fog Gray | `#b6b8ba` | `--color-fog-gray` | Tertiary text, nav helper labels, subtle metadata |"
    info: "| Smoke Gray | `#86898c` | `--color-smoke-gray` | Muted paragraph text, de-emphasized descriptions |"
    info: "| Pewter | `#9ea1a3` | `--color-pewter` | Disabled or low-emphasis body text |"
    info: "| Mint Signal | `#4ff7d1` | `--color-mint-signal` | Teal supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Deep Teal | `#0e342d` | `--color-deep-teal` | Muted teal surface for announcement banner, subtle teal-tinted backgrounds |"
    info: "| Electric Magenta | `#d946ef` | `--color-electric-magenta` | Secondary accent — beta badges, inline code highlights, experimental product card, code snippet button |"
    info: "| Plum Edge | `#a21caf` | `--color-plum-edge` | Chromatic card border for the open-source / self-hosted product variant |"

  tokens___typography:

    inter___single_typeface_across_the_entire_system__weight_800_at_72px_for_hero_headlines__weight_600_700_for_product_card_titles_and_section_headings__weight_500_for_nav_and_labels__weight_400_for_body_and_descriptions__consistent__0_025em_tracking_tightens_the_geometric_forms_and_gives_the_dark_ui_a_compressed__technical_feel_____font_inter:
      - "**Substitute:** Inter (Google Fonts)"
      - "**Weights:** 400, 500, 600, 700, 800"
      - "**Sizes:** 12, 14, 16, 18, 20, 24, 30, 36, 48, 72"
      - "**Line height:** 1.20, 1.33, 1.50, 1.60, 1.78"
      - "**Letter spacing:** -0.025em applied globally across the type scale"
      - "**Role:** Single typeface across the entire system. Weight 800 at 72px for hero headlines, weight 600-700 for product card titles and section headings, weight 500 for nav and labels, weight 400 for body and descriptions. Consistent -0.025em tracking tightens the geometric forms and gives the dark UI a compressed, technical feel."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.3px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.35px | `--text-body-sm` |"
      info: "| body | 16px | 1.6 | -0.4px | `--text-body` |"
      info: "| body-lg | 18px | 1.78 | -0.45px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.33 | -0.6px | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.2 | -0.75px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.2 | -0.9px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.11 | -1.2px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -1.8px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 24px |"
      info: "| cards | 16px |"
      info: "| badges | 9999px |"
      info: "| buttons | 9999px |"
      info: "| smallCards | 12px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 40px"
      - "**Element gap:** 16px"

  components:

    announcement_banner:
      role: "Top-of-page promo strip"

      info: "Full-width band on a deep teal-tinted surface (#0e342d border tone over #0d1318). Centered text in 14px Inter weight 500, white with a teal underlined link. Zero vertical padding beyond 8px top/bottom. Used exclusively for beta or launch promotions."

    primary_navigation_bar:
      role: "Top-level site navigation"

      info: "Horizontal bar on the deepest canvas. Logo (teal bull icon + white 'turso' wordmark) left-aligned, nav links (Docs, Cloud, Pricing, Blog, Changelog) in 14px Inter weight 500, social icons, 'Login' text link, and a teal filled pill button 'Get Started' right-aligned. Links hover to white from a muted gray default."

    pill_ghost_nav_link:
      role: "Inactive navigation item"

      info: "Transparent background, text in #b6b8ba, 14px Inter weight 500, no border. Hover transitions text to #ffffff. No background fill on any state."

    filled_teal_cta_button:
      role: "Primary action"

      info: "Background #4ff7d1, text #0d1318 (near-black for AAA contrast), 14px Inter weight 600, 9999px border-radius, 10px vertical / 20px horizontal padding. No shadow. The single highest-prominence chromatic element in the system."

    filled_magenta_secondary_button:
      role: "Secondary action, code-related call"

      info: "Background #d946ef, text #0d1318, 14px Inter weight 600, 9999px border-radius, 8px 16px padding. Used for copy-to-clipboard code buttons and experimental/beta CTAs where the teal is already occupied by the primary action."

    hero_badge:
      role: "Contextual label above hero headline"

      info: "Pill-shaped (9999px radius), 12px Inter weight 500, text in teal #4ff7d1 on a #0e342d / #162129 tinted background. Optional hairline border in teal. Carries a short descriptor like 'The Database for the Age of AI Agents.'"

    hero_headline:
      role: "Primary page headline"

      info: "72px Inter weight 800, color #4ff7d1, line-height 1.00, letter-spacing -1.8px. Centered. The display-scale choice that defines the brand voice — mint-on-black, maximally compressed."

    product_card___teal_variant:
      role: "Feature card for the cloud / production product"

      info: "Background #121b1f, 1px solid #4ff7d1 border (the signature colored-edge treatment), 16px border-radius, 40px internal padding. Contains a teal pill badge ('PRODUCTION READY'), 30px Inter weight 700 title in white, 16px body in #86898c, and a teal filled CTA button at the bottom."

    product_card___magenta_variant:
      role: "Feature card for the open-source / self-hosted product"

      info: "Same structure as the teal card but with a #a21caf (deep plum) border. Contains a magenta #d946ef pill badge ('BETA'), a code snippet block, and a GitHub star count button in ghost style."

    pill_badge:
      role: "Status, version, or category label"

      info: "9999px border-radius, 6-8px vertical / 14-16px horizontal padding, 12px Inter weight 600, uppercase or title-case. Two variants: teal-on-dark-teal (#4ff7d1 text on #0e342d surface) and magenta-on-dark-magenta (#d946ef text on a #1c2b34 / #0d1318 surface)."

    code_snippet_block:
      role: "Terminal-style command display"

      info: "Background #162129, 12px border-radius, 1px #283945 border, 16px padding. Monospaced text in white with the command in white and flags/options in a muted gray. Often paired with a magenta copy button overlapping the right edge."

    inline_text_link:
      role: "In-prose hyperlink"

      info: "No underline by default. Text in #c5cace (secondary white). On hover, transitions to #4ff7d1 teal. Some in-prose links use the teal as the resting state to emphasize a product or feature name."

    social_icon_button:
      role: "External link to GitHub, X, Discord"

      info: "16-20px monochrome icon, white or #b6b8ba stroke, no background, no border, no padding. Used in the nav bar. Hover brightens to #ffffff."

    logo_trust_grid:
      role: "Social proof / integration partners"

      info: "Multi-column grid (4-5 columns) of partner logos in monochrome white or #b6b8ba, evenly spaced with ~40px vertical and ~48px horizontal gap. Logos sit on the page canvas directly — no card containers — to keep the section feeling like a developer credibility wall, not a marketing strip."

    ghost_text_button:
      role: "Tertiary action, low-emphasis link-button"

      info: "Transparent background, no border, text in #ffffff, 14px Inter weight 500, optional 4px 8px padding. Sits beside primary CTAs as a 'Schedule a Call' alternative path."

  do_s_and_don_ts:

    do:
      - "Use #4ff7d1 as the single primary action background and brand voice color — one CTA per viewport section."
      - "Set all buttons and badges to 9999px border-radius; use 12px for code blocks and 16px for product cards."
      - "Reserve -0.025em letter-spacing globally; tighten further at display sizes (-1.8px at 72px)."
      - "Build product card distinction through 1px colored borders (#4ff7d1 or #a21caf) on a flat #121b1f surface — never use drop shadows."
      - "Use Inter weight 800 only for the hero display headline; use 600-700 for product card titles, 400-500 for everything else."
      - "Keep #d946ef magenta scoped to beta labels, code-adjacent buttons, and the self-hosted product card — never as a general accent."
      - "Maintain 80px section gaps and 40px card padding as the rhythm anchors for comfortable dark-mode reading."

    don_t:
      - "Do not introduce drop shadows or elevation glows — depth comes from surface tone shifts and colored borders only."
      - "Do not use #4ff7d1 for body text or long-form paragraphs — reserve teal for headlines, links, and the CTA background."
      - "Do not mix the teal and magenta on the same surface element; they signal distinct product variants and must stay segregated."
      - "Do not use radii other than the four values: 9999px, 24px, 16px, 12px. No 4px or 8px rounding."
      - "Do not set body text below #86898c — anything dimmer fails contrast on the dark canvas."
      - "Do not use chromatic colors for borders on anything other than product cards; UI dividers stay in #283945."
      - "Do not introduce additional accent hues — the two-color chromatic system (mint + magenta) is the entire brand language."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Deep Space | `#0d1318` | Outermost page canvas |"
    info: "| 1 | Obsidian | `#121b1f` | Hero and large content sections with the subtle inner-border treatment |"
    info: "| 2 | Carbon Teal | `#162129` | Product cards, code snippet containers, elevated content blocks |"
    info: "| 3 | Slate Drift | `#283945` | Hairline borders, ghost surfaces, nav pill backgrounds |"

  elevation:

    info: "Turso avoids drop-shadow elevation entirely. Depth is communicated through surface tonal shifts (canvas → card → elevated) and thin 1px colored borders on key cards. The teal and magenta border edges act as the only 'lifted' signal — the card itself is flat, but its colored perimeter says 'this is a distinct product variant.' This flat-with-colored-edge treatment keeps the UI feeling terminal-adjacent rather than app-like."

  imagery:

    info: "No photography, no illustrations, no 3D renders. The visual system is pure UI: typography, colored borders, and a monochrome partner-logo trust grid. Icons are thin-stroke single-color (1.5-2px stroke weight) in white or teal, used sparingly in nav and product cards. Code snippets double as the primary visual texture — monospaced text in dark panels is the site's only 'imagery' equivalent."

  layout:

    info: "Centered, max-width 1200px contained layout with a full-bleed dark canvas. The hero is a centered text stack: announcement banner → nav → pill badge → 72px teal headline → two-paragraph description in muted gray → dual CTA row → 4-column partner logo grid. Below the hero, content sections alternate between centered text blocks and 2-column product card grids. Product cards are equal-width siblings in a 2-up grid with a 24-40px gap. Sections are separated by 80px vertical gaps with no dividers — the dark canvas flows continuously, with section identity carried by typography scale and the two product card border colors rather than surface color changes."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff (primary), #c5cace (secondary), #86898c (muted body)"
    - "background: #0d1318 (canvas), #121b1f (hero/section), #162129 (card), #283945 (border/ghost)"
    - "border: #283945 (default hairline), #4ff7d1 (product card teal), #a21caf (product card plum)"
    - "accent: #4ff7d1 (mint — brand voice, headlines, links, primary action)"
    - "secondary accent: #d946ef (magenta — beta labels, code buttons, self-hosted card)"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."


    - "*Build the plum product card*: Same structure as teal card but border becomes 1px solid #a21caf. Badge: 'BETA' in 12px weight 600, #d946ef text on a dark magenta-tinted surface, 9999px radius. Include a code snippet block (background #162129, 12px radius, 1px #283945 border, 16px padding, monospaced white text) and a ghost GitHub star button beside it (transparent bg, 1px #283945 border, 9999px radius, 12px weight 500, #ffffff text, star icon)."

    - "*Build the announcement banner*: Full-width strip on #0d1318 canvas with 1px #0e342d bottom border. Centered text at 14px Inter weight 500, #ffffff, with an inline teal-underlined link 'Join the private beta' in #4ff7d1. Padding 8px top and bottom."

    - "*Build the partner logo grid*: 4-column grid on the #0d1318 canvas, no card containers, 48px row gap, 40px column gap. Each logo is a monochrome wordmark in #b6b8ba at 16-20px display size. Section is preceded by no header — logos sit in a clean horizontal band as a credibility wall."

  similar_brands:

    - "**Supabase** — Same dark-canvas devtool aesthetic with a single vivid brand color (Supabase's green, Turso's mint) carrying the primary action and headline."
    - "**Fly.io** — Terminal-adjacent dark mode, flat surfaces without drop-shadow elevation, and a thin colored border treatment on feature cards."
    - "**PlanetScale** — Developer-focused dark UI with high-contrast white-on-near-black typography and a single saturated accent (PlanetScale's purple) used sparingly on CTAs and links."
    - "**Cloudflare** — Dense technical content on a near-black canvas with restrained chromatic accents that signal interactivity rather than decoration."
    - "**Vercel** — Pill-shaped buttons (9999px radius), near-monochrome dark surfaces, and a quiet single-accent approach that lets the accent do all the chromatic work."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-deep-space: #0d1318;
          --color-obsidian: #121b1f;
          --color-carbon-teal: #162129;
          --color-slate-drift: #283945;
          --color-bone-white: #ffffff;
          --color-ash-gray: #c5cace;
          --color-fog-gray: #b6b8ba;
          --color-smoke-gray: #86898c;
          --color-pewter: #9ea1a3;
          --color-mint-signal: #4ff7d1;
          --color-deep-teal: #0e342d;
          --color-electric-magenta: #d946ef;
          --color-plum-edge: #a21caf;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.35px;
          --text-body: 16px;
          --leading-body: 1.6;
          --tracking-body: -0.4px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.78;
          --tracking-body-lg: -0.45px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.75px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.9px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.11;
          --tracking-heading-lg: -1.2px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.8px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 40px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 24px;
          --radius-cards: 16px;
          --radius-badges: 9999px;
          --radius-buttons: 9999px;
          --radius-smallcards: 12px;
        
          /* Surfaces */
          --surface-deep-space: #0d1318;
          --surface-obsidian: #121b1f;
          --surface-carbon-teal: #162129;
          --surface-slate-drift: #283945;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-deep-space: #0d1318;
          --color-obsidian: #121b1f;
          --color-carbon-teal: #162129;
          --color-slate-drift: #283945;
          --color-bone-white: #ffffff;
          --color-ash-gray: #c5cace;
          --color-fog-gray: #b6b8ba;
          --color-smoke-gray: #86898c;
          --color-pewter: #9ea1a3;
          --color-mint-signal: #4ff7d1;
          --color-deep-teal: #0e342d;
          --color-electric-magenta: #d946ef;
          --color-plum-edge: #a21caf;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.35px;
          --text-body: 16px;
          --leading-body: 1.6;
          --tracking-body: -0.4px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.78;
          --tracking-body-lg: -0.45px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.75px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.9px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.11;
          --tracking-heading-lg: -1.2px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.8px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        }