tableland___style_reference:
  info: "> alpine dusk at the terminal — soft coral peaks rising over a deep green-black void with one mint-green signal light glowing on the horizon."

  theme: "dark"

  info: "Tableland operates as a dark-mode developer surface punctuated by a single painted moment: a lavender-coral hero landscape that gives way to a calm, infrastructure-feeling interior. Typography is geometric humanist (Poppins) with weight 300 doing the heavy lifting on display copy, giving headlines a quiet, engineered feel rather than a marketing punch. A muted teal (#75b6b5) carries all interactive voice — nav, icons, links, learn-more affordances — while a single vivid mint green (#0be291) is reserved exclusively for emphasized headings, creating a clear hierarchy where teal navigates and green signals the primary read. Surfaces are layered in near-black steps (page → card → elevated), with cards and buttons rounded modestly (8–16px) and never pill-shaped except for tags and icon containers. The visual signature is the contrast between the soft painterly hero and the hard-edged terminal aesthetic below it — a database that feels both approachable and uncompromising."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Abyss Teal | `#75b6b5` | `--color-abyss-teal` | Teal text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color |"
    info: "| Mint Beacon | `#0be291` | `--color-mint-beacon` | Green text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color |"
    info: "| Coral Ember | `#f4706b` | `--color-coral-ember` | Decorative icon accent — used sparingly in nav icons and the hero illustration's mountain highlights. Warm counterpoint to the cool teal/mint palette |"
    info: "| Lavender Mist | `#e4cbf2` | `--color-lavender-mist` | Hero atmosphere — the soft lavender backdrop of the hero section and mountain illustration sky. Only used in the hero band; never in component surfaces or UI chrome |"
    info: "| Void | `#101e1e` | `--color-void` | Page canvas and primary action background — the base layer of the dark theme and the fill of filled CTA buttons (Enter Studio, Discord). Slightly green-tinted black rather than pure neutral |"
    info: "| Carbon | `#1a1a1a` | `--color-carbon` | Deep surface — code block backgrounds, terminal interiors, darkest elevated layers. One step below void for maximum contrast terminal aesthetic |"
    info: "| Slate | `#162929` | `--color-slate` | Mid surface and hairline borders — card backgrounds, button borders, dividers. Bridges between void and the lighter elevated steps |"
    info: "| Graphite | `#3b4949` | `--color-graphite` | Elevated card surface and hover-state fills — the topmost card tier, used for testimonial cards and hover backgrounds |"
    info: "| Fog | `#718b8b` | `--color-fog` | Muted text and inactive nav icons — body helper text, inactive nav glyphs, secondary metadata. The de-emphasized reading layer |"
    info: "| Ash | `#e5e7eb` | `--color-ash` | Hairline borders and dividers — the universal 1px border color used across nav, cards, icons, and structural separators. Primary border token |"
    info: "| Paper | `#ffffff` | `--color-paper` | Primary text and icon fill — all high-emphasis body copy, headings, and filled icon shapes. The top of the text contrast scale |"

  tokens___typography:

    poppins___all_ui_and_display_copy__weight_300_dominates_display_and_hero_headings__creating_an_unusually_quiet_headline_voice___the_database_speaks_softly__weight_400_for_body_and_nav__500_for_button_labels_and_emphasized_metadata__700_reserved_for_rare_structural_emphasis_____font_poppins:
      - "**Substitute:** Nunito Sans or DM Sans as system-friendly alternatives; for the same light-weight display feel, Manrope (300) is the closest match."
      - "**Weights:** 300, 400, 500, 700"
      - "**Sizes:** 12, 14, 16, 18, 22, 24, 30, 48"
      - "**Line height:** 1.00–1.78"
      - "**Letter spacing:** normal at all sizes; no tightening observed on large display"
      - "**Role:** All UI and display copy. Weight 300 dominates display and hero headings, creating an unusually quiet headline voice — the database speaks softly. Weight 400 for body and nav, 500 for button labels and emphasized metadata, 700 reserved for rare structural emphasis."

    monospace___code_snippets__terminal_output__sql_examples__and_inline_technical_tokens__system_monospace_at_a_single_small_size___functional__not_decorative_____font_monospace:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, or Fira Code"
      - "**Weights:** 300"
      - "**Sizes:** 12px"
      - "**Line height:** 1.33"
      - "**Role:** Code snippets, terminal output, SQL examples, and inline technical tokens. System monospace at a single small size — functional, not decorative."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.45 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.56 | — | `--text-body` |"
      info: "| subheading | 18px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.43 | — | `--text-heading-sm` |"
      info: "| heading | 24px | 1.33 | — | `--text-heading` |"
      info: "| heading-lg | 30px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 48px | 1 | — | `--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: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 144 | 144px | `--spacing-144` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 8px |"
      info: "| buttons | 4px |"
      info: "| code-blocks | 4px |"
      info: "| elevated-cards | 16px |"
      info: "| icon-containers | 9999px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 128px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    primary_cta_button_filled:
      role: "Main conversion action — 'Enter Studio', 'Discord'"

      filled_dark_button_on_dark_surface: "#101e1 background, #ffffff text, 4px radius, 12px vertical × 24px horizontal padding. Poppins 500 at 14px. Arrow glyph (→) follows label, rendered in the same white. No border. Hover lifts to #1a1a1a or adds subtle 1px #e5e7eb outline."

    ghost_nav_button:
      role: "Secondary action in nav bar — 'Enter Studio' in header"

      outlined_button: "transparent or #101e1 background, 1px #e5e7eb border, #ffffff text, 9999px radius (pill). Poppins 500 at 14px. 8px vertical × 20px horizontal padding. Inverts on hover (background becomes #e5e7eb, text becomes #101e1e)."

    nav_link:
      role: "Primary navigation — GitHub, Docs, Blog, Rigs"

      info: "Text-only nav item, no underline. Poppins 400 at 14px, #75b6b5 (teal). 8px vertical padding. Hover: opacity 0.7 or shifts to #0be291. No background, no border."

    code_terminal_block:
      role: "SQL example, command preview, developer-facing syntax"

      dark_terminal_panel: "#1a1a1a background, 4px radius, 1px #162929 border. Monospace 12px text, #ffffff on dark. 24px internal padding. Optional top bar with traffic-light dots (#f4706b, #0be291, #75b6b5). The terminal is always full-width within its container."

    feature_card:
      role: "Product feature blocks — SQLite, On-chain security, Portable, Multi-chain, Pricing"

      info: "Flat dark card with no background fill (sits directly on #101e1 canvas). Icon container is 32px circle with 1px #75b6b5 border, icon stroke in #75b6b5 or #0be291. Heading Poppins 500 at 18px, #ffffff. Body Poppins 400 at 14px, #718b8b. 'Learn more' link in #75b6b5 with underline. No card border or background — the negative space IS the card."

    testimonial_card:
      role: "Community quotes — Twitter-style cards in 'Join the community' section"

      elevated_card: "#3b4949 background, 1px #e5e7eb border, 16px radius, 24px padding. Avatar 32px rounded square with 1px #e5e7eb border, placed top-left. Display name Poppins 500 at 14px #ffffff beside @handle in #718b8b. Quote body Poppins 400 at 14px #ffffff with natural line wrapping. Cards may overflow horizontally with peek effect on the section edges."

    section_heading_mint:
      role: "Emphasized section titles — 'Join the community', key feature headers"

      info: "Poppins 300 at 30px, #0be291. Centered alignment. The mint green is the only chromatic heading color; it signals the most important reading on the page. No underline, no decoration."

    section_heading_white:
      role: "Standard section titles — 'Build on decentralized data without the headache'"

      info: "Poppins 300 at 30px, #ffffff. Centered. The default heading voice — quiet, engineered, not marketing-loud."

    display_headline:
      role: "Hero headline — 'The decentralized cloud database.'"

      info: "Poppins 300 at 48px, line-height 1.0, #1a1a1a on the lavender hero. The word 'decentralized' is bolded (weight 700) in the same color for contrast within the whisper-weight line. Small eyebrow label above in Poppins 500 at 12px uppercase #718b8b with 'ANYWHERE' bolded in #1a1a1a."

    body_paragraph:
      role: "Standard explanatory copy"

      info: "Poppins 400 at 16px, line-height 1.56, #ffffff. Max-width ~640px for readable line length. No drop cap, no first-line indent."

    helper___metadata_text:
      role: "Captions, timestamps, secondary metadata"

      info: "Poppins 400 at 12px, #718b8b. Used for @handles, section subtitles, footnotes, and de-emphasized metadata."

    icon_container_circular:
      role: "Wrapping small feature/inline icons"

      info: "32px–40px circle, 1px #75b6b5 or #e5e7eb border, transparent or #101e1 fill. Icon inside is 1.5px stroke, #75b6b5 or matching border color. Used for feature card headers and inline section markers."

    hero_landscape_illustration:
      role: "Brand identity artwork — the mountain peaks in the hero"

      info: "Illustrated mountain ridge in #f4706b (coral) with darker shadow planes, sitting on a soft #e4cbf2 to #f5d4e8 gradient sky. Flat illustration style, no outlines, geometric facets. Anchored to the right side of the hero, bleeding off the right edge. The illustration is the brand signature — no other decorative graphics are used in the dark interior."

  do_s_and_don_ts:

    do:
      - "Use Poppins 300 for all display and section headings — the whisper-weight is the signature voice"
      - "Reserve #0be291 (mint) exclusively for emphasized section headings; never apply it to body, links, or backgrounds"
      - "Use #75b6b5 (teal) for all interactive voice — nav links, icon strokes, learn-more affordances"
      - "Layer surfaces using the four-step scale: #101e1 (page) → #162929 (mid) → #3b4949 (elevated card) → #1a1a1a (terminal)"
      - "Use 4px radius for buttons and code blocks, 8px for content cards, 16px for elevated testimonial cards, 9999px only for tags and icon containers"
      - "Center-align section headings and give each section at least 128px vertical breathing room"
      - "Keep the lavender hero as the single painted moment — do not introduce gradients or illustrations into the dark interior"

    don_t:
      - "Do not use weight 600+ on display headings — the light-weight restraint IS the brand voice"
      - "Do not apply #0be291 to links, icons, or backgrounds — it loses hierarchy when scattered"
      - "Do not use pill radius (9999px) on buttons or cards — pills are reserved for tags and icon containers only"
      - "Do not introduce shadows or elevation effects — the design relies on surface color steps, not depth"
      - "Do not use pure black (#000000) — all darks are slightly green-tinted (#101e1, #1a1a1a, #162929)"
      - "Do not add accent colors beyond the existing four (teal, mint, coral, lavender) — the palette is intentionally narrow"
      - "Do not use more than one chromatic color per UI region — teal for interaction, mint for emphasis, coral only in the hero illustration"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#101e1` | Page background — the base dark layer across all interior sections |"
    info: "| 1 | Mid Surface | `#162929` | Subtle card backgrounds and structural borders — bridges void and elevated |"
    info: "| 2 | Elevated Card | `#3b4949` | Testimonial and elevated content cards |"
    info: "| 3 | Terminal | `#1a1a1a` | Code blocks and deepest UI elements — the darkest tier for maximum contrast |"

  elevation:

    info: "The design uses no shadows or blur effects. Depth is communicated entirely through a four-step surface color scale (#101e1 → #162929 → #3b4949 → #1a1a1a) and 1px #e5e7eb hairline borders. This flat, hard-edged approach reinforces the infrastructure/database identity — nothing floats, everything sits precisely on a surface."

  imagery:

    info: "The site has exactly one illustrative element: a painted mountain landscape in the hero section, rendered in flat geometric facets of coral (#f4706b) with soft gradient sky (#e4cbf2 to #f5d4e8). No photography, no 3D renders, no decorative graphics anywhere in the dark interior. Icons throughout are simple line-drawn strokes in 1.5px weight, using teal (#75b6b5) as the standard color. The visual language is deliberately sparse: the hero illustration is the only emotional moment, and the rest of the page communicates through type, surface color, and code. This restraint signals developer credibility — the product is the content, not the decoration."

  layout:

    info: "Page is max-width 1200px centered with generous horizontal padding (80px on desktop). The hero is split-layout: left column holds eyebrow label, display headline, body copy, and CTA; right column is dominated by the mountain illustration bleeding off the right edge. Below the hero, the page alternates into full-width dark bands with centered headings and either 2-column or 4-column content grids. The 'Build on decentralized data' section uses a 4-column equal grid for feature cards (SQLite, On-chain security, Portable, Multi-chain), then drops to a single-column full-width block for Pricing. The 'Join the community' section breaks the grid with a horizontally scrolling testimonial card carousel that peeks cards at the edges. Section gaps are 128px, giving each dark band room to breathe. Navigation is a minimal top bar: logo left, 4 text links plus 1 ghost pill button right, 64px height, 1px bottom border in #e5e7eb."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #ffffff (primary), #718b8b (muted)"
    - "background: #101e1e (canvas), #3b4949 (elevated card), #1a1a1a (terminal)"
    - "border: #e5e7eb (hairline), #162929 (structural)"
    - "accent: #75b6b5 (teal — interactive voice), #0be291 (mint — heading emphasis only)"
    - "primary action: #101e1e (filled action)"

    info: "3-5 Example Component Prompts:"

    - "Hero section: lavender (#e4cbf2) background, split layout. Left column: eyebrow 'READ+WRITE FROM ANYWHERE' at Poppins 500 12px uppercase #718b8b (with 'ANYWHERE' bold in #1a1a1a). Headline 'The decentralized cloud database.' at Poppins 300 48px #1a1a1a, line-height 1.0, with 'decentralized' at weight 700. Body 16px Poppins 400 #1a1a1a. Primary button: #101e1e fill, white text, 4px radius, 12px 24px padding, Poppins 500 14px, with → arrow. Right column: coral (#f4706b) geometric mountain illustration bleeding off right edge."

    - "Feature card row: 4-column grid on #101e1e canvas, 40px column gap. Each card has no background fill. Icon container: 32px circle, 1px #75b6b5 border, teal icon stroke inside. Heading Poppins 500 18px #ffffff. Body Poppins 400 14px #718b8b. 'Learn more' link in #75b6b5 with underline, Poppins 400 14px."

    - "Testimonial card carousel: section background #101e1e, section heading 'Join the community' at Poppins 300 30px #0be291 centered. Cards: #3b4949 background, 1px #e5e7eb border, 16px radius, 24px padding. Avatar 32px square with 1px #e5e7eb border. Display name Poppins 500 14px #ffffff, @handle in #718b8b. Quote Poppins 400 14px #ffffff. Cards overflow horizontally with edge peek effect."

    - "Code terminal block: #1a1a1a background, 4px radius, 1px #162929 border, 24px padding. Monospace 12px white text on dark. Top bar optional with three 8px circles: #f4706b, #0be291, #75b6b5. Full-width within its parent container."

    - "Ghost nav button: transparent background, 1px #e5e7eb border, 9999px pill radius, #ffffff text Poppins 500 14px, 8px 20px padding. Inverts on hover to #e5e7eb fill with #101e1e text."

  similar_brands:

    - "**The Graph** — Same dark-mode developer infrastructure aesthetic with a single hero illustration and quiet, weight-300 display headlines"
    - "**Filecoin** — Dark canvas with an illustrated landscape hero, mint-green accent for emphasized headings, and terminal-style code blocks"
    - "**Ceramic Network** — Near-black surface stack with a four-step elevation scale, teal interactive voice, and flat geometric illustration in the hero"
    - "**IPFS** — Developer-facing dark surface with a single brand-color moment in the hero, monospace code examples, and whisper-light Poppins-style headlines"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-abyss-teal: #75b6b5;
          --color-mint-beacon: #0be291;
          --color-coral-ember: #f4706b;
          --color-lavender-mist: #e4cbf2;
          --color-void: #101e1e;
          --color-carbon: #1a1a1a;
          --color-slate: #162929;
          --color-graphite: #3b4949;
          --color-fog: #718b8b;
          --color-ash: #e5e7eb;
          --color-paper: #ffffff;
        
          /* Typography — Font Families */
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-monospace: 'monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --text-body-sm: 14px;
          --leading-body-sm: 1.45;
          --text-body: 16px;
          --leading-body: 1.56;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.43;
          --text-heading: 24px;
          --leading-heading: 1.33;
          --text-heading-lg: 30px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-144: 144px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 128px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 8px;
          --radius-buttons: 4px;
          --radius-code-blocks: 4px;
          --radius-elevated-cards: 16px;
          --radius-icon-containers: 9999px;
        
          /* Surfaces */
          --surface-canvas: #101e1;
          --surface-mid-surface: #162929;
          --surface-elevated-card: #3b4949;
          --surface-terminal: #1a1a1a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-abyss-teal: #75b6b5;
          --color-mint-beacon: #0be291;
          --color-coral-ember: #f4706b;
          --color-lavender-mist: #e4cbf2;
          --color-void: #101e1e;
          --color-carbon: #1a1a1a;
          --color-slate: #162929;
          --color-graphite: #3b4949;
          --color-fog: #718b8b;
          --color-ash: #e5e7eb;
          --color-paper: #ffffff;
        
          /* Typography */
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-monospace: 'monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --text-body-sm: 14px;
          --leading-body-sm: 1.45;
          --text-body: 16px;
          --leading-body: 1.56;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.43;
          --text-heading: 24px;
          --leading-heading: 1.33;
          --text-heading-lg: 30px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-144: 144px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        }