Skip to content

Reimagine the UI with the "Nocturne" design language - #13

Merged
vssinghh merged 1 commit into
mainfrom
claude/ui-redesign-0aqgdz
Jul 6, 2026
Merged

Reimagine the UI with the "Nocturne" design language#13
vssinghh merged 1 commit into
mainfrom
claude/ui-redesign-0aqgdz

Conversation

@vssinghh

@vssinghh vssinghh commented Jul 6, 2026

Copy link
Copy Markdown
Owner

A ground-up visual redesign around the idea that Hush is the moment
after the noise stops — hushed, editorial, restrained:

  • Typography: serif (system Noto Serif) display/headline/title-large
    styles for an editorial voice; sans for everything read at speed
  • Color: light theme becomes warm linen paper with a deep dusk-indigo
    primary; dark theme a near-black midnight sky with moonlit lilac.
    The six candy accents collapse into a dusty semantic set (ember red
    = block, dusk gold = mute, sage = allow; slate/plum/teal metadata)
  • Surfaces: flat cards with hairline borders and larger radii replace
    tonal fills and drop shadows; new QuietSurface component
  • Navigation: floating pill bottom bar with an expanding filled pill
    for the selected tab, replacing the stock NavigationBar
  • Chat: solid ink user bubbles, serif "h" monogram avatar, bordered
    pill input, theme-aware AI status bubbles (drops the light-only
    pastel hacks so dark mode renders correctly)
  • Rules: action-colored edge bars, outlined attribute chips
  • History: serif italic datelines, serif monogram discs, tint-based
    status badges that work in both themes
  • Settings: sections grouped into hairline-bordered islands with
    soft-washed icon tiles
  • Onboarding: dusk-gradient hero reserved as the app's one gradient
    moment, serif wordmark and italic tagline

All test tags, user-visible strings relied on by tests, and ViewModel
contracts are unchanged.

Co-Authored-By: Claude Fable 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01N5ZagcBdYgvCwzCpJGRBH1

A ground-up visual redesign around the idea that Hush is the moment
after the noise stops — hushed, editorial, restrained:

- Typography: serif (system Noto Serif) display/headline/title-large
  styles for an editorial voice; sans for everything read at speed
- Color: light theme becomes warm linen paper with a deep dusk-indigo
  primary; dark theme a near-black midnight sky with moonlit lilac.
  The six candy accents collapse into a dusty semantic set (ember red
  = block, dusk gold = mute, sage = allow; slate/plum/teal metadata)
- Surfaces: flat cards with hairline borders and larger radii replace
  tonal fills and drop shadows; new QuietSurface component
- Navigation: floating pill bottom bar with an expanding filled pill
  for the selected tab, replacing the stock NavigationBar
- Chat: solid ink user bubbles, serif "h" monogram avatar, bordered
  pill input, theme-aware AI status bubbles (drops the light-only
  pastel hacks so dark mode renders correctly)
- Rules: action-colored edge bars, outlined attribute chips
- History: serif italic datelines, serif monogram discs, tint-based
  status badges that work in both themes
- Settings: sections grouped into hairline-bordered islands with
  soft-washed icon tiles
- Onboarding: dusk-gradient hero reserved as the app's one gradient
  moment, serif wordmark and italic tagline

All test tags, user-visible strings relied on by tests, and ViewModel
contracts are unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01N5ZagcBdYgvCwzCpJGRBH1
@vssinghh
vssinghh merged commit 81990c9 into main Jul 6, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants