[
  {
    "name": "Social media post",
    "type": "social",
    "family": "Social media post",
    "cssBrief": {
      "template": {
        "id": "bite_recipe_post_01",
        "name": "Budget Recipe Feature",
        "purpose": "Present a budget-friendly recipe using a dominant food image, clear pricing information, a recipe title and a compact ingredient summary.",
        "aspect_ratio": "4:5",
        "reference_size": {
          "width": 1080,
          "height": 1350,
          "unit": "px"
        }
      },
      "content_structure": {
        "required_elements": [
          "hero_image",
          "top_pill",
          "serving_label",
          "recipe_title",
          "recipe_information_card",
          "brand_mark"
        ],
        "optional_elements": [
          "recipe_description",
          "ingredient_list",
          "price_per_serve",
          "serving_count"
        ],
        "element_order": [
          "background",
          "hero_image",
          "top_pill",
          "serving_label",
          "recipe_title",
          "recipe_information_card",
          "brand_mark"
        ]
      },
      "canvas": {
        "background_token": "colour.background.default",
        "background_colour_fallback": "#FFFFFF"
      },
      "safe_area": {
        "outer_margin": {
          "top": 80,
          "right": 90,
          "bottom": 80,
          "left": 90
        },
        "content_inset": {
          "top": 140,
          "right": 140,
          "bottom": 140,
          "left": 140
        },
        "rules": [
          "All text and required brand elements must remain inside the outer safe area.",
          "Primary content should align to the 140px content inset.",
          "Background imagery may extend beyond the content inset but must remain within the canvas."
        ]
      },
      "hero_image": {
        "required": true,
        "position": {
          "anchor": "top",
          "horizontal_alignment": "centre"
        },
        "dimensions": {
          "width": 900,
          "height": 730,
          "unit": "px"
        },
        "corner_radius": {
          "bottom_left": 40,
          "bottom_right": 40,
          "top_left": 0,
          "top_right": 0
        },
        "image_behaviour": {
          "fit": "cover",
          "focal_point": "food",
          "allow_crop": true,
          "allow_reposition": true
        },
        "rules": [
          "The image must feature the completed meal as the primary focal point.",
          "Use bright, appetising and naturally lit food photography.",
          "Keep sufficient visual space for the top pill.",
          "Do not place the pill over the most important part of the meal.",
          "Avoid overly busy imagery behind the pill.",
          "The image may be repositioned or cropped to preserve food visibility and pill readability.",
          "Do not distort or stretch the image.",
          "The food should remain recognisable at mobile-feed size."
        ]
      },
      "top_pill": {
        "required": true,
        "purpose": "Communicate the principal price promise or campaign message.",
        "position": {
          "anchor": "top_left",
          "align_to": "content_inset",
          "offset_top": 56
        },
        "content": {
          "example": "DINNER FOR UNDER $12",
          "max_lines": 1,
          "preferred_max_characters": 28,
          "case": "uppercase"
        },
        "container": {
          "display": "pill",
          "width": "fit_content",
          "min_height": 54,
          "max_width": 600,
          "horizontal_padding": 26,
          "vertical_padding": 12,
          "border_radius": 999
        },
        "typography": {
          "token": "typography.label.large",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 28,
            "minimum": 22
          },
          "line_height": 1,
          "letter_spacing": 1.5
        },
        "colour": {
          "background_token": "colour.secondary.pink",
          "text_token": "colour.primary.red"
        },
        "rules": [
          "The pill must remain on one line.",
          "The pill must be positioned over the hero image.",
          "The pill should communicate a concrete benefit such as total cost, price per serve or serving count.",
          "Do not use vague promotional copy inside the pill.",
          "Maintain clear contrast between the pill and the image.",
          "Do not stretch the pill across the full image width."
        ]
      },
      "content_area": {
        "position": {
          "relationship": "below_hero_image",
          "horizontal_alignment": "left"
        },
        "padding": {
          "top": 48,
          "right": 140,
          "bottom": 80,
          "left": 140
        },
        "rules": [
          "All textual content must share the same left alignment.",
          "Preserve a clear visual break between the image and the recipe information.",
          "Do not centre-align the recipe title or supporting copy."
        ]
      },
      "serving_label": {
        "required": true,
        "purpose": "Provide a concise serving and cost summary.",
        "position": {
          "relationship": "first_element_below_image",
          "horizontal_alignment": "left"
        },
        "content": {
          "example": "SERVES 4 · UNDER $3 PER SERVE",
          "max_lines": 1,
          "preferred_max_characters": 38,
          "case": "uppercase"
        },
        "typography": {
          "token": "typography.label.large",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 27,
            "minimum": 22
          },
          "line_height": 1.15,
          "letter_spacing": 0
        },
        "colour": {
          "text_token": "colour.primary.red"
        },
        "spacing": {
          "margin_bottom": 24
        },
        "rules": [
          "Use verified serving and pricing information.",
          "Keep the label concise and factual.",
          "Do not add promotional adjectives.",
          "The serving label must remain visually secondary to the recipe title."
        ]
      },
      "recipe_title": {
        "required": true,
        "position": {
          "relationship": "below_serving_label",
          "horizontal_alignment": "left"
        },
        "content": {
          "example": "Creamy Chicken Pasta",
          "preferred_lines": {
            "minimum": 1,
            "maximum": 2
          },
          "preferred_word_count": {
            "minimum": 2,
            "maximum": 5
          },
          "max_characters": 42
        },
        "container": {
          "max_width": 720
        },
        "typography": {
          "token": "typography.display.primary",
          "font_family": "Cambria",
          "font_weight": 700,
          "font_size": {
            "preferred": 70,
            "minimum": 56
          },
          "line_height": 0.94,
          "letter_spacing": -1,
          "alignment": "left"
        },
        "colour": {
          "text_token": "colour.text.primary"
        },
        "spacing": {
          "margin_bottom": 36
        },
        "rules": [
          "The recipe title is the dominant text element below the image.",
          "Preserve natural phrase groups when breaking lines.",
          "Do not exceed two lines.",
          "Attempt alternative line breaks before reducing the font size.",
          "Do not use all caps.",
          "Do not add unnecessary descriptors to make the title sound more sophisticated."
        ]
      },
      "recipe_information_card": {
        "required": true,
        "position": {
          "relationship": "below_recipe_title",
          "horizontal_alignment": "left"
        },
        "dimensions": {
          "width": 660,
          "min_height": 290,
          "max_height": 390
        },
        "padding": {
          "top": 42,
          "right": 46,
          "bottom": 42,
          "left": 46
        },
        "corner_radius": {
          "top_left": 38,
          "top_right": 38,
          "bottom_left": 0,
          "bottom_right": 0
        },
        "colour": {
          "background_token": "colour.secondary.light_green",
          "text_token": "colour.text.primary"
        },
        "content_structure": [
          "recipe_description",
          "ingredient_heading",
          "ingredient_list"
        ],
        "rules": [
          "The card should contain only essential recipe information.",
          "Do not turn the card into a full recipe method.",
          "Keep the card visually lighter than the recipe title.",
          "Use consistent internal spacing between description, heading and ingredients.",
          "The card may extend beyond the bottom crop when used as part of a carousel sequence.",
          "Do not reduce internal padding to fit excessive content."
        ]
      },
      "recipe_description": {
        "required": false,
        "content": {
          "example": "Comforting, filling and budget-friendly.",
          "preferred_lines": {
            "minimum": 1,
            "maximum": 2
          },
          "preferred_word_count": {
            "minimum": 3,
            "maximum": 9
          },
          "max_characters": 62
        },
        "typography": {
          "token": "typography.heading.small",
          "font_family": "Roboto",
          "font_weight": 700,
          "font_size": {
            "preferred": 36,
            "minimum": 30
          },
          "line_height": 1.05
        },
        "spacing": {
          "margin_bottom": 26
        },
        "rules": [
          "Use a short, conversational description.",
          "The description should communicate value, flavour or practicality.",
          "Do not repeat the price information already shown in the pill or serving label.",
          "Avoid exaggerated claims."
        ]
      },
      "ingredient_heading": {
        "required": true,
        "content": {
          "default": "You’ll need:"
        },
        "typography": {
          "token": "typography.heading.xsmall",
          "font_family": "Roboto",
          "font_weight": 700,
          "font_size": {
            "preferred": 28,
            "minimum": 24
          },
          "line_height": 1.1
        },
        "spacing": {
          "margin_bottom": 8
        }
      },
      "ingredient_list": {
        "required": true,
        "content": {
          "preferred_item_count": {
            "minimum": 4,
            "maximum": 8
          },
          "max_item_characters": 22
        },
        "layout": {
          "columns": {
            "preferred": 2,
            "minimum": 1,
            "maximum": 2
          },
          "column_gap": 42,
          "row_gap": 4
        },
        "typography": {
          "token": "typography.body.large",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 27,
            "minimum": 23
          },
          "line_height": 1.18
        },
        "list_style": {
          "marker": "dash",
          "marker_character": "–"
        },
        "rules": [
          "List only the primary ingredients.",
          "Do not include preparation instructions.",
          "Do not include quantities unless they are essential to understanding the recipe.",
          "Use two columns when there are more than four ingredients.",
          "Do not reduce text below the minimum size to accommodate too many ingredients.",
          "If the list exceeds eight items, move the complete recipe to another slide or the app."
        ]
      },
      "brand_mark": {
        "required": true,
        "position": {
          "anchor": "bottom_right",
          "align_to": "outer_safe_area"
        },
        "size": {
          "preferred": 140,
          "minimum": 110,
          "maximum": 150,
          "unit": "px"
        },
        "clear_space": {
          "minimum": 64,
          "unit": "px"
        },
        "colour": {
          "asset_token": "assets.brand.character_mark.primary"
        },
        "rules": [
          "Maintain the original aspect ratio.",
          "Do not rotate, stretch or redraw the mark.",
          "Do not place the brand mark inside the recipe information card.",
          "Keep a minimum clear space of 64px around the mark.",
          "The mark must remain secondary to the recipe title.",
          "Use only approved colour variants."
        ]
      },
      "spacing_system": {
        "base_unit": 8,
        "approved_spacing_values": [
          8,
          16,
          24,
          32,
          40,
          48,
          64,
          80,
          140
        ],
        "key_relationships": {
          "image_to_content": 48,
          "serving_label_to_title": 24,
          "title_to_information_card": 36,
          "brand_mark_clear_space": 64,
          "primary_content_inset": 140
        },
        "rules": [
          "Use approved spacing values only.",
          "Preserve the relationship between content elements before adjusting individual measurements.",
          "Do not use arbitrary spacing to force content to fit."
        ]
      },
      "colour_usage": {
        "rules": [
          "Use only approved Bite brand colours.",
          "The top pill should use pink with red text.",
          "The serving label should use the primary red.",
          "The recipe title should use the primary dark text colour.",
          "The recipe information card should use the approved pale green.",
          "Avoid introducing additional colours taken from the photograph into the graphic system.",
          "Photography may contain any natural food colours."
        ]
      },
      "content_rules": {
        "voice": [
          "friendly",
          "clear",
          "encouraging",
          "simple",
          "positive"
        ],
        "rules": [
          "Lead with a concrete affordability benefit.",
          "Use everyday language.",
          "Keep the recipe name short and recognisable.",
          "Avoid health claims that cannot be supported.",
          "Avoid overly formal or technical nutritional language.",
          "Do not describe inexpensive food as cheap.",
          "Use currency and pricing appropriate to the target market."
        ]
      },
      "layout_behaviour": {
        "priority_order": [
          "food_visibility",
          "pricing_clarity",
          "recipe_title_readability",
          "content_hierarchy",
          "brand_consistency",
          "composition_balance"
        ],
        "adaptive_rules": [
          "The image crop may change to keep the meal visible and protect the top pill.",
          "The recipe title may use one or two lines.",
          "The information card height may grow within the permitted range.",
          "The ingredient list may change from two columns to one when necessary.",
          "Remove the optional recipe description before reducing required text below its minimum size.",
          "The brand mark remains anchored to the bottom-right safe area.",
          "Never overlap the brand mark with the information card.",
          "Never sacrifice readability to reproduce the exact reference layout."
        ]
      },
      "validation": {
        "reject_if": [
          "top_pill_wraps_to_multiple_lines",
          "top_pill_has_insufficient_contrast",
          "hero_image_does_not_show_the_finished_meal",
          "food_focal_point_is_obscured",
          "serving_label_exceeds_one_line",
          "recipe_title_exceeds_two_lines",
          "recipe_title_is_smaller_than_minimum_size",
          "ingredient_list_contains_more_than_8_items",
          "ingredient_text_is_smaller_than_minimum_size",
          "information_card_overlaps_brand_mark",
          "brand_mark_clear_space_is_less_than_64px",
          "required_content_exits_safe_area",
          "unapproved_fonts_are_used",
          "unapproved_colours_are_used",
          "visual_hierarchy_is_unclear",
          "pricing_information_is_missing",
          "pricing_information_is_unverified"
        ]
      }
    },
    "notes": "Human-approved visual reference paired with rules JSON."
  }
]

