<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title>HR On Demand – Grafisk Profil &amp; Varumärkesriktlinjer</title>
    <meta name="description" content="Grafisk profil och varumärkesriktlinjer för HR On Demand Sweden AB. Färger, typsnitt, logotyp, tonalitet och bildspråk.">

    <!-- Structured Data for AI/machine readability -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "HR On Demand Sweden AB",
        "alternateName": "HR On Demand",
        "url": "https://www.hrondemand.se",
        "foundingDate": "2008",
        "description": "HR-konsulttjänster för svenska SME-företag. Rådgivning, rekrytering och interim inom HR, ledarskap och organisation.",
        "slogan": "Riktigt bra HR när du behöver det",
        "areaServed": "Sweden",
        "knowsLanguage": "sv"
    }
    </script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            /* === HR ON DEMAND COLOR PALETTE === */
            --hrod-blue: #0B3A5B;
            --hrod-pink: #FFBDF2;
            --hrod-lime: #C7FF3A;
            --hrod-white: #FFFFFF;
            --hrod-blue-black: #041827;
            --hrod-light-gray: #F8F8F8;

            /* Derived */
            --hrod-blue-rgb: 11, 58, 91;
            --hrod-pink-rgb: 255, 189, 242;
            --hrod-lime-rgb: 199, 255, 58;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Outfit', sans-serif;
            font-weight: 300;
            color: var(--hrod-blue-black);
            background: var(--hrod-white);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        /* === LAYOUT === */
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* === HEADER === */
        .brand-header {
            background: var(--hrod-blue);
            color: var(--hrod-white);
            padding: 4rem 0 3rem;
            position: relative;
            overflow: hidden;
        }

        .brand-header::after {
            content: '';
            position: absolute;
            right: -80px;
            bottom: -120px;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: var(--hrod-pink);
            opacity: 0.3;
        }

        .brand-header h1 {
            font-weight: 500;
            font-size: 2.4rem;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }

        .brand-header .subtitle {
            font-weight: 300;
            font-size: 1.1rem;
            opacity: 0.8;
            position: relative;
            z-index: 1;
        }

        .brand-header .version {
            font-weight: 300;
            font-size: 0.85rem;
            opacity: 0.5;
            margin-top: 1rem;
            position: relative;
            z-index: 1;
        }

        /* === SECTIONS === */
        section {
            padding: 3rem 0;
            border-bottom: 1px solid #eee;
        }

        section:last-child {
            border-bottom: none;
        }

        .section-label {
            font-weight: 500;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--hrod-blue);
            opacity: 0.5;
            margin-bottom: 0.5rem;
        }

        h2 {
            font-weight: 500;
            font-size: 1.8rem;
            margin-bottom: 1.2rem;
            color: var(--hrod-blue-black);
        }

        h3 {
            font-weight: 500;
            font-size: 1.15rem;
            margin-bottom: 0.6rem;
            margin-top: 1.8rem;
            color: var(--hrod-blue-black);
        }

        p {
            margin-bottom: 1rem;
            font-size: 1rem;
            line-height: 1.7;
        }

        /* === AI INSTRUCTION BOX === */
        .ai-instructions {
            background: var(--hrod-light-gray);
            border-left: 3px solid var(--hrod-lime);
            padding: 1.2rem 1.5rem;
            border-radius: 0 12px 12px 0;
            margin: 2rem 0;
            font-size: 0.9rem;
        }

        .ai-instructions strong {
            font-weight: 500;
        }

        /* === COLOR PALETTE === */
        .color-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .color-card {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid #eee;
        }

        .color-swatch {
            height: 80px;
        }

        .color-info {
            padding: 0.8rem 1rem;
        }

        .color-name {
            font-weight: 500;
            font-size: 0.95rem;
        }

        .color-hex {
            font-weight: 400;
            font-size: 0.85rem;
            font-family: monospace;
            opacity: 0.7;
        }

        .color-usage {
            font-size: 0.8rem;
            font-weight: 300;
            margin-top: 0.3rem;
            opacity: 0.6;
        }

        /* === TYPOGRAPHY SPECIMENS === */
        .type-specimen {
            background: var(--hrod-light-gray);
            border-radius: 16px;
            padding: 1.5rem;
            margin: 0.8rem 0;
        }

        .type-specimen .label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 500;
            opacity: 0.5;
            margin-bottom: 0.4rem;
        }

        .type-specimen .example {
            color: var(--hrod-blue-black);
        }

        .type-heading { font-weight: 500; font-size: 1.6rem; }
        .type-ingress { font-weight: 400; font-size: 1.15rem; }
        .type-body { font-weight: 300; font-size: 1rem; }
        .type-overline { font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }

        /* === LOGO DISPLAY === */
        .logo-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .logo-card {
            border-radius: 16px;
            padding: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 120px;
        }

        .logo-card.light {
            background: var(--hrod-light-gray);
        }

        .logo-card.dark {
            background: var(--hrod-blue);
        }

        .logo-card img {
            max-height: 60px;
            width: auto;
        }

        .logo-card .logo-label {
            font-size: 0.75rem;
            text-align: center;
            margin-top: 0.8rem;
            opacity: 0.6;
        }

        /* === ICON EXAMPLES === */
        .icon-row {
            display: flex;
            gap: 1.2rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .icon-circle {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon-circle.blue { background: var(--hrod-blue); color: var(--hrod-white); }
        .icon-circle.pink { background: var(--hrod-pink); color: var(--hrod-blue); }
        .icon-circle.lime { background: var(--hrod-lime); color: var(--hrod-blue); }

        /* === DATA TABLE === */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
            font-size: 0.9rem;
        }

        th, td {
            text-align: left;
            padding: 0.6rem 1rem;
            border-bottom: 1px solid #eee;
        }

        th {
            font-weight: 500;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            opacity: 0.5;
        }

        td code {
            font-family: monospace;
            background: var(--hrod-light-gray);
            padding: 0.15rem 0.4rem;
            border-radius: 4px;
            font-size: 0.85rem;
        }

        /* === LISTS === */
        ul {
            margin: 0.5rem 0 1rem 1.2rem;
            font-size: 0.95rem;
        }

        li {
            margin-bottom: 0.3rem;
        }

        /* === GRAPHIC ELEMENTS === */
        .rounded-demo {
            display: flex;
            gap: 1.5rem;
            align-items: center;
            margin: 1.5rem 0;
            flex-wrap: wrap;
        }

        .rounded-box {
            width: 160px;
            height: 160px;
            border-radius: 20%;
            background: var(--hrod-pink);
            position: relative;
        }

        .circle-demo {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: var(--hrod-pink);
        }

        /* === FOOTER === */
        .brand-footer {
            background: var(--hrod-blue);
            color: var(--hrod-white);
            padding: 2rem 0;
            text-align: center;
            font-size: 0.85rem;
            font-weight: 300;
            opacity: 0.7;
        }

        /* === MACHINE-READABLE SUMMARY (hidden visually, visible to crawlers/AI) === */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        @media (max-width: 600px) {
            .color-grid { grid-template-columns: 1fr; }
            .logo-grid { grid-template-columns: 1fr; }
            .brand-header h1 { font-size: 1.8rem; }
            h2 { font-size: 1.4rem; }
        }
    </style>
</head>
<body>

<!-- Machine-readable brand summary for AI services -->
<div class="sr-only" role="note" aria-label="Brand summary for AI assistants">
    BRAND QUICK REFERENCE — HR On Demand Sweden AB
    Company: HR On Demand Sweden AB (est. 2008)
    Website: www.hrondemand.se
    Industry: HR consulting for Swedish SMEs
    Services: HR advisory, recruitment, interim/staffing
    Tagline: "Riktigt bra HR när du behöver det"
    Primary colors: HR On Demand Blue #0B3A5B, HR On Demand Pink #FFBDF2
    Accent color: Lime Highlight #C7FF3A (buttons/CTAs only)
    Neutral colors: White #FFFFFF, Blue Black #041827 (text), Light Gray #F8F8F8
    Primary font: Outfit (Google Fonts) — Headings: Medium 500, Body: Light 300, Ingress: Regular 400, Overline: Medium 500 uppercase +8% letter-spacing
    Fallback fonts: Tenorite (MS Office), Arial (email)
    Icon system: Google Material Icons on colored circles
    Graphic style: Rounded corners (20% radius), circles, soft shapes to balance professional content
    Image style: People in work situations (not portraits), depth of field, blue/red color tones, always show people in context with others
    Tone of voice: Steady, trustworthy, human-centered. Genuine care for relationships. Direct when needed. Experienced and knowledgeable.
    Brand responsible: Jacob Bergström
    Parent brand: On Demand People (network of senior professionals)
</div>

<header class="brand-header">
    <div class="container">
        <h1>HR On Demand</h1>
        <p class="subtitle">Grafisk Profil &amp; Varumärkesriktlinjer</p>
        <p class="version">Version 1.0 · Februari 2026 · Ansvarig: Jacob Bergström</p>
    </div>
</header>

<main class="container">

    <!-- === ABOUT THE BRAND === -->
    <section id="varumarket">
        <p class="section-label">Varumärket</p>
        <h2>Om HR On Demand</h2>
        <p>HR On Demand (grundat 2008) vill med stadig hand leda dina arbetsrelationer rätt. Vi ger dig tryggheten och modet att fatta beslut som gynnar alla parter. I en värld med allt mer digital kontakt trycker vi på vikten av det mänskliga mötet.</p>
        <p>Vi drivs av en genuin omtanke om relationer – just därför undviker vi inte tuffa samtal när det behövs. Med många års erfarenhet i branschen sitter vi på mycket kunskap och är redo att dela med oss av den, precis när du behöver det.</p>

        <h3>Kärnvärden</h3>
        <ul>
            <li><strong>Trygghet</strong> – Våra kunder ska alltid känna sig trygga med att de får rätt hjälp, i rätt tid.</li>
            <li><strong>Mänsklig omtanke</strong> – Vi värdesätter det personliga mötet och genuina relationer.</li>
            <li><strong>Mod</strong> – Vi undviker inte tuffa samtal när det behövs.</li>
            <li><strong>Erfarenhet</strong> – Med 18+ års erfarenhet levererar vi skarp HR-kompetens.</li>
        </ul>

        <h3>Tjänsteområden</h3>
        <ul>
            <li><strong>Rådgivning</strong> – HR-rådgivning och stöd för chefer och ledning</li>
            <li><strong>Rekrytering</strong> – Rekrytering av medarbetare och chefer</li>
            <li><strong>Interim</strong> – Tillfällig HR-bemanning vid behov</li>
        </ul>

        <h3>Målgrupp</h3>
        <p>Svenska SME-företag vars VD:ar och CFO:er saknar en dedikerad HR-funktion. Vi riktar oss till beslutsfattare som behöver professionellt HR-stöd utan att anställa en egen HR-avdelning.</p>
    </section>

    <!-- === COLOR PALETTE === -->
    <section id="farger">
        <p class="section-label">Visuell identitet</p>
        <h2>Färgpalett</h2>
        <p>HR On Demand Blue och HR On Demand Pink är primärfärgerna och används till både större och mindre grafiska element. Lime Highlight används sparsamt som komplement och för att dra uppmärksamhet till knappar och CTAs.</p>

        <div class="color-grid">
            <div class="color-card">
                <div class="color-swatch" style="background: #0B3A5B;"></div>
                <div class="color-info">
                    <div class="color-name">HR On Demand Blue</div>
                    <div class="color-hex">#0B3A5B</div>
                    <div class="color-usage">rgb(11, 58, 91) · cmyk(100, 77, 40, 31) · PMS 2955 C</div>
                    <div class="color-usage">Primärfärg – bakgrunder, element, logotyp</div>
                </div>
            </div>
            <div class="color-card">
                <div class="color-swatch" style="background: #FFBDF2;"></div>
                <div class="color-info">
                    <div class="color-name">HR On Demand Pink</div>
                    <div class="color-hex">#FFBDF2</div>
                    <div class="color-usage">rgb(255, 189, 242) · cmyk(3, 30, 0, 0) · PMS Magenta 0521 C</div>
                    <div class="color-usage">Primärfärg – grafiska element, cirklar</div>
                </div>
            </div>
            <div class="color-card">
                <div class="color-swatch" style="background: #C7FF3A;"></div>
                <div class="color-info">
                    <div class="color-name">Lime Highlight</div>
                    <div class="color-hex">#C7FF3A</div>
                    <div class="color-usage">rgb(199, 255, 58) · cmyk(26, 0, 98, 0) · PMS 374 C</div>
                    <div class="color-usage">Accent – knappar, CTAs, små element</div>
                </div>
            </div>
            <div class="color-card">
                <div class="color-swatch" style="background: #FFFFFF; border: 1px solid #eee;"></div>
                <div class="color-info">
                    <div class="color-name">Plain White</div>
                    <div class="color-hex">#FFFFFF</div>
                    <div class="color-usage">rgb(255, 255, 255) · cmyk(0, 0, 0, 0)</div>
                    <div class="color-usage">Bakgrund (primär)</div>
                </div>
            </div>
            <div class="color-card">
                <div class="color-swatch" style="background: #041827;"></div>
                <div class="color-info">
                    <div class="color-name">Blue Black</div>
                    <div class="color-hex">#041827</div>
                    <div class="color-usage">rgb(4, 24, 39) · cmyk(89, 75, 56, 70) · PMS 296 C</div>
                    <div class="color-usage">Text, logotyp, mörka ytor</div>
                </div>
            </div>
            <div class="color-card">
                <div class="color-swatch" style="background: #F8F8F8;"></div>
                <div class="color-info">
                    <div class="color-name">Light Grey</div>
                    <div class="color-hex">#F8F8F8</div>
                    <div class="color-usage">rgb(248, 248, 248) · cmyk(2, 1, 1, 0) · PMS 663 C</div>
                    <div class="color-usage">Bakgrund (alternativ, bryter av mot vitt)</div>
                </div>
            </div>
        </div>

        <div class="ai-instructions">
            <strong>Färgregler för design:</strong> Blå och rosa är likvärdiga primärfärger. Lime används <em>enbart</em> på små ytor som knappar, CTAs och ikoner – aldrig som bakgrund eller textfärg. White är primär bakgrund, Blue Black (<code>#041827</code>) för text, Light Grey när det behövs avbrott mot vitt.
        </div>
    </section>

    <!-- === TYPOGRAPHY === -->
    <section id="typsnitt">
        <h2>Typsnitt</h2>
        <p>Vårt primära typsnitt är <strong>Outfit</strong>, tillgängligt via Google Fonts. Det används i all kommunikation, både tryck och digitalt.</p>

        <div class="type-specimen">
            <div class="label">Rubriker — Outfit Medium (500)</div>
            <div class="example type-heading">Riktigt bra HR när det verkligen behövs</div>
        </div>

        <div class="type-specimen">
            <div class="label">Ingresser — Outfit Regular (400)</div>
            <div class="example type-ingress">En podd för dig som behöver hantera medarbetare.</div>
        </div>

        <div class="type-specimen">
            <div class="label">Brödtext — Outfit Light (300)</div>
            <div class="example type-body">Vi hjälper dig som chef att anställa, utveckla och vid behov avveckla rätt medarbetare.</div>
        </div>

        <div class="type-specimen">
            <div class="label">Dårrad / Överrubrik — Outfit Medium (500), Uppercase, Letter-spacing +8%</div>
            <div class="example type-overline">Skräddarsydda upplägg</div>
        </div>

        <h3>Typsnittshierarki</h3>
        <table>
            <thead>
                <tr>
                    <th>Användning</th>
                    <th>Typsnitt</th>
                    <th>Vikt</th>
                    <th>Stil</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Rubriker</td>
                    <td>Outfit</td>
                    <td>Medium (500)</td>
                    <td>Normal</td>
                </tr>
                <tr>
                    <td>Ingresser</td>
                    <td>Outfit</td>
                    <td>Regular (400)</td>
                    <td>Normal</td>
                </tr>
                <tr>
                    <td>Brödtext</td>
                    <td>Outfit</td>
                    <td>Light (300)</td>
                    <td>Normal</td>
                </tr>
                <tr>
                    <td>Överrubrik (Dårrad)</td>
                    <td>Outfit</td>
                    <td>Medium (500)</td>
                    <td>Uppercase, letter-spacing +8%</td>
                </tr>
            </tbody>
        </table>

        <h3>Fallback-typsnitt</h3>
        <table>
            <thead>
                <tr>
                    <th>Kontext</th>
                    <th>Typsnitt</th>
                    <th>Notering</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Primärt (webb & tryck)</td>
                    <td>Outfit</td>
                    <td>Google Fonts</td>
                </tr>
                <tr>
                    <td>Microsoft Office</td>
                    <td>Tenorite</td>
                    <td>Rubriker: Bold, Brödtext: Regular</td>
                </tr>
                <tr>
                    <td>E-post (sista utväg)</td>
                    <td>Arial</td>
                    <td>Systemtypsnitt</td>
                </tr>
            </tbody>
        </table>

        <div class="ai-instructions">
            <strong>CSS-implementation:</strong><br>
            <code>font-family: 'Outfit', sans-serif;</code><br>
            Google Fonts import: <code>https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap</code>
        </div>
    </section>

    <!-- === LOGO === -->
    <section id="logotyp">
        <h2>Logotyp</h2>
        <p>Logotypen består av bildmärke (chevron-symbol) och ordmärke ("HR On Demand"). Den finns i flera varianter beroende på bakgrund.</p>

        <h3>Logotypvarianter</h3>
        <table>
            <thead>
                <tr>
                    <th>Variant</th>
                    <th>Användning</th>
                    <th>Format</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Primär (Blue Black)</td>
                    <td>Ljusa bakgrunder (vit, ljusgrå)</td>
                    <td>SVG, PNG</td>
                </tr>
                <tr>
                    <td>Vit (inverterad)</td>
                    <td>Mörka bakgrunder (blå, foto)</td>
                    <td>PNG</td>
                </tr>
                <tr>
                    <td>Svart</td>
                    <td>Svartvita sammanhang</td>
                    <td>PNG</td>
                </tr>
            </tbody>
        </table>

        <h3>Bildmärke (symbol)</h3>
        <p>Bildmärket (chevron-symbolen) kan användas fristående i sammanhang där utrymmet är begränsat, t.ex. favicon, social media-ikoner eller appikoner. Tillgängligt i blå och vit variant.</p>

        <div class="ai-instructions">
            <strong>Logotypens färg:</strong> Primärfärgen för logotypen är <code>#0B3A5B</code> (HR On Demand Blue) alternativt <code>#041827</code> (Blue Black). Logotypen ska alltid ha tillräcklig kontrast mot sin bakgrund. Använd inte logotypen i andra färger än de specificerade varianterna.
        </div>
    </section>

    <!-- === GRAPHIC ELEMENTS === -->
    <section id="grafiska-element">
        <h2>Grafiska element</h2>

        <h3>Runda former</h3>
        <p>HR On Demand använder rundade hörn och cirklar för att signalera mänsklig omtanke och balansera det professionella. Bilder är kvadratiska med 20% kurva (border-radius) gentemot sidornas längd. Cirklar i rosa används som dekorativa element, ensamma eller i kombination med bilder.</p>

        <div class="rounded-demo">
            <div class="rounded-box"></div>
            <div class="circle-demo"></div>
        </div>

        <div class="ai-instructions">
            <strong>CSS-riktlinjer:</strong> Bilder: <code>border-radius: 20%;</code> — Dekorativa cirklar: <code>border-radius: 50%;</code> i HR On Demand Pink. Knappar: rundade med <code>border-radius</code> och Lime Highlight bakgrund.
        </div>

        <h3>Ikoner</h3>
        <p>Vi använder Google Material Icons placerade ovanpå cirklar i HR On Demands färger.</p>

        <table>
            <thead>
                <tr>
                    <th>Cirkelfärg</th>
                    <th>Ikonfärg</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>HR On Demand Blue (#0B3A5B)</td>
                    <td>Vit (#FFFFFF)</td>
                </tr>
                <tr>
                    <td>HR On Demand Pink (#FFBDF2)</td>
                    <td>HR On Demand Blue (#0B3A5B)</td>
                </tr>
                <tr>
                    <td>Lime Highlight (#C7FF3A)</td>
                    <td>HR On Demand Blue (#0B3A5B)</td>
                </tr>
            </tbody>
        </table>

        <div class="icon-row">
            <div class="icon-circle blue">
                <svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 -960 960 960" width="28" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Z"/></svg>
            </div>
            <div class="icon-circle pink">
                <svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 -960 960 960" width="28" fill="currentColor"><path d="M480-80q-26 0-47-12.5T400-126q-33 0-56.5-23.5T320-206v-142q-59-39-94.5-103T190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 77-35.5 140T640-348v142q0 33-23.5 56.5T560-126q-12 21-33 33.5T480-80Z"/></svg>
            </div>
            <div class="icon-circle lime">
                <svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 -960 960 960" width="28" fill="currentColor"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
            </div>
        </div>
    </section>

    <!-- === IMAGERY === -->
    <section id="bildsprak">
        <h2>Bildspråk</h2>
        <p>Våra bilder sätter människan i fokus. Vi utgår från följande principer:</p>
        <ul>
            <li><strong>Situationer, inte porträtt</strong> – Vi visar människor i arbetssituationer snarare än enskilda porträtt.</li>
            <li><strong>Djup och närvaro</strong> – Bilderna har gärna en person eller ett objekt i förgrunden som är ur fokus, för att skapa djup och känsla av att vara nära.</li>
            <li><strong>Färgskala</strong> – Bilderna drar åt blått och rött i sin tonalitet.</li>
            <li><strong>Sammanhang</strong> – Vi visar alltid människor i ett sammanhang med andra, även om fokus kan vara på en person.</li>
        </ul>

        <div class="ai-instructions">
            <strong>Bildriktlinjer för AI-generering:</strong> Bilder bör visa professionella arbetssituationer med mänsklig värme. Undvik sterila kontorsmiljöer. Föredra naturligt ljus, genuina ansiktsuttryck och situationer som visar samarbete eller rådgivning. Färgtemperaturen ska luta åt blått/kallt med inslag av varma toner.
        </div>
    </section>

    <!-- === TONE OF VOICE === -->
    <section id="tonalitet">
        <h2>Tonalitet &amp; Kommunikation</h2>

        <h3>Vår röst</h3>
        <p>HR On Demand kommunicerar med stadig hand – vi är trygga, kunniga och ärliga. Vi säljer inte med hype utan med substans. Vår ton är professionell men varm, aldrig byråkratisk eller klinisk.</p>

        <h3>Karaktärsdrag</h3>
        <ul>
            <li><strong>Trygg</strong> – Vi utstrålar kompetens och stabilitet</li>
            <li><strong>Varm</strong> – Vi bryr oss genuint om människor och relationer</li>
            <li><strong>Rak</strong> – Vi undviker inte svåra samtal eller tydliga råd</li>
            <li><strong>Erfaren</strong> – Vi vilar på 18+ års erfarenhet utan att vara bakåtblickande</li>
        </ul>

        <h3>Nyckelfraser</h3>
        <ul>
            <li>"Riktigt bra HR när du behöver det"</li>
            <li>"Anställa, utveckla och avveckla rätt medarbetare"</li>
            <li>"Rätt hjälp, i rätt tid"</li>
        </ul>

        <h3>Vi undviker</h3>
        <ul>
            <li>Överdrivet säljande språk ("revolutionerande", "marknadsledande")</li>
            <li>Byråkratiskt och kliniskt språk</li>
            <li>Buzzwords och tomma fraser</li>
            <li>Opersonlig, distanserad ton</li>
        </ul>
    </section>

    <!-- === QUICK REFERENCE FOR AI === -->
    <section id="snabbreferens">
        <h2>Snabbreferens</h2>
        <p>Sammanfattning av hela den visuella identiteten i kompakt format.</p>

        <table>
            <thead>
                <tr>
                    <th>Element</th>
                    <th>Värde</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>Företagsnamn</td><td>HR On Demand Sweden AB</td></tr>
                <tr><td>Grundat</td><td>2008</td></tr>
                <tr><td>Webbplats</td><td>www.hrondemand.se</td></tr>
                <tr><td>Bransch</td><td>HR-konsulttjänster för svenska SME-företag</td></tr>
                <tr><td>Modervarumärke</td><td>On Demand People</td></tr>
                <tr><td>Varumärkesansvarig</td><td>Jacob Bergström</td></tr>
                <tr><td>Primärfärg 1</td><td><code>#0B3A5B</code> (HR On Demand Blue)</td></tr>
                <tr><td>Primärfärg 2</td><td><code>#FFBDF2</code> (HR On Demand Pink)</td></tr>
                <tr><td>Accentfärg</td><td><code>#C7FF3A</code> (Lime Highlight – enbart knappar/CTAs)</td></tr>
                <tr><td>Textfärg</td><td><code>#041827</code> (Blue Black)</td></tr>
                <tr><td>Bakgrund</td><td><code>#FFFFFF</code> (vit) / <code>#F8F8F8</code> (ljusgrå)</td></tr>
                <tr><td>Primärt typsnitt</td><td>Outfit (Google Fonts)</td></tr>
                <tr><td>Fallback Office</td><td>Tenorite</td></tr>
                <tr><td>Fallback e-post</td><td>Arial</td></tr>
                <tr><td>Ikoner</td><td>Google Material Icons</td></tr>
                <tr><td>Border-radius bilder</td><td>20%</td></tr>
                <tr><td>Grafisk form</td><td>Rundade hörn, cirklar (rosa)</td></tr>
                <tr><td>Tagline</td><td>"Riktigt bra HR när du behöver det"</td></tr>
            </tbody>
        </table>
    </section>

    <!-- === BRAND RESPONSIBLE === -->
    <section id="ansvarig">
        <h2>Varumärkesansvarig</h2>
        <p><strong>Jacob Bergström</strong> ansvarar för att denna grafiska profil följs i all kommunikation och allt material som produceras för HR On Demand. Vid frågor om varumärket, godkännande av material eller undantag från riktlinjerna – kontakta Jacob.</p>
        <p>Alla som arbetar med HR On Demands varumärke – internt, externt eller via AI-tjänster – förväntas följa dessa riktlinjer. Om du är osäker på hur profilen ska tillämpas i ett specifikt sammanhang, stäm av med varumärkesansvarig.</p>
    </section>

</main>

<footer class="brand-footer">
    <div class="container">
        &copy; 2026 HR On Demand Sweden AB · Grafisk profil v1.0 · Ansvarig: Jacob Bergström · www.hrondemand.se
    </div>
</footer>

</body>
</html>