Brand

Dimmd — Dark mode for the Mail app.

Tokens, brand and the UI components the site is built from. Dimmd shares the Nonbreakingspace midnight base with Mergd — same surfaces, same type, its own accent.

App Icon

1024px

512px

256px

128px

64px

32px

16px

ON LIGHT BACKGROUND

Brand Logo

Dimmd

Dark mode for the Mail app.

Color Palette

Midnight

#0F1016

Graphite

#1A1C24

Deep Purple

#2A1352

Dimmd Purple

#A970FF

Soft Lilac

#D6C6FF

Light Grey

#F2F2F7

Gradients

Midnight Veil

#1A1C24 → #0F1016

Dimmd Glow

#A970FF → #D6C6FF

Dusk

#232030 → #14131C

Moonrise

radial · purple 22% → 0%

Paper

#FFFFFF → #F2F2F7

Hairline

transparent → purple → transparent

Gradients are tonal and quiet — one hue, two neighbouring stops. Dimmd Glow is the only saturated gradient and is reserved for primary actions and the icon's wave edge.

Typography

SF Pro

Bold
Semibold
Medium
Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789!@#$%^&*()

Apple San Francisco — the macOS system font. On the web it's used via the system stack (-apple-system), falling back to each platform's native UI font.

Iconography

Simple, clean, and minimal. Rounded corners and consistent stroke weights — one <Icon> component serves every glyph on the site.

UI Elements

Text Link →

Coming soonWithout DimmdWith Dimmd

Living specimens — <Button>,<Pill> and<Panel> here are the same Astro components the landing page imports.

Design Tokens

:root {
  /* color */
  --midnight:    #0F1016;
  --graphite:    #1A1C24;
  --deep-purple: #2A1352;  /* Deep Purple */
  --purple:      #A970FF;  /* Dimmd Purple */
  --lilac:       #D6C6FF;  /* Soft Lilac */
  --light-grey:  #F2F2F7;

  /* type — Apple San Francisco via the system stack */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "Helvetica Neue", sans-serif;

  /* gradients — subtle, tonal */
  --g-midnight-veil: linear-gradient(180deg, #1A1C24, #0F1016);
  --g-dimmd-glow:    linear-gradient(135deg, #A970FF, #C9A9FF 60%, #D6C6FF);
  --g-dusk:          linear-gradient(160deg, #232030, #14131C);
  --g-moonrise:      radial-gradient(120% 90% at 50% 0%,
                     rgba(169,112,255,.22), transparent 65%);
  --g-paper:         linear-gradient(180deg, #FFFFFF, #F2F2F7);
}