dropmark___style_reference:
  info: "> Warm paper atelier with cubist murals"

  theme: "light"

  info: "Dropmark lives on a warm cream paper canvas (#f7f7f1) with almost no chrome, letting a vivid cubist illustration system carry the brand's voice while the interface stays nearly monochrome. The type system pairs DropmarkRealHead (weight 500, used sparingly for display and section titles) with DropmarkRealText (400/600/700) for everything else, creating a calm editorial cadence where headings whisper at medium weight rather than shout bold. A single cyan (#00affa) is the only chromatic UI accent, reserved for the outlined action border language and the filled primary button — every other surface and border is warm gray. Radii are near-zero (3px) and shadows are essentially absent, producing a flat, paper-like feel that contrasts deliberately with the bold geometric illustration murals acting as section art."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Cyan Signal | `#00affa` | `--color-cyan-signal` | Blue accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color |"
    info: "| Cream Paper | `#f7f7f1` | `--color-cream-paper` | Page canvas, section backgrounds, soft card surfaces — the warm off-white ground everything sits on |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Inset cards, modal surfaces, inverse button text, nav background |"
    info: "| Stone Gray | `#dcdcd4` | `--color-stone-gray` | Subtle accent surfaces, inset focus rings, warm shadow tints |"
    info: "| Graphite | `#404040` | `--color-graphite` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |"
    info: "| Mid Ink | `#333333` | `--color-mid-ink` | Button text and border on dark surfaces, icon stroke |"
    info: "| Charcoal | `#111111` | `--color-charcoal` | Headline text alternative, deep emphasis borders |"
    info: "| Pewter | `#7f7f7f` | `--color-pewter` | Secondary body text, muted helper text, inactive state text |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | SVG illustration linework, deepest icon fills |"
    info: "| Midnight Violet | `#1e2554` | `--color-midnight-violet` | Illustration primary — the dominant dark shape color in cubist murals |"
    info: "| Deep Iris | `#2c2a6c` | `--color-deep-iris` | Illustration mid-tone — secondary dark purple in mural compositions |"
    info: "| Coral Burst | `#ff5d43` | `--color-coral-burst` | Illustration warm accent — orange-red shape fills in murals |"
    info: "| Aqua Glow | `#38dede` | `--color-aqua-glow` | Illustration cool accent and icon highlight — teal punctuation in murals |"
    info: "| Vivid Amethyst | `#9164fa` | `--color-vivid-amethyst` | Illustration bright accent — saturated purple shape fills |"
    info: "| Blush | `#f8b3b8` | `--color-blush` | Illustration soft accent — pink shape fills for warmth in murals |"

  tokens___typography:

    dropmarkrealhead___display_and_section_headings_only___used_at_60px_for_hero__40px_for_section_titles__24px_for_sub_section_headings__medium_weight_is_deliberate__avoids_the_heavy_700_convention_to_keep_headlines_calm_and_editorial_rather_than_assertive_____font_dropmarkrealhead:
      - "**Substitute:** Inter, system-ui"
      - "**Weights:** 500"
      - "**Sizes:** 24px, 40px, 60px"
      - "**Line height:** 1.20"
      - "**OpenType features:** `\"lnum\", \"tnum\"`"
      - "**Role:** Display and section headings only — used at 60px for hero, 40px for section titles, 24px for sub-section headings. Medium weight is deliberate; avoids the heavy 700 convention to keep headlines calm and editorial rather than assertive."

    dropmarkrealtext___body__buttons__nav__list__footer__supporting_ui__400_for_body_and_links__600_for_emphasized_sub_labels_and_button_text__700_reserved_for_occasional_inline_emphasis__functions_as_the_working_sans___every_non_heading_element_uses_it_____font_dropmarkrealtext:
      - "**Substitute:** Inter, system-ui"
      - "**Weights:** 400, 600, 700"
      - "**Sizes:** 13px, 14px, 15px, 16px, 17px, 20px, 24px, 40px"
      - "**Line height:** 1.20–1.50"
      - "**OpenType features:** `\"lnum\"`"
      - "**Role:** Body, buttons, nav, list, footer, supporting UI. 400 for body and links, 600 for emphasized sub-labels and button text, 700 reserved for occasional inline emphasis. Functions as the working sans — every non-heading element uses it."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.5 | — | `--text-caption` |"
      info: "| heading-sm | 20px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 24px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 60px | 1.2 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 35 | 35px | `--spacing-35` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 58 | 58px | `--spacing-58` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 240 | 240px | `--spacing-240` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 3px |"
      info: "| cards | 0px |"
      info: "| pills | 60px |"
      info: "| buttons | 3px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(220, 220, 210) 0px 0px 0px 2px inset` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 60px"
      - "**Card padding:** 30px"
      - "**Element gap:** 10-20px"

  components:

    primary_action_button_filled:
      role: "Main conversion CTA on hero and section blocks"