[
  {
    "name": "Social media post",
    "type": "social",
    "family": "Social media post",
    "rules": {
      "template": {
        "id": "bite_recipe_post_01",
        "name": "Budget Recipe Feature",
        "purpose": "Present a budget-friendly recipe using a dominant food image, clear pricing information, a recipe title and a compact ingredient summary.",
        "aspect_ratio": "4:5",
        "reference_size": {
          "width": 1080,
          "height": 1350,
          "unit": "px"
        }
      },
      "content_structure": {
        "required_elements": [
          "hero_image",
          "top_pill",
          "serving_label",
          "recipe_title",
          "recipe_information_card",
          "brand_mark"
        ],
        "optional_elements": [
          "recipe_description",
          "ingredient_list",
          "price_per_serve",
          "serving_count"
        ],
        "element_order": [
          "background",
          "hero_image",
          "top_pill",
          "serving_label",
          "recipe_title",
          "recipe_information_card",
          "brand_mark"
        ]
      },
      "canvas": {
        "background_token": "colour.background.default",
        "background_colour_fallback": "#FFFFFF"
      },
      "safe_area": {
        "outer_margin": {
          "top": 80,
          "right": 90,
          "bottom": 80,
          "left": 90
        },
        "content_inset": {
          "top": 140,
          "right": 140,
          "bottom": 140,
          "left": 140
        },
        "rules": [
          "All text and required brand elements must remain inside the outer safe area.",
          "Primary content should align to the 140px content inset.",
          "Background imagery may extend beyond the content inset but must remain within the canvas."
        ]
      },
      "hero_image": {
        "required": true,
        "position": {
          "anchor": "top",
          "horizontal_alignment": "centre"
        },
        "dimensions": {
          "width": 900,
          "height": 730,
          "unit": "px"
        },
        "corner_radius": {
          "bottom_left": 40,
          "bottom_right": 40,
          "top_left": 0,
          "top_right": 0
        },
        "image_behaviour": {
          "fit": "cover",
          "focal_point": "food",
          "allow_crop": true,
          "allow_reposition": true
        },
        "rules": [
          "The image must feature the completed meal as the primary focal point.",
          "Use bright, appetising and naturally lit food photography.",
          "Keep sufficient visual space for the top pill.",
          "Do not place the pill over the most important part of the meal.",
          "Avoid overly busy imagery behind the pill.",
          "The image may be repositioned or cropped to preserve food visibility and pill readability.",
          "Do not distort or stretch the image.",
          "The food should remain recognisable at mobile-feed size."
        ]
      },
      "top_pill": {
        "required": true,
        "purpose": "Communicate the principal price promise or campaign message.",
        "position": {
          "anchor": "top_left",
          "align_to": "content_inset",
          "offset_top": 56
        },
        "content": {
          "example": "DINNER FOR UNDER $12",
          "max_lines": 1,
          "preferred_max_characters": 28,
          "case": "uppercase"
        },
        "container": {
          "display": "pill",
          "width": "fit_content",
          "min_height": 54,
          "max_width": 600,
          "horizontal_padding": 26,
          "vertical_padding": 12,
          "border_radius": 999
        },
        "typography": {
          "token": "typography.label.large",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 28,
            "minimum": 22
          },
          "line_height": 1,
          "letter_spacing": 1.5
        },
        "colour": {
          "background_token": "colour.secondary.pink",
          "text_token": "colour.primary.red"
        },
        "rules": [
          "The pill must remain on one line.",
          "The pill must be positioned over the hero image.",
          "The pill should communicate a concrete benefit such as total cost, price per serve or serving count.",
          "Do not use vague promotional copy inside the pill.",
          "Maintain clear contrast between the pill and the image.",
          "Do not stretch the pill across the full image width."
        ]
      },
      "content_area": {
        "position": {
          "relationship": "below_hero_image",
          "horizontal_alignment": "left"
        },
        "padding": {
          "top": 48,
          "right": 140,
          "bottom": 80,
          "left": 140
        },
        "rules": [
          "All textual content must share the same left alignment.",
          "Preserve a clear visual break between the image and the recipe information.",
          "Do not centre-align the recipe title or supporting copy."
        ]
      },
      "serving_label": {
        "required": true,
        "purpose": "Provide a concise serving and cost summary.",
        "position": {
          "relationship": "first_element_below_image",
          "horizontal_alignment": "left"
        },
        "content": {
          "example": "SERVES 4 · UNDER $3 PER SERVE",
          "max_lines": 1,
          "preferred_max_characters": 38,
          "case": "uppercase"
        },
        "typography": {
          "token": "typography.label.large",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 27,
            "minimum": 22
          },
          "line_height": 1.15,
          "letter_spacing": 0
        },
        "colour": {
          "text_token": "colour.primary.red"
        },
        "spacing": {
          "margin_bottom": 24
        },
        "rules": [
          "Use verified serving and pricing information.",
          "Keep the label concise and factual.",
          "Do not add promotional adjectives.",
          "The serving label must remain visually secondary to the recipe title."
        ]
      },
      "recipe_title": {
        "required": true,
        "position": {
          "relationship": "below_serving_label",
          "horizontal_alignment": "left"
        },
        "content": {
          "example": "Creamy Chicken Pasta",
          "preferred_lines": {
            "minimum": 1,
            "maximum": 2
          },
          "preferred_word_count": {
            "minimum": 2,
            "maximum": 5
          },
          "max_characters": 42
        },
        "container": {
          "max_width": 720
        },
        "typography": {
          "token": "typography.display.primary",
          "font_family": "Cambria",
          "font_weight": 700,
          "font_size": {
            "preferred": 70,
            "minimum": 56
          },
          "line_height": 0.94,
          "letter_spacing": -1,
          "alignment": "left"
        },
        "colour": {
          "text_token": "colour.text.primary"
        },
        "spacing": {
          "margin_bottom": 36
        },
        "rules": [
          "The recipe title is the dominant text element below the image.",
          "Preserve natural phrase groups when breaking lines.",
          "Do not exceed two lines.",
          "Attempt alternative line breaks before reducing the font size.",
          "Do not use all caps.",
          "Do not add unnecessary descriptors to make the title sound more sophisticated."
        ]
      },
      "recipe_information_card": {
        "required": true,
        "position": {
          "relationship": "below_recipe_title",
          "horizontal_alignment": "left"
        },
        "dimensions": {
          "width": 660,
          "min_height": 290,
          "max_height": 390
        },
        "padding": {
          "top": 42,
          "right": 46,
          "bottom": 42,
          "left": 46
        },
        "corner_radius": {
          "top_left": 38,
          "top_right": 38,
          "bottom_left": 0,
          "bottom_right": 0
        },
        "colour": {
          "background_token": "colour.secondary.light_green",
          "text_token": "colour.text.primary"
        },
        "content_structure": [
          "recipe_description",
          "ingredient_heading",
          "ingredient_list"
        ],
        "rules": [
          "The card should contain only essential recipe information.",
          "Do not turn the card into a full recipe method.",
          "Keep the card visually lighter than the recipe title.",
          "Use consistent internal spacing between description, heading and ingredients.",
          "The card may extend beyond the bottom crop when used as part of a carousel sequence.",
          "Do not reduce internal padding to fit excessive content."
        ]
      },
      "recipe_description": {
        "required": false,
        "content": {
          "example": "Comforting, filling and budget-friendly.",
          "preferred_lines": {
            "minimum": 1,
            "maximum": 2
          },
          "preferred_word_count": {
            "minimum": 3,
            "maximum": 9
          },
          "max_characters": 62
        },
        "typography": {
          "token": "typography.heading.small",
          "font_family": "Roboto",
          "font_weight": 700,
          "font_size": {
            "preferred": 36,
            "minimum": 30
          },
          "line_height": 1.05
        },
        "spacing": {
          "margin_bottom": 26
        },
        "rules": [
          "Use a short, conversational description.",
          "The description should communicate value, flavour or practicality.",
          "Do not repeat the price information already shown in the pill or serving label.",
          "Avoid exaggerated claims."
        ]
      },
      "ingredient_heading": {
        "required": true,
        "content": {
          "default": "You’ll need:"
        },
        "typography": {
          "token": "typography.heading.xsmall",
          "font_family": "Roboto",
          "font_weight": 700,
          "font_size": {
            "preferred": 28,
            "minimum": 24
          },
          "line_height": 1.1
        },
        "spacing": {
          "margin_bottom": 8
        }
      },
      "ingredient_list": {
        "required": true,
        "content": {
          "preferred_item_count": {
            "minimum": 4,
            "maximum": 8
          },
          "max_item_characters": 22
        },
        "layout": {
          "columns": {
            "preferred": 2,
            "minimum": 1,
            "maximum": 2
          },
          "column_gap": 42,
          "row_gap": 4
        },
        "typography": {
          "token": "typography.body.large",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 27,
            "minimum": 23
          },
          "line_height": 1.18
        },
        "list_style": {
          "marker": "dash",
          "marker_character": "–"
        },
        "rules": [
          "List only the primary ingredients.",
          "Do not include preparation instructions.",
          "Do not include quantities unless they are essential to understanding the recipe.",
          "Use two columns when there are more than four ingredients.",
          "Do not reduce text below the minimum size to accommodate too many ingredients.",
          "If the list exceeds eight items, move the complete recipe to another slide or the app."
        ]
      },
      "brand_mark": {
        "required": true,
        "position": {
          "anchor": "bottom_right",
          "align_to": "outer_safe_area"
        },
        "size": {
          "preferred": 140,
          "minimum": 110,
          "maximum": 150,
          "unit": "px"
        },
        "clear_space": {
          "minimum": 64,
          "unit": "px"
        },
        "colour": {
          "asset_token": "assets.brand.character_mark.primary"
        },
        "rules": [
          "Maintain the original aspect ratio.",
          "Do not rotate, stretch or redraw the mark.",
          "Do not place the brand mark inside the recipe information card.",
          "Keep a minimum clear space of 64px around the mark.",
          "The mark must remain secondary to the recipe title.",
          "Use only approved colour variants."
        ]
      },
      "spacing_system": {
        "base_unit": 8,
        "approved_spacing_values": [
          8,
          16,
          24,
          32,
          40,
          48,
          64,
          80,
          140
        ],
        "key_relationships": {
          "image_to_content": 48,
          "serving_label_to_title": 24,
          "title_to_information_card": 36,
          "brand_mark_clear_space": 64,
          "primary_content_inset": 140
        },
        "rules": [
          "Use approved spacing values only.",
          "Preserve the relationship between content elements before adjusting individual measurements.",
          "Do not use arbitrary spacing to force content to fit."
        ]
      },
      "colour_usage": {
        "rules": [
          "Use only approved Bite brand colours.",
          "The top pill should use pink with red text.",
          "The serving label should use the primary red.",
          "The recipe title should use the primary dark text colour.",
          "The recipe information card should use the approved pale green.",
          "Avoid introducing additional colours taken from the photograph into the graphic system.",
          "Photography may contain any natural food colours."
        ]
      },
      "content_rules": {
        "voice": [
          "friendly",
          "clear",
          "encouraging",
          "simple",
          "positive"
        ],
        "rules": [
          "Lead with a concrete affordability benefit.",
          "Use everyday language.",
          "Keep the recipe name short and recognisable.",
          "Avoid health claims that cannot be supported.",
          "Avoid overly formal or technical nutritional language.",
          "Do not describe inexpensive food as cheap.",
          "Use currency and pricing appropriate to the target market."
        ]
      },
      "layout_behaviour": {
        "priority_order": [
          "food_visibility",
          "pricing_clarity",
          "recipe_title_readability",
          "content_hierarchy",
          "brand_consistency",
          "composition_balance"
        ],
        "adaptive_rules": [
          "The image crop may change to keep the meal visible and protect the top pill.",
          "The recipe title may use one or two lines.",
          "The information card height may grow within the permitted range.",
          "The ingredient list may change from two columns to one when necessary.",
          "Remove the optional recipe description before reducing required text below its minimum size.",
          "The brand mark remains anchored to the bottom-right safe area.",
          "Never overlap the brand mark with the information card.",
          "Never sacrifice readability to reproduce the exact reference layout."
        ]
      },
      "validation": {
        "reject_if": [
          "top_pill_wraps_to_multiple_lines",
          "top_pill_has_insufficient_contrast",
          "hero_image_does_not_show_the_finished_meal",
          "food_focal_point_is_obscured",
          "serving_label_exceeds_one_line",
          "recipe_title_exceeds_two_lines",
          "recipe_title_is_smaller_than_minimum_size",
          "ingredient_list_contains_more_than_8_items",
          "ingredient_text_is_smaller_than_minimum_size",
          "information_card_overlaps_brand_mark",
          "brand_mark_clear_space_is_less_than_64px",
          "required_content_exits_safe_area",
          "unapproved_fonts_are_used",
          "unapproved_colours_are_used",
          "visual_hierarchy_is_unclear",
          "pricing_information_is_missing",
          "pricing_information_is_unverified"
        ]
      }
    }
  }
]

No custom code supplied.

[
  {
    "name": "Social media post",
    "type": "social",
    "family": "Social media post",
    "cssBrief": {
      "template": {
        "id": "bite_app_promotion_post_01",
        "name": "App Promotion Feature",
        "purpose": "Promote the Bite app by combining product credibility, a dominant app interface preview, contextual imagery and a persistent download CTA.",
        "aspect_ratio": "4:5",
        "reference_size": {
          "width": 1080,
          "height": 1350,
          "unit": "px"
        }
      },
      "content_structure": {
        "required_elements": [
          "background",
          "app_information_panel",
          "app_icon",
          "app_name",
          "app_tagline",
          "rating_display",
          "app_metadata",
          "product_preview",
          "bottom_cta_bar",
          "cta_message",
          "cta_button"
        ],
        "optional_elements": [
          "rating_count",
          "age_rating",
          "app_age",
          "contextual_background_image"
        ],
        "element_order": [
          "background",
          "contextual_background_image",
          "app_information_panel",
          "app_icon",
          "app_name",
          "app_tagline",
          "rating_display",
          "app_metadata",
          "product_preview",
          "bottom_cta_bar",
          "cta_message",
          "cta_button"
        ]
      },
      "canvas": {
        "background_token": "colour.background.default",
        "background_colour_fallback": "#FFFFFF",
        "rules": [
          "The canvas must preserve the 4:5 aspect ratio.",
          "The composition must read as a product advertisement rather than a generic social media post."
        ]
      },
      "safe_area": {
        "outer_margin": {
          "top": 80,
          "right": 90,
          "bottom": 80,
          "left": 90
        },
        "content_inset": {
          "top": 140,
          "right": 140,
          "bottom": 140,
          "left": 140
        },
        "rules": [
          "Required content must remain inside the 90px outer safe area.",
          "Primary aligned content should use the 140px content inset.",
          "The bottom CTA bar may extend to all canvas edges.",
          "Contextual imagery may extend beyond all safe areas."
        ]
      },
      "background": {
        "type": "image_or_brand_colour",
        "preferred": "contextual_image",
        "image_behaviour": {
          "fit": "cover",
          "allow_crop": true,
          "allow_reposition": true
        },
        "rules": [
          "Prefer imagery related to food, cooking, grocery shopping or meal preparation.",
          "The background image should provide context without competing with the app preview.",
          "The main subject of the image may remain partially visible around the product preview.",
          "Do not require the entire image to be visible.",
          "Avoid visually noisy imagery behind the app information panel.",
          "Do not stretch or distort the image."
        ]
      },
      "app_information_panel": {
        "required": true,
        "position": {
          "anchor": "top_left",
          "x": 42,
          "y": 36
        },
        "dimensions": {
          "width": 470,
          "height": 300,
          "unit": "px"
        },
        "padding": {
          "top": 48,
          "right": 48,
          "bottom": 48,
          "left": 48
        },
        "corner_radius": {
          "top_left": 40,
          "top_right": 40,
          "bottom_left": 0,
          "bottom_right": 0
        },
        "colour": {
          "background_token": "colour.secondary.light_green"
        },
        "rules": [
          "The panel must remain visually distinct from the contextual background.",
          "The panel acts as the credibility and product-information area.",
          "Do not add decorative elements inside the panel.",
          "Do not reduce internal spacing to accommodate excessive content."
        ]
      },
      "app_icon": {
        "required": true,
        "position": {
          "anchor": "top_left",
          "align_to": "outer_safe_area"
        },
        "size": {
          "width": 116,
          "height": 116,
          "unit": "px"
        },
        "corner_radius": 14,
        "asset_token": "assets.app.icon.primary",
        "rules": [
          "Use only the approved Bite app icon.",
          "Maintain the original aspect ratio.",
          "Do not recolour, rotate, stretch or redraw the icon.",
          "The icon must remain the first visual element inside the information hierarchy."
        ]
      },
      "app_identity": {
        "position": {
          "relationship": "right_of_app_icon",
          "gap": 20
        },
        "app_name": {
          "required": true,
          "content": {
            "default": "Bite",
            "max_lines": 1
          },
          "typography": {
            "token": "typography.heading.small",
            "font_family": "Roboto",
            "font_weight": 500,
            "font_size": {
              "preferred": 30,
              "minimum": 26
            },
            "line_height": 1
          },
          "colour": {
            "text_token": "colour.text.primary"
          }
        },
        "app_tagline": {
          "required": true,
          "content": {
            "default": "Recipes for every budget",
            "max_lines": 2,
            "preferred_max_characters": 32
          },
          "typography": {
            "token": "typography.body.medium",
            "font_family": "Roboto",
            "font_weight": 400,
            "font_size": {
              "preferred": 24,
              "minimum": 20
            },
            "line_height": 1.05
          },
          "colour": {
            "text_token": "colour.text.primary"
          }
        }
      },
      "rating_display": {
        "required": true,
        "position": {
          "relationship": "below_app_tagline",
          "margin_top": 8
        },
        "content": {
          "rating_scale": 5,
          "example_rating": 4.4,
          "display_style": "stars",
          "allow_partial_star": true
        },
        "colour": {
          "active_star_token": "colour.primary.red",
          "inactive_star_token": "colour.primary.red"
        },
        "rules": [
          "The rating shown must match verified product data.",
          "Do not fabricate ratings or review counts.",
          "Use a maximum of five stars.",
          "Keep the rating visually secondary to the app name."
        ]
      },
      "app_metadata": {
        "required": true,
        "position": {
          "relationship": "below_app_identity_row",
          "margin_top": 30
        },
        "layout": {
          "display": "three_columns",
          "column_count": 3,
          "horizontal_alignment": "space_between"
        },
        "items": {
          "rating": {
            "value_example": "4.4",
            "label_example": "3500 Reviews"
          },
          "app_age": {
            "value_example": "3+",
            "label_example": "Years"
          },
          "classification": {
            "value_example": "17+",
            "label_example": "Classification"
          }
        },
        "value_typography": {
          "token": "typography.heading.xsmall",
          "font_family": "Roboto",
          "font_weight": 500,
          "font_size": {
            "preferred": 28,
            "minimum": 24
          },
          "line_height": 1
        },
        "label_typography": {
          "token": "typography.body.small",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 20,
            "minimum": 17
          },
          "line_height": 1.05
        },
        "rules": [
          "Use a maximum of three metadata items.",
          "Each item must contain one primary value and one short supporting label.",
          "All displayed metadata must use verified product information.",
          "Do not use invented ratings, review counts, age classifications or app history.",
          "Maintain equal visual spacing between columns."
        ]
      },
      "product_preview": {
        "required": true,
        "purpose": "Show the Bite product interface as the dominant element of the composition.",
        "position": {
          "anchor": "bottom",
          "horizontal_alignment": "centre",
          "top_offset": 315,
          "bottom_relationship": "behind_cta_bar"
        },
        "dimensions": {
          "width": 900,
          "height": 970,
          "unit": "px"
        },
        "corner_radius": {
          "top_left": 40,
          "top_right": 40,
          "bottom_left": 0,
          "bottom_right": 0
        },
        "content": {
          "type": "app_screenshot_or_product_mockup",
          "preferred_screen": "core_product_experience"
        },
        "image_behaviour": {
          "fit": "cover",
          "allow_crop": true,
          "allow_reposition": true,
          "preserve_aspect_ratio": true
        },
        "rules": [
          "The app preview must be the dominant visual element.",
          "Use an approved Bite interface screenshot or product mockup.",
          "Show enough of the interface to communicate the app's purpose.",
          "Prefer screens showing recipe discovery, meal planning, grocery management or another core product capability.",
          "Do not use screens dominated by settings, onboarding forms or empty states.",
          "The preview may extend behind the bottom CTA bar.",
          "Do not distort the interface screenshot.",
          "Do not recreate, alter or invent UI elements inside the screenshot.",
          "Crop peripheral interface content before cropping the primary product feature."
        ]
      },
      "bottom_cta_bar": {
        "required": true,
        "position": {
          "anchor": "bottom",
          "x": 0,
          "y": 1250
        },
        "dimensions": {
          "width": 1080,
          "height": 100,
          "unit": "px"
        },
        "layout": {
          "display": "horizontal",
          "horizontal_alignment": "space_between",
          "vertical_alignment": "centre"
        },
        "padding": {
          "top": 16,
          "right": 58,
          "bottom": 16,
          "left": 44
        },
        "colour": {
          "background_token": "colour.primary.red"
        },
        "rules": [
          "The CTA bar must extend edge to edge.",
          "The CTA bar must remain anchored to the bottom of the canvas.",
          "No content may appear below the CTA bar.",
          "The CTA bar must visually sit above the product preview.",
          "The CTA message and button must remain vertically centred."
        ]
      },
      "cta_message": {
        "required": true,
        "content": {
          "default": "RECIPES FOR EVERY BUDGET",
          "max_lines": 1,
          "preferred_max_characters": 34,
          "case": "uppercase"
        },
        "typography": {
          "token": "typography.heading.xsmall",
          "font_family": "Roboto",
          "font_weight": 700,
          "font_size": {
            "preferred": 34,
            "minimum": 27
          },
          "line_height": 1,
          "letter_spacing": 0
        },
        "colour": {
          "text_token": "colour.text.on_primary"
        },
        "rules": [
          "Keep the message to one line.",
          "Use a short product promise or Bite tagline.",
          "Do not repeat the CTA button text.",
          "The message must remain readable at mobile-feed size."
        ]
      },
      "cta_button": {
        "required": true,
        "content": {
          "default": "GET APP",
          "max_lines": 1,
          "preferred_max_characters": 14,
          "case": "uppercase"
        },
        "dimensions": {
          "min_width": 220,
          "height": 68
        },
        "padding": {
          "horizontal": 34,
          "vertical": 16
        },
        "corner_radius": 4,
        "colour": {
          "background_token": "colour.background.default",
          "text_token": "colour.primary.red"
        },
        "typography": {
          "token": "typography.button.primary",
          "font_family": "Roboto",
          "font_weight": 700,
          "font_size": {
            "preferred": 30,
            "minimum": 25
          },
          "line_height": 1
        },
        "rules": [
          "The CTA must describe one clear action.",
          "Keep the CTA to a maximum of three words.",
          "Do not use vague labels such as Learn More when a more specific action is available.",
          "The button must maintain strong contrast against the CTA bar.",
          "Do not use an outlined button."
        ]
      },
      "spacing_system": {
        "base_unit": 8,
        "approved_spacing_values": [
          8,
          16,
          24,
          32,
          40,
          48,
          64,
          80,
          140
        ],
        "key_relationships": {
          "primary_content_inset": 140,
          "product_preview_internal_inset": 48,
          "app_icon_to_identity": 20,
          "identity_to_metadata": 30,
          "cta_bar_horizontal_padding_left": 44,
          "cta_bar_horizontal_padding_right": 58
        },
        "rules": [
          "Use approved spacing values whenever possible.",
          "The 140px inset defines the primary alignment system.",
          "The 48px spacing unit controls secondary internal spacing.",
          "Do not introduce arbitrary spacing values to force content to fit."
        ]
      },
      "colour_usage": {
        "rules": [
          "Use only approved Bite brand colours for interface framing and graphic elements.",
          "Use light green for the app information panel.",
          "Use primary red for the CTA bar, rating stars and CTA emphasis.",
          "Use white or the approved neutral background colour for the CTA button.",
          "Contextual photography may contain natural colours outside the brand palette.",
          "Do not derive new interface colours from the background image."
        ]
      },
      "content_rules": {
        "voice": [
          "friendly",
          "clear",
          "direct",
          "helpful",
          "accessible"
        ],
        "rules": [
          "Communicate what Bite does before introducing secondary benefits.",
          "Use short product-focused language.",
          "Avoid generic promotional claims.",
          "Prefer concrete product benefits such as affordable recipes, meal planning or grocery savings.",
          "Use one primary CTA.",
          "Do not add secondary CTAs.",
          "All ratings, reviews, classifications and product metrics must be verified before publication."
        ]
      },
      "layout_behaviour": {
        "priority_order": [
          "product_preview_visibility",
          "app_identity_recognition",
          "cta_visibility",
          "content_readability",
          "contextual_imagery",
          "composition_balance"
        ],
        "adaptive_rules": [
          "The contextual background image may be repositioned or cropped freely.",
          "The product preview may be cropped vertically but must preserve the core product capability.",
          "The app information panel may increase in height if verified metadata requires additional space.",
          "Reduce optional metadata before reducing required text below minimum size.",
          "The CTA message may shorten before reducing font size.",
          "The CTA button width may increase to accommodate different approved CTA labels.",
          "The CTA bar height must remain fixed.",
          "Never allow the contextual image to reduce the readability of the app information panel.",
          "Never allow the product preview to cover the app identity information.",
          "Never allow the CTA bar to be obscured by another element."
        ]
      },
      "validation": {
        "reject_if": [
          "app_icon_is_missing",
          "app_name_is_missing",
          "app_tagline_is_missing",
          "product_preview_is_missing",
          "product_preview_does_not_show_a_core_product_capability",
          "product_preview_is_distorted",
          "product_preview_overlaps_app_identity_information",
          "cta_bar_is_not_anchored_to_canvas_bottom",
          "cta_bar_does_not_extend_edge_to_edge",
          "cta_message_wraps_to_multiple_lines",
          "cta_button_contains_more_than_3_words",
          "cta_button_has_insufficient_contrast",
          "multiple_primary_ctas_are_used",
          "ratings_or_product_metrics_are_unverified",
          "required_content_exits_safe_area",
          "unapproved_fonts_are_used",
          "unapproved_brand_colours_are_used",
          "contextual_image_competes_with_product_preview",
          "visual_hierarchy_is_unclear"
        ]
      }
    },
    "notes": "Human-approved visual reference paired with rules JSON."
  }
]

