Headings, brand name, story text
Aa
Lora
The lantern flickered, and the small door in the oak tree swung open.
Weights 400, 500, 600, 700 · font-serif
A warm lamp in a quiet room.
This is the reference for how Bedbugz looks. When a choice is not covered here, pick the quieter option.
Download the brand package
- Logos
- Icons
- Social
- Tokens
- Guide
Logo
An arched casement window, open on one hinge, looking out at a crescent moon and stars. The sky is transparent, so the mark takes the color of whatever it sits on. The name is set in Lora and converted to outlines, so no font is needed.
Clear space and size
One quarter of the mark height on every side. Minimum size is 16 px for the mark and 120 px wide for the horizontal lockup. Below 32 px use the icon files.
Please do not
- Place the amber mark on cream or any light surface.
- Fill the sky, add gradients, shadows or outlines.
- Stretch, rotate or redraw the wordmark.
- Recolor the mark outside the colorways above.
Color
Four core colors do almost all of the work: roughly 60% Twilight Teal, 25% Cream Parchment, 10% Starlight Amber and 5% Enchanted Moss in any one composition.
- #152333
Twilight Teal
Primary brand color. Page background in the app, mark and text on light surfaces.
var(--background)
- #FBBF24
Starlight Amber
Accent. Primary buttons, focus rings, the mark on dark surfaces. Use sparingly.
var(--primary)
- #047857
Enchanted Moss
Secondary accent. Success states, secondary buttons, nature and calm moments.
var(--secondary)
- #F8FAFC
Cream Parchment
Text on dark surfaces, light page background, the mark on dark surfaces.
var(--foreground)
Supporting surfaces
Tints of Twilight Teal used by the dark interface. They are not additional brand colors.
- #1B2E43
Card
Raised surfaces on Twilight Teal.
var(--card)
- #1F3550
Muted
Quiet panels and inputs.
var(--muted)
- #234059
Accent surface
Hover and selected states.
var(--accent)
- #2C4560
Border
Dividers and outlines.
var(--border)
- #A9B8C9
Muted text
Secondary text on dark surfaces.
var(--muted-foreground)
Contrast
| Pair | Sample | Ratio | Suitable for |
|---|---|---|---|
| Cream on Teal | Aa | 15.2:1 | AAA |
| Amber on Teal | Aa | 9.5:1 | AAA |
| Teal on Amber | Aa | 9.5:1 | AAA |
| Muted text on Teal | Aa | 7.9:1 | AAA |
| Cream on Moss | Aa | 5.2:1 | AA |
| Moss on Teal | Aa | 2.9:1 | Decorative only |
| Amber on Cream | Aa | 1.6:1 | Decorative only |
Typography
Two families and no others. Lora gives the brand its storybook voice; Plus Jakarta Sans keeps the interface clear and friendly.
Interface, body copy, buttons, labels
Aa
Plus Jakarta Sans
Start tonight's adventure. Pick one choice, then settle in and read it aloud.
Weights 400, 500, 600, 700 · font-sans
- Body text is 16 px minimum with a line height of 1.5 to 1.6.
- Story text can run 18 to 20 px in Lora for reading aloud.
- Headings use sentence case. Avoid all caps except tiny labels.