{"id":15926,"date":"2025-08-23T21:43:14","date_gmt":"2025-08-23T19:43:14","guid":{"rendered":"https:\/\/newsite26.coeo-group.ai\/stilguide\/diagram-callouts-och-tabeller\/"},"modified":"2026-03-14T10:59:45","modified_gmt":"2026-03-14T09:59:45","slug":"diagram-callouts-och-tabeller","status":"publish","type":"page","link":"https:\/\/www.coeo-group.ai\/sv\/stilguide\/diagram-callouts-och-tabeller\/","title":{"rendered":"Diagram, callouts och tabeller"},"content":{"rendered":"
[vc_custom_heading text=”Markera. F\u00f6renkla.
\nF\u00f6rklara. ” font_container=”tag:h1|text_align:left” use_theme_fonts=”yes”]<\/div><\/div><\/div><\/div>
<\/div>

Diagram, tabeller och callouts<\/strong> hj\u00e4lper till att omvandla komplex information till tillg\u00e4ngligt och engagerande inneh\u00e5ll. Anv\u00e4nd dem f\u00f6r att lyfta fram viktiga insikter, strukturera data p\u00e5 ett meningsfullt s\u00e4tt och styra l\u00e4sarens uppm\u00e4rksamhet dit den \u00e4r som viktigast. Konsekvent stil, tydlig design och genomt\u00e4nkt placering \u00e4r nyckeln till att g\u00f6ra informationen inte bara synlig utan ocks\u00e5 minnesv\u00e4rd.<\/p>\n<\/div><\/div>

<\/div>
\"\"<\/div><\/div><\/div><\/div><\/div>
\"\"<\/div><\/div><\/div><\/div><\/div>
\"\"<\/div><\/div><\/div><\/div><\/div><\/div>
<\/div>

V\u00e5ra diagram<\/strong> \u00e4r tydliga, minimala och fokuserar endast p\u00e5 det v\u00e4sentliga – inga on\u00f6diga element, inga skuggor. De anv\u00e4nder endast v\u00e5ra f\u00f6retagsf\u00e4rger och alltid v\u00e5rt prim\u00e4ra typsnitt eller det angivna reservtypsnittet. Text och linjer visas i #333333, som v\u00e4xlar till #FFFFFF p\u00e5 m\u00f6rka bakgrunder. Linjerna \u00e4r s\u00e5 tunna som m\u00f6jligt och etiketterna inneh\u00e5ller endast den nyckelinformation som beh\u00f6vs f\u00f6r att snabbt f\u00f6rst\u00e5 uppgifterna.<\/p>\n<\/div><\/div>

<\/div>
\"\"<\/div><\/div>
<\/div>

Tabeller<\/strong> anv\u00e4nder v\u00e5rt prim\u00e4ra typsnitt eller dess angivna reservtypsnitt, med all text i m\u00f6rkgr\u00e5tt (#333333) f\u00f6r optimal l\u00e4sbarhet. Tabellhuvudet har en vit bakgrund (#FFFFFF) och \u00e4r visuellt \u00e5tskilt fr\u00e5n tabellkroppen med en tunn m\u00f6rkgr\u00e5 linje (#333333). I tabellens huvuddel v\u00e4xlar raderna mellan ljusgr\u00e5tt (#F7F7F7) och vitt (#FFFFFF) f\u00f6r b\u00e4ttre l\u00e4sbarhet. Kolumnerna delas av tunna linjer i ljusgr\u00e5tt (#F7F7F7), och en fet m\u00f6rkgr\u00e5 linje (#333333) markerar slutet p\u00e5 tabellen f\u00f6r tydlig visuell avslutning.<\/p>\n<\/div><\/div>

<\/div>
\"\"<\/div><\/div>
<\/div>
\n
\n HEX<\/span>\n 298FC2<\/span>\n <\/div>\n
\n RGB<\/span>\n 41\/143\/194<\/span>\n <\/div>\n
\n CMYK<\/span>\n 76\/26\/0\/0<\/span>\n <\/div>\n<\/div>\n<\/div><\/div><\/div><\/div>
\"\"<\/div><\/div>
<\/div>
\n
\n HEX<\/span>\n 78BE21<\/span>\n <\/div>\n
\n RGB<\/span>\n 120\/190\/33\n<\/span>\n <\/div>\n
\n CMYK<\/span>\n 54\/0\/100\/0<\/span>\n <\/div>\n<\/div>\n<\/div><\/div><\/div><\/div>
\"\"<\/div><\/div>
<\/div>
\n
\n HEX<\/span>\n 326295<\/span>\n <\/div>\n
\n RGB<\/span>\n 50\/98\/149\n<\/span>\n <\/div>\n
\n CMYK<\/span>\n 84\/54\/3\/10<\/span>\n <\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>
<\/div>
\"\"<\/div><\/div>
<\/div>
\n
\n HEX<\/span>\n FEDD00<\/span>\n <\/div>\n
\n RGB<\/span>\n 254\/221\/0<\/span>\n <\/div>\n
\n CMYK<\/span>\n 0\/0\/100\/0<\/span>\n <\/div>\n<\/div>\n<\/div><\/div><\/div><\/div>
\"\"<\/div><\/div>
<\/div>
\n
\n HEX<\/span>\n FF9425<\/span>\n <\/div>\n
\n RGB<\/span>\n 255\/148\/37\n<\/span>\n <\/div>\n
\n CMYK<\/span>\n 0\/45\/100\/0<\/span>\n <\/div>\n<\/div>\n<\/div><\/div><\/div><\/div>
\"\"<\/div><\/div>
<\/div>
\n
\n HEX<\/span>\n D00070<\/span>\n <\/div>\n
\n RGB<\/span>\n 208\/0\/112\n<\/span>\n <\/div>\n
\n CMYK<\/span>\n 0\/100\/0\/0<\/span>\n <\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>
<\/div>

Callouts<\/strong> \u00e4r ett anv\u00e4ndbart verktyg f\u00f6r att f\u00e4sta uppm\u00e4rksamheten p\u00e5 viktiga detaljer, lyfta fram nyckelbudskap eller l\u00e4gga till visuella accenter i en layout. De kan
\nanv\u00e4ndas i de variationer som visas h\u00e4r och b\u00f6r alltid f\u00f6lja varum\u00e4rkets visuella principer. V\u00e5ra callouts \u00e4r genomg\u00e5ende runda i
\nform och kan inneh\u00e5lla text i det prim\u00e4ra typsnittet eller reservtypsnittet, eller ikoner fr\u00e5n den officiella ikonupps\u00e4ttningen. P\u00e5 m\u00f6rka bakgrunder kan vita
\nrunda callouts anv\u00e4ndas som ett alternativ.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"[vc_custom_heading text=\"Markera. F\u00f6renkla. F\u00f6rklara. \" font_container=\"tag:h1|text_align:left\" use_theme_fonts=\"yes\"]Diagram, tabeller och callouts hj\u00e4lper till att omvandla komplex information till tillg\u00e4ngligt och engagerande inneh\u00e5ll. Anv\u00e4nd dem f\u00f6r att lyfta fram viktiga insikter, strukturera data p\u00e5 ett meningsfullt s\u00e4tt och styra l\u00e4sarens uppm\u00e4rksamhet dit den \u00e4r som viktigast. Konsekvent stil, tydlig design och genomt\u00e4nkt placering \u00e4r nyckeln till att...","protected":false},"author":2,"featured_media":0,"parent":15907,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-15926","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.coeo-group.ai\/sv\/wp-json\/wp\/v2\/pages\/15926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.coeo-group.ai\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.coeo-group.ai\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.coeo-group.ai\/sv\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.coeo-group.ai\/sv\/wp-json\/wp\/v2\/comments?post=15926"}],"version-history":[{"count":2,"href":"https:\/\/www.coeo-group.ai\/sv\/wp-json\/wp\/v2\/pages\/15926\/revisions"}],"predecessor-version":[{"id":15931,"href":"https:\/\/www.coeo-group.ai\/sv\/wp-json\/wp\/v2\/pages\/15926\/revisions\/15931"}],"up":[{"embeddable":true,"href":"https:\/\/www.coeo-group.ai\/sv\/wp-json\/wp\/v2\/pages\/15907"}],"wp:attachment":[{"href":"https:\/\/www.coeo-group.ai\/sv\/wp-json\/wp\/v2\/media?parent=15926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}