Visual UI System
The complete visible representation of AIPOCH components. Every rule is demonstrated strictly via live HTML components.
0. Global Rules
- Mockups must be present in every template that defines a device visual.
- Mockups must keep the original aspect ratio at all times.
- Mockups must never be stretched, squashed, or distorted.
- Titles must use one emphasis only.
- Emphasis must use Tinos Italic.
- Approved brand accent colors may apply to the italic keyword only when the template defines that treatment.
- Extra frames, nested outlines, and duplicate containers are not allowed.
- Placeholder text and debug text must not appear in output.
- Templates must use only the approved structure defined in the system.
- The left preview must match the right-side specification exactly.
- Every rendered element must be defined by the written rule set.
- Elements not defined in the specification must not appear in the preview.
1. Logo
Overview
The logo is the primary visual identifier of the brand and must be used consistently across all digital interfaces.
Logo Variants
Use only the lockups visible on the official website. Keep shape, spacing, and color treatment unchanged. Download assets are attached to each approved variant.
Use for headers, navigation, and standard light-background interface placements.
Primary
SVG / PNG
Use when the horizontal lockup sits on dark surfaces and high contrast is required.
Inverse
SVG / PNG
Clear Space
Define `x` as the full rendered height of the logo. Maintain a minimum clear space of `1x` on all sides, so no text, image, or UI element enters that area.
In this diagram, the logo is rendered at `32px` tall, so each clear-space margin is also `32px`. In constrained UI, clear space must reduce to `0.5x` only when necessary. The clear space always scales with the logo size.
Minimum Size
The current website navigation uses the horizontal logo at approximately `32px` tall. Treat `32px` as both the minimum and the standard UI size, then scale up for larger interface contexts.
Ensure the logo remains clearly legible at every approved size.
Usage Rules
Keep the logo on clean, high-contrast backgrounds and use the inverse lockup on dark surfaces, consistent with the website.
Do
Use the original proportions and spacing of the official lockup.
Use the default logo on light backgrounds and the inverse logo on dark backgrounds.
Keep placement calm and readable with sufficient contrast around the logo.
Don’t
Stretch, distort, rotate, or re-space the logo.
Change the logo colors outside the approved light and dark website versions.
Add shadows, gradients, outlines, or other visual effects.
Place the logo on busy or low-contrast backgrounds.
2. Typography
text-5xl lg:text-7xl font-normal tracking-tight
Inter
Structured interfaces create research confidence.
text-4xl font-light tracking-tight
Inter
Technical modules must feel calm, precise, and legible.
text-xl font-medium
Inter
Technical Panel Title
one italic keyword / titles only
Tinos Italic
Portfolio Signals
Use italic for one keyword only inside website hero titles and social media headlines.
Italic emphasis must use Tinos Italic and must not rely on browser-generated italic.
Approved brand accent colors may apply to the italic keyword only when the template defines that treatment. Portfolio Signals, Accelerate Insight, and Product Focus follow the same rule.
top-corner brand / handle
Inter SemiBold
Use small uppercase Inter markers for social brand identifiers placed in the top corners of templates.
Brand markers must stay compact and secondary to the main headline. This style is for brand and handle metadata only.
text-sm leading-[1.65] text-gray-600
Inter
Use muted body copy for helper text, operational notes, and panel descriptions. Keep sentences short, factual, and low-drama.
text-[10px] font-mono uppercase tracking-[0.18em]
Roboto Mono
text-[10px] font-mono inline-flex border border-[#E7E5DE] bg-[#F7F7F4]
Roboto Mono
3. Color System
Figma Color Scheme (Source of Truth)
This module is synced from AIPOCH UI Component Library → Foundations → Color Scheme. Each swatch keeps the Figma token name, step, and hex value for direct comparison.
Primary Scale (color/primary/*)
Primary / Highlight: Restrained warm yellow scale used for emphasis, guided attention, and a single focal CTA per view.
Neutral Scale (color/neutral/*)
Neutral: Canvas, structure, reading, and border roles across the interface.
Semantic Success
Positive workflow outcomes, confirmation states, and safe operational feedback.
Semantic Warning
Attention states, validation prompts, and controlled caution surfaces.
Semantic Error
Blocking failures, destructive states, and critical system feedback.
Single Tokens
Accent Orange: High-contrast brand callout used for approved keyword emphasis and standout CTA accents.
Info: Context, system guidance, research notes, and neutral status communication.
4. Icon System
Lucide Core
24x24 frame, 2px stroke, outline only.
5. Buttons & UI Components
Button Styles
Utility Elements
Interaction States & Motion
Use highlight to indicate intent while preserving structure and text contrast.
Clarify borders and focus rings before adding heavier fills or shadows.
Swap to a short confirmation label, then reset automatically after a brief delay.
Reserve slower motion for color settling and utility feedback, not for structural shifts.
6. Spacing & Grid Definition
Use `32px` as the default internal spacing for technical panels and divided modules.
Use `48px` between primary columns or major content groups inside one technical module.
Use `24px` to separate stacked content groups inside a single column.
Use `12px` for compact stacks and `4px` for tightly related metadata or note lines.
7. Social Media
Overview
Social media is a rule-based output system, not a single fixed template. Each asset must use approved brand elements, approved background language, and one clear layout logic.
System Rules
Social graphics must use one approved layout variation per asset. Layout types must not be mixed.
Every asset must demonstrate core brand elements and approved background usage.
Use only elements already defined in the system, or reasonable combinations of those elements.
Do not introduce new visual elements or new gradients. Keep output aligned with the existing brand language.
Brand Elements
Social graphics must use the same elemental vocabulary already established in the system: circular marks, framed structure, line grids, and decisive highlight blocks.
Use as focal anchors, cadence markers, or end points inside a composition.
Use this source structure to set grid origin, alignment logic, and framing boundaries across all background compositions.
Use this concentric pattern as a core brand element to establish focal hierarchy, radial balance, and visual continuity across the system.
Use the approved light and dark background systems as reusable structural modes inside social compositions.
Background
Build backgrounds from line grids, orbit rings, bracket corners, node fields, flat surfaces, and simple black or neutral planes.
Backgrounds must support the main message and must not overpower it. Use opacity only within the approved palette. Decorative treatments outside the system are not allowed.
Do not introduce new visual effects. No extra gradients unless already defined in the system. No blur, noise, glow, or atmospheric texture.
AIPOCH Background Compositions
Collected from the Figma `Elements / AIPOCH Background Compositions` source. This preview includes all approved background directions inside the `Background` section and gives each one a direct SVG download.
Layout Options
Use one layout logic per graphic. Multiple layout types must not appear in the same composition.
Hero
One dominant visual, minimal text, clear focal point.
One field. One signal.
Split
Separate message and visual structure.
Keep proof separate from message.
Let one side hold structure and the other hold content.
Frame
Structured margins and strong alignment.
Structure must carry the read.
Composition Rules
Every graphic must have one thing that reads first: a headline, a lens form, or one color block.
Use visible left, center, or grid alignment. Avoid scattered or floating placements.
Leave quiet zones around the focal content so the composition feels deliberate and readable.
Use scale and contrast before adding more parts. Structure must do more work than decoration.
Correction Logic
Simplify. Remove secondary elements and strengthen one anchor.
Delete elements. Keep the strongest line, block, and message only.
Add structure, not decoration. Use a frame, grid, ring, or color plane that already belongs to the system.
Content Examples
Use abstract content examples to show how approved elements combine inside real social outputs without introducing platform-specific styling.
Evidence needs a clear signal.
Keep insight and structure distinct.
Structure must carry the read.
Template System
Treat each template as a fixed system pattern. The previews below use approved brand elements and layout rules only; the notes define how to rebuild the same composition logic with new content.
Dark Background / Portfolio Intro
Use only for portfolio, category-intro, or opening social slides. Text leads; the device mockup supports.
Portfolio Signals
Use a pure black field with top-left brand, top-right handle, center-left headline, supporting URL below, and a device mockup anchored at the bottom.
Use branding, handle, one-keyword italic headline with `#FBDD67`, supporting URL, laptop mockup, pure black background, and radial/grid overlays built from approved brand elements.
Headline must be the primary read. The title block must stay left-weighted. The mockup must stay lower and wider than the text block. Support text must sit between headline and device.
Framed Device Showcase
Use only for headline-led product showcase slides. The headline pulls focus; the device sits inside one clear, single frame.
Accelerate Insight
Use a light field with top-corner brand markers, centered headline, framed device showcase in the center, and one restrained brand graphic behind.
Use branding, handle, one-keyword italic headline where Insight uses `#EA580C`, laptop mockup, one hard frame boundary, and one approved grid/radial background element.
Composition must stay vertically centered. The headline must stay above the mockup. A single, unbroken frame must wrap the device area.
Soft UI / Product Promotion
Use only for softer, product-led promotion where the mockup sits inside a rounded container block and the CTA acts as the interaction layer.
Product Focus
Use a light neutral field with grid overlay, top-corner brand markers, left-aligned headline, large rounded mockup container, centered CTA below, and a yellow highlight with `#FBDD67` behind Focus only.
Use branding, handle, one-keyword italic headline, product mockup inside a rounded container, CTA button, grid origin structure, approved radial background pattern, and one `#FBDD67` highlight block behind Focus.
The headline must stay in the upper-left read zone. The mockup container must be the primary visual focus and must use the same scale and proportion logic as the Framed Device Showcase. The CTA must sit below as a separate interaction band.
Banner Systems
LinkedIn Cover & Web Heroes
The new standard for clinical data agents.
Deploy fully verified medical AI skills in seconds. Completely private.
Copy Tone Application
Run structured checks with clear visual hierarchy.
Calm & Factual
Unlock the most powerful workflow ever built!
Hyped & Desperate
Use short operational verbs and compact confirmations. The interface must sound exact, not promotional.
Use direct nouns and verbs: `Run`, `View`, `Copy`, `Ready`, `Unavailable`.
Prefer one sentence of helper text over multi-step persuasion.
Avoid playful verbs such as `Grab`, `Explore Now`, or `Magic` in technical UI.
Keep it operational
Microcopy must support the action in front of the user and must not narrate the entire workflow.
Keep it short
Labels must stay at one to three words. Helper text must usually fit in one sentence.
Keep it factual
Success and warning states must read as factual system feedback rather than marketing language.