PosterMessage Cloud

Overview

PosterMessage Cloud is an AI model design, training, and deployment platform built for engineering teams who prioritize shipping speed and technical precision. The brand embodies a 'Technical Minimalism' aesthetic—clean, monochromatic surfaces punctuated by a bold forest-green primary accent (#1b5e20) and a vibrant blue secondary (#0070f3) that signal actionable moments. The visual language is deliberately austere: generous whitespace, monospace typography (IBM Plex Mono), serif headlines (Fraunces) for emphasis, and surgical use of color. The emotional response is one of clarity and control—users feel they are working with a focused, expert team, not a bloated platform.

The brand voice is direct, technical, and unapologetically opinionated. Vocabulary favors precision over marketing flourish: 'design, train, deploy' rather than 'empower your AI journey.' Tone is conversational but never breathless. Example sentence: 'We design, train and host AI models end to end. A small, focused team of engineers—you talk to the people who build your model, from first sketch to live endpoint.'

Colors

The color system is rooted in high contrast and semantic clarity. Primary (#1b5e20, a deep forest green) is reserved exclusively for call-to-action buttons and primary interactive elements—it signals 'ship this' and commands attention without aggression. Secondary (#0070f3, a vivid blue) is used for links, focus states, and secondary CTAs; it provides visual relief and guides secondary navigation. Tertiary (#666666, a neutral mid-gray) is used for metadata, timestamps, and supporting text. The surface stack is nearly monochromatic: white (#ffffff) for primary surfaces, with a carefully calibrated gray scale (surface-container at #e9ecef, outline at #cccccc) for borders and subtle separation. Status colors follow semantic conventions: success uses hsl(143, 85%, 96%) background with hsl(140,

Typography

The type system pairs two distinct families to create visual hierarchy and emotional resonance. Fraunces (a serif display font) is used exclusively for headlines (display, headline-lg, headline-md) at weights 500–600, creating a sophisticated, editorial presence that signals expertise and permanence. IBM Plex Mono (a technical monospace) is used for all body text, labels, and UI copy at weights 400–500, reinforcing the brand's engineering DNA and creating a sense of precision. Display text (60px, 500 weight, -0.02em letter-spacing) is reserved for hero headlines; headline-lg (40px, 500 weight) for section titles; body-md (16px, 400 weight) for standard paragraph text. The monospace choice is deliberate: it evokes code, terminals, and technical authenticity. Apply text-shadow: 0 1px 2px rgb

Layout

The layout follows a 12-column grid with a fixed max-width of 1280px, centered on the viewport. Spacing is semantic and hierarchical: lg spacing (24px) separates major sections; md spacing (16px) separates cards and components within sections; sm spacing (8px) separates inline elements. The gutter is consistently 24px on desktop, reducing to 16px on tablet and 12px on mobile. Whitespace is treated as a first-class design element—sections are separated by at least 40px (xl spacing) to create visual breathing room and reduce cognitive overload. Container padding is uniform at 24px on all sides. The grid is fluid within the max-width constraint, allowing components to scale proportionally. Section rhythm alternates between full-width hero sections (e.g., the main headline with 'ship' in green

Elevation & Depth

Depth is conveyed through subtle shadows and borders rather than dramatic layering. The elevation system uses three levels: Level 1 (Base, no shadow) for standard cards and surfaces; Level 2 (md shadow: 0 4px 12px rgba(0, 0, 0, 0.1)) for elevated cards and modals; Level 3 (lg shadow: 0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns or overlays. All surfaces carry a 1px solid border at rgba(0, 0, 0, 0.08) (approximated as #cccccc in the outline token) to reinforce structure and prevent surfaces from dissolving into the background. Focus states add an additional 2px outline a

Shapes

The shape philosophy is 'Technical Precision'—minimal rounding that signals refinement without softness. Border-radius follows a strict scale: sm (2px) for small UI elements like close buttons; DEFAULT (4px) for buttons, inputs, and standard cards; md (6px) for slightly larger components; lg (8px) for prominent cards and modals; xl (12px) for hero sections and full-width containers; full (9999px) for badges and circular elements. Buttons use DEFAULT (4px) to feel crisp and engineered; cards use lg (8px) to feel slightly more approachable. Inputs use DEFAULT (4px) to align with button styling a

Components

Action Elements Buttons are the primary interaction mechanism and follow a strict hierarchy. Primary buttons (button-primary) use {colors.primary} (#1b5e20) background with white text, 12px vertical and 20px horizontal padding, 40px height, and 4px border-radius. On hover, the background shifts to {colors.primary-container} (#2e7d32) with a 200ms ease transition. Secondary buttons (button-secondary) use a transparent background with a 1px border at {colors.outline} (#cccccc), same padding and height, and shift to {colors.surface-container-low} (#f0f0f0) on hover. Ghost buttons (button-ghost) have no border or background, using {colors.on-surface-variant} (#6c757d) text, and shift to {colors.surface-container} (#e9ecef) on hover. All buttons use IBM Plex Mono at 14px, 500 weight, with 0

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1b5e20) exclusively for primary CTAs and high-priority actions—it is the brand's signature accent and must remain distinctive.
• Do maintain generous whitespace (lg spacing, 24px) between major sections to support scanning and reduce cognitive load on technical content.
• Do pair Fraunces headlines with IBM Plex Mono body text to create a clear visual hierarchy that signals expertise and precision.
• Do apply 1px borders at {colors.outline} (#cccccc) to all surfaces to reinforce structure and prevent visual dissolution.
• Do use semantic status colors (success, error, warning, info) consistently across all feedback mechanisms—never invent new status colors.

**Don't**

• Don't use primary green (#1b5e20) for anything other than primary CTAs, focus states, and brand-critical moments—overuse dilutes its signal.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12)—the aesthetic is minimal and technical, not layered or dramatic.
• Don't use system fonts (ui-sans-serif, system-ui) in place of IBM Plex Mono or Fraunces—the specific typeface choices are core to brand identity.
• Don't round corners more than 8px except for badges (which use full)—excessive rounding softens the technical precision and feels generic.
• Don't mix warm shadows or tints into the color system—all shadows and overlays must be cool-toned (black-based) to maintain the austere, technical aesthetic.