OpalSketch
Brand kit

The OpalSketch brand, and how to use it

OpalSketch is a 3D kitchen, bath and room designer, and the portal kitchen and bath businesses run their projects in. Here is the logo in every version, the colors with their exact values, the type, how to write the name, and how businesses and partners use the brand. Every file here is yours to download.

The OpalSketch logo: a pink house with a pencil drawing its side, on a ruler, beside the name OpalSketch

Clear space and minimum size

Keep clear space on every side equal to the height of the O in OpalSketch. Nothing else enters that area: no text, edges or other logos. Below the smallest sizes the window panes and the ruler marks fill in, so use the mark alone, or nothing.

OO
The logo with its clear space shown around it
Full logo: 24 px tall at least on screen, 25 mm wide in print
Mark: 16 px at least

Do and do not

Use the supplied files as they are. When the background fights the logo, change the version, not the logo.

DoThe full color logo on white or a light, calm background.
DoThe on-dark version on Charcoal or Wine.
DoThe white version on a photograph, darkened under the logo.
Do not stretch or squash itScale it with its proportions locked.
Do not recolor itOnly the supplied versions: color, on dark, black and white.
Do not set it on a busy imageDarken the photo and use the white version.
Do not put it on PinkIts own pink disappears. Use white or Charcoal behind it.
Do not add effects or tilt itNo shadows, glows, outlines, 3D or rotation.

Also, please do not

  • Retype the name in another font, or rebuild the logo. Download the SVG.
  • Use the mark as a bullet or a pattern, or put it inside your own company name or logo.
  • Lock the OpalSketch logo together with another logo, or suggest a partnership or endorsement that does not exist. See the Trademark notice.

Color

Two brand colors make the logo: OpalSketch Pink and Charcoal. The interface adds a deeper rose for actions and links, because Pink on white is too light for text (2.6:1). Status colors show the state of things and are never decoration.

Brand

OpalSketch Pink#f7769c
RGB
247, 118, 156
Token
--os-pink
Use
The mark and Sketch in the logo, the app icon, highlights and graphics. Never small text on white.
Charcoal#2b3137
RGB
43, 49, 55
Token
--os-charcoal
Use
Opal in the logo, dark surfaces, the color behind the on-dark logo.

Interface

Rose#c93b6a
RGB
201, 59, 106
Token
--os-rose
Use
The one action color: buttons, links, selected and focus states.
Deep rose#b8305c
RGB
184, 48, 92
Token
--os-deep-rose
Use
Hover and pressed states, small rose text on Mist.
Wine#8a1f49
RGB
138, 31, 73
Token
--os-wine
Use
The deepest brand tone: dark panels, the browser theme color.
Blush#ffb3c9
RGB
255, 179, 201
Token
--os-blush
Use
The logo's pink on dark, accents and underlines.
Petal#f08fb0
RGB
240, 143, 176
Token
--os-petal
Use
Illustration and secondary accents. Not for text.
Mist#fff0f4
RGB
255, 240, 244
Token
--os-mist
Use
Soft fills, tags, selected rows.
Ink#1f2429
RGB
31, 36, 41
Token
--os-ink
Use
Headings and body text.
Stone#f6f7f6
RGB
246, 247, 246
Token
--os-stone
Use
Page background.
White#ffffff
RGB
255, 255, 255
Token
--os-white
Use
Cards and surfaces.

Status

Blue#2f6fed
RGB
47, 111, 237
Token
--os-blue
Use
New, information.
Green#1f7a4d
RGB
31, 122, 77
Token
--os-ok
Use
Done, in progress, success.
Amber#b7791f
RGB
183, 121, 31
Token
--os-amber
Use
Waiting, caution.
Violet#7a45d1
RGB
122, 69, 209
Token
--os-violet
Use
In purchasing.
Red#b3372f
RGB
179, 55, 47
Token
--os-danger
Use
Errors and deleting.

