Style guide

Buy↓Sell↑Hold styles

Every color, text style, size and component the iPhone and iPad app uses today, read from the Swift source. Items marked to decide are places where the app disagrees with itself.

Color

Defined in Utilities/Colors.swift. Contrast is against white unless noted.

Brand

Buy3.3:1

buyGreen

#16A34A

Buy border and arrow, gain text and arrow, “Buy↓” in the wordmark, empty-state button.

Buy, text5.0:1

buyGreenDark

#15803D

Green text on white, such as the Low percentage.

Sell, text8.7:1

sellPurple In the app

#6B21A8

Purple for text: loss text and arrow, the High percentage.

Sell, fill5.4:1

sellPurpleAlt In the app

#9333EA

Purple for fills: Sell card border, wordmark “Sell↑”, loader and onboarding arrows.

Hold2.5:1

holdGray

#9CA3AF

Hold state, placeholders, zero change, and text on dark sheets.

Text and surfaces, light

Text18.1:1

foreground

#161616

Primary text, ticker, price, shadow color, and “Hold” in the wordmark.

Secondary7.6:1

secondaryText In the app

#4B5563

Secondary text, timestamps, Low and High labels, card icons, field labels, Cancel-style text, default borders at 0.2 to 0.3, and borders and the hold triangle on dark sheets.

White

background

#FFFFFF

App background, Sort button, range panel. Hard-coded; no dark mode.

Surface

surface In the app

#F9FAFB

Hold-state card and search field.

Buy tint

greenGradientStart

#DCFCE7 → white

Buy card, left to right.

Sell tint

purpleGradientStart

#F3E8FF → white

Sell card, left to right.

Insight5.2:1

insightBlue

#2563EB

The sparkle next to each ticker, and the text link “Get a free key at finnhub.io →” on dark sheets. Check On the dark surface it is about 3.4:1, under the 4.5:1 that 14 pt text needs.

Sheets, dark

Sheet

surfaceDark In the app

#181A20

Sheets, settings, text fields and settings rows. Fields and rows are set apart by the border, not a second fill.

Opacity in use

