Where to look

1. FoundationsColour, contrast, type, space and motion
2. Countdown and voiceEvery countdown state and the words that say how sure a time is
3. ComponentsEach view at real size, with specs and a SwiftUI call
4. Widgets and Live ActivityThe app’s own renders of every family and presentation
5. Accessibility and resourcesWhat the app does for access, downloads and the rename

Principles

Brand

The name, logo and icon are in the app. The brand colour is Meridian Gold, on the logo’s star and “Out now”.

A meridian is the line that sets your local time. Noon is the moment the sun crosses yours.

It is also the line a star crosses at its highest point. Meridian tells you the moment your episode crosses your line, on your clock.

Logo

Longitudes: a globe drawn only by its meridians, spaced as on a sphere. Yours is at full strength and rises past the globe to a single star. In colour the star is Meridian Gold; the one-colour version, star included, works in every tint.

Sizes

The smallest size is 16 px. Below 24 px the faint meridians read as texture, and the bright meridian and star carry the mark. Keep 12 units of clear space on every side: the distance from the star’s centre to the top of the grid.

App icon

The mark on neutral night: a radial gradient from #1C1C1C to #0D0D0E, the app’s night and Live Activity bases. The glyph is starlight #F4EFE4, its 100-unit grid scaled 6.2 times to 620 px, about 60% of the 1024 px canvas, placed at (202, 219) so it sits optically centred, with the star in Meridian Gold. The app ships the default for both light and dark mode, plus the tinted source; scripts/make-app-icon.swift draws all three.

Wordmark

“Meridian” in New York Regular, the face of show titles. The mark is about 1.7 times the cap height, and the gap is about 0.3 times the mark’s width.

Using the mark

Brand colour: Meridian Gold

The night and its starlight, plus one gold, #E9C46A, kept for exactly two things: the logo’s star and the “Out now” moment. One moment, one star. Gold never says how sure a time is; the words still do that. Everything else keeps its colour from the show’s art, and controls stay white.

Contrast for gold is in Foundations, Contrast. The two options not chosen are in the archive.

Colour

Night Sky: a near-black base that takes a hint of the show’s art, three strengths of white for text, and no colour outside the artwork. Alpha colours are previewed on the base they are used on. The CSS variable names are this site’s own; the Swift names are the app’s.

Text

The same three strengths on every surface. The app’s muted is the system secondary label; widgets and the Live Activity use white at 55%. Each sample sits on the base it is used on.

Bases

Night from the art

Each show’s night base is computed from its art. Warm hues (under 75° or over 320°) keep saturation at 0.08 or less and brightness 0.11, so the page is charcoal, never brown. Cool hues keep saturation at 0.32 or less and brightness 0.14. White text on any of them is 15.6 to 17.5:1. The two named samples are the bases this site works out from Wednesday’s and Severance’s key art for its mockups.

Controls and overlays

Raw values in views, not yet named tokens.

Live Activity parts

Contrast

Computed live in this page with the WCAG 2.x formula. Each alpha ink is composited over its base first. AA needs 4.5:1 for text and 3:1 for large text; AAA needs 7:1. Pairs the app never draws say “not used”.

Computing…

Fixed pairs and the brand colour

Type

New York for show titles, headers and every countdown numeral. SF Pro for everything else. Numerals are always tabular, so a ticking timer never jitters. The app bundles no fonts.

This site sets New York in Newsreader, a close web serif, so it looks the same in every browser. The app uses New York.

Every size in the app

From the 64 pt hero countdown down to the 10 pt unit in the circular widget, at 1 pt to 1 px. Type your own text to try it at every size.

Space and shape

Spacing

Six steps on a 4 pt base, drawn at twice their size.

Radius

The named radius tokens (card 14, sheet 20, widget 22) are not used by any live view.

Materials

No shadows anywhere. Depth comes from art fading into night, two scrims (black at the top of the art header, and the page colour under the status bar once a page scrolls past its art), Welcome’s wall of art (dimmed with night, masked away and faded under the status bar), and one material: Liquid Glass on the back button. iOS also draws the tab bar, search field and Dynamic Island.

Motion

Icons

SF Symbols only. Each sits beside a word or has an accessibility label. The glyphs here are approximations.

