Gi Jesus
Videre
Gi Jesus Videre er en tverrkirkelig konferanse for alle som arbeider med neste generasjon — ansatte, frivillige og unge ledere. Konferansen 2026 samles under temaet «Tro i overlapp». Denne manualen er det dokumentet designsystemet faktisk kjører på — samme farger, samme fonter, samme regler som gijesusvidere.no bruker, ikke en forenklet visning av dem.
Siden du har oppe mens du jobber.
Alt du trenger for en rask GJV-flate, samlet på én skjermhøyde. Begrunnelsen bak hvert valg — scroll videre.
Farger
#F59E2A accent#3B7860 primary#1E1D1B ink-darkest#3D3830 ink#756E68 ink-muted#FAF8F4 surface#E7E2DA lineFonter
Bricolage Grotesque
Display · vekt 600–800
Plus Jakarta Sans
Body/UI · vekt 400–700
Overline er eneste UPPERCASE-rollen. Negativ letter-spacing kun på Bricolage.
Logo
- Min. symbolhøyde: 32px
- Clearspace: symbolets bredde
- Standard: mono-oransje på mørk
Tone
Vi inviterer, vi selger ikke. Konkrete datoer og steder slår superlativ.
#9E5F00 (4,8:1)
Aa Grønn knapp m/ hvit tekst → #2D6B4F (6,3:1)
Aa Oransje knapp → mørk tekst #1E1D1B (7,9:1)
Slik ser det ut i praksis.
Et designsystem beviser seg selv først når det møter en skjerm eller et trykk. Under: det faktiske nettstedet, seks genererte maler — SoMe-post (mørk og fotovariant), story med ekte konferansefoto, presentasjonsforside med sirkeldekor, A4-plakat — pluss et A4-dokument (konferanseprogram-forside + innholdsside) — alle strengt bygget fra de samme tokens som resten av denne manualen.
Sosiale medier og trykk
Tro i overlapp — neste generasjon møtes i Oslo.
Tro i overlapp
Se program →Tro i overlapp — program og praktisk info
Tverrkirkelig konferanse for neste generasjon. 23.–24. oktober, Filadelfiakirken, Oslo.
Gi Jesus Videre
Filadelfiakirken, Oslo
Ungt lederskap i menigheten
Vi sees der.
Dokumenter
Konferanseprogram — A4-forside
Logo øverst, sirkelmotiv-flate i ink-darkest, konferansefoto og gradient-bar som aksentstrek. Alt fra tokens — ingen frihåndspynt.
Innholdsside — deltakerinfo
Overskrift-hierarkiet og brødtekst-spalten bærer profilen også i dokumenter: Bricolage 700 til H2, oransje H4-etikett, sage-notatboks for praktisk info.
Registrering åpner fredag kl. 09:00 i foajeen. Ta med billett (digital eller utskrift) og gyldig legitimasjon.
ink-darkest + radiale accent/sage-gradients identisk med den faktiske hero-seksjonen på gijesusvidere.no. Story-en og feature-kort-varianten bruker ekte konferansefoto (720×1040 px / 639×924 px kilder, hentet fra samme produksjons-skjermbilde som toppen av denne seksjonen) — hvit tekst mot scrimen i story-en måler minst 13,4:1 (verste fall: lyseste fotopunkt bak 94 %-scrimen nederst).
Kors i bevegelse, satt i oransje.
GJV sin 2026-logo er et mono-oransje symbolmerke — et latinsk kors smeltet sammen med en fremoverpekende pil som vokser ut av korsets høyre side, tegnet i jevntykke konturstreker — kombinert med et Bricolage Grotesque-ordmerke der «Videre» alltid får aksentfargen. Symbolet ekkoer bevegelsen i hero-bakgrunnens sirkelmotiv uten selv å inneholde en ring: troen som beveger seg videre, ikke et statisk ikon som må forklares.
Godkjente varianter
gjv-logo-orange.png, gjv-2026-logo.png, gjv-2026-logo-hvit.png) funnet i GJV sitt WordPress-tema og på live-headeren, bekreftet byte-identiske mellom repo og gijesusvidere.no. Ingen SVG-kilde finnes for 2026-logoen (kun PNG). 2019-arkivet (GJV2019_logo_hor.eps, Drive: «50-59 Clients/GJV.no/Grafikk/») er derimot en ekte Adobe Illustrator-vektorfil, bekreftet med identisk symbolgeometri som 2026-versjonen — denne kan brukes som vektorkilde hvis en SVG trengs senere. Anbefaling: eksporter en ren SVG fra dette EPS-arkivet for skarpere skalering enn PNG gir.
Feilbruk
Aldri skaler bredde og høyde ulikt. Korset og pilen må beholde sine proporsjoner — strukket i bredde eller høyde bryter symbolets form.
Aldri gjengi logoen i en annen farge enn godkjent mono-oransje (#F59E2A), hvit eller ink-darkest-monokrom. Av-brand fargetoner (som over) svekker gjenkjennelsen og bryter profilen.
Under ca. 32px høyde smelter korsets og pilens konturstreker sammen og blir uleselig som symbol.
Logoen trenger en rolig, ensfarget flate. Aldri over mønster, foto eller støyende gradient.
Per DESIGN.md skal partner-/samarbeidslogoer vises monokrome i ink-darkest på krem — fargede logoer distraherer fra GJV sin egen palett.
To familier — oransje og salvie. Aldri tilfeldig.
Paletten bygges rundt oransje (energi, aksent) og sage (UI, tekst, struktur), mot varm-mørk og krem. Alle 7 brand-tokens er WCAG 2.1 AA-validerte — og fordi flere av dem trenger kontrast-justerte varianter avhengig av kontekst, dokumenterer vi 10 UU-pair-varianter i prosa fremfor å blåse opp brand-budsjettet.
Brand-tokens (7)
UU-pair-variants (10 — kontekst-spesifikke shades, ikke egne budsjett-tokens)
accent hver gang oransje skal være lesbar skrift.WCAG-kontrasttabell — regnet ut, ikke antatt
De fleste profilmanualer i dette segmentet lister farger med hex og stopper der. Vår manual regner ut relativ luminans for hvert tekst-relevante fargepar i GJV-paletten og oppgir faktisk kontrastforhold — egenberegnet for denne manualen, ikke kopiert fra DESIGN.md. Tallene under er verifisert mot DESIGN.md sin egen kontrast-tabell og stemmer overens innenfor avrunding — se metodenote.
| Forgrunn | Bakgrunn | Eksempel | Ratio | Normal tekst | Stor tekst / UI |
|---|---|---|---|---|---|
| Ink #3D3830 | Surface #FAF8F4 | Aa | 10.96:1 | AAA | AAA |
| Ink-muted #756E68 | Surface #FAF8F4 | Aa | 4.73:1 | AA | AAA |
| Primary #3B7860 | Surface #FAF8F4 | Aa | 4.90:1 | AA | AAA |
| Accent-text #9E5F00 | Surface #FAF8F4 | Aa | 4.84:1 | AA | AAA |
| Ink-darkest #1E1D1B | Accent-knapp #F59E2A | Aa | 7.87:1 | AAA | AAA |
| Hvit #FFFFFF | Sage-dark-knapp #2D6B4F | Aa | 6.31:1 | AAA | AAA |
| Hvit #FFFFFF | Ink-darkest #1E1D1B | Aa | 16.84:1 | AAA | AAA |
| Sage-light #6BAF8E | Ink-darkest #1E1D1B | Aa | 6.54:1 | AAA | AAA |
| Accent (display) #F59E2A | Ink-darkest #1E1D1B | Aa | 7.87:1 | AAA | AAA |
| Accent #F59E2A | Surface #FAF8F4 | Aa | 2.02:1 | Under AA | Under AA |
| Sage-ui #4A8B6F | Surface #FAF8F4 | Aa | 3.80:1 | Under AA | AA (stor/UI) |
| Border-input #968C7F | Surface #FAF8F4 | Aa | 3.12:1 | Under AA | AA (UI 1.4.11) |
Metode: relativ luminans per WCAG 2.1 (koeffisienter 0,2126R + 0,7152G + 0,0722B på lineærkonvertert sRGB), kontrastforhold (L1 + 0,05) / (L2 + 0,05). Grenseverdier: normal tekst AA ≥ 4,5:1 / AAA ≥ 7:1. Stor tekst (≥ 18pt/24px, eller ≥ 14pt/18,66px fet) og UI-komponenter (1.4.11): AA ≥ 3:1.
Verifisering mot DESIGN.md: alle 9 par som DESIGN.md selv oppgir stemmer med egenberegningen innenfor avrunding (f.eks. primary/surface: DESIGN.md 4,9:1 → beregnet 4,90:1; accent-text/surface: DESIGN.md 4,8:1 → beregnet 4,84:1). Ingen avvik funnet. Manualens egne aksent-markerte tittelord følger samme regler: ren accent kun på mørk bunn (7,87:1 mot ink-darkest), accent-text på lys (4,84:1 på krem). De tre siste radene (accent/surface, sage-ui/surface, border-input/surface) er lagt til av oss for å eksplisitt dokumentere hvorfor disse er forbudt/begrenset som tekstfarge — de er nevnt i DESIGN.md sine kritiske kontrast-regler, men uten tall ved siden av.
To fontfamilier, én generasjons-samtale.
Bricolage Grotesque (display, 600–800) og Plus Jakarta Sans (body, 400–700) er valgt som en klassisk-modern hybrid som speiler temaet «Tro i overlapp» — to typografiske generasjoner som møtes, ikke konkurrerer.
Gi Jesus Videre er en tverrkirkelig konferanse for alle som arbeider med neste generasjon — ansatte, frivillige og unge ledere.
Standard brødtekst brukes i alle lange avsnitt og beskrivelser — programtekster, taler-bio, praktisk informasjon.
Captions, footer-tekst og metadata bruker denne minste, roligste størrelsen — billettpriser, tidspunkter, bildetekster.
text-wrap: balance på alle headings for forutsigbar linjebrytning. Ingenting utledet i denne seksjonen — typografi-hierarkiet er fullt spesifisert i kilden. Stigen øverst er vår visning av vektskalaen, ikke en ny spesifikasjon.
Autentisk fremfor iscenesatt.
GJV sitt publikum — menigheter med stor aldersspredning — gjenkjenner generisk kristen-stock øyeblikkelig. Bildestilen er derfor et bevisst valg av ekthet: konferansefoto fra tidligere år, ekte talere, ekte deltakere.
Autentisk konferansefoto
Ekte talere, ekte deltakere fra tidligere års GJV — aldri stockfoto av «bedende hender mot solnedgang» eller «smilende kor i bevegelse».
Varm, ikke klinisk fargebehandling
Bilder holder seg til samme varme, dempede tone som resten av paletten — krem og varm sort som ramme, ingen kalde filtre.
Luft fremfor tetthet
Bilder får puste i egne, avgrensede flater — samme prinsipp som seksjons-spacing (3xl-hoppet). Ingen collage-følelse.
Monokrome partnerlogoer
Samarbeidspartneres logoer vises i ink-darkest på krem — aldri i egen farge. Konsistens over individuell merkevarebygging på GJV sine flater.
Sirkelmotivet — generasjoner møtes i tro
To overlappende sirkler — én oransje, én salviegrønn — er GJV sitt ekte identitetsmotiv, ikke bare hero-dekor. Overlappet er selve bildet på konferansens tema: to generasjoner, to tradisjoner, som vokser sammen i det samme feltet uten at den ene sluker den andre.
Overlappet er alltid meningsbærende, aldri dekorativt alene. Senteret der de to sirklene møtes representerer troens felles grunn — ikke en tilfeldig komposisjonsdetalj.
Én oransje, én salviegrønn — aldri to like farger. Fargeparet speiler brand-familiene og må holdes konsekvent på tvers av flater.
Plasseres som atmosfærisk bakgrunn, ikke som høyre-kolonne-illustrasjon. Motivet skal ligge bak innhold (lav z-index, redusert opacity), aldri konkurrere med tekst om oppmerksomhet.
6 sekunders pust-syklus når animert. Sakte, nesten umerkelig skalering (scale 1 → 1.04) — aldri raskere. Respekterer prefers-reduced-motion ubetinget.
Skalerer fra favicon til scenebakgrunn. Forenklet til to ringer i liten skala (favicon, app-ikon); full atmosfærisk gradient + ringer + senterpunkt i stor skala (hero, scenebakgrunn på konferansen).
(forenklet, to ringer)
(ringer + senterpunkt)
(full atmosfærisk variant)
Fem byggeklosser, kopier og bruk.
GJVs gjenbrukbare moduler — hentet fra DESIGN.md sine signaturelementer og fra den faktiske live-forsiden. Hver blokk: demo, bruksregler og kopierbar CSS. Bruk dem som spesifisert, eller la være — aldri i halv styrke.
1. Overlappende sirkler
Brukes til: hero-bakgrunner, scenegrafikk, dokumentforsider. Alltid én oransje + én salvie i ulik opacity — aldri to like. Atmosfærisk bakgrunn bak innhold, aldri høyre-kolonne-illustrasjon. Animert: 6s pust-syklus (scale 1→1.04), respekter prefers-reduced-motion.
<circle cx="190" cy="225" r="120" fill="none"
stroke="#F59E2A" stroke-width="1.2" opacity=".5"/>
<circle cx="310" cy="275" r="120" fill="none"
stroke="#4A8B6F" stroke-width="1.2" opacity=".45"/>
/* animert: 6s pust, scale 1 til 1.04 — aldri raskere */
2. Oransje eyebrow-pill
Brukes til: dato/sted-etikett over hero-tittel, kategorimerking på mørke flater — som på live-forsiden. Kun på mørk bunn: accent-tekst måler 7,9:1 mot ren ink-darkest og 6,6:1 mot selve pill-fyllet. På lys bunn: bytt tekstfarge til #9E5F00.
.gjv-eyebrow-pill {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(245,158,42,.10);
border: 1px solid rgba(245,158,42,.4);
color: var(--color-accent);
font-weight: 700; letter-spacing: .06em;
text-transform: uppercase;
padding: 8px 16px; border-radius: 9999px;
}
3. Grønn CTA-/prisstripe
Brukes til: påmeldings-/CTA-linje i bunn av hero eller som seksjonsskille — som den grønne stripen på live-forsiden. Bakgrunn sage-dark #2D6B4F med hvit tekst (6,3:1); knappen er accent med ink-darkest-tekst (7,9:1). Aldri oransje tekst rett på det grønne båndet.
.gjv-price-band {
background: var(--color-sage-dark);
color: #FFF; padding: 12px var(--space-lg);
display: flex; align-items: center;
justify-content: space-between;
}
Seminar: Ungt lederskap
Lørdag 11:15 · Rom 3
4. Kort-stil m/ varm skygge
Brukes til: program-, seminar- og ressurskort. Hvit bunn, radius 20px (--radius-lg), varm diffus skygge (aldri kald/grå) — --shadow-warm er basert på ink-darkest med rustnyanse, ikke pure black. Ikon-container 40×40 i sage-pale.
.gjv-warm-card {
background: #FFF; border-radius: var(--radius-lg);
box-shadow: 0 10px 28px rgba(180,100,30,.10);
padding: var(--space-md) var(--space-lg);
}
5. Aksentord-i-oransje-regelen
Brukes til: å fremheve ett enkelt nøkkelord i en tittel — «Videre», «overlapp» — samme mønster som logoens ordmerke. På lys bunn: accent-text #9E5F00 (4,84:1). På mørk bunn: ren accent #F59E2A (7,87:1). Aldri ren accent som tekst på lys bakgrunn (kun 2,02:1 — feiler AA).
.accentword { color: var(--color-accent-text); } /* lys bg */
.section-dark .accentword,
.intro .accentword { color: var(--color-accent); } /* mørk bg */
Vi inviterer. Vi selger ikke.
GJV snakker som en tverrkirkelig vertskap, ikke en markedsavdeling. Vi henvender oss til menigheter med stor aldersspredning og varierte behov — tonen må bære institusjonell tillit uten å bli korporativ, og menighets-varme uten å bli pjattete.
Gjør
- «En tverrkirkelig konferanse for alle som arbeider med neste generasjon.»
- «Tro i overlapp — generasjoner som vokser i tro sammen.»
- Konkrete datoer og steder («23.–24. oktober 2026, Filadelfiakirken, Oslo»)
- Beskriv innhold presist («Hovedscene», «Seminar», «Komité») fremfor vage superlativ
- Ro i setningsbygningen — generøst whitespace i teksten, ikke bare i layouten
Ikke gjør
- «Sikre din plass!» eller «Begrenset tilbud!» — aggressiv markedstone
- Stockfoto-språk («et uforglemmelig møte», «en transformerende opplevelse»)
- Konfesjonelt snevre formuleringer som ekskluderer tverrkirkelig publikum
- Utropstegn og hype-adjektiver stablet på hverandre
- Klinisk, korporativt konferansespråk («deltakerreise», «touchpoints»)
Denne guiden kan ikke sprike fra det vi faktisk bygger.
Alt du har sett i denne manualen — fargene, fontstørrelsene, avstandene, kontrastforholdene, sirkelmotivet — kommer fra én fil: DESIGN.md. Den er versjonert i git sammen med koden, og synker mot theme.json og main.css i det faktiske WordPress-temaet. Når paletten endres, endres den ett sted — manualen, nettsiden og SoMe-malene dine holder seg identiske.
Praktisk for Norea: trenger dere en ny plakat-mal om et halvt år, genereres den fra samme fil — ikke fra noens minne om hvilken oransje som ble brukt sist. Endrer vi en detalj i DESIGN.md, følger nettsiden og alt trykket automatisk med.