WidgetCraftGet the appEditorial · Home screen setup
Editorial home screen setup
Editorial widgets borrow from print magazines: a large serif headline, small spaced captions, thin rules and warm paper colors. They suit quotes, reading progress and portrait photos. This setup uses three widgets, one wallpaper and one palette so the whole screen reads as a single design.
The three editorial widgets
- Editorial quote widget (4 × 2): displays a line you want to see every day.
- Editorial photo widget (4 × 2): frames a favorite picture with a short caption.
- Editorial year progress widget (4 × 2): shows how much of the year has passed as a percentage and a bar.
Place them top to bottom in that order and leave the row above the dock empty so the wallpaper has room.
Quote widget settings
A quote widget is pure typography, so the style shows more clearly here than anywhere else. Line length, line spacing and the size of the quotation mark do the design work.
- Canvas: 360 × 180, background #F3EEE4, corner radius 6
- Text: opening quotation mark, size 54, color #A4452C
- Text: quote in two lines, Libre Caslon Display, weight 400, size 22, line spacing 1.35, color #1D1A16, left aligned
- Text: Pair a serif headline with tiny capitalised sans captions, the way a magazine credits a photo.
Free to build. Full recipe and steps.
Photo widget settings
A photo widget puts a person, place or pet on the home screen without making it the wallpaper. The frame, the crop and the caption decide whether it feels designed or just pasted in.
- Canvas: 360 × 200, background #F3EEE4, corner radius 6
- Layout: caption on the left, photo on the right
- Image: 190 × 160, corner radius 0, crop to fill
- Photos: Use portrait crops with a caption line beneath, as if the photo were printed on the page.
Free to build. Full recipe and steps.
Year progress widget settings
A year-progress widget is a gentle nudge: one bar that fills from 1 January to 31 December. The same layout works for the day, the week or a personal goal.
- Canvas: 360 × 180, background #F3EEE4, corner radius 6
- Text: year label, size 12, color #7B7265
- Text (formula): percentage of the year, Libre Caslon Display, size 68, color #1D1A16
- Bars and rings: Use thin rules and a slim progress line, like the column dividers in a magazine.
Free to build. Full recipe and steps.
How to set up an editorial home screen
- Set the wallpaper first, so you can judge every color against it.
- Build the quote widget and add it to the home screen at 4 × 2.
- Duplicate its canvas settings for the photo and year progress widgets so the background, radius and outline match exactly.
- Place all three, then adjust margins until the left edges line up.
- Change the icons last, and remove any app you do not use daily from the page.
Editorial wallpaper ideas
Warm paper, linen or a muted photograph with empty space. Avoid neon or glossy wallpapers.
Editorial icons and dock
Use simple line icons in dark brown or black and keep labels on.
Editorial home screen colors
- Newsprint
#F3EEE4Background - Aged paper
#E7DFD0Surface and tracks - Press black
#1D1A16Text - Caption grey
#7B7265Labels - Masthead red
#A4452CAccent
Fonts for an editorial home screen
Use Libre Caslon Display (import the font file), or the built-in Serif at weight 400. Corner radius is 6 on every widget so the shapes match.
Do and avoid
- Use a real serif for the headline and keep captions under 11 points.
- Add one thin rule to anchor the layout.
- Do not use bright saturated colors.
- Do not center everything; align to the left edge like a column.