• clockUpcoming tab
• magnifyingglassSearch tab
• gearshapeSettings tab
• chevron.leftBack button
• plusFollow (+) and the Follow button
• checkmarkFollowing
• tvPoster placeholder; circular and rectangular widgets
• calendarCircular widget, date only

Every state

Live in this page. The ticking times are worked out in your own time zone, as the app does.

Sizes: the word “Out now” is 0.7 times the countdown’s size, “Released” and a date are 0.6 times, and the unit letters “d” and “h” are 0.5 times in the secondary ink.

Try it

Only the last day ticks. Further out it reads 2d 4h, and the hour steps down without a timer. A ticking countdown keeps room for its widest value from now on (“0:00”, “00:00”, “0:00:00”, then “00:00:00”), so it never takes all the width a widget offers. VoiceOver reads “2 days 4 hours”, never “2 d 4 h”.

Certainty words

How sure a time is, said in the time itself. The verb is the whole system.

The small, medium and large widgets’ out line is the app’s own, with “at” (“Out Wed at 02:00”). The short lines, with no “at”, are the rectangular Lock Screen widget’s top line, the rows in the medium widget, and the Live Activity’s time line.

Reasons for a show with nothing scheduled: “Ended”, “Between seasons”, “On hiatus”, “Waiting for news”, “Not out yet”, “No new episode announced”.

Voice

Write what is true, in the viewer’s clock and the app’s words.

Which component?

1. When the next episode is, big. The headline of a screen.

   ReleaseHeadline

2. A countdown anywhere: app, widget or row.

   CountdownText, or LiveActivityCountdown in the Live Activity

3. A time in a sentence, such as “Expected Wed at 23:00”.

   ReleaseWording.outLine. Never a chip or a dot.

4. The episode and where it’s on, under a title.

   ReleaseMeta

5. The show’s art at the top of a page.

   NightArtHeader, plus the system back button if the page can go back

6. A list of followed episodes.

   Upcoming row under a section header

7. Shows with nothing scheduled.

   Quiet grid cell; in widgets, a quiet row

8. Browsing, or search results.

   Poster grid cell with the Follow (+) button

9. Narrowing a grid, one choice at a time.

   Filter chip or service chip; between two catalogues, the kind switch

10. The one main action on a page.

    Follow capsule, or the white primary button on Welcome

11. A preference.

    System list rows; for one show, the Live Activity toggle

12. Nothing to show.

    Empty states: say what is true and what to do. Never promise when it will update.

13. How sure a time is, as a colour or icon.

    Don’t. Say it in words. The old source chip is archived.

TabView(selection: $tab) {
    Tab("Upcoming", systemImage: "clock", value: .upcoming) {
        UpcomingTab(model: model, onFind: { tab = .search })
    }
    // Search sits in the middle (Chime). A `.search` role tab always floats on the trailing edge on iOS 26,
    // so this is a plain tab.
    Tab("Search", systemImage: "magnifyingglass", value: .search) {
        SearchView(client: client, anilist: anilist, rules: model.rules)
    }
    Tab("Settings", systemImage: "gearshape", value: .settings) {
        SettingsView(scheduler: scheduler, model: model)
    }
}
.tint(.white)
.environment(\.colorScheme, .dark)

.navigationBarTitleDisplayMode(.inline)
.toolbarBackgroundVisibility(.hidden, for: .navigationBar)
.scrollEdgeEffectHidden(true, for: .top)

ArtworkLoaderView(url: artwork?.hero, maxPixel: ShowArtwork.idealBackgroundWidth) { hero in
    let base = (hero?.palette ?? .neutral).night.color
    NightArtHeader(image: hero?.image, base: base, height: 500)
}

TimelineView(.countdown) { context in
    ReleaseHeadline(drop: drop, now: context.date, formatter: formatter, testID: "detail")
}

VStack(alignment: .leading, spacing: Tokens.Space.s) {
    ReleaseHeadline(drop: drop, now: now, formatter: formatter, testID: "upcoming-hero")
    ReleaseMeta(drop: drop, formatter: formatter)
}

CountdownText(drop: drop.date, confidence: drop.confidence, airdate: drop.airdate,
              now: now, size: 24, tint: .white, formatter: formatter, alignment: .trailing)
    .environment(\.numeralStudy, .night)   // set .night: the environment default is .system
    .fixedSize()

