Skip to content
6amDesign
v0.7.0 · PilotUse with AI
6am/Design system/Blocks
Section reviewAwaiting review2 met · 0 to improve · 1 to review

What is in place, what needs improving, and what still needs a closer look. Each status refers only to the criterion below; it is not approval of the whole section.

Implementation inventory · 2026-09-08 · v0.7.0 · Brand approval not recorded

  • Meets criterion
    Blocks have a consistent geometry and clear composition rules.

    Three motifs share a modular grid, a reserved content area, two styles and four color pairings.

    View blocks specification ↗
  • Meets criterion
    People and agents can retrieve each reusable motif.

    The library provides 24 SVG files, direct URLs, a JSON manifest and a copyable HTML/CSS recipe.

    View blocks specification ↗
  • Awaiting review
    The visual direction has been reviewed in real applications.

    Review the pilot motifs in campaign layouts and printed proofs before treating them as final brand standards.

View all reviews · JSON ↗

Read-only record. Updates are versioned with the design system; copying a brief does not change a status.

Build / Blocks

Blocks that give ideas structure.

Simple modules to frame an idea, create rhythm and connect image and message. A graphic language for 6am covers, editorial layouts and digital communications.

The grid sets the rhythm.

The base module is 80 units in a 960 × 640 SVG. The central area starts at (160, 160) and measures 640 × 320. Outlines are 2 units wide and scale with the file. At small sizes, use the solid version if outlines lose definition.

Clear content area8 × 4
12 × 8 modules · clear area: 8 × 4 modules · origin at the top left. Guides are not included in the file.

The clear area organizes the layout; also preserve the logo’s own clearspace. Leave more room when the message needs it.

One family. Three compositions.

Explore the same grid in solid and outlined versions. Each file contains only the motif, with a transparent background; apply the surface color in the composition.

Bookends

Opposing shapes frame the message. Use on covers and opening slides with one main idea.

Solid · Lime on ink
SVG960 × 640 · 1 KB
Open

Steps

One- and two-module shapes lead the eye along the edges. Keep the center of the composition clear.

Solid · Lime on ink
SVG960 × 640 · 1 KB
Open

Windows

Long rectangles create pauses and continuity. Outlines leave room for the image to breathe.

Solid · Lime on ink
SVG960 × 640 · 1 KB
Open

How to compose

01

One module per composition

Build on a 12 × 8 grid. Squares and rectangles use whole multiples of the same module. Scale the complete motif proportionally; do not stretch individual modules.

02

The message comes first

Keep blocks at the edges and content in the clear central area. Use one family per composition and avoid filling the entire grid. Empty space sets the reading order.

03

Give color a purpose

Use the combinations shown. Keep text solid. Do not turn the logo-only green into a block color or apply effects to the logo.

04

Give images room

Use outlines when the image already has a strong presence. Keep blocks away from faces and important details. Choose a quiet area with contrast for text; use a separate solid strip when needed.

05

Recompose for the format

The SVG motifs have a 3:2 aspect ratio. Preserve it. In portrait formats, use an independent graphic strip. On mobile, let the content grow and keep the motif separate; do not shrink text to make it fit.

06

Decoration without barriers

Mark motifs as decorative, without duplicate screen reader descriptions. Do not use blocks alone to indicate state or interaction. These compositions are static and need no animation.

From rule to application

Three ways to apply the system with the 6am identity. Text, image and logo remain independent elements.

A good idea deserves space.6am

Cover / One idea

Solid bookends frame one short message. The logo keeps its clearspace.

6am
Existing 6am illustration
Clarity for the next step.

Editorial / Image and content

The motif occupies its own strip. Text sits on a solid surface and the illustration stays clear.

Connect ideas. Create possibilities.6am

Outline / Message

Outlined windows add structure with less visual weight. The message remains the focus.

Ready to reuse

Download each SVG or copy its URL in the library. The JSON includes all 24 variants, geometry, colors and rules. The HTML/CSS template uses the same files and keeps text editable.

Rules and files · JSON
A composition that adapts

This template keeps the motif in a 3:2 strip and content in normal flow. Replace the message and motif URL without turning text into an image.

<style>
.sixam-block-composition { background: #0A0C00; color: #FFFFFF; }
.sixam-block-motif { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.sixam-block-copy { padding: clamp(24px, 5vw, 48px); }
.sixam-block-copy h2 { margin: 0; font-family: var(--6am-font-display), sans-serif; font-size: clamp(28px, 5vw, 48px); line-height: 1.12; }
</style>
<section class="sixam-block-composition">
  <img class="sixam-block-motif" src="/assets/design/6am/blocks/bookends-solid-lime-on-ink.svg" width="960" height="640" alt="">
  <div class="sixam-block-copy"><h2>A good idea deserves space.</h2></div>
</section>

Pilot library: compositions and files are available for use and review. Visual direction approval and print proofs are still pending.