hashnode___style_reference:
  info: "> Editorial newsroom on a gray runway — a clean monochrome feed where one electric blue accent carries all the energy."

  theme: "light"

  info: "Hashnode presents an editorial newsroom aesthetic: a near-monochrome canvas of warm-cool grays where the only chromatic element is a single electric blueprint blue that does all the talking. Typography is uniformly Suisse Intl, a humanist grotesque with tight negative tracking, giving headlines a confident, typeset-in-a-publication feel rather than a dashboard utilitarian one. Surfaces are flat with hairline borders instead of shadows — the interface trusts typography and whitespace to create hierarchy, not elevation. Components feel like cards laid out on a magazine spread: rounded but not pillowy, compact but breathable, with a two-column card grid that reads like a homepage feed. Color appears sparingly as functional punctuation — links, a single CTA fill, badges — never as decoration."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Blueprint Blue | `#1d52de` | `--color-blueprint-blue` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Ink Black | `#16191c` | `--color-ink-black` | Primary body text, headings, icon strokes — the dominant ink |"
    info: "| Carbon | `#1c2024` | `--color-carbon` | Secondary heading text and high-emphasis icon fills where a subtle warmth is desired over pure ink |"
    info: "| Slate | `#7b8187` | `--color-slate` | Muted metadata, helper text, placeholder text, secondary icons, timestamps, vote/comment counts |"
    info: "| Fog | `#d1d4d9` | `--color-fog` | Hairline borders, card outlines, dividers, subtle separator strokes — the structural gray that defines every card edge |"
    info: "| Paper | `#f4f5f7` | `--color-paper` | Subtle surface tint behind nested elements, hover states, and tag/chip backgrounds |"
    info: "| Stone | `#e6e8eb` | `--color-stone` | Mid-surface layer for inset panels and elevated cards between Paper and Fog |"
    info: "| Canvas | `#f9fafb` | `--color-canvas` | Page background, primary card surface — the base on which everything sits |"
    info: "| Mint | `#00bc7d` | `--color-mint` | Green supporting accent for decorative details and low-frequency emphasis |"

  tokens___typography:

    suisseintl___suisseintl___detected_in_extracted_data_but_not_described_by_ai____font_suisseintl:
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 14px, 16px, 18px, 20px, 30px"
      - "**Line height:** 1, 1.33, 1.38, 1.43, 1.5, 1.56, 1.63"
      - "**Letter spacing:** -0.025, 0.05, 0.1"
      - "**OpenType features:** `\"calt\", \"kern\", \"liga\", \"ss01\"`"
      - "**Role:** suisseIntl — detected in extracted data but not described by AI"

    suisse_int_l___sole_text_family_for_everything__body__headings__nav__buttons__links__tight__0_025em_tracking_on_larger_sizes_creates_a_confident_editorial_feel__the_0_05em_and_0_10em_tracking_on_smaller_sizes_mark_small_caps_and_category_labels__weight_500_600_is_the_workhorse_range__700_is_reserved_for_the_largest_hero_headline_30px__the__ss01__stylistic_set_is_active_and_shapes_the_typeface_s_distinctive_flavor___a_designer_should_never_opt_out_of_it_____font_suisse_intl:
      - "**Substitute:** Inter (close), General Sans, or DM Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 14px, 16px, 18px, 20px, 30px"
      - "**Line height:** 1.00–1.63"
      - "**Letter spacing:** -0.025em at 30px; normal at body sizes; 0.05em–0.10em for uppercase labels"
      - "**OpenType features:** `\"calt\" on, \"kern\" on, \"liga\" on, \"ss01\" on`"
      - "**Role:** Sole text family for everything: body, headings, nav, buttons, links. Tight -0.025em tracking on larger sizes creates a confident editorial feel; the 0.05em and 0.10em tracking on smaller sizes mark small caps and category labels. Weight 500–600 is the workhorse range; 700 is reserved for the largest hero headline (30px). The 'ss01' stylistic set is active and shapes the typeface's distinctive flavor — a designer should never opt out of it."

    font_awesome_7_jelly___pro___icon_system___jelly_for_soft_filled_illustrated_icons__pro_for_sharp_utility_icons__icons_align_to_text_baseline_and_inherit_color_from_the_surrounding_text_level_ink_for_primary__slate_for_secondary_____font_font_awesome_7_jelly_pro:
      - "**Substitute:** Lucide or Phosphor for similar outlined density"
      - "**Weights:** 400, 900"
      - "**Sizes:** 12px, 14px, 16px, 18px, 20px"
      - "**Line height:** 1.00"
      - "**Role:** Icon system — Jelly for soft-filled illustrated icons, Pro for sharp utility icons. Icons align to text-baseline and inherit color from the surrounding text level (Ink for primary, Slate for secondary)."

    suisse_mono___tiny_uppercase_monospace_for_micro_labels_and_badge_pills_where_monospaced_character_spacing_signals__system_metadata____extremely_rare__used_as_a_typographic_accent_only____font_suisse_mono:
      - "**Substitute:** JetBrains Mono Bold or IBM Plex Mono SemiBold at 10px"
      - "**Weights:** 600"
      - "**Sizes:** 10px"
      - "**Line height:** 1.43"
      - "**Role:** Tiny uppercase monospace for micro-labels and badge pills where monospaced character spacing signals 'system/metadata' — extremely rare, used as a typographic accent only"

    font_awesome_7_pro___font_awesome_7_pro___detected_in_extracted_data_but_not_described_by_ai____font_font_awesome_7_pro:
      - "**Weights:** 400, 900"
      - "**Sizes:** 12px, 14px, 18px"
      - "**Line height:** 1"
      - "**Role:** Font Awesome 7 Pro — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.38 | — | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 1.2 | -0.75px | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 10px |"
      info: "| cards | 14px |"
      info: "| inputs | 10px |"
      info: "| buttons | 10px |"
      info: "| heroPanel | 18px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `oklab(0 0 0 / 0.1) 0px 0px 0px 1px inset` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    primary_cta_button:
      role: "The sole filled action in the system"

      info: "Background #1d52de, white text, 10px radius, 8px 16px padding, Suisse Intl weight 600 at 14px. No border, no shadow. Hovers shift to a slightly darker blue (approx #1741b0). Used at most once per viewport — this button must feel like a deliberate action, not a default decoration."

    ghost_navigation_button:
      role: "Sidebar nav item (Home, Blogs, Bookmarks, Forums, etc.)"

      info: "Transparent background, #16191c text at 14px weight 500, 10px radius, 8px 12px padding. Active state gets #f4f5f7 background and #1d52de left border indicator (2–3px). Icons are 18px Font Awesome Pro, color matching text."

    blog_post_card:
      role: "Feed item in the two-column post grid"

      info: "Canvas (#f9fafb) background, 1px #d1d4d9 border, 14px radius, 16px padding. Internal layout: 48px square thumbnail on the left, right column with author name (12px Slate) + timestamp, then headline at 18px weight 600 #16191c, then small interaction chips below (upvote count, comment count) in #7b8187 12px. No shadow, no hover lift — only a subtle background tint on hover."

    hero_panel:
      role: "Large welcome area at the top of the feed"

      info: "Full-width inside main column, 18px radius, 1px #d1d4d9 border, Canvas background. Two-column inner layout: left text block (30px weight 700 headline with -0.75px tracking, 16px body in Slate, single blue CTA), right illustration area. No background gradient — the illustration is the color."

    vote___comment_chip:
      role: "Inline interaction count on post cards"

      info: "No background, 12px Slate text with a small leading icon at 12px. 4px gap between icon and number. Optional hover: text shifts to #16191c."

    category_tag___badge:
      role: "Small inline label (e.g. 'NEW & POPULAR')"

      info: "Transparent or Paper background, 10px radius, 6px 10px padding, 12px Suisse Intl weight 500. Text color matches the section's accent — #1d52de for active/featured labels, Slate for neutral labels. A tiny leading dot (4px) in the same color precedes the text."

    author_avatar___name_row:
      role: "Identity line above card headlines"

      info: "32px circular avatar (or 4px fallback initial square with Fog border), 8px gap, then author name at 12px weight 500 #16191c followed by '·' separator and timestamp in Slate. Tightly horizontal — no wrapping."

    search_input:
      role: "Command-K style search field in sidebar"

      info: "Paper (#f4f5f7) background, 1px #d1d4d9 border, 10px radius, 8px 12px padding. 14px placeholder in Slate. No focus ring — focus swaps background to Canvas and border to a slightly darker Fog for a quiet state change."

    sidebar_container:
      role: "Left persistent navigation rail"

      info: "Full-height, 240–280px wide, Stone (#e6e8eb) or Canvas background with a 1px #d1d4d9 right border. Logo at top, primary nav, author profile section, then 'WHAT'S NEW' announcement block and footer links at bottom."

    announcement_card:
      role: "'What's New' callout in sidebar"

      info: "Canvas background, 1px #d1d4d9 border, 14px radius, 16px padding. Title at 14px weight 600 #16191c, body at 12px Slate. The '×' close button is 16px Ink at top-right."

    sign_in_button:
      role: "Auth action in sidebar"

      info: "Filled #1d52de, white text, 10px radius, 8px padding, 14px weight 600 — same treatment as primary CTA but full-width within sidebar."

    post_card_thumbnail:
      role: "Visual preview on feed cards"

      48_64px_square_or_4: "3 rectangle, 8px or 10px radius, 1px #d1d4d9 border to prevent image bleed, object-fit cover."

  do_s_and_don_ts:

    do:
      - "Use #1d52de for exactly one primary CTA per viewport — never two filled blue buttons competing for attention."
      - "Set all card and button radii to 10px, hero panels to 18px, and feed cards to 14px — these three values are the entire radius vocabulary."
      - "Apply 'ss01', 'calt', 'kern', 'liga' font features on every Suisse Intl instance — disabling ss01 visibly changes the typeface's character."
      - "Use hairline 1px #d1d4d9 borders for separation; never reach for a drop shadow when a border does the job."
      - "Keep body text at 16px with 1.5 line-height and headings at 18/20/30px — do not invent intermediate sizes between the 20 and 30 steps."
      - "Limit Slate (#7b8187) to metadata, timestamps, and vote counts — never use it for body copy or headings."
      - "Match icon color to its adjacent text color (Ink for primary, Slate for secondary) — icons are never an independent color."

    don_t:
      - "Do not introduce a second accent color — the entire system speaks with one blue voice."
      - "Do not add drop shadows to cards, buttons, or panels — the inset 1px border (oklab 0 0 0 / 0.1) is the only shadow permitted."
      - "Do not use white (#ffffff) as a surface — Canvas is #f9fafb, which gives the interface a paper-like warmth."
      - "Do not set body text below 14px or above 18px — the 16px body with 14px secondary is the readable core."
      - "Do not use weight 700 for body or subheadings — reserve 700 for the 30px display headline only."
      - "Do not use Pill (9999px) radius on anything — the system is rounded-rect, not pill-shaped."
      - "Do not place gradient fills on cards, buttons, or hero backgrounds — color is flat throughout."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f9fafb` | Page background, main feed surface |"
    info: "| 1 | Paper | `#f4f5f7` | Subtle hover states, nested chip backgrounds |"
    info: "| 2 | Stone | `#e6e8eb` | Inset panels, sidebar background tints |"
    info: "| 3 | Fog | `#d1d4d9` | Border / hairline separator — not a fill |"

  elevation:

    info: "The system deliberately avoids drop shadows in favor of 1px hairline borders in Fog (#d1d4d9) for all component separation. The only shadow permitted is an inset 1px stroke (oklab(0 0 0 / 0.1) 0 0 0 1px inset) for inputs that need a subtle pressed-in feel. This keeps every card, button, and panel reading as flat type on flat paper — the interface trusts typography and whitespace, not depth, to establish hierarchy."

  imagery:

    info: "Imagery is editorial and restrained. The hero features a single flat illustration (hands at a typewriter on a mustard-and-mint palette) that carries all the visual warmth of the page — no photographs, no gradients, no decorative noise. Post card thumbnails are 4:3 or 1:1 crops of content imagery (screenshots, book covers, diagrams) with 8–10px radius and a 1px Fog border. No lifestyle photography, no team shots, no abstract gradient backgrounds. The visual rule: if the image is a post thumbnail, it must look like editorial content, not decoration."

  layout:

    persistent_two_column_shell: "a 240–280px fixed left sidebar containing logo, primary nav, author profile, and announcement blocks, paired with a fluid main content column. The main column is a max-width 1200px centered feed that begins with a full-width hero panel (18px radius, two-column internal split: text left, illustration right), then a 'NEW & POPULAR' section header, then a two-column responsive grid of blog post cards. Section gaps are 48px; element gaps within cards are 8px. The sidebar uses a Stone (#e6e8eb) tint or Canvas with a 1px right border. Navigation is sidebar-based, not top-bar — a deliberate editorial choice that signals 'this is a reading environment, not a dashboard.'"

  agent_prompt_guide:

  quick_color_reference:
    - "Primary text: #16191c"
    - "Secondary text: #7b8187"
    - "Page background: #f9fafb"
    - "Card surface: #f9fafb with 1px #d1d4d9 border"
    - "Accent / links: #1d52de"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    - "**Hero Panel**: Canvas background (#f9fafb), 18px radius, 1px #d1d4d9 border, 32px padding. Two-column: left has a 30px Suisse Intl weight 700 headline in #16191c with -0.75px tracking, a 16px weight 400 body in #7b8187, and one blue filled button (#1d52de background, white text, 10px radius, 8px 16px padding, 14px weight 600). Right column holds a square illustration with 14px radius."

    - "**Blog Post Card**: Canvas (#f9fafb) background, 1px #d1d4d9 border, 14px radius, 16px padding. 48px square thumbnail on the left with 8px radius and 1px Fog border. Right column: author name at 12px weight 500 #16191c, '·' separator, timestamp in #7b8187. Headline at 18px weight 600 #16191c, 1.4 line-height. Below: a small icon-text row with upvote and comment counts at 12px Slate (#7b8187)."

    - "**Sidebar Nav Item**: Transparent background, #16191c text at 14px weight 500, 10px radius, 8px 12px padding. 18px Font Awesome icon to the left, color matching text. Active state: #f4f5f7 background fill, 3px #1d52de left border."

    - "**Category Badge**: Transparent or #f4f5f7 background, 10px radius, 6px 10px padding. A 4px colored dot (use #1d52de) followed by 12px Suisse Intl weight 500 text in #1d52de. Letter-spacing 0.05em."

    - "**Search Input**: Paper (#f4f5f7) background, 1px #d1d4d9 border, 10px radius, 8px 12px padding. 14px placeholder text in #7b8187. No focus ring; on focus, background becomes Canvas and border darkens to a deeper Fog."

  similar_brands:

    - "**Dev.to** — Same editorial-feed layout with a left sidebar and two-column card grid, though Dev.to leans more colorful in its accents"
    - "**Medium** — Same calm reading-first aesthetic, similar hairline-border card treatment, and restrained use of a single brand color for CTAs"
    - "**Substack** — Same monochrome newsroom palette with a single accent, same trust-in-typography-over-decoration philosophy"
    - "**Vercel Dashboard** — Same flat-surface, hairline-border, single-accent approach — though Vercel pairs it with a darker theme"
    - "**Linear** — Same commitment to one strong blue accent against an achromatic system, same tight type tracking and rounded-rect components"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-blueprint-blue: #1d52de;
          --color-ink-black: #16191c;
          --color-carbon: #1c2024;
          --color-slate: #7b8187;
          --color-fog: #d1d4d9;
          --color-paper: #f4f5f7;
          --color-stone: #e6e8eb;
          --color-canvas: #f9fafb;
          --color-mint: #00bc7d;
        
          /* Typography — Font Families */
          --font-suisseintl: 'suisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Int'l', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-7-jelly-pro: 'Font Awesome 7 Jelly / Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-mono: 'Suisse Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-font-awesome-7-pro: 'Font Awesome 7 Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.38;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --text-heading: 30px;
          --leading-heading: 1.2;
          --tracking-heading: -0.75px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-2xl: 18px;
        
          /* Named Radii */
          --radius-tags: 10px;
          --radius-cards: 14px;
          --radius-inputs: 10px;
          --radius-buttons: 10px;
          --radius-heropanel: 18px;
        
          /* Shadows */
          --shadow-subtle: oklab(0 0 0 / 0.1) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-canvas: #f9fafb;
          --surface-paper: #f4f5f7;
          --surface-stone: #e6e8eb;
          --surface-fog: #d1d4d9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-blueprint-blue: #1d52de;
          --color-ink-black: #16191c;
          --color-carbon: #1c2024;
          --color-slate: #7b8187;
          --color-fog: #d1d4d9;
          --color-paper: #f4f5f7;
          --color-stone: #e6e8eb;
          --color-canvas: #f9fafb;
          --color-mint: #00bc7d;
        
          /* Typography */
          --font-suisseintl: 'suisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Int'l', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-7-jelly-pro: 'Font Awesome 7 Jelly / Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-mono: 'Suisse Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-font-awesome-7-pro: 'Font Awesome 7 Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.38;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --text-heading: 30px;
          --leading-heading: 1.2;
          --tracking-heading: -0.75px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-2xl: 18px;
        
          /* Shadows */
          --shadow-subtle: oklab(0 0 0 / 0.1) 0px 0px 0px 1px inset;
        }