LiveActivityCountdown(dropDate: state.dropDate, now: now, size: 36)
// Text(timerInterval: min(now, dropDate)...dropDate, countsDown: true), no pauseTime

Button { onSelect(hero) } label: {
    UpcomingHero(drop: hero, image: image, base: base, now: now, formatter: formatter)
}
.buttonStyle(.plain)
.accessibilityIdentifier("upcoming-hero")

Text(section.title)
    .font(.subheadline.weight(.medium))
    .foregroundStyle(NightInk.muted)
    .accessibilityAddTraits(.isHeader)

row(drop, index: n, now: context.date)   // private in UpcomingView
// title:  .font(.system(size: 20, design: .serif))
// count:  CountdownText(..., size: 24, tint: .white, alignment: .trailing)
// line:   Text(ReleaseWording.outLine(drop, now: now, formatter: formatter))
//           .font(.subheadline).foregroundStyle(NightInk.secondary)

PosterImage(url: artwork[show.showID]?.posterThumbnail ?? artwork[show.showID]?.poster, cornerRadius: 8)
    .aspectRatio(2 / 3, contentMode: .fit)
Text(ReleaseWording.quietNote(status: show.status, lastAired: show.lastAired, formatter: formatter,
                              now: now))
    .font(.caption)
    .foregroundStyle(NightInk.muted)
    .lineLimit(3)

Button { onSelect(drop) } label: { spotlight(sections, image: image, base: base, now: now) }
    .buttonStyle(.plain)
    .accessibilityIdentifier("upcoming-spotlight")

Button("Find a show", action: onFind)
    .buttonStyle(PrimaryButtonStyle())
    .accessibilityIdentifier("upcoming-empty-find")

Picker("Kind", selection: $kind) {
    ForEach(Kind.allCases, id: \.self) { Text($0.rawValue).tag($0) }
}
.pickerStyle(.segmented)

SearchFilterRow(options: AiringFilter.options(for: kind), selection: filter, logos: Self.logos)
    .padding(.top, Tokens.Space.s)

// SearchFilter.service("Netflix").identifier == "search-filter-service-netflix"
AiringFilter.options(for: .tv)   // [.popular, .today, .newSeasons, .exactTime] + 12 services

followButton(result, size: 32, id: "\(id)-follow")
    .padding(Tokens.Space.xxs)   // overlay(alignment: .topTrailing) on the poster

posterGrid("Results", headerID: "search-results-header", results, idPrefix: "search-result") { result in
    VStack(alignment: .leading, spacing: 0) {
        if !result.gridMeta.isEmpty { Text(result.gridMeta) }
        if let status = result.status { Text(status) }
    }
    .accessibilityElement(children: .ignore)
    .accessibilityLabel(result.meta)
}

Button("Show popular") { filter.wrappedValue = .popular }
    .buttonStyle(.bordered)
    .tint(.white)
    .accessibilityIdentifier("search-filter-clear")

Label(following ? "Following" : "Follow", systemImage: following ? "checkmark" : "plus")
    .font(.headline)
    .foregroundStyle(following ? .white : .black)
    .frame(maxWidth: .infinity, minHeight: 50)
    .background(following ? AnyShapeStyle(.white.opacity(0.12)) : AnyShapeStyle(.white), in: Capsule())

.navigationDestination(for: ShowRoute.self) { route in
    ShowPreviewView(route: route, client: client, anilist: anilist, rules: rules)
}

Text(ReleaseWording.explanation(drop, broadcastZone: drop.broadcastZone, formatter: formatter))
    .font(.subheadline)
    .foregroundStyle(NightInk.secondary)
    .fixedSize(horizontal: false, vertical: true)
    .padding(.top, Tokens.Space.xs)
    .accessibilityIdentifier("detail-why")

Toggle(isOn: $liveActivity) {
    VStack(alignment: .leading, spacing: 2) {
        Text("Release-night Live Activity").font(.body)
        Text("Starts \(LeadTime.phrase(minutes: leadMinutes)) before, on your Lock Screen")
            .font(.footnote).foregroundStyle(NightInk.muted)
    }
}
.tint(.white.opacity(0.6))

