Ask Coach Design System
A single source of truth for design tokens, typography, and component patterns shared between design and engineering.
Last updated
17
Type styles
10
Base colors
8
Spacing steps
10
Color tokens
Stack
Design tool
Figma — 4.0 Production file
Token management
Tokens Studio for Figma (free)
Token storage
tokens.json — Bitbucket / slipchat / coach-tokens
Handoff
Zeplin + this design system site
iOS framework
UIKit + Storyboards (Xcode)
Typeface
SF Pro Display — Regular & Semibold
Team
JE
UI/UX, product owner, design, marketing
JV
Head of engineering — iOS, UIKit, Xcode
MD
AI engineer
Colors
All color tokens from the Ask Coach Foundations page. Dark mode first — the app is dark mode only.
Base colors
Black
color.black
#000000
White
color.white
#FFFFFF
Accent
color.accent
#C9FF58
Coach
color.coach
#8C01CE
Gray 500
color.gray-500
#9697B6
Yellow push
color.yellow-push
#FFC44D
Destructive
color.destructive
#EE4D4D
Dark mode surface stack
Gray 900
color.gray.900
#2F3448 — elevated cards
Gray 950
color.gray.950
#1F1F31 — card surface
Gray 1000
color.gray.1000
#151421 — base background
Typography
SF Pro Display — Regular (400) and Semibold (600). 17 named styles across 7 sizes.
Display & titles
Ask Coach
28pt / 400
Ask Coach
22pt / 600
Ask Coach
22pt / 400
Section headers
The Board
18pt / 600 / CAPS
The Board
18pt / 400 / CAPS
The Board
18pt / 400
Body
Chiefs -6.5 vs Raiders
15pt / 600
Chiefs -6.5 vs Raiders
15pt / 400
NFL · Week 12
15pt / 400 / CAPS
Labels
Spread · -110
13pt / 600 / CAPS
Spread · -110
13pt / 600
Pre-match
13pt / 400 / CAPS
Pre-match
13pt / 400
Captions
Live · NFL
11pt / 600 / CAPS
Live · NFL
11pt / 400 / CAPS
Updated 2 min ago
11pt / 400
Updated 2 min ago
12pt / 400
Spacing
8pt grid system. Token name matches the actual pt value — spacing.16 = 16pt.
Spacing scale
spacing.0
0pt
No spacing — remove padding
spacing.4
4pt
Micro — tight icon gaps
spacing.8
8pt
Tight — inline gaps
spacing.12
12pt
Compact — card internals
spacing.16
16pt
Default — standard padding
spacing.24
24pt
Section — card gaps
spacing.32
32pt
Large — section breaks
spacing.48
48pt
Screen edge padding
Border radius
Semantic scale from none to full. Use the name, not the value, in designs and code.
Radius scale
none
0pt
sm
4pt
md
8pt
lg
12pt
xl
16pt
full
pill
border-radius.none
0
Sharp corners
border-radius.sm
4pt
Tight UI elements, tags
border-radius.md
8pt
Buttons, inputs, small cards
border-radius.lg
12pt
Cards, match rows
border-radius.xl
16pt
Modals, bottom sheets
border-radius.full
9999pt
Pills, avatars, circular buttons
JV handoff
Status of the design → engineering pipeline for the Ask Coach redesign.
Pipeline status
Text styles defined
JV reference
17 named type styles across 7 sizes. SF Pro Display, Regular and Semibold, with CAPS variants. All in Figma → Zeplin.
Color tokens defined
JV reference
7 base colors + 3 dark mode grays + 6 status colors. Reference token names in UIColor extensions — not hex values.
tokens.json committed to Bitbucket
JV reference
Live at slipchat/coach-tokens/tokens.json on the main branch. Pull this file to generate Swift constants.
Redesign screens in progress
JE is redesigning the app. Screens will be delivered via Zeplin as completed. Check Zeplin for latest states.
Swift UIColor + UIFont constants
JV action
JV to create UIColor and UIFont extensions from the token values. See Swift Reference tab for the complete code.
Component annotations
Screen-level annotation notes for key interactions, states, and edge cases. To be added as redesign screens are completed.
Rules for JV
Colors
Always use UIColor token names — never hardcode hex values
Typography
Always use UIFont token names — never hardcode size or weight
Spacing
Use spacing token values — multiples of 4pt only
Dark mode
App is dark mode only. Use gray.1000 as base background always
Touch targets
Minimum 44pt × 44pt — Apple HIG requirement
Swift reference
UIKit constants for JV to add to the Ask Coach Xcode project. Reference these instead of hardcoding values.
UIColor extension
extension UIColor {
// Base colors
static let acBlack = UIColor(hex: "#000000")
static let acWhite = UIColor(hex: "#FFFFFF")
static let acAccent = UIColor(hex: "#0A84FF")
static let acSecondary = UIColor(hex: "#8E8E93")
static let acHighlight = UIColor(hex: "#636366")
static let acYellowPush = UIColor(hex: "#FFD60A")
static let acDestructive = UIColor(hex: "#FF3B30")
// Dark mode surfaces
static let acGray900 = UIColor(hex: "#1C1C1E")
static let acGray950 = UIColor(hex: "#1F1F31")
static let acGray1000 = UIColor(hex: "#151421")
}
UIFont extension
extension UIFont {
// Display
static let acDisplay = UIFont.systemFont(ofSize: 28, weight: .regular)
// Titles
static let acTitleSemibold = UIFont.systemFont(ofSize: 22, weight: .semibold)
static let acTitle = UIFont.systemFont(ofSize: 22, weight: .regular)
// Sections
static let acSectionSemi = UIFont.systemFont(ofSize: 18, weight: .semibold)
static let acSection = UIFont.systemFont(ofSize: 18, weight: .regular)
// Body
static let acBodySemibold = UIFont.systemFont(ofSize: 15, weight: .semibold)
static let acBody = UIFont.systemFont(ofSize: 15, weight: .regular)
// Labels
static let acLabelSemibold = UIFont.systemFont(ofSize: 13, weight: .semibold)
static let acLabel = UIFont.systemFont(ofSize: 13, weight: .regular)
// Captions
static let acCaptionSemibold = UIFont.systemFont(ofSize: 11, weight: .semibold)
static let acCaption = UIFont.systemFont(ofSize: 11, weight: .regular)
static let acSmall = UIFont.systemFont(ofSize: 12, weight: .regular)
}
UIColor hex helper
extension UIColor {
convenience init(hex: String) {
let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
var int: UInt64 = 0
Scanner(string: hex).scanHexInt64(&int)
let r = CGFloat((int >> 16) & 0xFF) / 255
let g = CGFloat((int >> 8) & 0xFF) / 255
let b = CGFloat(int & 0xFF) / 255
self.init(red: r, green: g, blue: b, alpha: 1)
}
}
Change log
A record of all design system updates — tokens, colors, typography, and components. Most recent first.
August 2026
Aug 20, 2026
Initial release
Design system v4.0 launched
Added Color tokens — 10 verified base colors from Figma Library
Added Typography — 16 text styles, SF Pro Display, all line heights Auto, letter spacing 0
Added Spacing scale — 9 steps on 4pt grid (4–48pt)
Added Border radius scale — none, sm, md, lg, xl, full
Added Sizing tokens — icons, avatars, buttons, touch targets
Added tokens.json committed to Bitbucket slipchat/coach-tokens
Changed Spacing — corrected to match Figma Variables exactly: 0, 4, 8, 12, 16, 24, 32, 48. Removed 20 and 40 which were not in Figma.
Added Swift UIColor + UIFont reference for JV
Pending Status colors — to be verified from Figma before adding
Pending Border radius values — to be verified from Figma
Pending Spacing values — to be verified from Figma
How to log a change
When
Any time tokens.json is updated and pushed to Bitbucket
Who
JE — as product owner and design system maintainer
Format
Date, version if applicable, Added / Changed / Removed / Fixed / Pending
Why
Gives JV context for what changed so he knows what to update in Xcode