Skip to content

html-design.md

Latest commit

 

History

History
107 lines (84 loc) · 2.63 KB

html-design.md

File metadata and controls

107 lines (84 loc) · 2.63 KB

HTML Design Specification

Generated static blog styling based on Apple Notes / iCloud Notes.

Layout

  • Max content width: 700-760px, centered
  • Side padding: 40px
  • Spacing grid: 8pt base (4, 8, 12, 16, 24, 32px)

Typography

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 -

Heading Hierarchy

Style Weight Size
Title Bold 22-24px
Heading Semibold 18-20px
Subheading Semibold 15-16px
Body Regular 14-15px
Monospaced Monospace 14-15px

Colors

Light Mode

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

Dark Mode

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

Rich Text Elements

Lists

  • Bullet: • with 20-24px indent
  • Dashed: – same indent
  • Numbered: 1. aligned left
  • Line spacing: 6-8px between items

Checklist

  • Unchecked: circle icon
  • Checked: checkmark.circle icon
  • Icon size: 16-18px
  • Spacing to text: 8px

Block Quote

  • Left border: 2-3px #E0E0E2
  • Left padding: 12-16px

Links

  • Color: #0A84FF (Apple blue)
  • Underline on hover

Images

  • Max width: 700-760px
  • Border radius: 6px

Tables

  • Border: #D1D1D3
  • Header background: #F2F2F4
  • Cell padding: 8-12px

Note List (Index Page)

Row Dimensions

  • Height: 56-64px
  • Padding: 16-20px left, 12-16px right, 6-8px vertical

Selected Row

  • Background: #FCEFC2 (Notes yellow)
  • Border radius: 6px
  • Optional left accent bar: 4px #E9D79F

Template Placeholders

  • {{TITLE}} - Blog/note title
  • {{CONTENT}} - Note HTML content
  • {{AUTHOR}} - Blog author
  • {{NOTES_LIST}} - Index page note list
  • {{DATE}} - Note date
  • {{STYLES}} - CSS content