# Visual Brand Direction This note captures early visual and branding direction for Domain Context Modeling based on generated promotional website mockups. It is a reference for future site design, not a fixed brand system. ## Reference Assets - Codex-generated mockup: `outputs/images/domain-context-website-mockup-01.png` - ChatGPT-generated reference mockup: `outputs/images/domain-context-website-mockup-chatgpt-reference-01.jpg` ## Directional Takeaway The strongest visual direction is a premium editorial framework site that makes the product world legible before AI generates downstream work. The site should not look like a generic AI startup landing page. It should feel like a serious field guide, product strategy artifact, and domain-mapping workspace for founders, product leaders, designers, engineers, and agent builders. There is a useful archaeological quality to this direction: not as costume or adventure branding, but as the feeling of carefully uncovering a real product world, reading its artifacts, naming its structures, and preserving what matters before building on top of it. The tone can borrow from field notes, maps, ledgers, evidence cards, and expedition-grade documentation without becoming nostalgic or theatrical. The deeper brand idea is to bridge two worlds that are often separated: - Surface-level UI and UX work that has emotional appeal but neglects the conceptual model underneath. - Systems and architecture work that preserves structure but neglects the emotional experience of the people using the product. Domain Context Modeling should stand between those extremes. It should help teams move from attractive surfaces into deeper conceptual architecture without losing taste, empathy, emotion, and user experience. The framework is not only about making products correct. It is about making them coherent, meaningful, and felt. ## What Worked In The ChatGPT Reference The ChatGPT-generated reference is the stronger site direction. Useful qualities to preserve: - It explains the framework in one viewport: field guide, object map, lifecycle states, business rules, sources of truth, and authority boundaries. - The browser-frame treatment makes it feel like a real website instead of a poster. - The B2B equipment rentals example makes the domain concrete without requiring background explanation. - The bottom band, "translates into downstream outputs," directly supports the framework thesis. - Product, UX, Engineering, and Agents are presented as downstream consumers of domain context. - The palette is restrained and avoids common AI visual cliches. - The typography feels editorial, serious, and premium. - The structure makes the product feel intelligent and practical rather than decorative. ## What Worked In The Codex Reference The Codex-generated reference is useful as a dense hero-system concept. Useful qualities to preserve: - The field-guide panel has a strong sense of craft and structure. - The central relationship map, workflow, lifecycle, rules, sources, and authority sections feel like a credible domain artifact. - The design demonstrates how a domain model can become a visible product surface. - The bottom output lanes reinforce that domain context feeds product, UX, engineering, and agent behavior. Compared with the ChatGPT reference, it is a little more crowded and less immediately legible as a website direction. ## Brand Attributes The brand should feel: - Precise - Editorial - Grounded - Human - Discovering - Trustworthy - Practical - Strategic - Domain-aware - Architecturally aware - Emotionally intelligent - Serious without being academic - Premium without being decorative Avoid making it feel: - Generic SaaS - Overly futuristic - Academic or methodology-heavy - Corporate consulting - Developer-tool dark mode by default - AI-generated for its own sake - Purely visual with no conceptual depth - Purely architectural with no human feeling ## Visual Language Use visual metaphors that show messy real-world knowledge becoming structured shared context: - Field guide pages - Archaeological field notes - Domain vocabulary - Object and relationship maps - Lifecycle states - Business rules - Evidence cards - Sources of truth - Authority boundaries - Downstream output lanes - Annotated artifacts - Product-world diagrams - Layers, strata, traces, and discovered relationships Avoid common AI tells: - Glowing brains - Robots - Neon gradients - Floating glass cards - Purple-blue blob backgrounds - Abstract 3D icons - Fake chat bubbles as the main metaphor - Stock collaboration scenes - Decorative network diagrams with no product meaning ## Layout Guidance The first viewport should communicate the thesis quickly: ```text Domain Context Modeling -> model the product world -> translate into product, UX, engineering, and agent outputs ``` Useful first-viewport elements: - Clear top navigation - Editorial headline - Short explanatory copy - Two direct calls to action - A concrete domain artifact as the hero visual - A visible downstream translation band - Hint of the next section below the fold The page should look like a real website screenshot, not a poster or concept board. ## Copy Direction Current strong headline: > Give AI the product world before it builds. Strong supporting idea: > Domain Context Modeling turns messy real-world knowledge into reusable context for better specs, prototypes, interfaces, code, and agent behavior. Useful short line: > Map reality. Build better. Another useful line: > Better AI starts with better context. ## Palette Direction Use a restrained, distinctive palette: - Warm off-white or soft gray backgrounds - Deep ink or charcoal text - Muted green as the primary action/accent color - Pale blue for supporting system or UX elements - Oxblood as a small editorial accent - Graphite for rules, maps, and structure Avoid dominant purple-blue AI gradients and overly monochrome palettes. ## Typography Direction Use editorial typography with strong hierarchy: - Large, high-craft serif or editorial display type for the hero headline. - Quiet, highly readable text for body copy. - Small caps or precise labels for artifact sections. - Avoid gimmicky futuristic type. - Avoid tiny unreadable filler text in mockups and final site screens. ## Future Site Implication A future promotional website should not only describe Domain Context Modeling. It should show the framework working. The hero should make a concrete domain visible, then show how that model flows into: - Product framing - UX and information architecture - Engineering models and APIs - Agent guardrails and behavior The strongest direction is not "AI magic." It is "shared understanding before generation." The site should also make a larger argument: great AI-assisted product work needs both emotional interface craft and deep conceptual structure. The framework exists to connect those layers so product teams do not have to choose between beauty and coherence, or between architecture and human experience.