Brand Portal

Layout

Our logo communicates simplicity, friendliness, and clarity. Setting the type in all lowercase represents unity. The logo is built using the Welldoc block system, but it has rounded edges. This contrast is intentional. It allows the logo alone to represent what the brand represents on the whole.

Layout Overview

Our layouts should reflect clarity, structure, and intentional use of space. 
Content must feel balanced, open, and easy to navigate, supporting a sense of trust and modernity.

  • Grid System: Use a consistent grid to align text, imagery, and graphic elements. This creates a strong visual rhythm and maintains cohesion across layouts.
  • Whitespace: Embrace whitespace generously to allow content to breathe. It improves readability and elevates the overall aesthetic.
  • Alignment: Always align copy and elements to a shared baseline or margin. Left-alignment is preferred for text to support a clean and structured feel.
  • Hierarchy: Use clear visual hierarchy—headlines, subheads, and body text should be distinct in size and weight. Ensure key messages stand out without clutter.
  • Margins & Padding: Maintain consistent internal padding in containers and around key blocks of content. This improves legibility and creates visual consistency.
  • Balance: Use asymmetry thoughtfully, but ensure layouts remain visually balanced. Combine bold elements with subtle ones to avoid overwhelming the viewer.

Welldoc Blocks

Using basic geometric shapes helps lend structure to our work. Our experiences are easier to navigate, our possibilities more clearly illuminated, with patterns of geometric shapes building a strong foundation and creating space. This helps our brand remain comprehensive without becoming complex.

For determining color

See “Using color” for guidance around how to use these blocks. When using as an overlay, consult the “Color overlay” section.

Whitespace and balance

Whitespace

Whitespace (or negative space) is a foundational part of your layout—it shapes how users perceive, navigate, and focus on content.

  • Use whitespace intentionally, not just as empty space. It creates breathing room, reduces visual clutter, and guides attention.
  • Create separation between content blocks using larger padding to distinguish sections clearly.
  • Avoid edge-to-edge text or imagery—always include generous padding inside containers. Round corners when possible.
  • Whitespace can emphasize luxury and confidence—don’t overcrowd or overfill layouts.

Balance

Balance ensures that layouts feel stable, intentional, and visually pleasing—whether symmetrical or asymmetrical.

  • Combine large, bold elements (like headlines or images) with smaller, lighter ones to distribute visual weight.
  • Center-aligned content can work for hero sections or emphasis, but supporting content should revert to left-aligned for readability.
  • Use asymmetry sparingly and deliberately—align off-center blocks to grid lines or edges to maintain cohesion.
  • Avoid overcrowding one side of a layout—distribute visual interest evenly across the page.
  • Use white space and alignment to keep designs feeling light, even when complex.

Visual motifs

Pattern

Our semi-transparent welldoc blue dot patterns are subtle, supportive design elements used to add depth, movement, and a sense of precision. These motifs reinforce the brand’s balance of technology and human sensibility.

Rules:

  • Dot motifs must always use the brand welldoc blue at 10%–30% opacity, depending on the background contrast.
  • They should never overpower content—always sit behind or beside key information, not under it.
  • Use motifs sparingly—one motif per layout section is typically enough to create interest without distraction.

Guidelines:

  • Position dots in corners or edges of a layout to create a sense of framing and rhythm.
  • Scale and placement should feel intentional and balanced, often aligning to the grid or visual edges, while maintaining the dynamic shape of the pattern.
  • Motifs can be used on light or dark backgrounds, but avoid overlapping them with bright accent colors.
  • For consistency, keep dot patterns in regular spacing (e.g., grid-like or circular clusters, while still skipping a few for visual interest) rather than random scatter.
    In motion or digital formats, dots may gently animate for added sophistication, but should remain subtle.

Emphasis

Highlighting titles


The line is roughly the height of the titles bounding box. The text is centered to the yellow line.

Avoid using yellow bar when copy is in a box. The box highlights the text, so we don’t need the line to highlight text as well.

Highlighting information in a paragraph


If there is no title, you can use the line to highlight important information.

Do not use yellow line for a paragraph and a title at the same time.

Thickness and spacing

Avoid thick lines and too tight/too wide spacing. The line size and spacing should be consistent throughout all pages.

Thickness of line is approximately two bolded I’s from headlines copy size.

Back to top