HTML Design Specification
Generated static blog styling based on Apple Notes / iCloud Notes.
Max content width : 700-760px, centered
Side padding : 40px
Spacing grid : 8pt base (4, 8, 12, 16, 24, 32px)
Font stack :
font-family : -apple-system, BlinkMacSystemFont, "SF Pro Text" , "Helvetica Neue" , sans-serif;
Element
Weight
Size
Line Height
Note title
Bold
24-28px
1.2
Body text
Regular
15-16px
1.45-1.6
Date/metadata
Regular
13-14px
-
List title
Semibold
15-16px
-
List preview
Regular
13-14px
-
Style
Weight
Size
Title
Bold
22-24px
Heading
Semibold
18-20px
Subheading
Semibold
15-16px
Body
Regular
14-15px
Monospaced
Monospace
14-15px
Property
Value
CSS Variable
Background
#f2f2f7
--color-fill
Editor
#ffffff
--color-fill-secondary
Text Primary
#1d1d1f
--color-label
Text Secondary
#86868b
--color-label-secondary
Link
#0066cc
--color-link
Separator
#d2d2d7
--color-separator
Property
Value
CSS Variable
Background
#1c1c1e
--color-fill
Editor
#2c2c2e
--color-fill-secondary
Text Primary
#f5f5f7
--color-label
Text Secondary
#a1a1a6
--color-label-secondary
Link
#2997ff
--color-link
Separator
#3d3d40
--color-separator
Bullet : • with 20-24px indent
Dashed : – same indent
Numbered : 1. aligned left
Line spacing : 6-8px between items
Unchecked: circle icon
Checked: checkmark.circle icon
Icon size: 16-18px
Spacing to text: 8px
Left border: 2-3px #E0E0E2
Left padding: 12-16px
Color: #0A84FF (Apple blue)
Underline on hover
Max width: 700-760px
Border radius: 6px
Border: #D1D1D3
Header background: #F2F2F4
Cell padding: 8-12px
Height: 56-64px
Padding: 16-20px left, 12-16px right, 6-8px vertical
Background: #FCEFC2 (Notes yellow)
Border radius: 6px
Optional left accent bar: 4px #E9D79F
{{TITLE}} - Blog/note title
{{CONTENT}} - Note HTML content
{{AUTHOR}} - Blog author
{{NOTES_LIST}} - Index page note list
{{DATE}} - Note date
{{STYLES}} - CSS content