[
  {
    "name": "Social media post",
    "type": "social",
    "family": "Social media post",
    "rules": {
      "template": {
        "id": "bite_app_promotion_post_01",
        "name": "App Promotion Feature",
        "purpose": "Promote the Bite app by combining product credibility, a dominant app interface preview, contextual imagery and a persistent download CTA.",
        "aspect_ratio": "4:5",
        "reference_size": {
          "width": 1080,
          "height": 1350,
          "unit": "px"
        }
      },
      "content_structure": {
        "required_elements": [
          "background",
          "app_information_panel",
          "app_icon",
          "app_name",
          "app_tagline",
          "rating_display",
          "app_metadata",
          "product_preview",
          "bottom_cta_bar",
          "cta_message",
          "cta_button"
        ],
        "optional_elements": [
          "rating_count",
          "age_rating",
          "app_age",
          "contextual_background_image"
        ],
        "element_order": [
          "background",
          "contextual_background_image",
          "app_information_panel",
          "app_icon",
          "app_name",
          "app_tagline",
          "rating_display",
          "app_metadata",
          "product_preview",
          "bottom_cta_bar",
          "cta_message",
          "cta_button"
        ]
      },
      "canvas": {
        "background_token": "colour.background.default",
        "background_colour_fallback": "#FFFFFF",
        "rules": [
          "The canvas must preserve the 4:5 aspect ratio.",
          "The composition must read as a product advertisement rather than a generic social media post."
        ]
      },
      "safe_area": {
        "outer_margin": {
          "top": 80,
          "right": 90,
          "bottom": 80,
          "left": 90
        },
        "content_inset": {
          "top": 140,
          "right": 140,
          "bottom": 140,
          "left": 140
        },
        "rules": [
          "Required content must remain inside the 90px outer safe area.",
          "Primary aligned content should use the 140px content inset.",
          "The bottom CTA bar may extend to all canvas edges.",
          "Contextual imagery may extend beyond all safe areas."
        ]
      },
      "background": {
        "type": "image_or_brand_colour",
        "preferred": "contextual_image",
        "image_behaviour": {
          "fit": "cover",
          "allow_crop": true,
          "allow_reposition": true
        },
        "rules": [
          "Prefer imagery related to food, cooking, grocery shopping or meal preparation.",
          "The background image should provide context without competing with the app preview.",
          "The main subject of the image may remain partially visible around the product preview.",
          "Do not require the entire image to be visible.",
          "Avoid visually noisy imagery behind the app information panel.",
          "Do not stretch or distort the image."
        ]
      },
      "app_information_panel": {
        "required": true,
        "position": {
          "anchor": "top_left",
          "x": 42,
          "y": 36
        },
        "dimensions": {
          "width": 470,
          "height": 300,
          "unit": "px"
        },
        "padding": {
          "top": 48,
          "right": 48,
          "bottom": 48,
          "left": 48
        },
        "corner_radius": {
          "top_left": 40,
          "top_right": 40,
          "bottom_left": 0,
          "bottom_right": 0
        },
        "colour": {
          "background_token": "colour.secondary.light_green"
        },
        "rules": [
          "The panel must remain visually distinct from the contextual background.",
          "The panel acts as the credibility and product-information area.",
          "Do not add decorative elements inside the panel.",
          "Do not reduce internal spacing to accommodate excessive content."
        ]
      },
      "app_icon": {
        "required": true,
        "position": {
          "anchor": "top_left",
          "align_to": "outer_safe_area"
        },
        "size": {
          "width": 116,
          "height": 116,
          "unit": "px"
        },
        "corner_radius": 14,
        "asset_token": "assets.app.icon.primary",
        "rules": [
          "Use only the approved Bite app icon.",
          "Maintain the original aspect ratio.",
          "Do not recolour, rotate, stretch or redraw the icon.",
          "The icon must remain the first visual element inside the information hierarchy."
        ]
      },
      "app_identity": {
        "position": {
          "relationship": "right_of_app_icon",
          "gap": 20
        },
        "app_name": {
          "required": true,
          "content": {
            "default": "Bite",
            "max_lines": 1
          },
          "typography": {
            "token": "typography.heading.small",
            "font_family": "Roboto",
            "font_weight": 500,
            "font_size": {
              "preferred": 30,
              "minimum": 26
            },
            "line_height": 1
          },
          "colour": {
            "text_token": "colour.text.primary"
          }
        },
        "app_tagline": {
          "required": true,
          "content": {
            "default": "Recipes for every budget",
            "max_lines": 2,
            "preferred_max_characters": 32
          },
          "typography": {
            "token": "typography.body.medium",
            "font_family": "Roboto",
            "font_weight": 400,
            "font_size": {
              "preferred": 24,
              "minimum": 20
            },
            "line_height": 1.05
          },
          "colour": {
            "text_token": "colour.text.primary"
          }
        }
      },
      "rating_display": {
        "required": true,
        "position": {
          "relationship": "below_app_tagline",
          "margin_top": 8
        },
        "content": {
          "rating_scale": 5,
          "example_rating": 4.4,
          "display_style": "stars",
          "allow_partial_star": true
        },
        "colour": {
          "active_star_token": "colour.primary.red",
          "inactive_star_token": "colour.primary.red"
        },
        "rules": [
          "The rating shown must match verified product data.",
          "Do not fabricate ratings or review counts.",
          "Use a maximum of five stars.",
          "Keep the rating visually secondary to the app name."
        ]
      },
      "app_metadata": {
        "required": true,
        "position": {
          "relationship": "below_app_identity_row",
          "margin_top": 30
        },
        "layout": {
          "display": "three_columns",
          "column_count": 3,
          "horizontal_alignment": "space_between"
        },
        "items": {
          "rating": {
            "value_example": "4.4",
            "label_example": "3500 Reviews"
          },
          "app_age": {
            "value_example": "3+",
            "label_example": "Years"
          },
          "classification": {
            "value_example": "17+",
            "label_example": "Classification"
          }
        },
        "value_typography": {
          "token": "typography.heading.xsmall",
          "font_family": "Roboto",
          "font_weight": 500,
          "font_size": {
            "preferred": 28,
            "minimum": 24
          },
          "line_height": 1
        },
        "label_typography": {
          "token": "typography.body.small",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 20,
            "minimum": 17
          },
          "line_height": 1.05
        },
        "rules": [
          "Use a maximum of three metadata items.",
          "Each item must contain one primary value and one short supporting label.",
          "All displayed metadata must use verified product information.",
          "Do not use invented ratings, review counts, age classifications or app history.",
          "Maintain equal visual spacing between columns."
        ]
      },
      "product_preview": {
        "required": true,
        "purpose": "Show the Bite product interface as the dominant element of the composition.",
        "position": {
          "anchor": "bottom",
          "horizontal_alignment": "centre",
          "top_offset": 315,
          "bottom_relationship": "behind_cta_bar"
        },
        "dimensions": {
          "width": 900,
          "height": 970,
          "unit": "px"
        },
        "corner_radius": {
          "top_left": 40,
          "top_right": 40,
          "bottom_left": 0,
          "bottom_right": 0
        },
        "content": {
          "type": "app_screenshot_or_product_mockup",
          "preferred_screen": "core_product_experience"
        },
        "image_behaviour": {
          "fit": "cover",
          "allow_crop": true,
          "allow_reposition": true,
          "preserve_aspect_ratio": true
        },
        "rules": [
          "The app preview must be the dominant visual element.",
          "Use an approved Bite interface screenshot or product mockup.",
          "Show enough of the interface to communicate the app's purpose.",
          "Prefer screens showing recipe discovery, meal planning, grocery management or another core product capability.",
          "Do not use screens dominated by settings, onboarding forms or empty states.",
          "The preview may extend behind the bottom CTA bar.",
          "Do not distort the interface screenshot.",
          "Do not recreate, alter or invent UI elements inside the screenshot.",
          "Crop peripheral interface content before cropping the primary product feature."
        ]
      },
      "bottom_cta_bar": {
        "required": true,
        "position": {
          "anchor": "bottom",
          "x": 0,
          "y": 1250
        },
        "dimensions": {
          "width": 1080,
          "height": 100,
          "unit": "px"
        },
        "layout": {
          "display": "horizontal",
          "horizontal_alignment": "space_between",
          "vertical_alignment": "centre"
        },
        "padding": {
          "top": 16,
          "right": 58,
          "bottom": 16,
          "left": 44
        },
        "colour": {
          "background_token": "colour.primary.red"
        },
        "rules": [
          "The CTA bar must extend edge to edge.",
          "The CTA bar must remain anchored to the bottom of the canvas.",
          "No content may appear below the CTA bar.",
          "The CTA bar must visually sit above the product preview.",
          "The CTA message and button must remain vertically centred."
        ]
      },
      "cta_message": {
        "required": true,
        "content": {
          "default": "RECIPES FOR EVERY BUDGET",
          "max_lines": 1,
          "preferred_max_characters": 34,
          "case": "uppercase"
        },
        "typography": {
          "token": "typography.heading.xsmall",
          "font_family": "Roboto",
          "font_weight": 700,
          "font_size": {
            "preferred": 34,
            "minimum": 27
          },
          "line_height": 1,
          "letter_spacing": 0
        },
        "colour": {
          "text_token": "colour.text.on_primary"
        },
        "rules": [
          "Keep the message to one line.",
          "Use a short product promise or Bite tagline.",
          "Do not repeat the CTA button text.",
          "The message must remain readable at mobile-feed size."
        ]
      },
      "cta_button": {
        "required": true,
        "content": {
          "default": "GET APP",
          "max_lines": 1,
          "preferred_max_characters": 14,
          "case": "uppercase"
        },
        "dimensions": {
          "min_width": 220,
          "height": 68
        },
        "padding": {
          "horizontal": 34,
          "vertical": 16
        },
        "corner_radius": 4,
        "colour": {
          "background_token": "colour.background.default",
          "text_token": "colour.primary.red"
        },
        "typography": {
          "token": "typography.button.primary",
          "font_family": "Roboto",
          "font_weight": 700,
          "font_size": {
            "preferred": 30,
            "minimum": 25
          },
          "line_height": 1
        },
        "rules": [
          "The CTA must describe one clear action.",
          "Keep the CTA to a maximum of three words.",
          "Do not use vague labels such as Learn More when a more specific action is available.",
          "The button must maintain strong contrast against the CTA bar.",
          "Do not use an outlined button."
        ]
      },
      "spacing_system": {
        "base_unit": 8,
        "approved_spacing_values": [
          8,
          16,
          24,
          32,
          40,
          48,
          64,
          80,
          140
        ],
        "key_relationships": {
          "primary_content_inset": 140,
          "product_preview_internal_inset": 48,
          "app_icon_to_identity": 20,
          "identity_to_metadata": 30,
          "cta_bar_horizontal_padding_left": 44,
          "cta_bar_horizontal_padding_right": 58
        },
        "rules": [
          "Use approved spacing values whenever possible.",
          "The 140px inset defines the primary alignment system.",
          "The 48px spacing unit controls secondary internal spacing.",
          "Do not introduce arbitrary spacing values to force content to fit."
        ]
      },
      "colour_usage": {
        "rules": [
          "Use only approved Bite brand colours for interface framing and graphic elements.",
          "Use light green for the app information panel.",
          "Use primary red for the CTA bar, rating stars and CTA emphasis.",
          "Use white or the approved neutral background colour for the CTA button.",
          "Contextual photography may contain natural colours outside the brand palette.",
          "Do not derive new interface colours from the background image."
        ]
      },
      "content_rules": {
        "voice": [
          "friendly",
          "clear",
          "direct",
          "helpful",
          "accessible"
        ],
        "rules": [
          "Communicate what Bite does before introducing secondary benefits.",
          "Use short product-focused language.",
          "Avoid generic promotional claims.",
          "Prefer concrete product benefits such as affordable recipes, meal planning or grocery savings.",
          "Use one primary CTA.",
          "Do not add secondary CTAs.",
          "All ratings, reviews, classifications and product metrics must be verified before publication."
        ]
      },
      "layout_behaviour": {
        "priority_order": [
          "product_preview_visibility",
          "app_identity_recognition",
          "cta_visibility",
          "content_readability",
          "contextual_imagery",
          "composition_balance"
        ],
        "adaptive_rules": [
          "The contextual background image may be repositioned or cropped freely.",
          "The product preview may be cropped vertically but must preserve the core product capability.",
          "The app information panel may increase in height if verified metadata requires additional space.",
          "Reduce optional metadata before reducing required text below minimum size.",
          "The CTA message may shorten before reducing font size.",
          "The CTA button width may increase to accommodate different approved CTA labels.",
          "The CTA bar height must remain fixed.",
          "Never allow the contextual image to reduce the readability of the app information panel.",
          "Never allow the product preview to cover the app identity information.",
          "Never allow the CTA bar to be obscured by another element."
        ]
      },
      "validation": {
        "reject_if": [
          "app_icon_is_missing",
          "app_name_is_missing",
          "app_tagline_is_missing",
          "product_preview_is_missing",
          "product_preview_does_not_show_a_core_product_capability",
          "product_preview_is_distorted",
          "product_preview_overlaps_app_identity_information",
          "cta_bar_is_not_anchored_to_canvas_bottom",
          "cta_bar_does_not_extend_edge_to_edge",
          "cta_message_wraps_to_multiple_lines",
          "cta_button_contains_more_than_3_words",
          "cta_button_has_insufficient_contrast",
          "multiple_primary_ctas_are_used",
          "ratings_or_product_metrics_are_unverified",
          "required_content_exits_safe_area",
          "unapproved_fonts_are_used",
          "unapproved_brand_colours_are_used",
          "contextual_image_competes_with_product_preview",
          "visual_hierarchy_is_unclear"
        ]
      }
    }
  }
]

No custom code supplied.

[
  {
    "name": "Social media post",
    "type": "social",
    "family": "Social media post",
    "cssBrief": {
      "content_structure": {
        "required_elements": [
          "top_pill",
          "headline",
          "brand_mark"
        ],
        "optional_elements": [
          "blurb",
          "background_image",
          "background_pattern"
        ],
        "element_order": [
          "background",
          "top_pill",
          "headline",
          "blurb",
          "brand_mark"
        ]
      },
      "top_pill": {
        "purpose": "Display the brand name, campaign label, content category or short contextual message.",
        "required": true,
        "position": {
          "anchor": "top_left",
          "align_to": "safe_area"
        },
        "content": {
          "default": "Bite – Recipes for every budget.",
          "max_lines": 1,
          "preferred_max_characters": 42,
          "overflow_strategy": [
            "reduce_horizontal_padding",
            "reduce_font_size_within_allowed_range",
            "shorten_copy"
          ]
        },
        "container": {
          "display": "pill",
          "width": "fit_content",
          "min_height": 52,
          "max_width": 620,
          "horizontal_padding": 24,
          "vertical_padding": 12,
          "border_radius": 999
        },
        "typography": {
          "token": "typography.label.default",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 24,
            "minimum": 20
          },
          "line_height": 1.1
        },
        "colour": {
          "background_token": "colour.secondary.light",
          "text_token": "colour.primary"
        },
        "rules": [
          "The pill must remain on one line.",
          "The container must fit its content rather than extend across the layout.",
          "The pill must remain visually secondary to the headline.",
          "Maintain strong contrast between the pill, its text and the background.",
          "Do not use the pill as a paragraph container.",
          "Do not place icons inside the pill unless the selected template variant explicitly allows them."
        ]
      },
      "blurb": {
        "purpose": "Provide optional supporting context for the headline.",
        "required": false,
        "position": {
          "relationship": "below_headline",
          "horizontal_alignment": "match_headline",
          "vertical_gap": {
            "preferred": 32,
            "minimum": 20,
            "maximum": 48
          }
        },
        "content": {
          "max_lines": 4,
          "preferred_word_count": {
            "minimum": 8,
            "maximum": 28
          },
          "max_characters": 180
        },
        "container": {
          "max_width": 650
        },
        "typography": {
          "token": "typography.body.large",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 30,
            "minimum": 24
          },
          "line_height": 1.3,
          "alignment": "left"
        },
        "rules": [
          "The blurb must support the headline rather than repeat it.",
          "Use clear, conversational language consistent with Bite's brand voice.",
          "The blurb must remain visually secondary to the headline.",
          "Do not use the blurb when it makes the composition feel crowded.",
          "When included, the headline and blurb must read as one content group.",
          "The blurb must use the same alignment as the headline.",
          "Do not reduce the headline size solely to accommodate the blurb."
        ]
      }
    },
    "notes": "Human-approved visual reference paired with rules JSON."
  }
]