EpisodeRows(episodes: episodes, ink: .white, formatter: formatter)

Button("Unfollow", role: .destructive) { confirmingUnfollow = true }
.confirmationDialog("Stop following \(drop.showName)?", isPresented: $confirmingUnfollow,
                    titleVisibility: .visible) {
    Button("Unfollow", role: .destructive) { onUnfollow(); dismiss() }
}

Section("Time zone") {
    LabeledContent("Automatic", value: ReleaseWording.zoneSummary(formatter, at: .now))
}
Section {
    Picker("Live Activity lead time", selection: $leadMinutes) {
        ForEach(LeadTime.choices, id: \.self) { Text(LeadTime.phrase(minutes: $0)).tag($0) }
    }
    permission
} footer: {
    Text("The release-night Live Activity starts this long before an episode is out.")
}

NavigationLink("Credits & licences") { CreditsView() }
    .accessibilityIdentifier("settings-credits")

WelcomeView(client: client, anilist: anilist, rules: model.rules,
            onFind: { welcomeDone = true; tab = .search }, onLater: { welcomeDone = true })

PosterImage(url: result.poster, cornerRadius: 8)
    .aspectRatio(2 / 3, contentMode: .fit)

ScrollView { … }
    .background(base)
    .statusBarShade(base, art: 500)  // also ignores the top safe area

Widgets

One widget, “Next episode”: how long until your next episode, in your time zone, and where it’s on. It comes in six families.

Home Screen

Night base #1C1C1C with the show’s art across the top (all of it on small and medium, 62% on large), fading clear, then to 0.7, then to the base. The service is tagged top left (“HBO · US”; a long one shortens before its country, “Paramount+… · US”), and “+N more this week” top right when shows don’t fit. Small shows one show, medium three, large four. The large widget’s hero title takes up to two lines; the small widget’s stays on one.

Lock Screen

System inks, because iOS tints them. Inline: “Silo · 2d 4h”; a long name shortens and the count, “Out now” or the day after it stays (“Frieren: Beyond Jour… · 3d 6h”). Circular: an open ring that fills over the last 7 days, a tv glyph, and “2d”, “4h” or “38m” in the gap. Rectangular: “Expected Wed 23:00” (“today” and “tomorrow” close by, the weekday within the week, then the date, “Out Wed 11 Nov 22:00”, with the year when it differs), then the name, then the countdown and service. A long service shortens before its country: “Paramount… · US”.

Quiet rows

Followed shows with nothing scheduled fill spare rows: poster, name, “Nothing scheduled”; the large widget adds why. Empty: “Follow a show” with “Its countdown shows up here.”, “Nothing scheduled” with “Meridian checks again each time you open it.”, or “Silo returns Fri 9 Jul 2027” with “Nothing else is scheduled.”

Tinted and Always-On

