Style guide

Artifactr styles

How Artifactr looks today, read from the Swift source. The app leans on iOS system colors and Dynamic Type; the one thing the user chooses is the accent color. 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.

Accent, the user’s choice

Blue4.0:1

systemBlue Default

#007AFF light · #0A84FF dark

Default accent. Tint on icons, the new-artifact button, selected tab, category pills and stars.

Indigo5.6:1

systemIndigo

#5856D6 light · #5E5CE6 dark

Accent choice in Settings, Appearance.

Orange2.2:1

systemOrange

#FF9500 light · #FF9F0A dark

Accent choice.

Pink3.6:1

systemPink

#FF2D55 light · #FF375F dark

Accent choice.

Purple4.1:1

systemPurple

#AF52DE light · #BF5AF2 dark

Accent choice.

Asset

AccentColor asset

#9E006B light · #00C7E0 dark

Value in the asset catalog. The tint in the interface comes from the choice above, not from this. Check It is not used for the interface tint, so it may be unused.

Text

Primary21.0:1

primary

#000000 light · #FFFFFF dark

Titles, body text, category names.

Secondary3.4:1

secondary

#8A8A8E light · #8D8D93 dark

Dates, tags, card action icons, placeholders. iOS secondary label, shown here blended onto the background. Check About 3.4:1 on white, under the 4.5:1 that small text needs.

Surfaces

Background

systemBackground

#FFFFFF light · #000000 dark

Screen background, list and sidebar.

Card

secondarySystemBackground

#F2F2F7 light · #1C1C1E dark

Artifact cards, category rows. Also systemGray6 where used.

Detail

Detail dark

#1C1C1E light · #1C1C1E dark

Detail screen background in dark appearance. Typed as three float values, not a system color. Check Hard-coded in three places.

Opacity in use

Value	Where
0.15	Secondary color fill behind small elements
0.45	Inactive tab icon (primary at 0.45)
0.25	Shadow under floating controls (black)

Type

The system font at Dynamic Type sizes shown at their default. No custom fonts are used in the interface. 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 2, boldBold 22

Editorial product shot

System 22 semiboldSemiBold 22

Large symbol or heading

Title 3Regular 20

Title 3

HeadlineSemiBold 17

Card title, list heading

BodyRegular 17

Create an editorial product photo of a sculptural ceramic speaker.

SubheadlineRegular 15

Category name, form label

System 13 semiboldSemiBold 13

Small control label

CaptionRegular 12

# editorial · 6 hours ago

Caption 2Regular 11

Counts, small notes

Use counts in the source: Caption 16, Caption 2 10, Subheadline 5, Headline 4, Title 2 5, Body 3, Title 3 2. Icons are SF Symbols; each category picks its own. The ARTIFACTR wordmark is an image asset, not live text.

Spacing and shape

Spacing in use

Item	Value
Stack spacing in use	3, 4, 6, 8, 10, 12, 16 (8 and 12 most common)
Padding	default system padding, plus 3 to 5 vertical on small pills and 12 to 20 on rows and empty states

Corner radius in use

8
3 uses

10
2 uses

12
2 uses

16
1 use

Borders and shadow

Item	Value
Card	secondary system background fill with a thin outline
Shadow	black at 0.25 and a 1 pt radius shadow, on floating controls

Screens

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

iPhone

**Library, blue accent**All artifacts as cards. Round icon, title, category pill, tags, date, then Copy, Share, Edit and Delete.

**Categories**Sidebar with All Artifacts, Favorites and user categories. Pink accent.

**Personalize, dark**Purple accent in dark appearance.

Mac

**Library on Mac**Mac Catalyst build of the iPad layout.

Open issues

Where the app’s styling could be tighter. Artifactr deliberately uses system colors and Dynamic Type, so most of these are small.

Secondary text contrast. iOS secondary label on white is about 3.4:1. It carries dates, tags and placeholders at small sizes, under the 4.5:1 small text needs. to decide
Unused accent asset. The AccentColor asset (#9E006B light, #00C7E0 dark) is not what tints the interface; the user’s accent choice is. Remove it or make it the default.
Hard-coded detail background. #1C1C1E is typed as three float values in three places in the detail view. It matches iOS secondary system background in dark, so it could use that.
Bundled font not used. Instrument Serif is listed in Info.plist but no code uses it.
Radii. 8, 10, 12 and 16 are all in use, in a few places each, with no rule for which is which.
Mac look. The Mac build is Mac Catalyst, so it shows the iPad layout. Screens look sparse at full-window size.
No named tokens. Everything is a system color or text style. Fine for now; a brand layer would need tokens.

Decisions

The accent is the user’s choice from five iOS system tints. Blue is the default.
Appearance is System, Light or Dark, set in Settings.
Category icons are SF Symbols, chosen per category.