Style guide

Flatbed styles

How Flatbed looks today on Mac, iPhone and iPad, read from the Swift source. The app is built on system colors and Dynamic Type, with a status color for each of the four statuses and a badge color for each link type. Items marked to decide are places where the app disagrees with itself.

Color

System colors adapt to light and dark, so each shows its light value on the left half and its dark value on the right. Values are the iOS system values; contrast is the light value against white. Mac uses the matching AppKit colors.

Status

Exploring2.2:1

Exploring

#FF9500 light · #FF9F0A dark

Orange. Status dot and label for Exploring. Also the ==highlight== text in notes. Check About 2.2:1 on white, low for highlighted text.

Working4.0:1

Working

#007AFF light · #0A84FF dark

Blue. Status dot and label for Working.

Reviewing4.1:1

Reviewing

#AF52DE light · #BF5AF2 dark

Purple. Status dot and label for Reviewing.

Done2.2:1

Done

#34C759 light · #30D158 dark

Green. Status dot and label for Done.

Link badges

Figma3.9:1

Figma

#A259FF

Badge beside a Figma link, detected from the host name.

Jira6.8:1

Jira

#0052CC

Badge beside a Jira link.

Aha4.3:1

Aha

#EC1C4C

Badge beside an Aha link.

Link3.3:1

Link

#8E8E93 light · #8E8E93 dark

Badge for any other link. System gray.

Accent and text

Accent4.0:1

accentColor

#007AFF light · #0A84FF dark

Selection, checked checklist boxes, the active status segment. The system accent; the app sets none of its own.

Primary21.0:1

primary

#000000 light · #FFFFFF dark

Issue titles, notes, checklist text.

Secondary3.4:1

secondary

#8A8A8E light · #8D8D93 dark

Timestamps, section labels such as CHECKLIST and LINKS, placeholders. Shown blended onto the background. Check About 3.4:1 on white, under the 4.5:1 that small text needs.

Tertiary1.7:1

tertiary

#C4C4C6 light · #48484A dark

Disabled and de-emphasized text, such as completed checklist items. Shown blended onto the background. Check Low contrast by design; completed steps stay readable but quiet.

Surfaces

Viewer

flatbedViewerBackground

#FFFFFF light · #000000 dark

iOS: systemBackground. Mac: windowBackgroundColor. Used for the image and video viewer.

Detail

flatbedDetailBackground

#F2F2F7 light · #1C1C1E dark

iOS: secondarySystemBackground. Mac: underPageBackgroundColor. The issue detail background.

Separator

flatbedSeparator

#C6C6C8 light · #38383A dark

Hairlines between rows and around fields. Platform separator color.

Type

The system font at Dynamic Type sizes shown at their default. No custom fonts. Sizes are the Dynamic Type defaults; they scale with the user’s text size. Roles are inferred from where each style appears.

Styles in use

Title 2Regular 22

Issue title in the detail

Title 3, semiboldSemiBold 20

List header

Title 3Regular 20

Empty-state heading

HeadlineSemiBold 17

Issue

Body, semiboldSemiBold 17

Highlighted note text

System 13Regular 13

Small control label

CaptionRegular 12

Document empty states · 18 minutes ago

Caption, semiboldSemiBold 12

CHECKLIST

Caption 2Regular 11

Created Aug 11, 2026

Use counts in the source: Caption 14, Caption 2 5, Title 2 4, Title 3 3, Headline 1. The app uses SF Symbols for icons.

Spacing and shape

Spacing in use

Item	Value
Stack spacing in use	0, 2, 4, 5, 6, 7, 8, 10 (6 and 10 most common)
Touch target	44 minimum height on rows and buttons
Mac window	720 minimum width, 900 ideal, 520 minimum height
Notes editor	120 minimum height

Corner radius in use

4
1 use

5
1 use

6
2 uses

7
2 uses

9
2 uses

Borders and shadow

Item	Value
Default	1 pt platform separator around fields and rows
Selection	System accent fill on the selected row and active status segment

Screens

Real captures from the running app, not redrawings. Click one to see it at full size.

Mac

**Overview**Sidebar of statuses, list of issues, detail with notes, checklist and links. Dark appearance.

**Working filter**The Working status selected, with its two issues.

iPhone and iPad

**iPhone issue**Status segments, notes, images, checklist, links. Light appearance.

Open issues

Flatbed uses system colors and Dynamic Type on purpose, so there are few conflicts. These are the places it could be tighter.

Highlight contrast. The ==highlight== text is system orange, about 2.2:1 on white. Fine in dark appearance; weak in light. to decide
Secondary text contrast. iOS secondary label is about 3.4:1 on white, under the 4.5:1 small text needs. It carries timestamps and section labels.
Status colors are system colors. Orange, blue, purple and green shift with the OS. Fine for a native app; it means there are no fixed hex values to match in screenshots or the web.
Link badge brand colors. Figma, Jira and Aha use their own brand colors, typed as float values in one file (StatusStyle.swift).
Radii. 4, 5, 6, 7 and 9 are all in use, one or two places each, with no rule for which is which.
Named tokens. Only three colors have names (detail, viewer, separator). The rest are system colors or inline.

Decisions

Four fixed statuses, each with one system color: Exploring orange, Working blue, Reviewing purple, Done green.
The accent is the system accent. No custom brand color.
One codebase covers Mac, iPhone and iPad.