00affa_fill__white_text__dropmarkrealtext_600_at_16px__3px_radius__12px_24px_padding__no_shadow__hover_should_deepen_the_fill_or_add_a_subtle_inner_ring:

    outlined_action_button:
      role: "Secondary conversion CTA paired with primary"

      info: "Transparent fill, 2px #00affa border, #00affa text, DropmarkRealText 600 at 16px, 3px radius, 10px 22px padding. The chromatic outlined action is a signature of this system — it keeps the page from looking CTA-heavy."

    dark_filled_button:
      role: "Top-right nav conversion ('Sign up')"

404040_fill__white_text__dropmarkrealtext_600_at__14px__3px_radius__8px_16px_padding__compact__contrasts_the_cream_canvas:

    text_link:
      role: "Inline links, footer links, nav links"

404040_default__00affa_on_hover_active__dropmarkrealtext_400__no_underline_by_default__underline_on_hover__border_bottom_also_used_as_a_1px_divider_element:

    nav_bar:
      role: "Top-of-page site navigation"

      info: "Cream #f7f7f1 or white background, 1px hairline bottom border in #dcdcd4 or stone-gray, DropmarkRealText 400 at ~15px. Left-aligned brand mark (cyan drop icon + wordmark), right-aligned text links spaced 20–35px apart, dark 'Sign up' button at far right. 8–10px vertical padding. Optional 2px inset focus ring on the active/hovered link."

    hero_section:
      role: "Above-the-fold headline and primary conversion"

      info: "Cream #f7f7f1 background, centered or left-aligned DropmarkRealHead 500 at 60px headline in #404040 (or near-black), subhead in DropmarkRealText 400 at 17px in #404040, paired filled + outlined CTAs below. Headline may wrap to two lines with a wide tracking. Followed immediately by a full-bleed cubist illustration band."

    feature_card_horizontal:
      role: "Feature highlight blocks below the hero"

      horizontal_layout: "square or 4:3 image on the left (often a cubist illustration tile), text block on the right with DropmarkRealText 600 at 20px heading, body at 15–16px, and a #00affa text link ('Find out more', 'See resources', 'Show me how'). No card chrome — sits directly on cream, separated by 30px vertical rhythm."

    illustration_mural_band:
      role: "Full-bleed decorative art between sections"

      info: "Wide horizontal composition using the accent palette: #1e2554, #2c2a6c, #ff5d43, #38dede, #9164fa, #f8b3b8 on cream. Geometric cubist/isometric shapes with human figures. Acts as the brand's emotional punctuation — it carries personality so the UI doesn't have to."

    statistics_panel:
      role: "Dark emphasis block ('Trusted for 15+ years')"

