Design System
Style Guide for Calculator Star™
Color Palette
Braun Yellow
#fbc02d
--braun-yellow
Braun Black
#222222
--braun-black
Case / Off-White
#f4f4f4
--braun-case
Page Background
#e8e8e8
--bg-page
Action Green
#2e7d32
--braun-green
Operator Grey
#444444
--braun-grey
Typography
Font Family
Inter
H1 Headline
The Cognitive Calculator
Weight: 300 (Light) | Size: 2rem | Spacing: -0.5pxH2 Section
Tactile Intelligence
Weight: 600 (SemiBold) | Size: 1.25remH3 Label
Philosophy
Weight: 600 | Uppercase | Spacing: 1px | Color: #888Body Text
Just as the Kindle is not a competitor to the iPad, but rather a device that creates a superior environment for reading.
Weight: 400 | Color: #4a4a4a | Line-Height: 1.65Calculator Numbers
58,240
Weight: 300 | Spacing: 1px
UI Components
Tactile Buttons (Keypad)
Interface Buttons
Display Window
1,250
Logic: 25 * 50 = 1250
Special Shapes
History Item
"What is 20 percent of 150 dollars?"
= $30
Logic:
150 * 0.20 = 30
Branding & Assets
App Icon
Original (Dark)