# 6am Design

Version: 0.7.0 | Status: Pilot | Organization: 6am

The 6am design system: brand foundations, working examples and guidance for people and AI.

## Tone of Voice · Pilot · ready for review

Help people running a business understand what we do, make a decision and know what happens next.

Our voice stays clear, human and grounded in the work. Tone changes with the moment: a campaign can smile; a service failure needs calm, precise help.

Business owners and the people who keep their operations running. Respect their expertise; explain our work without assuming they know marketing or software terminology.

### Say what matters.
Start with the person’s question. Explain the work and its practical purpose, then give a useful next step. Keep the context people need to decide.
- Put it into practice: Lead with the point and use active verbs.
- Put it into practice: Connect a feature to an everyday business situation.
- Put it into practice: Use short paragraphs; keep details that change the decision.
- Avoid: A headline full of promises followed by a list of unexplained metrics.
- Avoid: Agency language that sounds impressive but hides the work.
- Avoid: Cutting so much that the reader has to guess.
Instead of: We leverage an integrated acquisition ecosystem to unlock your growth potential.
Write like this: Help customers find your business, understand your services and get in touch.
Why it works: The reader can picture the purpose without translating agency jargon.

### Talk like a person.
Sound like a capable colleague sitting beside the business owner. Be warm, attentive and straightforward. Respect the effort behind the business.
- Put it into practice: Use “you” and “we” when they make responsibility clear.
- Put it into practice: Recognize the situation before offering advice.
- Put it into practice: Use light humor when the moment welcomes it.
- Avoid: Talking down to people or calling their business outdated.
- Avoid: Forced slang, fake intimacy or jokes during a problem.
- Avoid: Blaming the customer for an error.
Instead of: User input failed validation. Resubmit compliant data.
Write like this: Enter your email in this format: name@company.com.
Why it works: Give useful help without making the person feel at fault.

### Back up the promise.
Be specific about the work we can commit to. Use evidence for results and explain what is still uncertain. Confidence comes from knowing the details.
- Put it into practice: Separate completed work, observed results and the next action.
- Put it into practice: Give a source and period when using numbers.
- Put it into practice: Name an unknown and explain how it will be checked.
- Avoid: Guaranteed rankings, invented results or unsupported superlatives.
- Avoid: Presenting a study, prototype or planned feature as ready.
- Avoid: Turning uncertainty into a footnote nobody can understand.
Instead of: Get to number one on Google and double your sales.
Write like this: We review how your business appears in search, identify what needs work and agree on the first changes.
Why it works: Describe the service without inventing an outcome or timeline.

### The same voice. A tone that fits the moment.

These are writing examples, not evidence of delivered results or commitments. Adapt facts, scope and product behavior before use.

- Website and service pages: Direct, welcoming and specific. Lead with the business need; explain scope before asking for a decision.
Instead of: The ultimate all-in-one solution for unstoppable success.
Write like this: Already have a website? We can assess your current setup and plan the search improvements it needs.
Why it works: A familiar question, an understandable service and a practical next step.

- Social posts and campaigns: Lively and conversational, with room for a small smile. One idea per piece. Let the caption add context instead of hiding the point.
Instead of: Your competition is crushing you. Act now before it’s too late!
Write like this: Your next customer may be searching while you’re serving the current one. Can they find your opening hours?
Why it works: Use a recognizable situation, not fear or mockery.

- Proposals and onboarding: Reassuring, organized and explicit. State deliverables, responsibilities, dependencies and the agreed next step.
Instead of: Relax. We handle everything.
Write like this: We’ll prepare the first draft. Please send your current logo files and confirm who will review it. We’ll agree on the review date together.
Why it works: Make each side’s responsibility clear without promising an undefined scope.

- Progress and results: Factual, readable and constructive. Separate work done, measured outcomes, missing data and next actions.
Instead of: Visibility is up. Your growth engine is working.
Write like this: We updated the service pages. Next, we’ll check whether more people find them in search and get in touch. We don’t have enough data to assess that yet.
Why it works: Make the distinction between an action and an outcome easy to understand.

- Support, errors and delays: Calm, empathetic and accountable. No humor. Say what happened, what the person can do and when to expect a confirmed update.
Instead of: Oops! Something went wrong. Try your luck again.
Write like this: We couldn’t send your request. Your answers are still here. Please try again.
Why it works: Use this wording only if answers really are preserved and retry is available. Otherwise describe the actual recovery path.

- Partners and white-label work: Collaborative, precise and respectful of the client’s brand. Name who speaks, who delivers and who handles the next step.
Instead of: The 6am way is the only way your clients should communicate.
Write like this: Let’s confirm the client’s voice, the scope and who reviews the work before we start.
Why it works: When writing for a client, their voice takes precedence. Do not add a 6am signature by default.

### The everyday writing rules.

- Write the first draft for a busy person, then read it aloud. Rewrite anything you would not naturally say.

- Use sentence case for headings and controls. All caps are for short visual labels, not for shouting in body copy.

- Prefer verbs and concrete nouns. Explain SEO, CRM or any other necessary term when first introduced to a non-specialist.

- Use contractions in English when they sound natural. In Brazilian Portuguese, address the reader directly and keep a conversational rhythm; localize the meaning instead of translating word for word.

- Use punctuation to clarify. Avoid strings of exclamation marks, ornamental emojis and invented urgency.

- Give a CTA that names the next step: “Explore website services”, “Send your request” or “Review the draft”. Use only actions the destination actually supports.

- For numbers and case studies, include the source, period and relevant limits. Use placeholders for missing facts in drafts, then resolve them before publication.

- Never turn a business owner into a stereotype. Use examples from their work without making assumptions about age, technical ability or ambition.

### Translate the jargon into the work.

- Leads: People who get in touch, enquiries or potential customers. Use “leads” with a team that already uses the term.

- Conversion: The actual action: a booking, a request or a purchase. Name what you are measuring.

- SEO: Help people find your business in search. Explain the term, then use SEO when useful.

- Automation: Describe the task: send a reminder after a booking. Mention only behavior the service actually supports.

- AI-powered: Explain what AI helps do and what a person reviews. Technology is a means, not evidence of a better result.

- Full service: List what is included and what needs a separate scope. Do not use “everything” as a substitute for scope.

### Before it goes out.

- Can the reader explain the main point after one read?

- Does the copy sound respectful when spoken to a business owner?

- Are the work, outcome and next step distinct and understandable?

- Can every claim, number and commitment be supported?

- Does the tone fit the person’s situation, especially if something went wrong?

- Are technical terms explained and unnecessary words removed?

- Do CTAs, error messages and promises match what the product actually does?

- For client or partner work, is the correct organization speaking?

Examples and guidance are ready to use as a pilot. Brand-owner approval and review of live communications are still pending.

## Usage rules

- Use existing semantic tokens and components before creating local styles.

- Use black text on lime. Reserve white text for dark backgrounds.

- Preserve the logo files. Do not redraw, stretch or recolor the brand.

- Use visible labels and explain errors beside the relevant field.

- Every element that looks actionable needs a real action and keyboard access.

- Do not invent clients, results, prices, testimonials or features.

- Check the version and organization before producing an asset. Pilot tokens still need validation.

## Lime draws attention. The base holds it.

Four brand colors, each with a job. Black and white organize the reading, graphite adds depth and lime highlights what matters.

Use the exact values. HEX and RGB describe the same sRGB color; tokens keep that choice consistent across the product.

- Ink: #0A0C00 / RGB 10, 12, 0 / --ds-ink. Dark foundation and primary text.

- White: #FFFFFF / RGB 255, 255, 255 / --ds-white. Light surfaces and text on dark backgrounds.

- Lime: #E3FF04 / RGB 227, 255, 4 / --ds-lime. Primary actions, selection and brand highlights.

- Graphite: #252525 / RGB 37, 37, 37 / --ds-support. Supporting dark surface.

- Paper: #F4F4F0 / RGB 244, 244, 240 / --ds-paper. Catalog workspace background.

- Secondary text: #60605A / RGB 96, 96, 90 / --ds-muted. Supporting text on light surfaces.

- Divider: #D9D9D1 / RGB 217, 217, 209 / --ds-line. Visual separation; do not use as text.

- Error: #A12622 / RGB 161, 38, 34 / --ds-error. Error messages and outlines, always with explanatory text.

### Match the intensity to the moment.

Choose a direction to see how the palette can be balanced. These proportions are pilot starting points, not a compulsory formula for every screen.

The bars express the intended balance of color areas, excluding photography. Previews illustrate compositions; they are not measurements of those percentages.

- Everyday clarity: Service pages, documents and forms. A light base gives the content room, while lime points to the next step. (white 70%, ink 20%, lime 10%)

- Depth with focus: Introductions, presentations and feature sections. White carries the message, graphite gives it structure and lime marks the action. (support 70%, white 20%, lime 10%)

- A moment of impact: Social covers, short announcements and campaigns. Use an expressive block, then return to a neutral base for longer content. (lime 70%, ink 20%, white 10%)

### A little light. A clear purpose.

Gradients add depth to the 6am palette. Start with solid surfaces, then choose one of these six recipes when a transition helps the composition.

Pilot recipes · digital sRGB

Create a 6am composition using this exact gradient recipe.

First light

Lime opens into white. Use for a short campaign message, a cover or an editorial divider.

Use ink lettering and the light-background logo. Keep the message short and inspect the finished layout.

