Anatomy
|
Key |
Description |
Value? |
Token? |
|---|---|---|---|
|
1 |
Shape: Border Radius |
13px |
token unavailable |
|
2 |
Shape: Background Color |
#0060DF |
Tokens Available (see Figma) |
|
3 |
Shape: Padding (block, inline) |
12px, 16px |
token unavailable |
|
4a |
Text: Font |
SF Pro |
token unavailable |
|
4b |
Text: Size/Line Height |
16px/21px |
token unavailable |
|
4c |
Text: Color |
#FBFBFE |
Tokens Available (see Figma) |
Usage
Types
Acorn offers three button types for iOS.
See Themes for information on differences across themes.
See States for information on interactive states.
Themes
Acorn offers two button themes for iOS.
States
States this component may appear in. Each state is distinct across Types.
Default
Hover
The "Close" type button doesn't have a hover state.
Focus
iOS implementations inherit the built-in focus states from the operating system, and there is no Acorn specific visual override for this.
The CSS pseudo class :focus does not affect visual output in iOS.
Sizes
Behavior and interaction
iOS specific behavior/interaction guidance coming soon.
In the meantime please reference HIG for general guidance when designing for iOS.
Writing guidelines
Follow Apple Human Interface Guidelines, which uses headline-style capitalization. Capitalize every word except articles, coordinating conjunctions, and prepositions of four or fewer letters.
See capitalization for more guidance.