WidgetCraftGet the appBlue · Quote · 4 × 2 widget
Blue quote widget
A blue quote widget displays a line you want to see every day. Calm sky and navy tones. This page gives the exact colors, type settings and layers, with a preview drawn from the same values.
What a blue quote widget shows
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.
It is plain text you type yourself: free, offline and with no permission. Change the words whenever you like.
How the blue style shapes it
Blue widgets feel calm and clear. This recipe pairs a pale sky background with navy text and a mid-blue accent; flip the colors for a deep navy version.
- Text: Use navy text and slate-blue labels.
Blue quote widget recipe
| Layer | Settings |
|---|---|
| Canvas | 360 × 180, background #E3F0FF, corner radius 22 |
| Shape | vertical rule 4 points wide in #2F7BE6 at the left of the quote, in place of a quotation mark |
| Text | quote in two lines, built-in Sans, weight 600, size 22, line spacing 1.35, color #0F2A4A, left aligned |
| Text | author, size 12, color #6C87A8 |
| Font | built-in Sans |
| Home screen size | 4 × 2 cells |
Blue color palette
- Sky
#E3F0FFBackground - Powder blue
#C5DEFASurface and tracks - Navy
#0F2A4AText - Slate blue
#6C87A8Labels - Azure
#2F7BE6Accent
How to make a blue quote widget in WidgetCraft
- Create a widget and open Canvas. Set the size to 360 × 180, the background to #E3F0FF and the corner radius to 22.
- Add a Text layer and type your quote. Set the font to built-in Sans, the size to 22 and the color to #0F2A4A.
- Press return where you want the line to break, and set the alignment to left.
- Add a Shape, 4 points wide and as tall as the quote, in #2F7BE6, and place it to the left of the text as a rule.
- Add the author on its own Text layer at size 12 in #6C87A8.
- Tap Save, then Add to home screen and resize the widget on your launcher if needed.
Everything in this recipe works in the free version.
Tips for blue quote widgets
- Stay within one hue from pale to navy.
- Use the brightest blue only for progress.
- Keep quotes under about 12 words so the text can stay large.
- Break lines by meaning, not wherever the text happens to wrap.
- Always credit the author on a separate, smaller line.
- Do not add warm accents unless you want strong contrast.
- Do not use mid-blue text on a mid-blue background.
Questions about the blue quote widget
What size is a blue quote widget?
It is designed for 4 × 2 home screen cells on a 360 × 180 canvas. You can resize it on the launcher and the design scales in proportion.
Which colors does it use?
Sky (#E3F0FF) for the background, Navy (#0F2A4A) for the main text, Slate blue (#6C87A8) for labels and Azure (#2F7BE6) as the accent.
Is it free to make?
Yes. Quote widgets use free features in WidgetCraft, and the blue styling is free too.
What else is this style called?
People also search for blue aesthetic quote widget, navy quote widget, ocean quote widget. They describe the same look as this blue quote widget.
More blue widgets
- Blue clock widget
- Blue analog clock widget
- Blue calendar widget
- Blue battery widget
- Blue countdown widget
- Blue to-do list widget
- Blue photo widget
- Blue music widget
- Blue year progress widget
- Blue step counter widget
- Blue habit tracker widget
- Blue sticky note widget
- Blue world clock widget
- Blue date widget
- Blue home screen setup
- All blue widgets