404040_or_near_black_background__white_text__dropmarkrealhead_500_at_40px_for_the_figure__dropmarkrealtext_400_at_smaller_sizes_for_the_label__30px__padding__contrasts_the_cream_surroundings_to_anchor_credibility:

    logo_strip:
      role: "Social proof — customer/team logos"

      info: "Horizontal row of monochrome logos on cream background, no card chrome, generous 30–40px vertical padding, #404040 logo fills only."

    footer_link_group:
      role: "Footer column links"

      info: "DropmarkRealText 400 at 14–15px, #404040 with #00affa hover, stacked with ~5–10px vertical spacing. 1px #404040 hairline borders used as section dividers within the footer."

  do_s_and_don_ts:

    do:
      - "Use #00affa exclusively for the outlined action border and filled primary button — no other UI element should carry color"
      - "Set border-radius to 3px for nav, buttons, and tags; reserve 60px for true pill shapes only"
      - "Anchor headlines at DropmarkRealHead weight 500 — do not bold-up to 600/700 for display text"
      - "Keep the page background #f7f7f1; use #ffffff only for inset cards and elevated surfaces"
      - "Lean on the accent illustration palette (#1e2554, #2c2a6c, #ff5d43, #38dede, #9164fa, #f8b3b8) for mural art only, never for UI components"
      - "Use 1px #404040 hairline borders as the primary structural divider, not boxes or shadows"
      - "Pair every primary CTA with a #00affa outlined secondary action to maintain the two-button rhythm"

    don_t:
      - "Do not introduce additional chromatic colors into the UI — the system is intentionally monochrome with one cyan accent"
      - "Do not use drop shadows for elevation; depth comes from surface color and illustration, not shadow"
      - "Do not use border-radius larger than 3px on cards or buttons — the flat editorial geometry is the signature"
      - "Do not bold body text above 600; 700 should appear only for rare inline emphasis"
      - "Do not use #00affa as a text or background tint for non-action elements like tags, badges, or icons"
      - "Do not place the illustration palette colors on text, borders, or background fills — they belong inside mural compositions"
      - "Do not use the cream #f7f7f1 for buttons or CTAs; the canvas color must not compete with actions"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cream Paper | `#f7f7f1` | Page canvas and full-bleed section backgrounds |"
    info: "| 1 | Pure White | `#ffffff` | Inset cards, feature cards, nav bar, stat panel background |"
    info: "| 2 | Stone Gray | `#dcdcd4` | Subtle accent panels, illustration ground planes |"
    info: "| 3 | Graphite | `#404040` | Inverse dark surface for emphasis panels and stat blocks |"

  elevation:

    info: "The design is intentionally flat — the only shadow is a 2px inset stone-gray ring on the nav (rgb(220,220,210) 0 0 0 2px inset), used as a hairline focus/active state rather than elevation. Depth is created through the illustration murals and color blocks, not drop shadows."

  imagery:

    info: "The visual identity is dominated by large cubist/isometric illustration murals using a fixed accent palette (#1e2554 dark violet, #2c2a6c iris, #ff5d43 coral, #38dede teal, #9164fa amethyst, #f8b3b8 blush) set against the cream canvas. Murals are full-bleed, flat-vector, geometric, with simplified human figures interacting with oversized abstract objects (monitors, books, shapes). They function as section dividers and brand punctuation — not explanatory content. Feature cards pair small square mural crops with text. Photography is absent; no product screenshots, no real-world images. The illustration is the brand's voice, so the UI deliberately stays quiet around it. Iconography is minimal and uses the same geometric language at small sizes."

  layout:

    info: "Max-width ~1200px centered content on a full-bleed cream canvas. The hero is a centered or left-aligned text block with paired CTAs, followed by a full-bleed illustration mural band that bleeds edge-to-edge. Below, the page uses a consistent vertical rhythm of 60px section gaps with alternating cream and white card strips. Feature blocks are horizontal 2-column (image-left, text-right at roughly 1:1.5 proportions), stacked vertically. Social-proof logo strip and stat panel break the rhythm with a dark inverse surface. Navigation is a flat top bar, not sticky, with right-aligned text links. No sidebar. Grid is used sparingly — most composition is text-plus-illustration or simple stacking."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #404040"
    - "background: #f7f7f1"
    - "border: #404040 (hairline), #dcdcd4 (subtle)"
    - "accent: #00affa"
    - "primary action: #00affa (outlined action border)"

    info: "Example Component Prompts:"
    - "Build a hero section: cream #f7f7f1 background, centered headline 'Your headline here' in DropmarkRealHead weight 500 at 60px in #404040, subhead in DropmarkRealText 400 at 17px in #404040. Below it, place a filled #00affa button ('Get started') with white text, 3px radius, 12px 24px padding, DropmarkRealText 600 at 16px. Next to it, an outlined #00affa secondary button ('Learn more') with 2px #00affa border, #00affa text, 3px radius, 10px 22px padding."

    - "Build a feature card: no card chrome, sits on cream. Left column 4:3 image tile (cubist illustration using #1e2554, #38dede, #ff5d43), right column text block. Heading in DropmarkRealText 600 at 20px #404040, body in DropmarkRealText 400 at 16px #404040, CTA link 'Find out more' in #00affa. 30px vertical gap from next block."

    - "Build a statistics panel: #404040 background, white text, padding 40px. Big number in DropmarkRealHead 500 at 40px white, label in DropmarkRealText 400 at 15px white at 80% opacity."

    - "Build the top nav: cream #f7f7f1 background, 1px bottom border in #dcdcd4. Left: cyan #00affa drop icon + 'Dropmark' wordmark in DropmarkRealText 600. Right: text links spaced 30px apart in DropmarkRealText 400 at 15px #404040, ending with a dark filled #404040 'Sign up' button, white text, 3px radius, 8px 16px padding."

    - "Build a full-bleed illustration mural band: 0px page margin, 300–400px tall, filled with geometric shapes in #1e2554, #2c2a6c, #ff5d43, #38dede, #9164fa, #f8b3b8 on #f7f7f1 ground. No text, no UI chrome — pure brand art acting as section divider."

  illustration_system:

    info: "The illustration palette is a locked six-color set used only inside mural compositions and feature image tiles: #1e2554 (Midnight Violet — dominant dark), #2c2a6c (Deep Iris — mid dark), #ff5d43 (Coral Burst — warm accent), #38dede (Aqua Glow — cool accent), #9164fa (Vivid Amethyst — bright accent), #f8b3b8 (Blush — soft accent). Style is flat-vector cubist/isometric with simplified human figures and oversized geometric objects. No gradients, no textures, no outlines on the shapes themselves. Murals should always sit on the cream #f7f7f1 canvas and bleed edge-to-edge. Never extract these colors for UI use — they exist to make the murals feel vivid against an otherwise quiet interface."

  similar_brands:

    - "**Notion** — Same nearly-monochrome UI with a single accent color and flat editorial typography, though Notion uses black-and-white almost exclusively"
    - "**Milanote** — Direct visual sibling — warm cream canvas, flat geometric illustration as brand voice, and a quiet UI that lets the art carry personality"
    - "**Pitch** — Calm light-theme interface with a single vivid accent for actions and generous spacing between sections"
    - "**Are.na** — Editorial cream-paper aesthetic, minimal UI chrome, and imagery-first page compositions with quiet typography"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cyan-signal: #00affa;
          --color-cream-paper: #f7f7f1;
          --color-pure-white: #ffffff;
          --color-stone-gray: #dcdcd4;
          --color-graphite: #404040;
          --color-mid-ink: #333333;
          --color-charcoal: #111111;
          --color-pewter: #7f7f7f;
          --color-ink-black: #000000;
          --color-midnight-violet: #1e2554;
          --color-deep-iris: #2c2a6c;
          --color-coral-burst: #ff5d43;
          --color-aqua-glow: #38dede;
          --color-vivid-amethyst: #9164fa;
          --color-blush: #f8b3b8;
        
          /* Typography — Font Families */
          --font-dropmarkrealhead: 'DropmarkRealHead', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dropmarkrealtext: 'DropmarkRealText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --text-display: 60px;
          --leading-display: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-35: 35px;
          --spacing-40: 40px;
          --spacing-58: 58px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-240: 240px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 60px;
          --card-padding: 30px;
          --element-gap: 10-20px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-full: 60px;
        
          /* Named Radii */
          --radius-nav: 3px;
          --radius-cards: 0px;
          --radius-pills: 60px;
          --radius-buttons: 3px;
        
          /* Shadows */
          --shadow-subtle: rgb(220, 220, 210) 0px 0px 0px 2px inset;
        
          /* Surfaces */
          --surface-cream-paper: #f7f7f1;
          --surface-pure-white: #ffffff;
          --surface-stone-gray: #dcdcd4;
          --surface-graphite: #404040;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cyan-signal: #00affa;
          --color-cream-paper: #f7f7f1;
          --color-pure-white: #ffffff;
          --color-stone-gray: #dcdcd4;
          --color-graphite: #404040;
          --color-mid-ink: #333333;
          --color-charcoal: #111111;
          --color-pewter: #7f7f7f;
          --color-ink-black: #000000;
          --color-midnight-violet: #1e2554;
          --color-deep-iris: #2c2a6c;
          --color-coral-burst: #ff5d43;
          --color-aqua-glow: #38dede;
          --color-vivid-amethyst: #9164fa;
          --color-blush: #f8b3b8;
        
          /* Typography */
          --font-dropmarkrealhead: 'DropmarkRealHead', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dropmarkrealtext: 'DropmarkRealText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --text-display: 60px;
          --leading-display: 1.2;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-35: 35px;
          --spacing-40: 40px;
          --spacing-58: 58px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-240: 240px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-full: 60px;
        
          /* Shadows */
          --shadow-subtle: rgb(220, 220, 210) 0px 0px 0px 2px inset;
        }