When tinted, the countdown takes the tint, and so does the headline when there’s nothing to count down (“Follow a show”, “Nothing scheduled”, “Silo returns …”). On the Lock Screen so do the inline line, the rectangular widget’s title, and the circular widget’s ring fill, value and date-only day number. Everything else keeps its ink, “Out now” loses its gold, and posters lose their colour. Always-On hides the art and dims every ink to 0.85 except the countdown and that empty headline, so muted text stays above 4.5:1 (it was 0.7, 3.45:1: UX audit #21).

VoiceOver

One full phrase a show: “House of the Dragon, in 3 hours, HBO US, no official stream in your country”; “Silo, expected in 2 days 4 hours, Apple TV”; “Nothing scheduled for your shows”. The episode title is left out, so nothing is spoiled.

IDs

widget-inline · widget-circular-ring, -value · widget-rect-meta, -title, -countdown, -provider · widget-small-provider, -title, -countdown, -out · widget-medium-row-1 to -3, widget-large-row-1 to -4, widget-more, widget-medium-empty, widget-large-empty

The renders are the app’s own views. Each show’s key art and posters load from TVmaze and AniList behind them, cropped as the phone crops them; if an image can’t load, a neutral placeholder shows instead.

In these renders the medium widget shortens a long title in a lower row. The certainty word stays.

Live Activity

On release night, for the shows you choose, from the lead time (2 hours by default). Night base #0D0D0E, the show’s art on the right edge, and a plain-words label over a serif countdown. At the drop the content goes stale and every view says “Out now”, with no app running.

Rules

The timer has no pauseTime: with one, it was drawn frozen. The Lock Screen banner is at most 160 pt tall at 360 wide, even with the longest name. The minimal view fits 28 pt when the island is limited. The payload stays well under 4 KB, with no art: the drop IDs, show name, episode label (“S2E5”), a short service name, the certainty verb, a no-official-stream flag, the show ID that finds its art in the App Group and the window start; the content state is the phase, the drop date and the time it was delayed from. At most 3 are scheduled at once.

Copy

Title “Silo” or “Silo + 1 more”. Details “S2E5 · Apple TV · US”. Band “Out in”, “Expected in” or “Airs in Japan in”, then “Out now”. Time “Expected Fri 02:00”; after a delay the Lock Screen strikes the old time through and the expanded island says “Delayed from 01:00” (D-57). Alert “Starts in 2 hours · 02:00 · Apple TV” for an exact time, or “Expected in 2 hours · …”.

VoiceOver and IDs

“Silo, expected in 2 hours, delayed from Fri 01:00, Apple TV”. IDs: la-title, la-more, la-details, la-countdown, la-time, la-previous, la-compact-poster, la-compact-timer, la-minimal, la-expanded-title, -art, -time, -moved, -countdown, la-small-title, la-small-countdown

The renders are the app’s own views. Each show’s art loads from TVmaze and AniList behind them, cropped as the phone crops it; if an image can’t load, a neutral placeholder shows instead.

Accessibility

Downloads

• { }tokens.jsonColour, type, space, radius, opacity and motion, in the W3C design-token format
• meridian-longitudes.svgThe mark, in one colour that follows the text colour
• meridian-icon-dark.svgThe app icon, 1024 × 1024
• meridian-icon-light.svgThe light appearance
• meridian-icon-tinted.svgThe mono source iOS tints

Renamed to Meridian

Done on 2 November 2026. Every place below now says Meridian, and so do the targets and folders, the bundle ID (dev.chime.meridian), the App Group and the GitHub repo (ChimeXXD/meridian). The app icon is the Longitudes mark.

• Home Screen name

  DISPLAY_NAME = MeridianConfig/Base.xcconfig:5 (PRODUCT_NAME in project.yml is internal)

• Welcome wordmark

  “Meridian”Meridian/Features/Welcome/WelcomeView.swift:81

• Settings permission line

  “Live Activities are off in Settings › Meridian”Meridian/Features/Settings/SettingsView.swift:60

• Credits: licence

  “Meridian is open source under the MIT licence”Meridian/Features/Settings/SettingsView.swift:95

• Credits: no data

  “Meridian collects no data. Nothing leaves your phone except requests to TVmaze, AniList and Wikimedia.”Meridian/Features/Settings/SettingsView.swift:97

• Upcoming empty headline

  “Nothing scheduled for your shows yet. Meridian checks again each time you open it.”Meridian/Features/Upcoming/UpcomingSections.swift:81

• Widget empty detail

  “Meridian checks again each time you open it.”Shared/Widgets/WidgetText.swift:54

• Debug builds only

  The Debug status “Live Activities are off in Settings › Meridian.”, and the setup-check titleMeridian/Features/Debug/DebugMenuView.swift:77 · Meridian/App/PlaceholderView.swift:12

• Not visible, but sent with requests

  User-Agent “Meridian/1.0 (https://github.com/ChimeXXD/meridian)”Meridian/Services/Artwork/ArtworkLoader.swift:31

The widget’s name in the gallery stays “Next episode”, which describes what it shows.

Archive

Kept for reference. Nothing here is drawn by a live screen. Source paths on this site start inside the app’s folder or at Shared/.

// Don't: SourceChip(source: drop.source, confidence: drop.confidence)
// Do:    Text(ReleaseWording.outLine(drop, now: now, formatter: formatter))

// Deleted:  DropRow(drop: drop, index: 1, now: now)
// Live:     UpcomingView.row(_:index:now:)

Rejected logo directions

#if DEBUG
NavigationLink("Debug") { DebugMenuView(model: model, scheduler: scheduler) }
#endif