6am/Design system/Colors

Section reviewNeeds work3 met · 1 to improve · 1 to review

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

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

Meets criterion
The palette has named roles and reusable values.
Color values and roles are present in the catalog and token exports.
View supporting material ↗
Needs work
Pages use the same color roles consistently.
Inventory legacy color aliases and migrate page-specific values to shared tokens.
Awaiting review
Text and controls are readable in every supported color pairing.
Opaque color-pair ratios are calculated in the catalog and colors.json. Final text sizes, focus, states, photography and real component boundaries still need review.
Meets criterion
Color hierarchy, combinations and production limits are documented.
Brand and functional palettes, pilot composition recipes, a contrast checker, logo-only green and print handoff guidance share the same organization record. CMYK and Pantone specifications are not yet defined.
Read color rules ↗
Meets criterion
Gradient recipes, usage examples and reusable exports are documented.
Six pilot recipes share stops, opacity and CSS across the catalog, JSON, tokens and AI guide. Final compositions and print proofs still need review.
View gradient recipes ↗Read gradient specifications ↗

View all reviews · JSON ↗

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

02 / Colors

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.

The palette that makes us recognizable.

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

Code format

Ink#0A0C00

Dark foundation and primary text.

RGB 10 / 12 / 0--ds-inkApproved

White#FFFFFF

Light surfaces and text on dark backgrounds.

RGB 255 / 255 / 255--ds-whiteApproved

Lime#E3FF04

Primary actions, selection and brand highlights.

RGB 227 / 255 / 4--ds-limeApproved

Graphite#252525

Supporting dark surface.

RGB 37 / 37 / 37--ds-supportApproved

Tones that help the interface work.

Paper, secondary text, dividers and error have specific jobs. They are in pilot and do not extend the campaign palette.

Paper#F4F4F0

Catalog workspace background.

RGB 244 / 244 / 240--ds-paperPilot

Secondary text#60605A

Supporting text on light surfaces.

RGB 96 / 96 / 90--ds-mutedPilot

Divider#D9D9D1

Visual separation; do not use as text.

RGB 217 / 217 / 209--ds-linePilot

Error#A12622

Error messages and outlines, always with explanatory text.

RGB 161 / 38 / 34--ds-errorPilot

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.

One clear next step.

Explore the service

Everyday clarity

Service pages, documents and forms. A light base gives the content room, while lime points to the next step.

White70%
Ink20%
Lime10%

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

Pilot recipes · digital sRGB

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.

Linear gradients

Two colors, one direction. Keep these transitions broad and simple.

--ds-gradient-first-light

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.

Color stops

1 · 120°

#E3FF04 · 0% · 100% opacity
#FFFFFF · 100% · 100% opacity

Base: #FFFFFF

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

--ds-gradient-quiet-depth

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.

Color stops

1 · 135°

#252525 · 0% · 100% opacity
#0A0C00 · 100% · 100% opacity

Base: #0A0C00

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

Light fields

Layered radial gradients create depth in two dimensions. Use one field per composition and give the message its own solid surface.

--ds-gradient-lime-field

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.

Color stops

1 · ellipse · 15% / 20%

#E3FF04 · 0% · 100% opacity
#E3FF04 · 75% · 0% opacity

2 · ellipse · 90% / 90%

#E3FF04 · 0% · 45% opacity
#E3FF04 · 65% · 0% opacity

Base: #FFFFFF

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;

--ds-gradient-night-glow

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.

Color stops

1 · ellipse · 90% / 15%

#E3FF04 · 0% · 55% opacity
#E3FF04 · 65% · 0% opacity

2 · ellipse · 10% / 90%

#252525 · 0% · 100% opacity
#252525 · 70% · 0% opacity

Base: #0A0C00

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;

Room for a useful idea.

Give the message space. Keep the work in view.

Overlays for images

Use an opacity fade to make room for the message. It sits above the image; it is not a color filter for the entire scene.

--ds-gradient-ink-overlay

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.

Color stops

1 · 90°

#0A0C00 · 0% · 100% opacity
#0A0C00 · 25% · 100% opacity
#0A0C00 · 70% · 0% opacity

Base: Transparent

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

--ds-gradient-white-overlay

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.

Color stops

1 · 90°

#FFFFFF · 0% · 100% opacity
#FFFFFF · 25% · 100% opacity
#FFFFFF · 70% · 0% opacity

Base: Transparent

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

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.

Photo composition

AI-generated scene of an artisan inspecting a ceramic bowl in a naturally lit workshop. — AI-generated demonstration scene. It does not depict a real 6am client, team member or project.

Left to right · opacity

0% · 100%36% · 100%65% · 0%

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.

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

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

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

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

Below 640 px of available width, the message moves below the photograph.

Composition recipe · HTML + CSS

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

Explore photography direction

Keep the effect in its place.

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.

Reusable recipes

Copy a complete CSS background or a brief for your AI. The JSON includes layers, stops, opacity and resolved CSS; the CSS download includes all six variables.

Gradient recipes · JSON Gradient tokens · CSS

Combinations you can start with.

The right text color depends on its background. Compare these pairs, then check other combinations below.

Ink on White

19.71:1 · Suitable for normal text

Ink on Lime

17.43:1 · Suitable for normal text

White on Graphite

15.33:1 · Suitable for normal text

Secondary text on Paper

5.74:1 · Suitable for normal text

White on Lime

1.13:1 · Avoid for text

Ink on Graphite

1.29:1 · Avoid for text

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.

Text or elementBackground

17.43:1 Contrast ratio

Normal text · AAPass
Large text · AAPass
Essential elements · 3:1Pass

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.

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.

Brand lime#E3FF04

Logo asset green · #C4E86B

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.

View variants and downloads

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.

Email

name@

Enter a valid email address to continue.

Illustrative example · inquiries by channel

Website

Referral

Social

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.

Digital · defined

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

HEX · RGB · sRGB

Print · to be defined

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.

One palette for people and AI.

Rules and combinations · JSON Tokens · CSS

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