Contrast

Ratios by the WCAG formula. Body text needs 4.5:1; large text (24 px, or 19 px bold) and icons need 3:1. The logo itself is exempt, which is why Pink can carry it.

PairRatioUse
AaInk on White15.6:1Any text
AaInk on Stone14.6:1Any text
AaCharcoal on White13.1:1Any text
AaBlush on Charcoal7.9:1Any text
AaWhite on Wine8.9:1Any text
AaWhite on Deep rose5.8:1Any text
AaWhite on Rose (buttons)4.9:1Any text
AaRose on White (links)4.9:1Any text
AaCharcoal on Pink5.0:1Any text
AaRose on Mist4.4:1Large text only: use Deep rose for small text on Mist
AaPink on White2.6:1The logo and graphics only, never text
AaWhite on Pink2.6:1Not for text: use Charcoal on Pink

Type

OpalSketch

The wordmark: Outfit SemiBold (SIL Open Font License), outlined in the logo files. Always use the files; do not set the name in Outfit in running text.

Geist

Interface, site and documents: Geist, falling back to Inter and then the system font. Weights 400, 500, 600 and 700. Headings tight (-0.02em to -0.035em), body at 15 to 17 px with a 1.5 to 1.6 line height. Numbers that line up use tabular figures.

Page title, 36 to 60 px, 700Design it before you build it
Section, 24 to 32 px, 700Kitchens, baths and every room
Body, 15 to 17 px, 400Draw the room, place real cabinets at their real sizes and walk through it in 3D.
Label, 12 to 13 px, 600, capsWaiting on the client

Interface

Rounded, quiet surfaces with one action color. Pills for buttons and status, 18 px corners on the site's cards (14 px in the app), 12 px for fields, and a 2 px Rose focus ring on everything you can reach with a keyboard.

Try the designerSee every feature
New requestIn progressWaiting on the clientIn purchasingDeclined

Writing

The name

Write itOpalSketchone word, a capital O and a capital S
NeverOpal SketchOpalsketchOPALSKETCHOpal-Sketch
The old nameVeyra3Dretired in October 2026; it may still show in code, never to people
The companyRK Parisi Enterprises, Inc. makes OpalSketch. Write OpalSketch™ at the first prominent use on a page.
The partsthe designer, the portal, the client page, Inspire (the gallery), the materials board

Voice

  • Plain. Say it the way a kitchen designer or a homeowner would: "quote", not "estimation document".
  • Direct. Buttons say exactly what happens: "Send plan", "Record payment", "Share with client".
  • Calm. No hype and no exclamation marks. An error says what went wrong and how to fix it.
  • Honest. Sizes come from the makers; designs are a plan, and prices can change. Say so briefly where it matters.

House style

  • No em dashes, anywhere. Use a comma, a colon, parentheses or a new sentence. Ranges read "30 to 36 in".
  • US English. Numerals for measurements, in inches and feet: 36 in, 9 ft (the ″ and ′ marks in tables and drawings).
  • Sentence case for headings and buttons.

Businesses and partners

A business on OpalSketch shows its own brand

Clients see the business's name and logo on its client page, quotes, presentations, drawing set and website. On Business and Enterprise, White label in the portal dresses the designer in the business's brand too. OpalSketch stays in the background: a small "Powered by OpalSketch" credit in the footer of business websites.

Linking to OpalSketch

Partners and businesses may link to the designer with the words "Design it in 3D" or "Design in 3D with OpalSketch", and show the unaltered logo or mark next to that link. Do not put the OpalSketch logo inside your own, or suggest OpalSketch endorses your business. The Trademark notice has the details.

Downloads

Logos

Design tokens

  • tokens.css: the colors, the type and the corners as CSS variables (--os-*).
  • tokens.json: the same values for design tools.
  • The logo files are rebuilt with python tools/make_brand.py in the OpalSketch repository.