Mac Chrome · Windows · Menus · Icons

How Dagrun looks inside macOS.

The Mac app must feel native, not branded. That means traffic lights in the exact OS position, a sidebar that behaves like a source list, toolbar heights that match system conventions, and a dock icon drawn on the Apple squircle curve — not a rounded square. The brand shows up in accent color, typography, and the mark. Everything else = stock macOS.
01 · Main window

Unified titlebar · 52pt tall · vibrant.

Use windowStyle(.hiddenTitleBar) and fold the toolbar into the titlebar. Traffic lights sit 14pt from the leading edge, vertically centered. The sidebar is a vibrancy-backed source list at 240pt. Minimum window 1100×760, default 1280×820.

Search routes, models, logs…
Dagrun — Auth refactor
Recent
Auth refactor
PR review sweep
Changelog gen
Models
claude-opus-4
gpt-5
gemini-pro
Tools
Shell
Filesystem
Git
content area · this is where FlowRunView / OrchestrationScreen renders
52pt titlebartraffic lights · 14pt inset · 12pt dia · 8pt gap240pt sidebar · vibrancy
swiftui
// Sources/AgentOSApp/AgentOSApp.swift (illustrative)
@main
struct dagrunApp: App {
    @StateObject private var store = DashboardStore()

    var body: some Scene {
        WindowGroup {
            RootView()
                .environmentObject(store)
                .frame(minWidth: 1100, minHeight: 760)
        }
        .windowStyle(.hiddenTitleBar)
        .windowToolbarStyle(.unified(showsTitle: false))
        .defaultSize(width: 1280, height: 820)

        Settings {
            SettingsView()
                .frame(width: 900, height: 720)
        }
    }
}

02 · Sidebar · Source list

240pt · vibrancy · accent-tinted selection.

NavigationSplitView with the sidebar column set to .navigationSplitViewColumnWidth(min: 220, ideal: 240). Section headers in JetBrains Mono 9 @ 0.18em tracking; items in Inter 13. Selected item is a solid signal-orange pill with white text — do not use the default system blue.

width · 240pt
material · .regularMaterial with bgSunken tint
section header · Mono 9 · 0.18em tracking · uppercase
item row · 5pt vertical · 12pt horizontal · 6pt margin
item radius · 5pt
selected bg · dagrun/signal (not system accent)
selected fg · white · weight 500
badge · Mono 10 · white @ 22% on signal

03 · Menu bar extra

Template image · single color.

macOS menu bar extras must be a 1-color template image — the system inverts automatically in dark menu bars. Ship the mark at 16pt + 18pt retina, alpha only, stored in the app bundle as AppIconTemplate.pdf.

DagrunFileRouteView
3 routes active
Fri 14:22
DagrunFileRouteView
3 routes active
Fri 14:22

04 · Dock / App icon

Paper squircle · signal-dot emphasis.

The icon is drawn on a 1024×1024 paper-tinted squircle. Apple’s system squircle is a super-ellipse — not a rounded rectangle. The mark sits centered, with the signal dot still anchored to a ground-line. Export an .icns with sizes 16/32/128/256/512 @ 1× and 2×.

1024, 512, 256, 128, 64 @ 1× + 2× · exported as AppIcon.appiconset

05 · Toolbar · Buttons

Native controls first, Dagrun finish second.

Prefer .borderedProminent / .bordered / .plain with .controlSize(.small / .regular / .large). Then set AccentColor = #FF4D1F in the asset catalog so every system-tinted control picks up signal. The Dagrun accent filled button overrides system only when we need to force the signal color against a non-tinting surface.

Primary · .borderedProminent
Accent · Dagrun override
Secondary · .bordered
Ghost · .plain
Danger

06 · Summary

What you ship to Xcode.

Assets.xcassets / AccentColor#FF4D1F (Any, Light, Dark all the same)
Assets.xcassets / dagrun/*12 semantic color sets (bg, bg.raised, text.primary, border, success, warning, danger, …)
Assets.xcassets / AppIcon1024² down to 16² + 2× from DockIcon.tsx
Resources/Fonts/Inter-*, InterTight-*, JetBrainsMono-* (OFL + Apache 2.0)
Info.plistATSApplicationFontsPath = Fonts
DesignSystem/Palette.swift · Typography.swift · Shadow.swift · Motion.swift · IconDagrun.swift · DagrunMark.swift
Primitives/DagrunButton · Badge · Card · Toast · Input · KPITile · StatusDot · RoleBadge
Patterns/LiveStepRow · FlowChainView · ApprovalTableView · CompletionSummaryView · PermissionPromptView · ManagedRuntimeCard · AuditRow · InfoBanner · SettingsForm