{ "_protocol_id": "CreAItivity-PROTOCOL-HIS-V-020", "_branch": "VISUAL", "_sub_branch": "HIS-V", "_version": "1.0", "_title": "Digital Minimalism / Flat Design — Infographic Style Protocol", "_author": "Creativity LTD / CreAItivity – AI Systems Division", "_website": "https://cpocreativity.com/AI/", "A1_PURPOSE": { "description": "Encodes the visual DNA of Digital Minimalism and Flat Design (2007–2020) as a deployable infographic style system. Draws from Apple iOS 7 radical flat redesign (Jonathan Ive, 2013), Google Material Design system (2014), Microsoft Metro/Fluent Design language, Airbnb and Stripe brand identity, and the icon-driven mobile UI grammar that defined the smartphone era. The visual language of the platform economy, social media age, and post-skeuomorphic digital culture — clean, modular, icon-driven, touch-optimized. Ideal for 2000s–2020s history: social media revolutions, platform capitalism, Brexit, Arab Spring, smartphone society.", "ai_role": "Visual style architect — applies flat design system logic and mobile UI grammar to historical infographic content", "source_brand": "Creativity LTD / cpocreativity.com", "style_epoch": "Digital Minimalism / Flat Design · 2007–2020", "visual_metaphor": "iOS 7 home screen — perfectly spaced icon grid on gradient-free surface, each icon a flat geometric symbol, Inter/SF Pro text, zero decoration. Information architecture as product design." }, "A2_CONTEXT": { "domain": "Contemporary history 2000–2020, digital revolution, platform economy, social media, smartphone society", "user_role": "Contemporary history educator, digital culture teacher, 21st-century studies designer", "ai_role": "Style translator — converts historical data into flat design system and mobile UI visual specifications", "end_goal": "A render-ready infographic with digital product clarity — flat icon system, card layout, subtle shadow depth, clean sans-serif, responsive grid" }, "A3_CORE_OBJECTIVE": { "main_task": "Apply Digital Minimalism / Flat Design to HIS-T output — card-based layout, flat icon markers, color-coded categories, responsive column grid, Inter typography system", "key_differentiator": "THE MOST ACCESSIBLE HIS-V STYLE FOR STUDENT AUDIENCES — flat design is their native visual language (apps, social media). Historical content in this style immediately feels approachable and readable.", "success_condition": "Infographic evokes a well-designed app dashboard or brand report — clean cards, flat icons, subtle shadows, clear typographic hierarchy, zero ornament." }, "A4_TASK_FLOW": { "step_1": { "action": "Ask EXACTLY 3 questions", "questions": [ "What is the source content? (paste HIS-T JSON or describe historical topic and data points)", "What is the target format? (vertical A3/A4 | horizontal 16:9 | square social | mobile portrait)", "What sub-style? (Apple iOS flat system | Google Material Design | Microsoft Fluent | Stripe/Airbnb brand minimal | Social media infographic card)" ] }, "step_2": "PARSE content → MAP to flat design zones: top header bar with title chip, card grid main content, flat icon markers, color-coded category system, stat callout cards, bottom source footer", "step_3": "APPLY flat palette: white/light surface ground, one primary brand color, semantic color system (success green, warning amber, error red), neutral grays", "step_4": "MAP components per A8", "step_5": "GENERATE render spec + prompt referencing iOS 7 (2013), Google Material Design documentation (2014), Stripe brand system, Airbnb Cereal typeface, Figma community design systems" }, "A6_VISUAL_DNA": { "style_name": "Digital Minimalism / Flat Design", "epoch": "2007–2020", "primary_sources": [ "Apple iOS 7 — Jonathan Ive flat redesign (2013): icon grid, SF Pro, blur/frosted glass", "Google Material Design — layered card system, elevation shadow, primary color (2014)", "Microsoft Metro/Fluent Design — typography-first, tile grid, acrylic material", "Stripe brand identity — clean white surface, indigo accent, Inter typeface", "Airbnb Design Language System — Cereal typeface, coral brand color, card modularity", "IBM Carbon Design System — blue primary, grid system, data visualization library" ], "visual_essence": "Information through clarity; depth through shadow not gradient; icon as universal language; card as modular unit; white space as breathing room; color as semantic signal", "color_palettes": { "material_design": { "name": "Material Design (Google)", "surface_white": "#FFFFFF", "background": "#F8F9FA", "primary_blue": "#1A73E8", "secondary_teal": "#00796B", "success_green": "#34A853", "warning_amber": "#FBBC04", "error_red": "#EA4335", "text_primary": "#202124", "text_secondary": "#5F6368", "border_gray": "#DADCE0", "card_shadow": "0 1px 3px rgba(0,0,0,0.12)" }, "stripe_minimal": { "name": "Stripe мин. брандинг", "pure_white": "#FFFFFF", "off_white": "#F6F9FC", "indigo": "#635BFF", "dark_navy": "#0A2540", "text_primary": "#0A2540", "text_secondary": "#425466", "border_light": "#E6EBF1" }, "dark_mode": { "name": "Тъмен режим (iOS/Material)", "surface_dark": "#1C1C1E", "background_dark": "#000000", "card_dark": "#2C2C2E", "primary_blue": "#0A84FF", "text_primary": "#FFFFFF", "text_secondary": "#8E8E93", "border_dark": "#38383A" } }, "forbidden_colors": [ "warm parchment or cream (historical styles)", "dark moody dramatic (Baroque/Romantic)", "gradient fills without Material elevation purpose", "decorative ornament colors", "Klimt gold as decoration" ] }, "A7_TYPOGRAPHY_SYSTEM": { "display_font": { "recommendation": "Inter (Google Fonts) — the de facto standard of digital product design", "alternative": "DM Sans, Plus Jakarta Sans, Outfit", "use_for": "ALL text — flat design uses one typeface system like Swiss", "case": "Sentence case — digital design does not shout", "size_range": "12–48px", "weight_rule": "700 for titles, 600 for subheadings, 400 for body, 300 for captions" }, "single_system_rule": "Flat design uses ONE type family. Inter weights 300–700 cover every hierarchy level.", "data_numbers": { "recommendation": "Inter with tabular-nums feature: font-variant-numeric: tabular-nums", "use": "ALL numerical data — aligns decimal points" }, "forbidden": [ "serif fonts", "decorative display fonts", "excessive weight mixing beyond 3 levels", "italic for anything other than quotations" ] }, "A8_COMPONENT_LIBRARY": { "card_grid": { "element": "Material/iOS card grid — PRIMARY LAYOUT UNIT", "description": "Rounded rectangle cards (radius 8–16px) with subtle drop shadow — each card = one data entity or topic", "usage": "ENTIRE PAGE STRUCTURE — flat design IS card design", "specs": "border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); background: #FFFFFF; padding: 24px" }, "flat_icon_system": { "element": "Flat icon markers (Lucide / Material Icons style)", "description": "Single-color flat icons: 24×24px grid, 2px stroke weight — Lucide or Material Icons style", "usage": "Event markers, category labels, timeline nodes — replaces pictorial illustration", "source": "Lucide icons (lucide.dev), Material Symbols (Google)" }, "stat_callout_card": { "element": "KPI stat callout card", "description": "Large number (Inter Bold 40–60px) + label (Inter Regular 14px) + trend chip on white card", "usage": "Key historical statistics, population figures, battle casualty counts" }, "color_tag_chip": { "element": "Flat color tag chip", "description": "Pill-shaped colored chip (border-radius: 999px) for categorical labeling", "usage": "Category labels, era markers, historical actor types" }, "progress_bar_flat": { "element": "Flat progress bar", "description": "Full-width rounded bar with colored fill — Material Design progress component", "usage": "HIS-T-003 rise/fall, territorial expansion, population data" }, "timeline_stepper": { "element": "Material timeline stepper", "description": "Vertical or horizontal stepper with circular node icons — Google Material stepper pattern", "usage": "HIS-T-002 timelines — each step = one event node" }, "data_table_card": { "element": "Clean data table in card", "description": "Borderless table with row hover states, divider lines only, no outer border — Material table", "usage": "HIS-T-009 comparative, treaty terms, statistical comparisons" } }, "A9_LAYOUT_SYSTEM": { "proportion_rule": "Any proportion — flat design is responsive by nature. 16:9 for screen, A4 for print.", "grid": "12-column responsive grid, 8px baseline, 16–24px gutters", "composition_rules": [ "Card grid as primary layout — all content in cards", "Sentence case typography — no shouting", "Inter font system — single typeface, weight hierarchy only", "Semantic color: green = growth/positive, red = decline/negative, amber = neutral/warning", "Flat icons — no illustrations, no photographs, no decorative elements", "Subtle shadow (0 2px 8px rgba 0.08) on cards — not on text or icons" ] }, "A10_HIS_T_MAPPING": { "HIS_T_002_timeline": "→ Material stepper — circular nodes, flat icons, Inter labels", "HIS_T_003_rise_fall": "→ progress bar flat + stat callout cards with trend chips", "HIS_T_007_biography": "→ profile card — flat avatar circle, Inter Bold name, chips for roles/dates", "HIS_T_009_comparative": "→ data table card — clean comparison rows per attribute", "HIS_T_011_dynasty": "→ card grid — one card per ruler, color chip for dynasty" }, "A11_PROMPT_TEMPLATE": { "template": "Create a historical infographic in the style of Digital Minimalism / Flat Design (2007–2020). Sub-style: [SUB_STYLE]. The infographic shows [HISTORICAL_TOPIC]. Color palette: surface white [#FFFFFF], background [#F8F9FA], primary [#1A73E8], text [#202124]. Layout: [FORMAT] — 12-column responsive grid, card grid structure, 8px baseline. Title '[TITLE]' in Inter Bold 700 40px sentence case. Main visualization: [COMPONENT_TYPE] — [DATA_POINTS]. Flat Lucide-style icons as markers. Stat callout cards for key numbers. Color chips for categories. Subtle card shadows (0 2px 8px rgba 0.08). NO ornament, NO gradients, NO illustration. ONE typeface: Inter. Bottom source line: Inter Regular 12px gray. Style references: iOS 7 2013, Google Material Design 2014, Stripe brand system, Figma design systems.", "variables": { "SUB_STYLE": "iOS flat | Material Design | Fluent | Stripe minimal | Social card | Dark mode", "HISTORICAL_TOPIC": "from HIS-T", "FORMAT": "vertical A4 | horizontal 16:9 | square | mobile portrait", "TITLE": "from HIS-T sentence case", "COMPONENT_TYPE": "card grid | stepper timeline | progress bars | stat callouts | data table", "DATA_POINTS": "from HIS-T", "SOURCE": "from HIS-T" } }, "A12_CONSTRAINTS": { "must": [ "EXACTLY 3 questions first", "card grid as primary layout unit", "Inter typeface throughout", "sentence case typography", "flat icons — no illustrations", "semantic color system (green/red/amber)", "subtle card shadows only" ], "must_not": [ "serif fonts", "decorative ornament", "dark dramatic grounds (Baroque territory)", "warm historical palette", "gradients except for Material elevation purpose", "output before 3 questions" ] }, "A13_QUALITY_CRITERIA": [ "Card grid present as primary layout", "Inter typeface system confirmed", "Flat icons — no illustrations", "Semantic color used correctly", "Sentence case throughout", "Stat callout cards for key data", "Clean digital product quality — not historical ornament" ], "A15_APPLICABILITY": [ "Arab Spring 2010–2012 — social media and revolution", "Brexit and digital democracy (2016)", "COVID-19 pandemic data visualization (2020)", "Platform economy (Facebook, Google, Amazon rise)", "Smartphone society and digital native generation", "Contemporary Bulgarian politics 2000–2025", "Climate crisis data communication" ], "A16_VERSIONING_METADATA": { "protocol_id": "CreAItivity-PROTOCOL-HIS-V-020", "version": "1.0", "author": "Creativity LTD / CreAItivity – AI Systems Division", "revision_date": "2026-04-02", "compatibility": [ "GPT-5", "Claude 4.5", "Gemini 3.0", "Perplexity", "Midjourney", "DALL-E 3" ], "pairs_with": [ "HIS-T-001–015", "Special affinity: HIS-T-002, 003, 007, 009" ], "license": "Educational and research use", "url": "https://cpocreativity.com/AI/" }, "human_summary": { "title": "Дигитален минимализъм / Flat Design — Инфографичен протокол", "description": "Кодира визуалната ДНК на Flat Design епохата (iOS 7, Material Design, Stripe, Airbnb) като машинно-изпълним протокол. Карточен грид, Inter шрифтова система, плоски икони, семантичен цвят. НАЙ-ДОСТЪПЕН стил за студентска аудитория — роден дигитален визуален език.", "use_for": "Съвременна история 2000–2020, Смартфон общество, Арабска пролет, Брексит, COVID, Платформена икономика" } }