background: linear-gradient(120deg, #E3FF04 0%, #FFFFFF 100%), #FFFFFF;

Apply the gradient in the layout or compositing step using the CSS below. Do not ask an image model to reproduce exact HEX values or draw the logo. Use the original logo asset from the brand catalog. Preserve the specified stops, opacity and layer order. Keep ordinary UI elements in solid colors. Validate the final crop and text contrast; this pilot recipe is not an accessibility or print approval.

/projects/6am/design/colors.json

/projects/6am/design/brand

Create a 6am composition using this exact gradient recipe.

Quiet depth

Graphite fades into ink. A restrained background for introductions, closing slides and service stories.

Use white lettering and the dark-background logo. Keep lime as a small, solid accent.

background: linear-gradient(135deg, #252525 0%, #0A0C00 100%), #0A0C00;

Apply the gradient in the layout or compositing step using the CSS below. Do not ask an image model to reproduce exact HEX values or draw the logo. Use the original logo asset from the brand catalog. Preserve the specified stops, opacity and layer order. Keep ordinary UI elements in solid colors. Validate the final crop and text contrast; this pilot recipe is not an accessibility or print approval.

/projects/6am/design/colors.json

/projects/6am/design/brand

Create a 6am composition using this exact gradient recipe.

Lime field

Two pools of lime on white create a soft, open background for campaign artwork.

Keep text and the full logo on a solid white or ink panel. Leave the light field as decoration.

background: radial-gradient(ellipse at 15% 20%, #E3FF04 0%, rgba(227, 255, 4, 0) 75%), radial-gradient(ellipse at 90% 90%, rgba(227, 255, 4, 0.45) 0%, rgba(227, 255, 4, 0) 65%), #FFFFFF;

Apply the gradient in the layout or compositing step using the CSS below. Do not ask an image model to reproduce exact HEX values or draw the logo. Use the original logo asset from the brand catalog. Preserve the specified stops, opacity and layer order. Keep ordinary UI elements in solid colors. Validate the final crop and text contrast; this pilot recipe is not an accessibility or print approval.

/projects/6am/design/colors.json

/projects/6am/design/brand

Create a 6am composition using this exact gradient recipe.

Night glow

A lime glow meets graphite on ink. Use for a single expressive cover or transition.

Place text and the full logo on an opaque panel. Do not infer contrast from the dark base alone.

background: radial-gradient(ellipse at 90% 15%, rgba(227, 255, 4, 0.55) 0%, rgba(227, 255, 4, 0) 65%), radial-gradient(ellipse at 10% 90%, #252525 0%, rgba(37, 37, 37, 0) 70%), #0A0C00;

Apply the gradient in the layout or compositing step using the CSS below. Do not ask an image model to reproduce exact HEX values or draw the logo. Use the original logo asset from the brand catalog. Preserve the specified stops, opacity and layer order. Keep ordinary UI elements in solid colors. Validate the final crop and text contrast; this pilot recipe is not an accessibility or print approval.

/projects/6am/design/colors.json

/projects/6am/design/brand

Create a 6am composition using this exact gradient recipe.

Ink overlay

A solid ink edge fades into the image. Use when light text needs a quiet area beside the subject.

Place white text inside the opaque first quarter, or use a solid ink panel. Keep faces and important details beyond the fade.

background: linear-gradient(90deg, #0A0C00 0%, #0A0C00 25%, rgba(10, 12, 0, 0) 70%);

Apply the gradient in the layout or compositing step using the CSS below. Do not ask an image model to reproduce exact HEX values or draw the logo. Use the original logo asset from the brand catalog. Preserve the specified stops, opacity and layer order. Keep ordinary UI elements in solid colors. Validate the final crop and text contrast; this pilot recipe is not an accessibility or print approval.

/projects/6am/design/colors.json

/projects/6am/design/brand

Create a 6am composition using this exact gradient recipe.

White overlay

A solid white edge opens into the image. Use for an airy composition with dark lettering.

Place ink text inside the opaque first quarter, or use a solid white panel. Do not wash out skin, products or evidence.

background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 25%, rgba(255, 255, 255, 0) 70%);

Apply the gradient in the layout or compositing step using the CSS below. Do not ask an image model to reproduce exact HEX values or draw the logo. Use the original logo asset from the brand catalog. Preserve the specified stops, opacity and layer order. Keep ordinary UI elements in solid colors. Validate the final crop and text contrast; this pilot recipe is not an accessibility or print approval.

/projects/6am/design/colors.json

/projects/6am/design/brand

Use only these recipes and their published stops. Interpolated shades are part of the effect, not new brand tokens.

Keep logos, icons, body text, buttons, forms and charts in solid colors. The illustration styles keep their own flat-color rules.

Do not combine several gradients, add rainbow colors or animate the field. Let one treatment carry the composition.

Measure contrast behind every text area in the final composition. Checking only the start and end colors is not enough, especially over images.

Use an opaque panel when contrast is uncertain. Preview mobile crops and exported files; print use still requires a physical proof.

Use the photographic compositions below to see opacity, message placement and the official logo together.

### Photography, gradient, message.

A gradual fade creates a quiet space for the message while keeping the professional and their work in view. Choose a light or dark composition to see the matching logo.

This photo composition extends the opaque area to 36% and fades out at 65%. It is a separate layout recipe from the basic overlay tokens.

Keep the message and logo within the opaque area. The transition starts after the reading area, away from the face.

Fade the overlay to transparency; preserve natural skin tones, hands and the object being made. This is a local overlay, not a duotone treatment.

Keep the original logo proportions and a clear margin around it. Use the white-lettering asset on ink and the dark-lettering asset on white.

On narrow layouts, put the message on a solid surface below the photo. Review the crop and contrast again when changing the image.

Dark overlay

```html
<style>
.sixam-photo-composition { container-type: inline-size; }
.sixam-photo-scene { position: relative; aspect-ratio: 16/10; background: #0A0C00; color: #FFFFFF; overflow: hidden; }
.sixam-photo-composition .sixam-photo-scene > img { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.sixam-photo-fade { position: absolute; inset: 0; background: linear-gradient(90deg, #0A0C00 0%, #0A0C00 36%, rgba(10, 12, 0, 0) 65%); }
.sixam-photo-message { position: absolute; left: 6%; width: 28%; top: 10%; bottom: 10%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sixam-photo-message h2 { margin: 0; white-space: pre-line; font: 800 clamp(32px, 5cqw, 64px)/1.05 var(--6am-font-display, sans-serif); }
.sixam-photo-message p { margin: 16px 0 0; font: 16px/1.5 sans-serif; }
.sixam-photo-message img { width: 120px; height: auto; }
@container (max-width: 640px) {
  .sixam-photo-scene { aspect-ratio: auto; }
  .sixam-photo-composition .sixam-photo-scene > img { position: relative; aspect-ratio: 3/2; height: auto; }
  .sixam-photo-fade { bottom: auto; width: 100%; aspect-ratio: 3/2; }
  .sixam-photo-message { position: relative; inset: auto; width: auto; padding: 32px; }
}
</style>
<figure class="sixam-photo-composition">
  <div class="sixam-photo-scene">
    <img src="/assets/design/6am/photography/ceramics-workshop-ai.png" alt="AI-generated scene of an artisan inspecting a ceramic bowl in a naturally lit workshop." width="1536" height="1024">
    <div class="sixam-photo-fade" aria-hidden="true"></div>
    <div class="sixam-photo-message">
      <div><h2>Good work.
In focus.</h2><p>Space for the people behind every good idea.</p></div>
      <img src="/assets/img/logo/logo-6am-white.svg" width="120" height="24" alt="6am">
    </div>
  </div>
  <figcaption>AI-generated demonstration scene. It does not depict a real 6am client, team member or project.</figcaption>
</figure>
```

Light overlay

```html
<style>
.sixam-photo-composition { container-type: inline-size; }
.sixam-photo-scene { position: relative; aspect-ratio: 16/10; background: #FFFFFF; color: #0A0C00; overflow: hidden; }
.sixam-photo-composition .sixam-photo-scene > img { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.sixam-photo-fade { position: absolute; inset: 0; background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 36%, rgba(255, 255, 255, 0) 65%); }
.sixam-photo-message { position: absolute; left: 6%; width: 28%; top: 10%; bottom: 10%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sixam-photo-message h2 { margin: 0; white-space: pre-line; font: 800 clamp(32px, 5cqw, 64px)/1.05 var(--6am-font-display, sans-serif); }
.sixam-photo-message p { margin: 16px 0 0; font: 16px/1.5 sans-serif; }
.sixam-photo-message img { width: 120px; height: auto; }
@container (max-width: 640px) {
  .sixam-photo-scene { aspect-ratio: auto; }
  .sixam-photo-composition .sixam-photo-scene > img { position: relative; aspect-ratio: 3/2; height: auto; }
  .sixam-photo-fade { bottom: auto; width: 100%; aspect-ratio: 3/2; }
  .sixam-photo-message { position: relative; inset: auto; width: auto; padding: 32px; }
}
</style>
<figure class="sixam-photo-composition">
  <div class="sixam-photo-scene">
    <img src="/assets/design/6am/photography/ceramics-workshop-ai.png" alt="AI-generated scene of an artisan inspecting a ceramic bowl in a naturally lit workshop." width="1536" height="1024">
    <div class="sixam-photo-fade" aria-hidden="true"></div>
    <div class="sixam-photo-message">
      <div><h2>Good work.
In focus.</h2><p>Space for the people behind every good idea.</p></div>
      <img src="/assets/img/logo/logo-6am-dark.svg" width="120" height="24" alt="6am">
    </div>
  </div>
  <figcaption>AI-generated demonstration scene. It does not depict a real 6am client, team member or project.</figcaption>
</figure>
```

### Check before you publish.

Use at least 4.5:1 for normal text. Large text needs 3:1: at least 24 px, or 18.67 px in bold. Visual details needed to identify controls and information need 3:1 against the relevant adjacent colors.

Calculated for two opaque, solid sRGB colors. Transparency, photos, gradients, focus and states need checks in their final context. A passing pair does not certify the accessibility of a page.

- ink / white: 19.71:1; AA normal true; AA large true

- ink / lime: 17.43:1; AA normal true; AA large true

- white / support: 15.33:1; AA normal true; AA large true

- muted / paper: 5.74:1; AA normal true; AA large true

- white / lime: 1.13:1; AA normal false; AA large false

- ink / support: 1.29:1; AA normal false; AA large false

### Two greens. Different jobs.

Lime #E3FF04 is the accent for interfaces and communications. The green #C4E86B belongs to the existing logo and icon files. It is not a second accent color for buttons.

Use the brand files without recoloring them. On the lime-background variant, the colon is white and the lettering is black. A logo color exception is not a rule for interface text.

### Color helps. Meaning comes first.

Reinforce a message that is already clear through words, symbols or position. Red should not be the only clue to an error; lime does not automatically mean success.

Labels, values and outlines keep the chart understandable without relying on lime. These numbers are fictional.

### Purposeful color. Solid by default.

Start with solid surfaces. When the composition needs depth, use the pilot gradient recipes on this page. New tint scales are not yet defined.

In photos, preserve the natural colors of people and materials. Adjust the message background without turning the whole scene lime.

Give lime one clear priority. Across a series, alternate expressive moments with neutral surfaces.

The divider tone is decorative. For essential field and control boundaries, choose a color with sufficient contrast.

### The screen is a reference. Print needs its own proof.

HEX and RGB in sRGB are the reference values. Preserve the profile when exporting and check the result on the target device.

We do not yet have approved CMYK or Pantone equivalents. Do not automatically convert lime and publish the result as official. Screen brightness can look very different on paper.

Agree on paper, finish, printing process and color profile with the supplier.

Compare a physical proof with the brand intent and record adjustments.

Record the validated formula and material in the system before reusing them.

The four brand colors remain approved. Proportions, functional tones and production guidance are in pilot; print equivalents remain pending.

/projects/6am/design/colors.json

## Colors

- ink: #0A0C00 — Dark foundation and primary text. (Approved)

- white: #FFFFFF — Light surfaces and text on dark backgrounds. (Approved)

- lime: #E3FF04 — Primary actions, selection and brand highlights. (Approved)

- support: #252525 — Supporting dark surface. (Approved)

- paper: #F4F4F0 — Catalog workspace background. (Pilot)

- muted: #60605A — Supporting text on light surfaces. (Pilot)

- line: #D9D9D1 — Visual separation; do not use as text. (Pilot)

- error: #A12622 — Error messages and outlines, always with explanatory text. (Pilot)

## Presence in the headline. Ease in every word.

Our type has a job to do: get attention, explain the useful detail and make the next step clear. Start with Big Shoulders and Onest; bring in the other voices only when they help.

Create a 6am composition using the role specifications below. Preserve the actual copy, use real text where possible, and select the correct semantic heading levels. Load the intended font weights and styles before measuring. Do not reconstruct the logo with a font. Keep copy editable, inspect the final output at its intended size, and reflow rather than shrinking important text to make it fit.

Big Shoulders: Expressive headings and opening messages. Big Shoulders 800 for short headlines. Keep it out of continuous reading. Avoid synthetic italics and never compress the letters manually. Fallback: Arial, sans-serif.

Onest: Paragraphs, navigation, buttons and forms. Onest 400 for reading, 600 for labels and 700 for occasional emphasis. Use only weights loaded by the project. Fallback: Arial, sans-serif.

Fraunces: Occasional editorial emphasis, in italic. Fraunces 500 in true italic. The project loads italic only; do not simulate a roman style or use it in forms. Fallback: Georgia, serif.

Geist Mono: Versions, values and technical references. Geist Mono 400 for values and code, 500–600 when needed. Align comparable values to the same edge. Fallback: "Courier New", monospace.

These pilot web roles define size, weight, line height, tracking and reading width. Responsive values grow between 360 and 1200 px viewports; fixed roles keep their size. REM values follow the reader’s font settings.

The px labels assume a 16 px root font size. “ch” is a font-relative width, not a fixed character count. Keep the correct HTML heading level even when a different visual role is needed.

### Opening headline
One clear promise. Aim for two or three lines; edit before making the type smaller.

```css
font-family: var(--6am-font-display, "Big Shoulders", Impact, sans-serif);
font-size: clamp(2.75rem, 1.892857rem + 3.809524vw, 4.75rem);
font-weight: 800;
font-style: normal;
line-height: 1.02;
letter-spacing: -0.02em;
max-width: 20ch;
overflow-wrap: anywhere;
```

### Section title
Introduce the next subject. Keep visual size separate from semantic heading level.

```css
font-family: var(--6am-font-display, "Big Shoulders", Impact, sans-serif);
font-size: clamp(1.75rem, 1.428571rem + 1.428571vw, 2.5rem);
font-weight: 800;
font-style: normal;
line-height: 1.12;
letter-spacing: -0.02em;
max-width: 28ch;
overflow-wrap: anywhere;
```

### Subheading
Explain a group of content or name a useful detail.

```css
font-family: var(--6am-font-body, "Onest", Arial, sans-serif);
font-size: clamp(1.375rem, 1.214286rem + 0.714286vw, 1.75rem);
font-weight: 600;
font-style: normal;
line-height: 1.3;
letter-spacing: 0em;
max-width: 40ch;
overflow-wrap: anywhere;
```

### Lead paragraph
Bridge the headline and the detail. Keep it to a short paragraph.

```css
font-family: var(--6am-font-body, "Onest", Arial, sans-serif);
font-size: clamp(1.125rem, 1.017857rem + 0.47619vw, 1.375rem);
font-weight: 400;
font-style: normal;
line-height: 1.5;
letter-spacing: 0em;
max-width: 55ch;
overflow-wrap: anywhere;
```

### Body copy
Use for explanations and continuous reading. Keep a comfortable line length.

```css
font-family: var(--6am-font-body, "Onest", Arial, sans-serif);
font-size: 1rem;
font-weight: 400;
font-style: normal;
line-height: 1.6;
letter-spacing: 0em;
max-width: 65ch;
overflow-wrap: anywhere;
```

### Labels and actions
Use sentence case and a clear action. Let labels wrap; keep form inputs at 16 px or more.

```css
font-family: var(--6am-font-body, "Onest", Arial, sans-serif);
font-size: 1rem;
font-weight: 600;
font-style: normal;
line-height: 1.4;
letter-spacing: 0em;
max-width: 40ch;
overflow-wrap: anywhere;
```

### Caption
Explain supporting details. Never hide essential instructions in small print.

```css
font-family: var(--6am-font-body, "Onest", Arial, sans-serif);
font-size: 0.875rem;
font-weight: 400;
font-style: normal;
line-height: 1.5;
letter-spacing: 0em;
max-width: 65ch;
overflow-wrap: anywhere;
```

### Metadata and code
Reserve for versions, tokens and technical values. Do not set paragraphs in mono.

```css
font-family: var(--6am-font-mono, "Geist Mono", monospace);
font-size: 0.75rem;
font-weight: 400;
font-style: normal;
line-height: 1.6;
letter-spacing: 0.02em;
max-width: 65ch;
overflow-wrap: anywhere;
```

### Editorial accent
Use a short italic phrase once in a composition. Keep the main message in the primary families.

```css
font-family: var(--6am-font-accent, "Fraunces", Georgia, serif);
font-size: clamp(1.75rem, 1.428571rem + 1.428571vw, 2.5rem);
font-weight: 500;
font-style: italic;
line-height: 1.2;
letter-spacing: 0em;
max-width: 28ch;
overflow-wrap: anywhere;
```

Left-align paragraphs and related labels. Center only a short, self-contained statement; avoid justified body text.

Aim for roughly 45–75 characters per line in long reading, using the 65ch body measure as a starting point. Let narrow screens wrap naturally.

Keep body tracking at zero and line height at 1.6. Tight headline spacing belongs to short display copy; it should never make accents or letters collide.

Use sentence case for headlines, labels and actions. Uppercase is for short metadata; avoid paragraphs in capitals.

Break headlines at a meaningful phrase. Avoid a single stranded word when practical, but do not force desktop line breaks onto mobile screens.

Use one emphasis at a time: weight, a short italic phrase or a solid highlight. Do not stretch letters, outline body copy or apply gradients to text.

Keep text containers flexible. Check longer translations, accented characters, user text enlargement and line-spacing overrides without clipping or hiding content.

### Web pages and forms
Use the responsive scale on this page. Keep one h1 per page, then a logical heading outline. Use Onest for instructions, errors and actions. Keep important text as HTML.

### Social posts and Stories
Use Big Shoulders for a short headline and Onest for the detail. Follow the social template sizes and safe areas; web CSS pixels are not a 1080 px canvas specification. Check the exported post at phone size.

### Presentations and print
Keep a strong title/body contrast. For a pilot slide, start at 36–48 pt for titles and 20–24 pt for body, then check from viewing distance. For printed reading, start at 11–12 pt and proof the actual format; these are starting points, not approved print minima.

### Email and shared documents
If brand fonts are unavailable, use Arial Bold for headings and Arial Regular for body. Use Georgia Italic for an optional editorial phrase and Courier New for code. Recheck line breaks and page count after substitution.

Copy the complete type guide or use the structured roles and CSS tokens. Font-family declarations do not install fonts. The site serves its font files through next/font; a portable font download package is still pending.

Pilot specification. Applying these roles consistently across every page, checking all fallback environments and preparing font packages remain open work.

/projects/6am/design/typography.json

## Room to understand. Motion that explains.

Space tells people what belongs together. Motion shows what changed. Use both to make the next step easier to see.

Build a 6am layout using the following pilot specification. Reuse the existing spacing steps and responsive rules. Preserve semantic reading order, visible focus, natural content height and usable touch targets. Use motion only after a user action and honor reduced-motion preferences. Use the original logo asset and its clear space; keep social safe areas from the relevant template.

Reuse the existing 4–96 px steps. A small gap connects details; a larger one separates decisions. Choose a role before choosing a number.

Close details: 4 / 8 px. Icon and label, label and help text.

Related content: 16 / 24 px. Heading, explanation and action for the same decision.

Room inside a block: 24 / 32 px. Card and panel padding, without squeezing the reading.

A change of subject: 48 / 64 / 96 px. Distance between groups and sections; increase it when the subject changes.

Compact

```css
.ds-spaced-card {
  padding: var(--ds-space-24);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-16);
}
.ds-spaced-card > * { margin: 0; }
```

Comfortable

```css
.ds-spaced-card {
  padding: var(--ds-space-32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-24);
}
.ds-spaced-card > * { margin: 0; }
```

Use 4, 8 or 12 columns as the viewport grows. Align related text, images and actions to the same edges. The content container stops at 1200 px, excluding its outer margins.

This is a scaled grid diagram, not a device simulator. The numbers describe the actual CSS recipe. Cards stack on small screens, use two columns on medium screens and three on large screens.

```css
.ds-layout {
  --layout-columns: 4;
  --layout-gutter: 16px;
  --layout-margin: 16px;
  --layout-card-span: 4;
  width: calc(100% - var(--layout-margin) * 2);
  max-width: 1200px;
  margin-inline: auto;
}
.ds-layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  gap: var(--layout-gutter);
}
.ds-layout-card { grid-column: span var(--layout-card-span); min-width: 0; }
@media (min-width: 640px) {
  .ds-layout {
  --layout-columns: 8;
  --layout-gutter: 24px;
  --layout-margin: 24px;
  --layout-card-span: 4;
  }
}
@media (min-width: 1024px) {
  .ds-layout {
  --layout-columns: 12;
  --layout-gutter: 24px;
  --layout-margin: 32px;
  --layout-card-span: 4;
  }
}
```

Stack content in its reading order. Do not visually reorder cards away from keyboard and document order.

Let content determine height. Long copy, validation messages and translated labels need room to grow.

Use 48 px between sections on narrow layouts and 64–96 px on larger layouts as starting points. Related elements stay closer together.

Keep one shared alignment edge for a heading, its body and its action. Center a short statement only when the composition calls for it.

Keep essential controls comfortably sized; use a 44 × 44 px touch target as the pilot default. Do not confuse icon size with hit area.

Use the social templates’ safe areas for feed and Stories, and the logo’s own clear-space rules. A web gutter does not replace either.

These pilot z-index values belong inside an isolated component or page context. They are not a promise that a number can escape a parent stacking context. Prefer the browser’s native dialog behavior for modals.

Content: z-index 0. Normal flow and local decorative elements.

Sticky navigation: z-index 10. Header or navigation, without hiding focused content.

Contextual menu: z-index 20. Menus close to their originating control.

Modal backdrop: z-index 30. A backdrop separates a dialog from the rest of the page.

Dialog: z-index 40. Modal content; manage focus, Escape and return to the trigger.

Keep the existing 220 ms easing as the default. Use a quicker response for small controls, or a little more time for a small reveal. The duration never delays the action itself.

Quick response: 120 ms / 4 px. Short feedback on small controls.

State change: 220 ms / 4 px. The existing reference for hover, focus and selection.

Detail reveal: 320 ms / 8 px. Reveal a small panel after an explicit action.

```css
.ds-motion-demo .ds-motion-trigger {
  background: var(--ds-white); color: var(--ds-ink);
  transition: background-color var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1), color var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-motion-demo .ds-motion-trigger:is(:hover, :focus-visible),
.ds-motion-demo[data-open="true"] .ds-motion-trigger { background: var(--ds-lime); }
.ds-motion-demo .ds-motion-trigger:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 4px; }
.ds-motion-demo .ds-motion-trigger svg { transition: transform var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1); }
.ds-motion-demo[data-open="true"] .ds-motion-trigger svg { transform: translateX(var(--demo-offset, 4px)); }
.ds-motion-demo[data-open="true"] .ds-motion-panel { animation: ds-detail-enter var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes ds-detail-enter { from { opacity: 0; transform: translateY(var(--demo-offset, 4px)); } to { opacity: 1; transform: none; } }
.ds-motion-demo[data-reduced="true"] *,
.ds-motion-demo[data-reduced="true"] .ds-motion-trigger svg { transition: none !important; animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ds-motion-demo *, .ds-motion-demo .ds-motion-trigger svg { transition: none !important; animation: none !important; transform: none !important; }
}
```

This demo does not loop or autoplay. Your operating-system preference always wins; the switch can only reduce motion further. Content and button state remain available in both modes.

Animate only the properties that explain a state: color, opacity and a small transform. Avoid transition: all, fixed-height reveals and layout shifts that move a target under the pointer.

Keep keyboard focus visible immediately. A hover effect must have a keyboard equivalent; do not hide an action until hover.

Do not make reading depend on a timed reveal. Avoid parallax, bouncing loops and automatic carousels in this pilot.

With prefers-reduced-motion: reduce, remove transitions, entrance animations and spatial offsets. Keep the final content, labels and selected state.

For dialogs and menus, motion is only one part of the behavior. Implement focus handling, dismissal and the correct semantics before adding animation.

Motion markup: .ds-motion-demo contains a button.ds-motion-trigger with aria-expanded / aria-controls and a .ds-motion-panel with hidden when closed. Toggle data-open on the container and the panel hidden state together. data-reduced="true" may reduce motion further; never override the OS preference. Set --demo-duration and --demo-offset from the chosen recipe. JavaScript must keep those states synchronized.

Pilot specification. Existing pages still need a spacing and layering audit; broader keyboard, zoom and reduced-motion checks remain open.

/projects/6am/design/layout.json

## 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.

Create a 6am composition with blocks from this library. Use one family and one listed color pairing, preserve the SVG aspect ratio and keep text editable. Do not recreate the logo. At narrow widths, separate the motif from the content. Consult the catalog’s logo, color, typography and spacing rules.

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.

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

### 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.

### 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.

### 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.

### 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.

### 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.

### 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.

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

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

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

bookends-solid-lime-on-ink: /assets/design/6am/blocks/bookends-solid-lime-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #E3FF04)

bookends-solid-ink-on-lime: /assets/design/6am/blocks/bookends-solid-ink-on-lime.svg (SVG 960 × 640; background #E3FF04; motif #0A0C00)

bookends-solid-ink-on-paper: /assets/design/6am/blocks/bookends-solid-ink-on-paper.svg (SVG 960 × 640; background #F4F4F0; motif #0A0C00)

bookends-solid-white-on-ink: /assets/design/6am/blocks/bookends-solid-white-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #FFFFFF)

bookends-outline-lime-on-ink: /assets/design/6am/blocks/bookends-outline-lime-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #E3FF04)

bookends-outline-ink-on-lime: /assets/design/6am/blocks/bookends-outline-ink-on-lime.svg (SVG 960 × 640; background #E3FF04; motif #0A0C00)

bookends-outline-ink-on-paper: /assets/design/6am/blocks/bookends-outline-ink-on-paper.svg (SVG 960 × 640; background #F4F4F0; motif #0A0C00)

bookends-outline-white-on-ink: /assets/design/6am/blocks/bookends-outline-white-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #FFFFFF)

steps-solid-lime-on-ink: /assets/design/6am/blocks/steps-solid-lime-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #E3FF04)

steps-solid-ink-on-lime: /assets/design/6am/blocks/steps-solid-ink-on-lime.svg (SVG 960 × 640; background #E3FF04; motif #0A0C00)

steps-solid-ink-on-paper: /assets/design/6am/blocks/steps-solid-ink-on-paper.svg (SVG 960 × 640; background #F4F4F0; motif #0A0C00)

steps-solid-white-on-ink: /assets/design/6am/blocks/steps-solid-white-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #FFFFFF)

steps-outline-lime-on-ink: /assets/design/6am/blocks/steps-outline-lime-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #E3FF04)

steps-outline-ink-on-lime: /assets/design/6am/blocks/steps-outline-ink-on-lime.svg (SVG 960 × 640; background #E3FF04; motif #0A0C00)

steps-outline-ink-on-paper: /assets/design/6am/blocks/steps-outline-ink-on-paper.svg (SVG 960 × 640; background #F4F4F0; motif #0A0C00)

steps-outline-white-on-ink: /assets/design/6am/blocks/steps-outline-white-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #FFFFFF)

windows-solid-lime-on-ink: /assets/design/6am/blocks/windows-solid-lime-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #E3FF04)

windows-solid-ink-on-lime: /assets/design/6am/blocks/windows-solid-ink-on-lime.svg (SVG 960 × 640; background #E3FF04; motif #0A0C00)

windows-solid-ink-on-paper: /assets/design/6am/blocks/windows-solid-ink-on-paper.svg (SVG 960 × 640; background #F4F4F0; motif #0A0C00)

windows-solid-white-on-ink: /assets/design/6am/blocks/windows-solid-white-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #FFFFFF)

windows-outline-lime-on-ink: /assets/design/6am/blocks/windows-outline-lime-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #E3FF04)

windows-outline-ink-on-lime: /assets/design/6am/blocks/windows-outline-ink-on-lime.svg (SVG 960 × 640; background #E3FF04; motif #0A0C00)

windows-outline-ink-on-paper: /assets/design/6am/blocks/windows-outline-ink-on-paper.svg (SVG 960 × 640; background #F4F4F0; motif #0A0C00)

windows-outline-white-on-ink: /assets/design/6am/blocks/windows-outline-white-on-ink.svg (SVG 960 × 640; background #0A0C00; motif #FFFFFF)

```html
<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.

/projects/6am/design/blocks.json

## Small signs. Clear meaning.

A shared language for actions, services, people and systems. Explore 52 original line icons, test their scale and take the same SVG into a layout or a working interface.

24 × 24 grid · 1.7 stroke · square caps

Use 16–24 px beside text and controls, 32–48 px in explanatory content. Strokes scale with the SVG. Keep the original viewBox and proportions.

Draw on the 24 px grid with a 1.7-unit stroke, square caps and miter joins. Leave room inside the frame; preserve the original geometry.

Use a single solid color inherited from the surrounding text. Ink on white or lime; white on ink. Avoid gradients, shadows and individual multicolor parts.

Use familiar symbols for familiar actions. Pair them with visible labels when meaning is uncertain; do not use the robot to represent every AI feature.

Decorative icons stay hidden from screen readers. An icon-only button needs an accessible name on the button and a usable hit area, at least 44 × 44 px in this library’s examples.

Use words alongside status icons. Color and a check mark alone cannot explain a successful action or an error.

Utility icons belong to interfaces and supporting content. The 6am brand icon and logo keep their separate identity rules and original files.

DsIcon is decorative by default. Put the action name on its parent button; an SVG used as meaningful standalone content needs an accessible text alternative. Inline SVG inherits currentColor; an external SVG loaded with img does not inherit the page text color. Use inline markup when you need the icon to follow the surrounding color.

```jsx
import { DsIcon } from "@/components/design-system/Primitives";
<DsIcon name="search" width={24} height={24} />
```

- arrow · Diagonal arrow · navigation: /assets/design/6am/icons/arrow.svg

- chevron-left · Previous · navigation: /assets/design/6am/icons/chevron-left.svg

- chevron-right · Next · navigation: /assets/design/6am/icons/chevron-right.svg

- chevron-up · Collapse · navigation: /assets/design/6am/icons/chevron-up.svg

- chevron-down · Expand · navigation: /assets/design/6am/icons/chevron-down.svg

- home · Home · navigation: /assets/design/6am/icons/home.svg

- menu · Menu · navigation: /assets/design/6am/icons/menu.svg

- external · External link · navigation: /assets/design/6am/icons/external.svg

- copy · Copy · actions: /assets/design/6am/icons/copy.svg

- check · Confirm · actions: /assets/design/6am/icons/check.svg

- plus · Add · actions: /assets/design/6am/icons/plus.svg

- close · Close · actions: /assets/design/6am/icons/close.svg

- download · Download · actions: /assets/design/6am/icons/download.svg

- upload · Upload · actions: /assets/design/6am/icons/upload.svg

- edit · Edit · actions: /assets/design/6am/icons/edit.svg

- search · Search · actions: /assets/design/6am/icons/search.svg

- mail · Email · communication: /assets/design/6am/icons/mail.svg

- message · Message · communication: /assets/design/6am/icons/message.svg

- phone · Phone · communication: /assets/design/6am/icons/phone.svg

- send · Send · communication: /assets/design/6am/icons/send.svg

- bell · Notification · communication: /assets/design/6am/icons/bell.svg

- megaphone · Campaign · communication: /assets/design/6am/icons/megaphone.svg

- video · Video · communication: /assets/design/6am/icons/video.svg

- globe · Website · communication: /assets/design/6am/icons/globe.svg

- briefcase · Services · business: /assets/design/6am/icons/briefcase.svg

- store · Store · business: /assets/design/6am/icons/store.svg

- bag · Purchase · business: /assets/design/6am/icons/bag.svg

- cart · Cart · business: /assets/design/6am/icons/cart.svg

- card · Payment · business: /assets/design/6am/icons/card.svg

- receipt · Receipt · business: /assets/design/6am/icons/receipt.svg

- calendar · Calendar · business: /assets/design/6am/icons/calendar.svg

- clock · Time · business: /assets/design/6am/icons/clock.svg

- chart-bar · Bar chart · data: /assets/design/6am/icons/chart-bar.svg

- trend · Growth · data: /assets/design/6am/icons/trend.svg

- pie · Distribution · data: /assets/design/6am/icons/pie.svg

- target · Goal · data: /assets/design/6am/icons/target.svg

- filter · Filter · data: /assets/design/6am/icons/filter.svg

- layers · Layers · data: /assets/design/6am/icons/layers.svg

- grid · Grid · data: /assets/design/6am/icons/grid.svg

- list · List · data: /assets/design/6am/icons/list.svg

- users · Team · systems: /assets/design/6am/icons/users.svg

- user · Person · systems: /assets/design/6am/icons/user.svg

- settings · Settings · systems: /assets/design/6am/icons/settings.svg

- shield · Protection · systems: /assets/design/6am/icons/shield.svg

- lock · Privacy · systems: /assets/design/6am/icons/lock.svg

- link · Connection · systems: /assets/design/6am/icons/link.svg

- code · Code · systems: /assets/design/6am/icons/code.svg

- workflow · Workflow · systems: /assets/design/6am/icons/workflow.svg

- cpu · Processing · systems: /assets/design/6am/icons/cpu.svg

- robot · Assistant · systems: /assets/design/6am/icons/robot.svg

- sparkles · Smart suggestion · systems: /assets/design/6am/icons/sparkles.svg

- automation · Automation · systems: /assets/design/6am/icons/automation.svg

Pilot library. Review new symbols in context before expanding the set.

/projects/6am/design/icons.json

## The brand, out in the world.

A collection of real work, with the decisions behind it. Use approved applications to guide the next piece, then review it against the current brand manual.

Each reference records the final asset, its version, the applicable brand version, the approver and the approval evidence. Only complete approvals for the current manual enter the AI reference set.

01 / Record the final version: Keep a direct asset URL, a stable revision and the context in which the piece will be used.

02 / Record the decision: Link the reviewer, approval date and decision evidence to the exact asset revision and brand version.

03 / Explain what to reuse: Describe why the piece works and where its composition is useful. Approved artwork guides judgment; it does not override the manual.

No real applications with a recorded approval have been added yet. The catalog’s demonstrations are not part of this collection.

Brand and logo: Use an official logo variant, preserve proportions and check clear space and minimum size.
/projects/6am/design/brand

Color and contrast: Compare colors with the palette. Check the final text background, including photos and gradients.
/projects/6am/design/colors

Typography and hierarchy: Use the defined font roles, readable sizes and a clear order of reading.
/projects/6am/design/typography

Space and composition: Check alignment, spacing and the crop in the intended format. Keep content within its safe area.
/projects/6am/design/layout

Image direction: Check the chosen photographic or illustration language, provenance and any treatment against its corresponding guide.
/projects/6am/design/photography

Icons and graphic elements: Use consistent symbols and the published block recipes. Keep graphics subordinate to the message.
/projects/6am/design/icons

Message and voice: Check clarity, tone and factual claims. Do not introduce unsupported promises or invented results.
/projects/6am/design/tone-of-voice

Final application: Inspect the actual output at its intended size. Check cropping, spelling, links and platform-specific requirements.
/projects/6am/design/social

Open an image and assess it alongside the manual. These are your recorded checks, not automated visual analysis or a brand approval.

A completed checklist never adds a piece to the approved library. Approval is a separate, recorded decision.

Do not claim to have inspected an image you cannot access. For each criterion, cite the relevant rule, describe visible evidence and propose a concrete adjustment. Distinguish measured facts, visual judgments and missing information. Do not approve, publish or add the candidate to the reference library.

/projects/6am/design/applications.json

## Real work has a story.

Editorial photography of professionals in action: serving, preparing, repairing and making decisions. Show the person, the gesture and the workplace with energy, proximity and the business’s own colors.

Capture the action: Preparing a dish, serving a customer, packing an order or checking a repair. Choose a specific moment with a clear gesture and a visible purpose.

Get close to the work: Use eye-level, medium and close views that connect people, hands, tools and customers. Let the workplace give context; a camera-facing portrait is not the default.

Keep the business’s own colors: Keep the colors of clothing, food, products and interiors. Use believable ambient light or controlled flash, with clear contrast and texture. The setting does not need to match the brand palette.

Photographic language: Use photographic detail, real-world proportions and believable optics. Exclude drawings, painting, vector art, collage, 3D renders and stylized skin. If generated with AI, keep the photographic appearance and identify its synthetic origin.

People in action: Show a recognizable task, attentive expressions and natural relationships. Preserve faces, hands and tools; technology takes part without becoming a spectacle.

Places that explain: Include enough of the setting to understand the work. Order does not require erasing signs of use. Avoid generic offices that could belong to any brand.

Texture that brings us closer: Explore paper, wood, fabric, metal and real business surfaces. Choose details that explain the process. A close-up unrelated to the story becomes decoration.

Believable light: Use ambient light or controlled flash consistent with the setting. Keep skin and materials recognizable, with clear contrast and shadow detail. Avoid blown highlights and exaggerated cinematic grading.

Faithful skin and materials: Adjust exposure and white balance before stylizing. Preserve skin tones and product colors. Lime may appear in a real detail without tinting the entire scene.

Contrast without exaggeration: Keep texture and small imperfections. Avoid skin smoothing, sharpening halos and crushed shadows that hide the action.

Consistency across the sequence: Combine photos with compatible light and color temperature. Alternate wide shots, medium shots and details. A sequence should feel like one story.

Compare formats before choosing a photo. The face, gesture and tool must remain legible. Adjust the focal point for each layout; do not rely on an automatic center crop.

Position is relative to the crop’s excess space: 0% aligns left, 100% right. At 3:2, the full image fits and the control has no effect.

Compare the same framing. Duotone maps shadows and highlights to two palette colors; it is not a translucent green overlay. Use it as an occasional editorial treatment without losing detail.

Natural color: Default for people, products, testimonials and case studies. Preserves color information that helps people recognize the work.

```html
<img src="/assets/design/6am/photography/ceramics-workshop-ai.png" width="1536" height="1024" alt="AI-generated scene of an artisan inspecting a ceramic bowl in a naturally lit workshop." style="display:block;width:100%;height:auto;">
<!-- AI-generated demonstration scene. It does not depict a real 6am client, team member or project. -->
```

Black and white: Editorial alternative when shape and gesture matter more than color. Avoid when color identifies a product, material or condition.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" aria-hidden="true" style="position:absolute"><defs><filter id="ds-6am-photo-mono" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB"><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncR type="table" tableValues="0.0392156862745098 1"/><feFuncG type="table" tableValues="0.047058823529411764 1"/><feFuncB type="table" tableValues="0 1"/></feComponentTransfer></filter></defs></svg>
<img src="/assets/design/6am/photography/ceramics-workshop-ai.png" width="1536" height="1024" alt="AI-generated scene of an artisan inspecting a ceramic bowl in a naturally lit workshop." style="display:block;width:100%;height:auto;filter:url(#ds-6am-photo-mono);">
<!-- AI-generated demonstration scene. It does not depict a real 6am client, team member or project. -->
```

Ink + lime: Accent treatment for covers and conceptual campaigns. Do not use to demonstrate product color, skin tone, results or a documentary condition.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" aria-hidden="true" style="position:absolute"><defs><filter id="ds-6am-photo-duotone" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB"><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncR type="table" tableValues="0.0392156862745098 0.8901960784313725"/><feFuncG type="table" tableValues="0.047058823529411764 1"/><feFuncB type="table" tableValues="0 0.01568627450980392"/></feComponentTransfer></filter></defs></svg>
<img src="/assets/design/6am/photography/ceramics-workshop-ai.png" width="1536" height="1024" alt="AI-generated scene of an artisan inspecting a ceramic bowl in a naturally lit workshop." style="display:block;width:100%;height:auto;filter:url(#ds-6am-photo-duotone);">
<!-- AI-generated demonstration scene. It does not depict a real 6am client, team member or project. -->
```

01 / Choose the image: Use a sharp image with clear shapes. Preserve the original and correct exposure and white balance before applying a treatment.

02 / Map shadows and highlights: Convert to grayscale and apply a gradient map: 6am ink in shadows and lime in highlights. Use the recipe’s HEX values without substituting approximate colors.

03 / Check the details: Check faces, hands, tools and texture. If the treatment flattens the scene or removes important information, return to natural color.

04 / Review in context: Apply text and logo on separate layers. Check the crop at its final size and keep the original, treated version and origin record.

### Photography, gradient, message.

A gradual fade creates a quiet space for the message while keeping the professional and their work in view. Choose a light or dark composition to see the matching logo.

This photo composition extends the opaque area to 36% and fades out at 65%. It is a separate layout recipe from the basic overlay tokens.

Keep the message and logo within the opaque area. The transition starts after the reading area, away from the face.

Fade the overlay to transparency; preserve natural skin tones, hands and the object being made. This is a local overlay, not a duotone treatment.

Keep the original logo proportions and a clear margin around it. Use the white-lettering asset on ink and the dark-lettering asset on white.

On narrow layouts, put the message on a solid surface below the photo. Review the crop and contrast again when changing the image.

Dark overlay

```html
<style>
.sixam-photo-composition { container-type: inline-size; }
.sixam-photo-scene { position: relative; aspect-ratio: 16/10; background: #0A0C00; color: #FFFFFF; overflow: hidden; }
.sixam-photo-composition .sixam-photo-scene > img { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.sixam-photo-fade { position: absolute; inset: 0; background: linear-gradient(90deg, #0A0C00 0%, #0A0C00 36%, rgba(10, 12, 0, 0) 65%); }
.sixam-photo-message { position: absolute; left: 6%; width: 28%; top: 10%; bottom: 10%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sixam-photo-message h2 { margin: 0; white-space: pre-line; font: 800 clamp(32px, 5cqw, 64px)/1.05 var(--6am-font-display, sans-serif); }
.sixam-photo-message p { margin: 16px 0 0; font: 16px/1.5 sans-serif; }
.sixam-photo-message img { width: 120px; height: auto; }
@container (max-width: 640px) {
  .sixam-photo-scene { aspect-ratio: auto; }
  .sixam-photo-composition .sixam-photo-scene > img { position: relative; aspect-ratio: 3/2; height: auto; }
  .sixam-photo-fade { bottom: auto; width: 100%; aspect-ratio: 3/2; }
  .sixam-photo-message { position: relative; inset: auto; width: auto; padding: 32px; }
}
</style>
<figure class="sixam-photo-composition">
  <div class="sixam-photo-scene">
    <img src="/assets/design/6am/photography/ceramics-workshop-ai.png" alt="AI-generated scene of an artisan inspecting a ceramic bowl in a naturally lit workshop." width="1536" height="1024">
    <div class="sixam-photo-fade" aria-hidden="true"></div>
    <div class="sixam-photo-message">
      <div><h2>Good work.
In focus.</h2><p>Space for the people behind every good idea.</p></div>
      <img src="/assets/img/logo/logo-6am-white.svg" width="120" height="24" alt="6am">
    </div>
  </div>
  <figcaption>AI-generated demonstration scene. It does not depict a real 6am client, team member or project.</figcaption>
</figure>
```

Light overlay

```html
<style>
.sixam-photo-composition { container-type: inline-size; }
.sixam-photo-scene { position: relative; aspect-ratio: 16/10; background: #FFFFFF; color: #0A0C00; overflow: hidden; }
.sixam-photo-composition .sixam-photo-scene > img { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.sixam-photo-fade { position: absolute; inset: 0; background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 36%, rgba(255, 255, 255, 0) 65%); }
.sixam-photo-message { position: absolute; left: 6%; width: 28%; top: 10%; bottom: 10%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sixam-photo-message h2 { margin: 0; white-space: pre-line; font: 800 clamp(32px, 5cqw, 64px)/1.05 var(--6am-font-display, sans-serif); }
.sixam-photo-message p { margin: 16px 0 0; font: 16px/1.5 sans-serif; }
.sixam-photo-message img { width: 120px; height: auto; }
@container (max-width: 640px) {
  .sixam-photo-scene { aspect-ratio: auto; }
  .sixam-photo-composition .sixam-photo-scene > img { position: relative; aspect-ratio: 3/2; height: auto; }
  .sixam-photo-fade { bottom: auto; width: 100%; aspect-ratio: 3/2; }
  .sixam-photo-message { position: relative; inset: auto; width: auto; padding: 32px; }
}
</style>
<figure class="sixam-photo-composition">
  <div class="sixam-photo-scene">
    <img src="/assets/design/6am/photography/ceramics-workshop-ai.png" alt="AI-generated scene of an artisan inspecting a ceramic bowl in a naturally lit workshop." width="1536" height="1024">
    <div class="sixam-photo-fade" aria-hidden="true"></div>
    <div class="sixam-photo-message">
      <div><h2>Good work.
In focus.</h2><p>Space for the people behind every good idea.</p></div>
      <img src="/assets/img/logo/logo-6am-dark.svg" width="120" height="24" alt="6am">
    </div>
  </div>
  <figcaption>AI-generated demonstration scene. It does not depict a real 6am client, team member or project.</figcaption>
</figure>
```

AI-generated demonstration scene. It does not depict a real 6am client, team member or project.

/assets/design/6am/photography/ceramics-workshop-ai.png

Pilot direction. The synthetic example demonstrates the visual language; an owned documentary photo library and treatment approval still need curation.

/projects/6am/design/photography.json

## Typography

- Big Shoulders: Expressive headings and opening messages. Reference weight: 800. Fallback: Impact, sans-serif.

- Onest: Paragraphs, navigation, buttons and forms. Reference weight: 400. Fallback: Arial, sans-serif.

- Fraunces: Occasional editorial emphasis, in italic. Reference weight: 500. Fallback: Georgia, serif.

- Geist Mono: Versions, values and technical references. Reference weight: 400. Fallback: monospace.

## Logos

- [Logo for a light background](/assets/img/logo/logo-6am-dark.svg)

- [Logo for a dark background](/assets/img/logo/logo-6am-white.svg)

- [Logo for a lime background · white colon](/assets/img/logo/logo-6am-lime.svg)

## One mark. Many places.

From a social post to a storefront, the brand should stay easy to recognize. Choose the right file, give it room and keep it readable in every format.

### Let the message guide the placement.

Start at the top-left on pages and documents. For campaigns, a top-right or bottom-center signature can suit the composition. Align the logo with the content and keep its position consistent across the series.

Guides show alignment; they are not part of the artwork. Allow for logo clear space as well as the margins and safe areas required by each channel.

- Top-left: The signature starts the reading order. Align the headline to the same left margin.

- Bottom-center: A centered composition calls for a signature on the same axis. Leave room between the headline and the logo.

- Top-right: Balance a left-aligned headline with the signature on the right. Start the text below the logo band.

### On photos, find a quiet spot.

Choose an uncluttered area with enough contrast for both the lettering and the colon. If the photo cannot provide that space, change the crop or put the signature on a solid band. Do not add outlines or shadows to make the logo readable.

Demonstrated with an existing 6am illustration. The same rule applies to photography; this is not a client photograph.

/assets/img/hero/hero-15-1.webp

### Different surroundings. The same signature.

Signs, vehicles and objects need a check at the real viewing distance and on the real material. These diagrams show placement and orientation; they are not fabrication files.

- Storefronts and signage: Use the full name on a continuous surface. Allow for edges, seams and fixings. Size it for the viewing distance; the print minimum is not a storefront specification.

- Vehicles, on both sides: Keep 6am readable from left to right on both sides. Mirror the vehicle drawing, never the logo. Keep the signature away from handles, wheels and panel breaks.

- Tall formats and objects: Keep the logo horizontal on signs and banners. If the name will not fit legibly, rearrange the layout or use the icon where context supports it. Do not stack letters or rotate the logo yourself.

### Know what weakens the mark.

The examples below deliberately show mistakes. Use the catalog assets without these alterations when producing artwork.

- Do not stretch it: Scale width and height together. A narrow container is no reason to distort the mark.

- Do not rotate or mirror it: Keep the horizontal reading direction. Neither the side of a vehicle nor the format changes the orientation of the brand.

- Do not invent colors: Choose a supplied variant. On lime, the 6 and am are black and the colon is white.

- Do not add effects: Avoid outlines, shadows, glows and textures. Solve contrast by choosing the right background and file.

- Do not crop the signature: Keep the full artwork and its clear space. For compact spaces, consult the brand icon section.

- Do not crowd it: Keep text, lines and other marks out of the clear space. A subheading should not become part of the signature.

### Before you hand it over.

- Check the full logo and colon at the final size, with the right variant for the background.

- Check margins, clear space, crops and interface overlays in every format.

- Use SVG for unrestricted scaling; export enough pixels for the intended size when using PNG or WebP.

- For print, confirm colors and finishes with the supplier and proof on the intended material. The catalog files are RGB.

- A new orientation, monochrome version or partner lockup needs to be defined as a separate asset before production.

Pilot guidance. Physical applications, finishes, vertical lockups and partner lockups still need development and validation. Mirroring or rebuilding the logo is not permitted.

/projects/6am/design/brand.json

## Brand asset downloads

Each file is directly accessible. Resolve paths against the origin of this guide. brand.json includes absolute download URLs for the host serving it. Full logos and the standalone symbol preserve transparency; square icon tiles include their background. PNG and WebP are raster exports; WebP is lossless.

### Logo for a light background

- [SVG](/assets/img/logo/logo-6am-dark.svg) · image/svg+xml · 3502 bytes

- [PNG](/assets/img/logo/logo-6am-dark.png) · image/png · 2768 × 554 px · 56012 bytes

- [WEBP](/assets/img/logo/logo-6am-dark.webp) · image/webp · 2768 × 554 px · 14966 bytes

### Logo for a dark background

- [SVG](/assets/img/logo/logo-6am-white.svg) · image/svg+xml · 3547 bytes

- [PNG](/assets/img/logo/logo-6am-white.png) · image/png · 2768 × 554 px · 43383 bytes

- [WEBP](/assets/img/logo/logo-6am-white.webp) · image/webp · 2768 × 554 px · 14992 bytes

### Logo for a lime background · white colon

- [SVG](/assets/img/logo/logo-6am-lime.svg) · image/svg+xml · 3467 bytes

- [PNG](/assets/img/logo/logo-6am-lime.png) · image/png · 2768 × 554 px · 53744 bytes

- [WEBP](/assets/img/logo/logo-6am-lime.webp) · image/webp · 2768 × 554 px · 14964 bytes

### Original green on black

- [SVG](/assets/img/logo/icon-6am-dark.svg) · image/svg+xml · 289 bytes

- [PNG](/assets/img/logo/icon-6am-dark.png) · image/png · 1024 × 1024 px · 26338 bytes

- [WEBP](/assets/img/logo/icon-6am-dark.webp) · image/webp · 1024 × 1024 px · 308 bytes

### Black on white

- [SVG](/assets/img/logo/icon-6am-light.svg) · image/svg+xml · 289 bytes

- [PNG](/assets/img/logo/icon-6am-light.png) · image/png · 1024 × 1024 px · 10879 bytes

- [WEBP](/assets/img/logo/icon-6am-light.webp) · image/webp · 1024 × 1024 px · 314 bytes

### White on lime

- [SVG](/assets/img/logo/icon-6am-lime.svg) · image/svg+xml · 289 bytes

- [PNG](/assets/img/logo/icon-6am-lime.png) · image/png · 1024 × 1024 px · 24753 bytes

- [WEBP](/assets/img/logo/icon-6am-lime.webp) · image/webp · 1024 × 1024 px · 300 bytes

### Standalone symbol

- [SVG](/assets/img/logo/icon-6am-glyph.svg) · image/svg+xml · 190 bytes

- [PNG](/assets/img/logo/icon-6am-glyph.png) · image/png · 885 × 1108 px · 18275 bytes

- [WEBP](/assets/img/logo/icon-6am-glyph.webp) · image/webp · 885 × 1108 px · 106 bytes

## Brand icon

Two dots. One signature.

The offset colon already represents 6am in our favicon. It is our compact signature when the full name will not fit and people already know whose space they are in.

Start with the square file. The circle and rounded corners below preview crops applied by apps and social platforms; the symbol itself stays the same. Its original green is #C4E86B. On a lime background, both dots are white.

- Original green on black: /assets/img/logo/icon-6am-dark.svg

- Black on white: /assets/img/logo/icon-6am-light.svg

- White on lime: /assets/img/logo/icon-6am-lime.svg

Standalone symbol · SVG: /assets/img/logo/icon-6am-glyph.svg

Current favicon · PNG 64 px: /assets/img/logo/icon-6am-existing-64.png

H is the full height of both dots. Leave at least ¼H on every side of the standalone symbol. In the square files, the symbol is half the canvas height; the built-in margin also protects it inside a circular crop.

These examples appear at the labeled CSS pixel size. Use the vector file to export the resolution your platform requests. The proposed minimum for the square favicon is 16 px; a standalone symbol needs at least 16 px of height, plus its clear space.

At 16 px, check that both bars remain distinct on the target screen. Prefer 32 px or larger when space allows. Print sizes still need a physical proof.

- Use it for favicons, avatars and app shortcuts where the brand is already identified by context.

- Use the full logo in presentations, proposals and first introductions. Keep the name wherever people need to read it.

- Preserve both bars, their offset and their proportions. Do not rotate them, align them vertically or rebuild them with a font character.

- Upload the square file to platforms that apply their own crop. Do not export rounded corners on transparency before a second crop.

- In interfaces, provide the accessible name “6am”. This symbol identifies the brand; it is not an action icon.

Use the supplied 6am symbol asset without redrawing it. Preserve both offset bars and their proportions. For standalone use, keep one quarter of the full symbol height clear on every side. For avatars, use the square SVG and let the platform apply its crop. Use the full logo when the brand name needs to be read. Do not generate a new interpretation of the symbol.

Pilot documentation: the symbol comes from the existing favicon and the colon in the logo. These vector applications, margins and sizes await brand review; the website still uses its current favicon.

## Logo application / Pilot

Clear space protects the mark from nearby text, images and edges. Scale the complete logo proportionally, using the original SVG files.

### Clear space

Let H be the height of the exported logo. Keep at least ½ H clear on all four sides. Measure from the logo frame, not from the outside of a padded image container.

Minimum clear space on each side = logo width × 110.8 ÷ 553.6 × 0.5.

A quiet background can continue through the clear space. Text, icons, borders, other logos and busy image details must stay outside it. Page edges must also respect this distance.

### Small enough to fit. Large enough to read.

These are starting specifications for this pilot. Use a larger logo when distance, contrast, reproduction or screen conditions make it harder to recognize. Minimum size refers to the logo itself, excluding clear space.

Digital minimum: 96 CSS px. 96 CSS px wide, about 19.2 px high. Keep about 9.6 px clear on each side. At 100% browser zoom, the example below is rendered at 96 CSS px.

Print minimum: 20 mm. 20 mm wide, about 4 mm high, with 2 mm clear on each side. Proof at final size on the intended material before approval.

The screen example is enlarged for explanation; it is not a physical ruler. Print and digital minimums are independent specifications.

### Choose the position. Keep the space.

Use the top-left as the starting position on pages, documents and presentations, aligned to the content grid. Social pieces can use another corner when the template calls for it. Keep that position consistent across a series.

The distance from the logo to the edge must be at least the greater of the layout margin and ½ H. Clear space is a minimum, not a replacement for the page grid.

Placement diagrams only. Channel interface overlays and safe areas need their own allowance, in addition to the logo’s clear space.

- Keep the original proportions and file colors. Do not stretch, crop or recolor the logo.

- Use the light-background asset on light surfaces and the white-lettering asset on dark surfaces. On lime, use the variant with black 6 and am and a white colon.

- A raster export at 2× resolution needs twice the pixel width. A 96 CSS px logo needs at least 192 image pixels at 2×; SVG scales without that raster limit.

- When the full logo will not fit, check the brand icon rules to decide whether the context supports it. Do not crop or improvise a compact mark.

- For print, retain vectors where supported and proof the final output. Do not infer CMYK or spot colors from these RGB assets.

- Partner lockups and print specifications for the brand icon remain pending.

Pilot specification for the current full logo. Brand-owner sign-off, print proofs and a broader review of small-size applications are still pending.

/projects/6am/design/brand.json

## Photography direction (pilot)

Show the work of people who keep the economy moving. People in action, familiar places and situations a business owner would recognize from their day.

Visual direction in pilot; photographic examples still need curation and approval.

- One scene, one story: Show someone doing something specific: preparing an order, helping a customer or checking a job. Technology supports the work; it does not need to be the subject of the photograph.

- People present, without posing: Choose natural gestures, attentive expressions and diversity that fits the setting. Avoid smiles directed at the camera and immaculate teams in generic offices.

- Light that feels believable: Use believable ambient light or controlled flash. Preserve skin, materials, texture and the energy of the scene. Avoid plastic skin, artificial glow and cinematic grading without purpose.

- The brand frames reality: Preserve the real colors of the workplace, clothing, food and products. The image does not need to match the brand palette. Reserve duotone for occasional editorial use. Add logos and text later during layout, using the official files.

- Show what actually happened: Case studies, team portraits, premises and testimonials use real, authorized records. A generated scene must not be presented as a real client, employee or result.

- Explain a possibility: AI-generated images may use photographic language for fictional editorial scenes. Identify their synthetic origin whenever they could be read as a real record. Illustration styles belong to the separate Illustration section.

- Edit without changing the facts: When editing a documentary photograph, preserve people, products and context. Changes that alter the story are no longer a faithful record and need a different classification.

Avoid: Staged handshakes, folded arms and stock-photo smiles. Floating interfaces, holograms and robots as shortcuts for technology. Inconsistent hands, tools, products or procedures. Illegible text, invented logos, excessive effects and backgrounds that compete for attention.

## Illustration

Editorial illustration with one clear idea, people in action and shapes that stay legible at small sizes. Visual references live in our own library.

Outline describes contours; monochrome describes a one-color palette. Flat editorial illustration remains the main 6am language. The other profiles support specific uses.

### Flat editorial (Primary · in use)
Scenes built from solid color, contrast and negative space. People and objects tell a short story.
Use: Content covers, page openings, campaigns and slides with one central idea.
Style prompt: 2D editorial illustration in frontal view with one composed scene and a clear idea. Filled geometric shapes, clear silhouettes, a limited palette and generous negative space. No uniform outlines around filled shapes. Create light and depth with color blocks; no gradients, gloss or 3D appearance. Human figures have natural gestures and coherent proportions.
Avoid: Enlarged icons, 3D objects, isometric perspective, gloss and excessive detail.

### Single-color shapes (Complementary · under review)
The same scene logic, reduced to one ink and the empty background. Silhouettes carry the message.
Use: Limited palettes, supporting editorial work and compositions where photography would compete for attention.
Style prompt: Monochrome editorial illustration in one near-black ink #0A0C00 on white #FFFFFF. Build people and objects from solid shapes and negative space. Frontal view, simple forms and strong contrast. No uniform outer outlines, gray, other colors, gradients, hatching, 3D volume or texture. Preserve the action and clear silhouettes.
Avoid: Turning everything grayscale, losing silhouettes or filling important details with black.

### Outline drawing (Supporting · under review)
Consistent contours, open shapes and reduced detail. Lines explain the action without competing with text.
Use: Process steps, service pages, instructions and small explanatory scenes.
Style prompt: Supporting outline illustration: consistent medium-weight near-black #0A0C00 lines on white #FFFFFF. Open shapes, clean contours, few inner lines and generous empty space. Small solid fills only for details such as hair or shoes. Frontal scene with a recognizable human gesture. No gray, hatching, shadows, texture, gradients, isometric perspective or 3D.
Avoid: Disappearing thin strokes, detailed technical drawings, hatching, arbitrary line weights or using the scene as a UI icon.

- [The work begins](/assets/design/6am/illustrations/editorial-work-v1.webp): editorial; In use on the blog; palette #0A0C00, #FFFFFF, #E3FF04. Black and lime signature; related flat tones can create light and depth.

- [A welcoming shop](/assets/design/6am/illustrations/editorial-shop-v1.webp): editorial; In use on the blog; palette #0A0C00, #FFFFFF, #6480F5. Editorial growth palette. Blue stays within this content family.

- [A scene in one ink](/assets/design/6am/illustrations/monochrome-shop-v1.png): monochrome; Generated study · under review; palette #0A0C00, #FFFFFF. One ink plus the background, without grayscale.

- [The gesture of service](/assets/design/6am/illustrations/outline-service-v1.png): outline; Generated study · under review; palette #0A0C00, #FFFFFF. One-color lines with small supporting solid fills.

- Start with what the image should explain. Use a recognizable work situation.

- Use the selected image as a style reference. Change the scene to match the brief; do not copy characters and objects by default.

- Keep one profile per piece or series. Do not mix outline and filled editorial shapes just to fill space.

- A reference palette belongs to that application. Editorial colors do not become interface colors.

- Add text, CTA and logo during composition. Image generation must not recreate the brand.

- Review anatomy, gestures, tools, crops and readability. A generated image is a draft until reviewed.

Library and prompts: /projects/6am/design/illustration. Data: /projects/6am/design/illustrations.json. Include the selected image’s absolute URL in the prompt, resolved from the environment hosting the catalog. If the AI cannot access it, download and attach the file; local URLs are not public.

## Composition and applications

- One main message: Start with the decision the person needs to make. For communication pieces, aim for three levels: headline, explanation and action. Do not turn every sentence into a separate block.

- Alignment before decoration: Define the format, margins and grid before arranging content. Align the headline, copy and CTA to a shared reference. Use a small number of blocks, each organizing one piece of information.

- Photography with room to breathe: Decide where the subject belongs and where the text goes. Avoid placing letters over faces or busy areas. If reading becomes difficult, move the text onto a solid surface.

- An intact brand on every surface: Use the official SVG with contrast and space around it. Follow the pilot clear-space and sizing rules in Brand and logos. Never generate the logo inside a photograph or change its proportions.

- One primary identity per piece: State in the brief who signs the work: the client, 6am or a partnership. In white-label work, the client’s brand leads; do not add a 6am signature by default. Joint lockups need their own specification.

- Screen and print need different outputs: HEX/RGB values are the digital references. CMYK, spot colors and lime reproduction on paper need their own proof and approval; an automatic conversion does not become an official color.

Use illustration to explain an idea that photography cannot resolve. Preserve the flat editorial language already defined for the blog and its category palettes. Do not turn these palettes into new interface colors.

Icons help people recognize an action or piece of information. Reuse the existing set with consistent strokes and scale. Avoid a collection of decorative symbols beside every sentence.

## Production with AI

- Start with the story, channel and crop; then choose the tool.

- Use only suitable, authorized references and record their origin. To reproduce a real person, record their permission.

- Generate the photograph without headlines, CTAs or new logos. Add text and branding in the final composition.

- Compare variations using the same brief and record the model and its settings when available. Do not promise identical reproduction across providers.

- Review the image, crop and finished piece. A correct prompt does not guarantee an approved result.

- Keep the original and final version with the source, brief, review and intended use.

- GPT Image 2: Use the brief to generate an image or guide an edit with references. Describe what to preserve and what to change. Check the visual identity in the result, even when reference images are supplied. The prompt accompanies references during generation or editing. Attach authorized files in the tool. Documentation: https://developers.openai.com/api/docs/models/gpt-image-2 (checked 2026-09-07).

- Higgsfield · Soul 2.0: Without a reference, use the prompt and adjust the style with Soul 2.0 features. Moodboards help repeat the visual direction; Soul HEX guides the palette. With a reference image attached, Soul 2.0 disables the text prompt. Use this brief to prepare the reference and review the result. Soul ID and Soul HEX can support this mode. Documentation: https://higgsfield.ai/creator-hub/help-center/ai-models/how-do-i-use-soul-to-generate-images (checked 2026-09-07).

## Image review

- Does the scene communicate the brief’s intent without needing an explanatory caption?

- Do people, anatomy, tools and procedures make sense?

- Are light, skin and materials consistent? Are there invented logos or text?

- Does the crop work on mobile and preserve the focal point? Will text have enough contrast?

- Is the origin recorded correctly, and are the references authorized for this use?

- Has a responsible person reviewed the final file before publication?

Local builder: /projects/6am/design/image-generation. Complete rules: /projects/6am/design/imagery.json. The catalog does not generate images or execute provider integrations.

## Social media (pilot)

Help people running a business understand a problem and see a practical next step.

Content and composition pilot. Review every piece before publishing.

- The cover starts a conversation: Use a situation a business owner recognizes. One clear question or statement is enough. Avoid absolute promises and headlines that hide the point just to get a click.

- One idea at a time: Each slide moves the conversation forward. Alternate explanation, example and action. Five slides are a starting point for these templates, not a requirement for every piece.

- Write for the people doing the work: Prefer requests, customers, schedules and quotes to leads, pipelines and conversions. When a technical term is necessary, explain it in the sentence.

- The rhythm is visual too: A dark cover, light content and lime closing form the initial sequence. Keep fonts, margins and the brand signature consistent. Visual changes should follow a change in the message.

- Give the text room to breathe: Character limits are an initial check. Review line breaks and readability in the preview. If text will not fit at the minimum size, rewrite or split the idea; never hide overflow outside the artwork.

- End with a practical action: Choose one relevant next step: try the tip, save it, start a conversation or explore the service. Avoid asking for several actions at once.

### Cover, development and closing

Give each part of the conversation a clear job.

- Cover: introduce a situation, question or specific benefit. The title should make sense alone; supporting text explains who it matters to.

- Development: each slide answers the question left by the previous one. Connect sentences naturally instead of using disconnected headings.

- Example: show the idea in a concrete situation. Distinguish an illustration from a real case supported by evidence.

- Closing: return to the main idea and give one practical next step. Readers should know what to do without returning to the cover.

Avoid: Cover: “You need to know this.” Middle: five unrelated tips. Closing: “Like, save, share and contact us.”

Prefer: Cover: “The quote is sent. Who follows up?” Explain owner, timing and records. Close with “Plan the next conversation for this week’s quotes.”

### Hierarchy and text length

Show the main point before the detail.

- Use the title for the main idea, the body for explanation and metadata for series or position. An entire paragraph should not have cover-level emphasis.

- These templates use the display family for titles, body for paragraphs and mono for numbering. Weights, sizes and line spacing appear in the specifications below.

- Keep text left aligned. Review breaks that isolate a word, split a phrase or make the title difficult to read aloud.

- A character limit is a filter, not a target. Remove repetition or split the explanation before shrinking text too far. Do not compress or stretch letters.

Avoid: “Optimize the integrated management of your commercial opportunity pipeline.”

Prefer: “Know who will answer each request.” Use the body to explain ownership and timing.

### Format, margins and crops

Protect the message when the piece changes size.

- Choose the format before composing. Portrait supports feed sequences, square keeps things compact and vertical offers more room. These are proposed uses, not distribution guarantees.

- Keep one format throughout a carousel. 6am presets use 1080 px width and 80 px side margins; do not mix canvas heights in a sequence.

- Align logo, title, body and footer consistently. Keep numbering and the signature in the same position across slides of the same format.

- Before publishing, check the channel preview: controls, captions and cover crops can cover parts of the image. Keep essential content in the visible area. No universal margin guarantees safety on every platform.

Avoid: Changing proportions midway through a carousel or placing the only CTA against the bottom edge.

Prefer: Compose in one format, check the cover in the channel preview, then adapt the whole sequence if needed.

### Color, signature and graphic elements

Use the identity to guide the reader.

- The initial sequence uses a dark cover, light explanation, dark example and lime closing. Contrast marks the change in function while preserving the identity.

- Use black on lime and white on black. Avoid lime on white for body text. Meaning must not depend on color alone.

- Arrows show direction, numbers show position or steps, and lines separate content from the signature. Add symbols only when they help explain the piece.

- Apply the official logo as a separate asset, preserving proportions and contrast. AI must not redraw it. Client and white-label work uses the responsible organization’s identity.

Avoid: A different color on every slide, several arrow styles and a logo recreated with a similar font.

Prefer: Repeat the grid and signature; change the background to distinguish explanation, example and next step.

### Photography, illustration and data

Choose the asset that explains or supports the point.

- Photography: choose a recognizable action and one focal point. Preserve faces, gestures and tools when cropping. Leave a calm text area or use a solid text panel.

- Illustration: explain an idea photography cannot show. Keep the editorial language; avoid robots, holograms and generic icons as substitutes for a story.

- Data: identify the measure, period and context. Charts need clear labels and a scale that supports comparison. Do not invent values to fill the template.

- Cases and testimonials: use authorized records and verified information. Generated scenarios can illustrate a possibility but must not appear to be real clients or results. The case-study template is fictional.

- The editor includes text carousels and posts with library illustrations. Select a reference and describe the new scene for AI; the preview keeps the existing image. For photography, use the photography guide and image brief in this design system.

Avoid: An AI-generated team presented as a client’s staff, or a growth chart with no source or timeframe.

Prefer: An authorized work photo with context in the caption, or an image clearly identified as an illustration of a possibility.

### Caption, CTA and accessibility

Complete the conversation without repeating the entire artwork.

- The caption adds context, conditions or a practical application. Avoid copying every slide into a long block; keep essential information available as accessible text.

- Choose one main action and name its destination clearly. If the link is in the caption or profile, say where it is and check it works.

- Write alt text for each image, preserving its message and relevant visual details. Review the editor’s draft; do not use alt text for keyword stuffing.

- Review at phone size. Text, numbers and steps must remain readable. Use words and labels alongside colors and symbols.

Avoid: “Learn more” without a destination, with all offer conditions only inside an image.

Prefer: “Explore the website service. The link is in the caption.” Include the destination and relevant conditions in that caption.

### Single posts, Stories and video covers

Adapt the idea to the way people will see it.

- Single post: combine one idea, enough context and one action. Use the caption for detail. Do not shrink five slides into a single image.

- Stories: allow enough time to read each screen. Preserve sequence order and leave space for the channel’s controls and interaction elements.

- Video cover: choose a short title and an image with a focal point. Check the crops where it will appear; avoid relying on tiny text.

- An adaptation keeps the promise and identity while changing pacing, text length and framing. The editor produces static images. Video, animation and native interactions need separate production.

Avoid: Shrinking a whole carousel into a Story or placing a long caption on a video cover.

Prefer: Use one carousel idea for a single post, separate the explanation into Stories and summarize the promise on a video cover.

### Review and handover

Check the sequence, not just each image.

- Read slides in order and aloud. The idea should move forward without contradictions, unnecessary repetition or sudden topic changes.

- Check names, spelling, dates, numbers, the offer and CTA destination. Identify who verifies facts and approves the piece.

- Check export size, file order, crops, contrast, logo and alt text. Open the downloaded PNG to inspect the result.

- Save the JSON brief with the design system version, caption and final files. The editor keeps state only during the visit; downloading does not mean approval or publication.

Avoid: Approving only the cover and publishing without checking order, facts or the final link.

Prefer: Review the script, visual sequence and exports; then record approval and publish through the organization’s workflow.

- Educational: Explain a common question and help someone make a decision. Sequence: Question → Context → Explanation → Example → Next step.

- Step by step: Turn a task into a practical sequence. Sequence: Task → Step 1 → Step 2 → Step 3 → Apply it.

- Case study: Describe the work and show verifiable evidence. The example below is fictional. Sequence: Context → Problem → Work → Evidence → Learning.

- Offer: Present a solution with clear scope and one action. Sequence: Need → Solution → Scope → Fit → CTA.

- Editorial: Develop a brand idea with examples and a useful conclusion. Sequence: Idea → Tension → Point of view → Application → Conclusion.

Carousel limits: title 88 characters; body 210; caption 1500. Review line breaks and readability; character limits do not guarantee a fit.

### Illustrated posts

- The image introduces the idea; the title makes it clear. Supporting text offers an application or next step.

- Keep the whole image in its own area. Text and logo sit outside the illustration on a solid surface.

- The preview uses a library asset. Editing the scene changes the brief; it does not generate a new image in the editor.

- To create a new image, send the reference and brief to your AI, then compose title, supporting copy and the official logo as separate elements.

- Review how the title and image relate. The scene should help explain the message, not just decorate the post.

- A clearer workday: reference work-lime; title: A better day starts with clarity.; supporting copy: Plan what needs to happen today and agree on who owns each step.; caption: Before adding another tool, look at the work: what needs to happen, who owns it and what comes next? Start with one task this week.

- A warm welcome: reference shop-blue; title: Being found is only the beginning.; supporting copy: Show what your business solves and make the first conversation easy.; caption: Your digital presence should help people recognize your business, understand the offer and reach your team. Try that journey on your phone and notice what is unclear.

- One idea, one color: reference shop-mono; title: Simple can still stand out.; supporting copy: A clear message and a familiar scene help introduce your business.; caption: Start with what customers need to understand. Choose one idea, show a concrete situation and offer a next step.

- Thoughtful service: reference service-outline; title: Good service is in the details.; supporting copy: Listen to the request, confirm the plan and explain what happens next.; caption: Thoughtful service begins with understanding the need and agreeing on a next step. How does your team confirm requests and follow through?

Composition: {"imageHeightRatio":0.38,"imageTop":150,"textGap":32,"footerReserve":110,"titleMax":88,"titleMin":64,"bodyMax":36,"bodyMin":32,"titleLeading":1.08,"bodyLeading":1.4,"background":"white","foreground":"ink","metadataLabel":"BUSINESS / IN PRACTICE"}. Limits: title 60 characters; supporting copy 140. Illustration examples and paths appear above and in /projects/6am/design/illustrations.json.

The post brief combines the scene, absolute reference URL, style rules, text, fonts, logos and final format. Generate the illustration without text first, then compose the piece. The local preview uses an existing library image. Editing the scene changes the brief without generating a new image in the catalog.

Examples, formats, storylines and production manual: /projects/6am/design/social.json. Local editor with preview, PNG and AI brief: /projects/6am/design/social. There is no automatic publishing or saving through the portal.

Illustrated posts use our own library, with editorial, monochrome and outline profiles. The preview combines the selected image with text and the logo; the brief guides AI to create a new scene in that style. Photo uploads and cropping are not yet available in the editor.

### Illustrated Stories · 9:16

- Compose at 1080 × 1920 px, in 9:16. One idea and one action per Story.

- Keep essential content out of the top 240 px and bottom 320 px in this template. These are 6am composition reserves; check the app’s interface and crops before publishing.

- Use a short title, direct supporting text and a reply prompt. The CTA drawn in the image is not an interactive button; enable replies on the channel.

- Publishing instructions stay in the brief, outside the artwork. For a sequence, use separate opening, explanation and invitation screens with one consistent style.

- Generate the illustration using the library reference, then apply text and logo. Review phone-size readability and keep the whole image.

- Behind the workday: reference work-lime; title: What comes first today?; supporting copy: Before starting another task, choose the one you need to move forward.; CTA: Reply: what is your priority?; guidance outside the artwork: Publish early in the day and enable replies. Use the conversation to understand the working lives of people following the brand.

- A customer service tip: reference service-outline; title: Does your customer know what is next?; supporting copy: Confirm the request, the timeline and who will follow up. A clear plan avoids confusion.; CTA: Reply: where do questions come up?; guidance outside the artwork: Publish as a single Story. Check that replies are enabled and welcome concrete examples from customer service.

- Start a conversation: reference shop-mono; title: Is your business easy to find?; supporting copy: Check on your phone: is it clear what you do and how to reach your team?; CTA: Reply: how do people find you?; guidance outside the artwork: Use the question to start a conversation about digital presence. Enable replies; do not promise a review or delivery outside the agreed scope.

Stories composition: {"imageHeightRatio":0.25,"imageTop":340,"textGap":48,"footerReserve":560,"titleMax":104,"titleMin":80,"bodyMax":44,"bodyMin":38,"titleLeading":1.08,"bodyLeading":1.4,"background":"white","foreground":"ink","metadataLabel":"ONE IDEA FOR TODAY","logoTop":240,"ctaTop":1420,"ctaHeight":120,"ctaFontSize":36,"bottomReserve":320}. Limits: {"title":50,"body":110,"cta":52}. Format: 1080 × 1920 px. The PNG does not add native interactions; configure replies in the app when publishing.

## Components in this version

See /projects/6am/design/components and /projects/6am/design/forms for variants, interactions and examples.

In the 6am monorepo, reuse DsButton, DsLink, DsActionCard, DsField and DsIcon from @/components/design-system/Primitives. Apply styles.scope and designVariables(system) to the container. Outside the monorepo, use the guidance and tokens; no public installable package exists yet.

DsActionCard is a single-destination link with an optional eyebrow, title, optional description and action label. It is used in the /done-for-you/design-system demonstrations. Do not nest links or buttons inside the card. Hover and focus use the catalog’s lime fill.

## Resources

Read /projects/6am/design/reviews.json before treating a criterion as validated. The inventory records evidence, gaps and pending assessments per section; it is not brand approval. Compare assessedSystemVersion with the current version.

[JSON tokens](/projects/6am/design/tokens.json) · [CSS tokens](/projects/6am/design/tokens.css) · [Index](/projects/6am/design/llms.txt)

## Version limitations

This pilot has a public catalog and static exports. Client authentication, editing, publishing through the product, MCP, an installable registry and document templates are not yet implemented. Do not interpret this file as authorization to access private resources.