What font does Lutărie use?

Lutărie’s website uses four typefaces: Ugly Dave (headings), self-hosted; Inter, self-hosted; Ugly Dave Alt (body text), self-hosted; Ugly Dave M, self-hosted.

What are Lutărie’s brand colours?

The main colours on lutarie.happymatter.ro are Brown (#9B4C42), Misty Rose (#FFE3EB), Old Lace (#FFF3E0), Midnight Blue (#202745), Dark Slate Blue (#3E2F44) and White (#FFFFFF).

What colour is Lutărie’s text and background?

Body text is #F3EEE9 on a #171514 background.

Where is Lutărie’s logo from?

The logo shown in this guide was found on lutarie.happymatter.ro’s homepage. For official logo files and usage rules, check Lutărie’s own brand or press page.

Is this Lutărie’s official style guide?

No. SiteStyleGuide made it from lutarie.happymatter.ro’s public web pages on 1 November 2026, and isn’t affiliated with Lutărie. Members can refresh a guide after 90 days to pick up changes.

Lutărie Style Guide: Colours, Fonts & Logo

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Kona Dots — Lutărie; ● 19 / 60 characters
Meta description: Kona Dots — lampă de birou din lut, modelată și pictată manual punct cu punct în atelierul Lutărie din Cluj-Napoca. Serie limitată, precomandă online.; ● 150 / 160 characters
Site name: Lutărie
og:title: Kona Dots — Lutărie
og:description: Lampă din lut pictată manual, punct cu punct. Serie limitată.
Language: ro
Theme colour: #9B4C42

In search results

Lutăriehttps://lutarie.happymatter.ro/

Kona Dots — Lutărie

Kona Dots — lampă de birou din lut, modelată și pictată manual punct cu punct în atelierul Lutărie din Cluj-Napoca. Serie limitată, precomandă online.

When shared

No og:image, so no picture

lutarie.happymatter.ro

Kona Dots — Lutărie

Lampă din lut pictată manual, punct cu punct. Serie limitată.

Back to top ↑

Logo & favicons

Found as: image in the header. SVG, 608 × 178.

Logo

On white

On black

On Brown

Favicons

2 found

180 px · PNG apple-touch-icon
32 px · SVG icon

Kona Dots — Lutărie

Light browser tab

Kona Dots — Lutărie

Dark browser tab

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#F3EEE9) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 51.8%
Brown 15.3%
Charcoal 10.7%
Warm Off White 9.5%
Near Black 5.2%
Misty Rose 5%
Old Lace 1%
Midnight Blue 0.9%
Dark Slate Blue 0.6%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
1.15:1 Fail

On white
—

Text, background, border · .modal-success h3, #modal .fpct i.on
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
10.80:1 AAA

On white
12.45:1 AAA

Text, graphic, background · .hero.is-alt .top .top-link, .hero.is-alt .oldprice span::after
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 2 4 5

On text
—

On white
1.15:1 Fail

Text, background, border · .modal-step-title, body
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 9 13 91

On text
15.79:1 AAA

On white
18.20:1 AAA

Background, text · body, .carousel-section h2

Colours

Brand colours and accents, most used first

Brown

HEX

RGB

HSL

OKLCH

CMYK
0 51 57 39

On text
5.20:1 AA

On white
5.99:1 AA

Background, text, graphic · .contact-strip .cta-small, .hero.is-alt .hero-prev
Misty Rose

HEX

RGB

HSL

OKLCH

CMYK
0 11 8 0

On text
1.04:1 Fail

On white
1.20:1 Fail

Text, graphic, border · .cta-c path, .sheet-info li::before
Old Lace

HEX

RGB

HSL

OKLCH

CMYK
0 5 12 0

On text
1.05:1 Fail

On white
1.10:1 Fail

Text · .hero .tap-hint.pulse, .hero .toggle:hover
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
54 43 0 73

On text
12.67:1 AAA

On white
14.61:1 AAA

Background · .layer.on
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
9 31 0 73

On text
10.75:1 AAA

On white
12.39:1 AAA

Background · .layer.on

Gradients

linear-gradient(180deg,#cec5c6,#d9ced0 50%,#e5dadd) left top/50.5% 100% no-repeat, linear-gradient(180deg,#a19595,#aba0a0 50%,#baafaf)
linear-gradient(180deg,#10182c,#202745 50%,#242a47) left top/50.5% 100% no-repeat, linear-gradient(180deg,#080a12,#0e111e 50%,#151521)
radial-gradient(circle,#fff 0 3.6px,transparent 4.2px)

Dark mode

When the device is set to dark

Near Black

#171514 · --paper
Warm Off White

#F3EEE9 · --ink
Warm Light Grey

#B9B0AD · --muted
Warm Charcoal

#4A4543 · --rule

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Ugly Dave

Aa 400

Ugly Dave

Self-hosted · weights 400 · headings · shown in a stand-in if you don’t have it

Aa 300 Aa 600

Inter

Self-hosted · weights 300, 400, 500, 600 · headings · shown in a stand-in if you don’t have it

Aa 400

Ugly Dave Alt

Self-hosted · weights 400 · headings, body · shown in a stand-in if you don’t have it

Aa 400

Ugly Dave M

Self-hosted · weights 400 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 2 clamp(28px,3vw,44px) · 44 px / 1.05 weight 400 · uppercase · Ugly Dave Alt

Kona Dots — Lutărie

Heading 3 clamp(40px,5vw,56px) · 56 px / 1 weight 400 · uppercase · Ugly Dave

Kona Dots — Lutărie

Heading 4 clamp(22px,2vw,28px) · 28 px / 1.1 weight 400 · uppercase · Ugly Dave

Kona Dots — Lutărie

Body 19px / 1.45 Ugly Dave Alt

Kona Dots — lampă de birou din lut, modelată și pictată manual punct cu punct în atelierul Lutărie din Cluj-Napoca. Serie limitată, precoma…

Paragraph clamp(20px,2.5vw,36px) · 36 px / 1.3 weight 400 · Ugly Dave

Kona Dots — lampă de birou din lut, modelată și pictată manual punct cu punct în atelierul Lutărie din Cluj-Napoca. Serie limitată, precoma…

Small .82em · 13 px / 1.4 none

Kona Dots — lampă de birou din lut, modelată și pictată manual punct cu punct în atelierul Lutărie din Cluj-Napoca. Serie limitată, precoma…

Link 1.12em · 18 px weight 400 · Ugly Dave

Sizes in use

Most common across the site

36pxline 1.3 · 8 rules
22pxline 1 · 16 rules
20pxline 1.3 · 8 rules
19pxline 1 · 12 rules
17pxline 1.55 · 15 rules
16pxline 1.55 · 10 rules
14pxline 1.4 · 11 rules
13pxline 1 · 17 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.contact-strip .cta-small · #9B4C42 · radius 14px

Corner radius

50% · 12×
6px · 3×
14px · 3×
12px · 2×
20px 16px 22px 18px · 2×
16px 22px 18px 20px · 2×

Shadows

0 40px 80px -30px rgba(0,0,0,.7)

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

560

640

760

761

900

On a scale of 0 to 1440 px.

Content widths (max-width)

1240 px

1180 px

900 px

600 px

560 px

520 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 19 characters, short enough to show in full in search results.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Lutărie use?: Lutărie’s website uses four typefaces: Ugly Dave (headings), self-hosted; Inter, self-hosted; Ugly Dave Alt (body text), self-hosted; Ugly Dave M, self-hosted.
What are Lutărie’s brand colours?: The main colours on lutarie.happymatter.ro are Brown (#9B4C42), Misty Rose (#FFE3EB), Old Lace (#FFF3E0), Midnight Blue (#202745), Dark Slate Blue (#3E2F44) and White (#FFFFFF).
What colour is Lutărie’s text and background?: Body text is #F3EEE9 on a #171514 background.
Where is Lutărie’s logo from?: The logo shown in this guide was found on lutarie.happymatter.ro’s homepage. For official logo files and usage rules, check Lutărie’s own brand or press page.
Is this Lutărie’s official style guide?: No. SiteStyleGuide made it from lutarie.happymatter.ro’s public web pages on 1 November 2026, and isn’t affiliated with Lutărie. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

lutarie-happymatter-ro-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* lutarie.happymatter.ro design tokens, from SiteStyleGuide (https://sitestyleguide.com/lutarie.happymatter.ro) */
:root {
  /* Colours */
  --text: #F3EEE9;
  --background: #171514;
  --colour-white: #FFFFFF;
  --colour-charcoal: #343434;
  --colour-warm-off-white: #F3EEE9;
  --colour-near-black: #171514;
  --colour-brown: #9B4C42;
  --colour-misty-rose: #FFE3EB;
  --colour-old-lace: #FFF3E0;
  --colour-midnight-blue: #202745;
  --colour-dark-slate-blue: #3E2F44;
  --gradient-1: linear-gradient(180deg,#cec5c6,#d9ced0 50%,#e5dadd) left top/50.5% 100% no-repeat, linear-gradient(180deg,#a19595,#aba0a0 50%,#baafaf);
  --gradient-2: linear-gradient(180deg,#10182c,#202745 50%,#242a47) left top/50.5% 100% no-repeat, linear-gradient(180deg,#080a12,#0e111e 50%,#151521);
  --gradient-3: radial-gradient(circle,#fff 0 3.6px,transparent 4.2px);

  /* Typefaces */
  --font-headings: 'Ugly Dave', 'Segoe Print', 'Bradley Hand', cursive;
  --font-body: 'Ugly Dave Alt', 'Ugly Dave', 'Segoe Print', 'Bradley Hand', cursive;
  --font-other: 'Ugly Dave M', 'Ugly Dave Alt', 'Ugly Dave', 'Segoe Print', 'Bradley Hand', cursive;

  /* Type scale */
  --text-h2: clamp(28px,3vw,44px);
  --leading-h2: 1.05;
  --text-h3: clamp(40px,5vw,56px);
  --leading-h3: 1;
  --text-h4: clamp(22px,2vw,28px);
  --leading-h4: 1.1;
  --text-body: 19px;
  --leading-body: 1.45;
  --text-p: clamp(20px,2.5vw,36px);
  --leading-p: 1.3;
  --text-small: .82em;
  --leading-small: 1.4;
  --text-a: 1.12em;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 6px;
  --radius-3: 14px;
  --radius-4: 12px;
  --radius-5: 20px 16px 22px 18px;
  --radius-6: 16px 22px 18px 20px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 560px;
  --breakpoint-2: 640px;
  --breakpoint-3: 760px;
  --breakpoint-4: 761px;
  --breakpoint-5: 900px;
  --max-width-1: 1240px;
  --max-width-2: 1180px;
  --max-width-3: 900px;
  --max-width-4: 600px;
  --max-width-5: 560px;
  --max-width-6: 520px;
}

{
    "site": "lutarie.happymatter.ro",
    "source": "https://sitestyleguide.com/lutarie.happymatter.ro",
    "text": "#F3EEE9",
    "background": "#171514",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#343434",
            "rgb": [
                52,
                52,
                52
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#F3EEE9",
            "rgb": [
                243,
                238,
                233
            ]
        },
        {
            "name": "Near Black",
            "hex": "#171514",
            "rgb": [
                23,
                21,
                20
            ]
        },
        {
            "name": "Brown",
            "hex": "#9B4C42",
            "rgb": [
                155,
                76,
                66
            ]
        },
        {
            "name": "Misty Rose",
            "hex": "#FFE3EB",
            "rgb": [
                255,
                227,
                235
            ]
        },
        {
            "name": "Old Lace",
            "hex": "#FFF3E0",
            "rgb": [
                255,
                243,
                224
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#202745",
            "rgb": [
                32,
                39,
                69
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#3E2F44",
            "rgb": [
                62,
                47,
                68
            ]
        }
    ],
    "fonts": [
        {
            "name": "Ugly Dave",
            "stack": "\"Ugly Dave\", \"Segoe Print\", \"Bradley Hand\", cursive",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Inter",
            "stack": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif",
            "weights": [
                300,
                400,
                500,
                600
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Ugly Dave Alt",
            "stack": "\"Ugly Dave Alt\", \"Ugly Dave\", \"Segoe Print\", \"Bradley Hand\", cursive",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Ugly Dave M",
            "stack": "\"Ugly Dave M\", \"Ugly Dave Alt\", \"Ugly Dave\", \"Segoe Print\", \"Bradley Hand\", cursive",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run lutarie.happymatter.ro?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/lutarie.happymatter.ro" title="Lutărie style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Lutăriestyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Warm Off White

Near Black

Colours

Brown

Misty Rose

Old Lace

Midnight Blue

Dark Slate Blue

Gradients

Dark mode

Ugly Dave

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

New Genre

gnu.org

Super User

Zia Tile

Lutăriestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Warm Off White

Near Black

Colours

Brown

Misty Rose

Old Lace

Midnight Blue

Dark Slate Blue

Gradients

Dark mode

Ugly Dave

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run lutarie.happymatter.ro?

Similar colours

New Genre

gnu.org

Super User

Zia Tile

Title &
description