---
title: "Neon Meridian — Slow Static (Lyrics)"
platform: android
slug: neon-meridian-slow-static-lyrics
screens: []
domains: ["music"]
style: "glassmorphism"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "chip", "segmented-control", "card", "slider", "toolbar"]
score: {clean: 100, consistent: 80, accessible: 83, comprehensible: 52}
url: https://gui.farm/android/neon-meridian-slow-static-lyrics
raw: https://gui.farm/android/neon-meridian-slow-static-lyrics/design.guix
download: https://gui.farm/android/neon-meridian-slow-static-lyrics.gui
---

# Neon Meridian — Slow Static (Lyrics)

A full-screen synced-lyrics now-playing view for a music app, with a dimmed past/upcoming lyric stack, one highlighted active line, album-art hero, scrubber, and transport controls.

- **Live preview:** https://gui.farm/android/neon-meridian-slow-static-lyrics
- **Raw source:** https://gui.farm/android/neon-meridian-slow-static-lyrics/design.guix
- **Download (.gui):** https://gui.farm/android/neon-meridian-slow-static-lyrics.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Neon Meridian — Slow Static (Lyrics)">
  <tokens>
    <color name="text" value="#FBF7FF" />
    <color name="text-70" value="#FBF7FFC2" />
    <color name="text-50" value="#FBF7FFA6" />
    <color name="ink" value="#100819" />
    <color name="glass" value="#FFFFFF14" />
    <color name="glass-2" value="#FFFFFF24" />
    <color name="glass-line" value="#FFFFFF33" />
    <color name="glass-line-soft" value="#FFFFFF1F" />
    <color name="glass-dark" value="#100819A6" />
    <color name="lyric-dim" value="#FBF7FF99" />
    <color name="violet" value="#A78BFA" />
    <color name="violet-strong" value="#8B5CF6" />
    <color name="violet-text" value="#CBBEFF" />
    <number name="r-pill" value="999" />
    <number name="r-lg" value="22" />
    <number name="r-md" value="16" />
  </tokens>

  <styles>
    <text-style name="Clock" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="NavKicker" font-family="Roboto" font-size="10" font-weight="700" line-height="12" letter-spacing="1.2" />
    <text-style name="NavTitle" font-family="Roboto" font-size="14" font-weight="600" line-height="18" />
    <text-style name="ChipText" font-family="Roboto" font-size="11" font-weight="700" line-height="14" letter-spacing="0.3" />
    <text-style name="SongTitle" font-family="Roboto" font-size="24" font-weight="700" line-height="28" />
    <text-style name="Artist" font-family="Roboto" font-size="15" font-weight="500" line-height="20" />
    <text-style name="Seg" font-family="Roboto" font-size="13" font-weight="700" line-height="16" letter-spacing="0.3" />
    <text-style name="LyricActive" font-family="Roboto" font-size="22" font-weight="700" line-height="30" />
    <text-style name="LyricDim" font-family="Roboto" font-size="18" font-weight="600" line-height="26" />
    <text-style name="Time" font-family="Roboto" font-size="12" font-weight="500" line-height="14" />
    <text-style name="TabLabel" font-family="Roboto" font-size="11" font-weight="600" line-height="14" />
  </styles>

  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>

  <col w="360" fill="linear-gradient(180deg, #3A1D63 0%, #241246 38%, #150C24 72%, #100819 100%)">

    <row w="fill" h="26" p="0 16" gap="auto" align="middle-center">
      <text text-style="Clock" value="9:41" color="$text" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23FBF7FF" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23FBF7FF" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full.svg?color=%23FBF7FF" w="15" h="15" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="56" p="0 8" gap="auto" align="middle-center">
      <row role="button" w="40" h="40" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/keyboard-arrow-down.svg?color=%23FBF7FF" w="26" h="26" />
      </row>
      <col gap="2" align="middle-center">
        <text text-style="NavKicker" value="PLAYING FROM PLAYLIST" color="$text-50" />
        <text text-style="NavTitle" value="Late Night Drive" color="$text" />
      </col>
      <row role="button" w="40" h="40" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/more-vert.svg?color=%23FBF7FF" w="24" h="24" />
      </row>
    </row>

    <col w="fill" p="8 16 12 16" gap="14">

      <frame w="328" h="272" radius="$r-lg" clip="true">
        <img src="https://images.unsplash.com/photo-1563089145-599997674d42?auto=format&amp;fit=crop&amp;w=680&amp;h=560&amp;q=80" x="0" y="0" w="328" h="272" fit="cover" />
        <rect x="0" y="150" w="328" h="122" fill="linear-gradient(180deg, #10081900 0%, #100819D9 100%)" />
        <row role="chip" x="16" y="16" h="28" radius="$r-pill" fill="$glass-dark" border="1 $glass-line" p="0 10" gap="6" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/spatial-audio.svg?color=%23CBBEFF" w="15" h="15" />
          <text text-style="ChipText" value="SPATIAL AUDIO" color="$violet-text" />
        </row>
        <row role="button" x="272" y="16" w="40" h="40" radius="$r-pill" fill="$glass-dark" border="1 $glass-line" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/favorite.svg?color=%23A78BFA" w="22" h="22" />
        </row>
        <col x="20" y="206" gap="3">
          <text text-style="SongTitle" value="Slow Static" color="$text" />
          <text text-style="Artist" value="Neon Meridian" color="$text-70" />
        </col>
      </frame>

      <row role="segmented-control" w="fill" h="40" p="4" gap="4" fill="$glass" border="1 $glass-line-soft" radius="$r-pill" align="middle-center">
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="Cover" color="$text-50" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" fill="$violet" align="middle-center">
          <text text-style="Seg" value="Lyrics" color="$ink" />
        </row>
      </row>

      <col role="card" w="fill" fill="$glass" border="1 $glass-line" radius="$r-md" p="20 18 22 18" gap="14">
        <text text-style="LyricDim" value="Neon bleeds across the wet parade" color="$lyric-dim" />
        <text text-style="LyricDim" value="Every station playing songs we made" color="$lyric-dim" />
        <text text-style="LyricActive" value="Slow static, hold me in the fade" color="$violet-text" />
        <text text-style="LyricDim" value="Turn the volume up on all we said" color="$lyric-dim" />
        <text text-style="LyricDim" value="Let the quiet spin instead" color="$lyric-dim" />
      </col>

      <col w="fill" p="4 4 0 4" gap="8">
        <frame role="slider" w="320" h="16">
          <rect x="0" y="6" w="320" h="4" radius="2" fill="$glass-2" />
          <rect x="0" y="6" w="118" h="4" radius="2" fill="$violet" />
          <ellipse x="111" y="1" w="14" h="14" fill="$violet-text" border="2 $violet-strong" />
        </frame>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="Time" value="1:24" color="$text-70" />
          <text text-style="Time" value="-2:23" color="$text-70" />
        </row>
      </col>

      <row w="fill" h="76" p="0 6" gap="auto" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/shuffle.svg?color=%23CBBEFF" w="24" h="24" />
        <img src="https://api.iconify.design/material-symbols/skip-previous.svg?color=%23FBF7FF" w="34" h="34" />
        <row role="button" w="66" h="66" radius="$r-pill" fill="$violet-strong" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/pause.svg?color=%23100819" w="34" h="34" />
        </row>
        <img src="https://api.iconify.design/material-symbols/skip-next.svg?color=%23FBF7FF" w="34" h="34" />
        <img src="https://api.iconify.design/material-symbols/repeat.svg?color=%23FBF7FFA6" w="24" h="24" />
      </row>

    </col>

    <row role="toolbar" w="360" h="64" p="0 24" gap="0" fill="$glass-2" border="1 0 0 0 $glass-line-soft" align="middle-center">
      <col w="fill" h="fill" gap="3" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/lyrics.svg?color=%23CBBEFF" w="22" h="22" />
        <text text-style="TabLabel" value="Lyrics" color="$violet-text" />
      </col>
      <col w="fill" h="fill" gap="3" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/cast.svg?color=%23FBF7FFA6" w="22" h="22" />
        <text text-style="TabLabel" value="Living Room" color="$text-50" />
      </col>
      <col w="fill" h="fill" gap="3" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/queue-music.svg?color=%23FBF7FFA6" w="22" h="22" />
        <text text-style="TabLabel" value="Queue" color="$text-50" />
      </col>
    </row>

  </col>
</gui>

```