{
  "id": "diogoakio-com-br",
  "title": "Diogoakio Com Br",
  "url": "https://www.diogoakio.com.br",
  "tags": [
    "Portfolio",
    "Studio",
    "Editorial",
    "Clean",
    "Typography"
  ],
  "colors": {
    "principle": "High contrast and restraint, using a dark backdrop to let photography and typography stand out.",
    "bg": "#151515",
    "bgSoft": "#1C2763",
    "bgQuiet": null,
    "ink": "#FFFFFF",
    "inkSoft": null,
    "muted": "#999999",
    "mutedSoft": null,
    "accent": null,
    "line": "rgba(255, 255, 255, 0.15)"
  },
  "typography": {
    "rules": [
      "All text uses a 400 weight.",
      "Display uses negative letter-spacing, body uses positive letter-spacing.",
      "Typography is the primary structural element."
    ],
    "scaleUses": [
      "Primary hero statement",
      "Body text and navigation"
    ],
    "display": "humanist-sans",
    "body": "humanist-sans",
    "mono": null,
    "scale": [
      {
        "token": "display",
        "size": 34,
        "lh": 1.1,
        "weight": 400,
        "ls": "-0.32px"
      },
      {
        "token": "body",
        "size": 16,
        "lh": 1.4,
        "weight": 400,
        "ls": "0.32px"
      }
    ]
  },
  "spacing": {
    "rhythm": "A consistent 30px gap defines major section separations.",
    "base": 4,
    "scale": [
      4,
      8,
      16,
      20,
      24,
      30,
      48
    ]
  },
  "surfaces": {
    "shadows": [],
    "borders": "Minimal to non-existent; separation is achieved through spacing and background contrast.",
    "radius": {
      "sm": 0,
      "md": 0,
      "lg": 0,
      "pill": 999
    }
  },
  "layout": {
    "skeleton": "A full-bleed dark canvas with a prominent top-aligned hero statement and a grid-based portfolio gallery.",
    "container": 1920,
    "paragraph": 680,
    "columns": 12,
    "gutter": 30,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "All elements have a standard 'all' transition applied for smooth state changes."
    ],
    "durations": {
      "micro": 200,
      "small": 400,
      "medium": 800
    },
    "easing": "cubic-bezier(0.4, 0, 0.2, 1)"
  },
  "identity": {
    "keywords": [
      "design",
      "art direction",
      "digital experiences",
      "independent",
      "portfolio"
    ],
    "analogy": "A digital gallery with curated, high-contrast exhibitions.",
    "oneLiner": "A refined portfolio site for an independent designer & art director, focusing on bold typography and a dark, immersive gallery experience."
  },
  "components": {
    "button": "Minimalist text links or buttons with high contrast against dark backgrounds.",
    "card": "Content presented as large photographic cards or clean text blocks within a grid.",
    "chip": "Simple, unadorned text elements.",
    "input": "Not visible in the provided screenshots.",
    "hero": "A massive, full-width typographic statement that anchors the entire page."
  },
  "interaction": {
    "hover": "Visual feedback likely involves subtle color shifts or reveals on interactive elements.",
    "click": "Transitions to reveal more content, such as the project overlay.",
    "transition": "A global 'all' transition is applied to elements, ensuring smooth movement.",
    "keyboard": "Not explicitly shown, but standard navigation is expected."
  },
  "voice": {
    "tone": "Confident, direct, and professional.",
    "headlineStyle": "Declarative and straightforward, using the designer's name as the primary hook.",
    "ctaStyle": "Understated and functional, such as 'Ver matéria'.",
    "avoid": [
      "Excessive decoration",
      "Loud colors",
      "Complex jargon"
    ]
  },
  "donts": [
    "Don't use a white background — the screenshot shows a dominant dark theme.",
    "Don't use bold font weights — the screenshot shows a consistent 400 weight.",
    "Don't add drop shadows — the screenshot shows flat, surface-level depth.",
    "Don't use a wide variety of colors — the screenshot shows a strictly monochrome palette.",
    "Don't use rounded corners on elements — the screenshot shows sharp, square edges.",
    "Don't use complex decorative borders — the screenshot relies on spacing for separation."
  ],
  "systemPrompt": "Design DNA for Diogo Akio's portfolio site. This is a refined, high-contrast portfolio for an independent designer and art director. The design is anchored by a dark theme (bg #151515) and white typography (ink #FFFFFF), with a muted accent color (#1C2763) and gray text (#999999). Typography is a humanist sans-serif (HelveticaNeueLTPro-Roman) used in a 400 weight. The layout is a full-bleed dark canvas with a prominent typographic hero and a grid-based gallery. Critical donts: Never use a white background, never use bold font weights, and never use rounded corners or drop shadows. The site prioritizes editorial clarity and a cinematic gallery feel."
}