Logo
A flat house with a chimney and the door cut out, in OpalSketch Logo Green, beside the OpalSketch wordmark: OpalSketch in ink, 3D in green. The wordmark is converted to outlines in every file, so it never depends on an installed font.
Clear space and minimum size
Keep clear space around the logo equal to the height of the house door on all sides. Nothing else enters that area. Do not show the full logo smaller than 24 px tall (or 90 px wide in print: 25 mm) and the mark alone smaller than 16 px.
Please do not
- Stretch, rotate, outline or add shadows or effects to the logo.
- Recolor it outside the supplied versions.
- Retype the name in another font. Use the supplied SVG.
- Place the color logo on a busy image. Use the white version instead.
- Put the logo on a low-contrast background.
- Use the mark as a bullet or pattern, or in your own company name.
- Write the name any way except OpalSketch: capital V, no space, capital D.
- Imply endorsement or partnership. See the Trademark Notice.
Color
A deep, natural green family on calm neutrals. OpalSketch Green is the single action color. Status colors are reserved for state and never decoration.
- RGB
- 58, 133, 102
- Token
- --veyra-logo
- Use
- The house and 3D in the logo, app icon. Not for body text (4.4:1 on white)
- RGB
- 26, 43, 39
- Token
- --veyra-ink
- Use
- Wordmark, headings and body text
- RGB
- 15, 90, 60
- Token
- --veyra-forest
- Use
- Deepest brand green, logo shading, dark surfaces
- RGB
- 47, 90, 71
- Token
- --veyra-green
- Use
- Primary actions, links and active states
- RGB
- 74, 143, 114
- Token
- --veyra-jade
- Use
- Illustration and secondary accents
- RGB
- 127, 209, 174
- Token
- --veyra-mint
- Use
- Accents on dark backgrounds, "3D" on dark
- RGB
- 229, 239, 233
- Token
- --veyra-mist
- Use
- Soft fills, selected rows, tags
- RGB
- 246, 247, 246
- Token
- --veyra-stone
- Use
- Page background
- RGB
- 255, 255, 255
- Token
- --veyra-white
- Use
- Cards and surfaces
Status colors
- RGB
- 47, 111, 237
- Token
- --veyra-blue
- Use
- New, info
- RGB
- 31, 122, 77
- Token
- --veyra-ok
- Use
- In progress, success
- RGB
- 183, 121, 31
- Token
- --veyra-amber
- Use
- Waiting, caution
- RGB
- 122, 69, 209
- Token
- --veyra-violet
- Use
- In purchasing
- RGB
- 179, 55, 47
- Token
- --veyra-danger
- Use
- Errors, delete
Contrast
Ratios use the WCAG formula. Body text needs 4.5:1; large text and icons need 3:1.
| Pair | Ratio | Result |
|---|---|---|
| Aa OpalSketch Ink on White | 14.8:1 | Pass AA |
| Aa OpalSketch Ink on Stone | 13.8:1 | Pass AA |
| Aa White on OpalSketch Green | 7.9:1 | Pass AA |
| Aa White on Forest | 8.2:1 | Pass AA |
| Aa Mint on Forest | 8.0:1 | Pass AA |
| Aa OpalSketch Green on White | 7.9:1 | Pass AA |
| Aa OpalSketch Green on Mist | 6.7:1 | Pass AA |
| Aa Jade on White | 3.8:1 | Large text and graphics only |
Type
Wordmark: Montserrat ExtraBold, outlined. Use the logo file. Do not set the name in this font in running copy.
Interface and documents: Geist, with Inter and then the system font as fallbacks. Weights 400, 500, 600 and 700. Headings tight (-0.02em to -0.035em), body at 15 to 16 px with 1.5 line height.
| Role | Size | Weight |
|---|---|---|
| Page title | 28 to 48 px | 650 to 700 |
| Section heading | 20 to 24 px | 650 |
| Body | 15 to 16 px | 400 |
| Label and table header | 12 to 13 px, uppercase +0.06em | 600 |
Interface
Rounded, quiet surfaces. Pills for buttons and status, 14 px radius for cards, 10 px for fields.
Voice
- Plain. Name things the way a designer or homeowner would. "Quote", not "estimation document".
- Direct. Buttons say exactly what happens: "Create quote", "Record payment".
- Calm. No hype, no exclamation marks. Errors say what went wrong and how to fix it.
- Honest. Designs are preliminary and prices can change. Say so briefly where it matters.
Downloads
- tokens.css (CSS variables)
- tokens.json (design tokens)
- All logo files are listed under Logo.
- Favicons: 512 px, 192 px, 180 px (Apple), .ico
OpalSketch™ is a trademark of RK Parisi Enterprises. See the Trademark Notice for permitted use. Rebuild the logo files with python tools/make_brand.py.