Value	Where
0.08	Card shadow (#161616)
0.1 / 0.2	Range panel border, error fill
0.3	Search and Sort borders, slider track (most common)
0.5	Disabled button
0.9	White icons on dark sheets

Type

Work Sans, four weights, bundled in the app. Icons are SF Symbols. Prices and percentages use tabular figures. Roles are inferred from where each style appears.

Styles in use

Loader arrowsBold 80

↓↑

DisplayBold 32 (plus Regular 32)

Add your first stock to start tracking.

Onboarding titleBold 28

Set your range

Wordmark, subtitleBold 24 (32 on iPad)

Buy↓Sell↑Hold

Card tickerSemiBold 22

AMZN

Large buttonSemiBold 20

Add stock

Settings rowMedium 20

API Keys

Sheet title, priceSemiBold 18

Advanced Micro Devices (AMD) · $162.40

Add-slot labelSemiBold 17

Add stock

Settings subheadMedium 17

Finnhub — Live Prices

Search textMedium 16

Search by symbol…

Body, field valueRegular 15

Your key is stored in the iOS Keychain on this device.

ButtonMedium 15

Add Stock

Sheet subtitleRegular 14

Current price: $162.40

Field label, Sort, timestampMedium 13

Hold Price · Today

CaptionRegular 13

Required for fetching stock quotes.

Change line, Low and High labelMedium 12

↙ −22.54 (−11.64%)

Fine printRegular 12

Buy Sell Hold is not affiliated with or endorsed by Finnhub or Apple.

Hold-price tagSemiBold 11

$193.60

Icons are SF Symbols: 10 bold for change arrows, 12 to 14 for small controls, 16 for card actions, 18 medium for navbar and settings, 40 for the empty list. There is no icon scale.

Spacing and shape

Spacing in use

Item	Value
Page margin	16 iPhone, 24 iPad
Card inner padding	16
Range panel padding	12
Sheet padding	20
Input padding	10, label 4 above
Button padding	16 across, 8 down (14 down for the large button)
Navbar gaps	12 between the wordmark row and the search row, and between search and Sort
Card column minimums	ticker 80, price 100, Low and High 60
Settings row	56 minimum height, 30 × 30 icon tile
Empty-state button	two thirds of the width, 360 at most

Corner radius in use

8
nearly all

12
settings rows

10
one use

3
small tags, 3 and 2

Borders and shadow

Item	Value
Default border	1 pt, secondary #4B5563, at 0.3 on light screens and solid on dark sheets
Signal border	4 pt, Buy green or Sell purple
iPad add slot	1.5 pt dashed, gray at 0.35
Slider track	1 pt, gray at 0.3. Triangle 12 × 6
Shadow	#161616 at 0.08, blur 4, y 2. Cards only

Components

Drawn here at the app’s real sizes from the values above.

Card state rules

AMZN ✦

Today

$171.06

↙ −22.54 (−11.64%)

Buy: price at or under low. 4 pt border, green tint.

AAPL ✦

Today

$218.42

↙ −1.58 (−0.72%)

Hold: otherwise. No border.

COST ✦

Today

$912.40

↗ +62.40 (+7.34%)

Sell: price at or over high. 4 pt border, purple tint.

Navbar

Buy↓Sell↑Hold

⌕ Search by symbol...

⇅ Sort

Card, collapsed and expanded

AAPL ✦

Today

$218.42

↙ −1.58 (−0.72%)

✎⌫⌄

Icons: system gray, 16 pt. Chevron 14.

Low$174.25−9.99%

$193.60

High$212.959.99%

Range panel: white, 1 pt border, 12 padding.

Sheet controls

Hold Price

162.40

Label 13 Medium gray, value 15 Regular white, 10 padding, 8 radius.

CancelAdd StockAdd Stock

Button: white, ink text, 8 radius. Disabled at 0.5.

⚿API Keys›

Settings row: 12 radius, 20 Medium.

Add stock

Empty-state button: Buy green, white 20 SemiBold.

Screens

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

iPhone

**Watchlist**All three states. Search and Sort in the second row.

**Expanded cards**The range panel inside a Buy and a Sell card.

**Add Stock sheet**Dark sheet, hold, low and high fields, the white button.

iPad

**Landscape**Three columns, cards always expanded, dashed Add stock slot.

Open issues

Where the app still disagrees with itself.

Falling prices are purple. A loss on the change line uses the Sell text color, even when the stock is nowhere near its high. Green means gain and Buy, so the direction color and the signal color overlap. to decide
Fourteen text sizes from 11 to 32, five of them within one point of each other (14, 15, 16, 17, 18), and no named styles.
Radii. 8 is nearly universal, but 12, 10, 3 and 2 appear once or twice.
Icons are sized from 10 to 18 with no scale.
White text on dark sheets is plain white, with no token.
Link contrast. The finnhub link is insight blue on the dark surface, about 3.4:1, under the 4.5:1 that 14 pt text needs.
The date under the ticker reads “Today” from the edit date, not the price time. Widgets will need a fetched-at time.

Resolved in the app

Two purples. #6B21A8 is the text purple. #9333EA is the fill purple: the Sell card border, the loader arrow, the wordmark.
Grays. Three: ink #161616, secondary #4B5563 (text, icons, labels, borders), neutral #9CA3AF (hold, placeholders, text on dark sheets). The system gray and #374151 are gone.
Surface. #F9FAFB is now the surface token, no longer typed by hand.
Wordmark “Hold” is the foreground color. The navy #1E293B is gone.
Dark surface. Sheets, fields and settings rows share surfaceDark #181A20. inputDark is gone.
Link colors. link and linkHover are gone. The one text link uses insight blue.

Proposal

The smallest set that covers what exists. The color items are applied; the rest is not.

Color. Still proposed: danger to replace red, onDark #F3F4F6. Name the two purples by role: sellText #6B21A8, sellFill #9333EA.

Type, eight styles. Display Bold 32. Title Bold 24. Heading SemiBold 20. Subheading SemiBold 18. Body Regular 15. Body strong and buttons Medium 15. Caption Medium 13. Fine Regular 12. Sizes 11, 14, 16, 17 and 22 fold in; the card ticker either keeps 22 as its own style or moves to 20.

Spacing. 4, 8, 12, 16, 24.

Radius. 8 everywhere. Settings rows move from 12 to 8, or stay as the one exception.