[
  {
    "name": "Social media post",
    "type": "social",
    "family": "Social media post",
    "rules": {
      "content_structure": {
        "required_elements": [
          "top_pill",
          "headline",
          "brand_mark"
        ],
        "optional_elements": [
          "blurb",
          "background_image",
          "background_pattern"
        ],
        "element_order": [
          "background",
          "top_pill",
          "headline",
          "blurb",
          "brand_mark"
        ]
      },
      "top_pill": {
        "purpose": "Display the brand name, campaign label, content category or short contextual message.",
        "required": true,
        "position": {
          "anchor": "top_left",
          "align_to": "safe_area"
        },
        "content": {
          "default": "Bite – Recipes for every budget.",
          "max_lines": 1,
          "preferred_max_characters": 42,
          "overflow_strategy": [
            "reduce_horizontal_padding",
            "reduce_font_size_within_allowed_range",
            "shorten_copy"
          ]
        },
        "container": {
          "display": "pill",
          "width": "fit_content",
          "min_height": 52,
          "max_width": 620,
          "horizontal_padding": 24,
          "vertical_padding": 12,
          "border_radius": 999
        },
        "typography": {
          "token": "typography.label.default",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 24,
            "minimum": 20
          },
          "line_height": 1.1
        },
        "colour": {
          "background_token": "colour.secondary.light",
          "text_token": "colour.primary"
        },
        "rules": [
          "The pill must remain on one line.",
          "The container must fit its content rather than extend across the layout.",
          "The pill must remain visually secondary to the headline.",
          "Maintain strong contrast between the pill, its text and the background.",
          "Do not use the pill as a paragraph container.",
          "Do not place icons inside the pill unless the selected template variant explicitly allows them."
        ]
      },
      "blurb": {
        "purpose": "Provide optional supporting context for the headline.",
        "required": false,
        "position": {
          "relationship": "below_headline",
          "horizontal_alignment": "match_headline",
          "vertical_gap": {
            "preferred": 32,
            "minimum": 20,
            "maximum": 48
          }
        },
        "content": {
          "max_lines": 4,
          "preferred_word_count": {
            "minimum": 8,
            "maximum": 28
          },
          "max_characters": 180
        },
        "container": {
          "max_width": 650
        },
        "typography": {
          "token": "typography.body.large",
          "font_family": "Roboto",
          "font_weight": 400,
          "font_size": {
            "preferred": 30,
            "minimum": 24
          },
          "line_height": 1.3,
          "alignment": "left"
        },
        "rules": [
          "The blurb must support the headline rather than repeat it.",
          "Use clear, conversational language consistent with Bite's brand voice.",
          "The blurb must remain visually secondary to the headline.",
          "Do not use the blurb when it makes the composition feel crowded.",
          "When included, the headline and blurb must read as one content group.",
          "The blurb must use the same alignment as the headline.",
          "Do not reduce the headline size solely to accommodate the blurb."
        ]
      }
    }
  }
]

No custom code supplied.