{
  "name": "Shell style",
  "slug": "shell",
  "number": 6,
  "words": {
    "en": "Energy, Forecourt, Confident",
    "ko": "에너지, 포코트, 당당함"
  },
  "source": [
    "https://www.shell.com",
    "https://www.shell.us"
  ],
  "touchpoints": "forecourts and reports",
  "sample": {
    "url": "https://styles.vizney.com/shell/",
    "data": "bridge.csv",
    "topic": "Mobility weekly of Vizney Energy, a fictional US fuel and charging business (24 mobility sites on three interstate corridors, I-5, I-10 and I-95, named by exit), read the way Shell shows numbers on its forecourts and in its results: posted prices, margin and volume against plan, a gross margin bridge, the sites behind plan, busy hours, tanks and charge points, a corridor operations map that zooms into one site's 2-mile street, and a results table by site"
  },
  "devices": {
    "primeSign": "KPI pillar, from the forecourt price sign: a white cabinet with a 1px #d9d9d9 edge; a Shell-yellow head (#fbce07) with the label in 12px/700 caps and the main grade against the street as the one big number; a 5px red bar (#dd1d21, the canopy's red band); a dark price zone (#262626) with one row per grade (Regular, Mid-grade, Premium, Diesel, EV fast charge): grade in 12px caps #bdbdbd, change against last week top right, the posted price 42px/500 white with the tenth of a cent as a 0.42em superscript and the unit (/gal, /kWh) small, the margin a gallon at the right; a gray base band (#595959, the 12-inch Shell Gray band of pillars and buildings) with the site count and the posting time. Rows can be hovered and stepped with the arrow keys. From 1199px down it turns into a horizontal price board under the headline",
    "priceMarkers": "Figure 1, from the results deck's 'key price markers': three small multiples side by side, each with a red chart title (14px/700 #dd1d21), a unit line, a key, the subject line in red and its comparison in gray (solid for a second measure, dashed for plan), the current week as a #f2f2f2 column holding the end labels, and two compare boxes (#f7f7f7 with a 1.5px yellow rule) under each plot: this week and the change, with the change against plan in status color",
    "bridge": "Figure 2, from the results deck's earnings bridges: plan to actual in five lever steps (fuel volume, margin per gallon, premium mix, convenience, charging). Totals gray #818181 cut at a white double break near the axis floor, increases #008443, decreases #e03a35, dotted connectors at the running total, values on the bars in ink with negatives in parentheses, rounded to $0.1K so the steps add up"
  },
  "parts": {
    "canopy": "Header: a white band with 'Vizney Energy |' in red and the period in ink (the deck's footer line 'Shell plc |'), the report name 28px/700; then a 6px #dd1d21 bar across the page (the canopy's red band); then the corridor menu like shell.com's navigation (15px, the selected item 700 with a 4px #ffc800 underline)",
    "slideHead": "Section and card heads like a results slide: a small kicker (14px #595959, the section number in red), the heading in ink, then a 2px #fbce07 rule across the width. In cards: figure label → finding title → yellow rule → red chart title with the unit → key → plot → gray note band",
    "compareBoxes": "KPIs as the deck's compare boxes: #f7f7f7, a 2px yellow bottom rule, the measure with its unit in parentheses ('Fuel margin (¢/gal)'), the figure 38px/500, the change against plan or target with ▲▼ in status color, then '(Wk 43: x)' like the annual report's '(2024: x)'",
    "exceptionList": "Figures 3, 5 and 6: ruled rows (1px #d9d9d9) under a header line in ink; name, a bar from a zero line (ink) with a dashed threshold (#bfbfbf), the value at the bar end; only the rows past the threshold are red, the rest #a3a3a3",
    "corridorMap": "Figure 7, the corridor operations map: one schematic interstate per corridor in its own #f7f7f7 band (a white 6px road over an 11px #cfcfcf casing; the bends are invented, the distance along the road follows the exit numbers, which are mile markers, with a small mark every 100 mi). Each site is a small price-sign pin on a stem from the road, alternately above and below it: a #ffc800 head with the exit number and a body with the change against plan, #262626, or #c4161c when more than 3% below plan. Problems hang beside the pin as red #c4161c badges with white glyphs (a drop for a tank under 2 days with no delivery booked, a bolt for a charge point under 97%), and a site with two problems at once gets a pale red halo with a #e03a35 ring on the road. The corridor name, its site count and its change against plan sit at the left; the title names the sites with two problems. A click or the arrow keys select a site (a 3px #ffc800 outline); the most urgent site (most problems, then the largest shortfall) is selected first. Beside the map (below it under 1200px) the zoom: the selected site's 2-mile radius, the radius that defines the street price, drawn as a schematic interchange (highway, cross road, four ramps, a dashed circle, a 1-mile scale bar); our posted main-grade price on a pin and each competitor as a dot with a price tag (letter and distance; a red head when it opened or cut in week 41). Under it 'What to do', one line per problem (review the posted price, book a delivery, send a technician) with the numbers behind it, then four figures: volume against plan, margin, against the street, uptime. Pins, tags and place names take free spots and never cover a dot or each other; a place name with no room is dropped. Under 600px of figure width the overview turns into a route list in exit order (station, exit, badges, a bar from the plan line, the value) and a row selects",
    "resultsTable": "Table 1, from the annual report's tables, collapsed: only the corridor rows and the total show; a corridor row opens its sites (furthest below plan first) and 'Show all sites' opens them all; a single-corridor view starts open. Group heads with the unit on a second line, the current week columns shaded #f2f2f2, corridor rows in bold, a total row over a 1.5px ink rule, negatives in parentheses and status red when they are shortfalls, '—' for sites without chargers, a small gray bar beside each site's volume. Thousands are rounded so sites add up to corridors and corridors to the total. The table drops the week 43 columns under 900px and keeps volume, against plan, margin and uptime under 600px",
    "footnotes": "Method notes like the annual report's footnotes: '[A]' in red marks the defined measure (Fuel margin [A]) and its note"
  },
  "colors": {
    "canvas": { "hex": "#ffffff", "role": "page background (shell.com body is white)" },
    "panel": { "hex": "#ffffff", "role": "figure panels and the price sign cabinet" },
    "plot": { "hex": "#ffffff", "role": "chart background: the panel itself" },
    "soft": { "hex": "#f7f7f7", "role": "compare boxes (KPIs, Figure 1 boxes, the build steps) and the footer, as on the results deck" },
    "band": { "hex": "#f2f2f2", "role": "the current week: the column in Figure 1, the week 44 columns in Table 1, the note band under each figure, hovered rows" },
    "line": { "hex": "#e4e4e4", "role": "panel edges and chart gridlines" },
    "hair": { "hex": "#e4e4e4", "role": "gridlines in BI tools (same as line)" },
    "rule": { "hex": "#d9d9d9", "role": "row rules in lists and tables, the sign's edge, the tooltip border, toggles" },
    "edge": { "hex": "#bfbfbf", "role": "dashed thresholds (−3% of plan, 2 days of supply, 97% uptime)" },
    "ink": { "hex": "#404040", "role": "titles, key figures, table values (10.4:1)" },
    "body": { "hex": "#4a4a4a", "role": "running text; the dark button with yellow text (shell.com)" },
    "text-2": { "hex": "#595959", "role": "kickers, subtitles, notes (7.0:1)" },
    "muted": { "hex": "#707070", "role": "figure labels, axis ticks, units, '(Wk 43: x)' (4.95:1)" },
    "yellow": { "hex": "#fbce07", "role": "Shell yellow: the 2px rule under every heading, the compare boxes' bottom rule, the head of the price sign, the footer rule. Never data" },
    "yellow-ui": { "hex": "#ffc800", "role": "buttons and the selected menu underline (shell.com's button yellow)" },
    "yellow-hover": { "hex": "#e6b400", "role": "button hover" },
    "red": { "hex": "#dd1d21", "role": "Shell red: the canopy bar under the header, chart titles, section numbers, the company name, footnote markers. Never data" },
    "zone": { "hex": "#262626", "role": "the price zone of the sign" },
    "zone-2": { "hex": "#3a3a3a", "role": "rules between grades in the price zone; the hovered grade" },
    "zone-muted": { "hex": "#bdbdbd", "role": "grade names and small figures in the price zone (8.1:1 on #262626)" },
    "gray-band": { "hex": "#595959", "role": "the sign's base band with white text (7.0:1)" }
  },
  "data": {
    "surface": "#ffffff",
    "categorical": [
      { "name": "red · the subject", "hex": "#e03a35", "text": "#c4161c" },
      { "name": "blue · a second series", "hex": "#2f6aae", "text": "#2f6aae" },
      { "name": "ochre · a third series, only with direct labels", "hex": "#b08500", "text": "#8a6800" }
    ],
    "other": "#a3a3a3",
    "comparison": "#7b7b7b",
    "marks": {
      "grid": "#e4e4e4",
      "baseline": "#9a9a9a",
      "zero": "#404040",
      "threshold": "#bfbfbf",
      "current": "#f2f2f2",
      "total": "#818181",
      "up": "#008443",
      "down": "#e03a35",
      "hover": "#f2f2f2"
    },
    "sequential": ["#96b6e4", "#709ad6", "#4c7ec3", "#3063a9", "#1e4a85"],
    "diverging": ["#b32322", "#dd574e", "#ea988f", "#e4e4e4", "#93b3e1", "#5a87c8", "#2d5da0"],
    "status": {
      "good": "#007a3d",
      "bad": "#c4161c",
      "neutral": "#7b7b7b"
    },
    "validation": {
      "tool": "dataviz validate_palette.js (OKLab), mode light, on the panel #ffffff and the compare boxes #f7f7f7; 2026-11-04",
      "categorical": "Shell's results charts put the subject in red and everything else in gray, so the subject is red #e03a35 (one step lighter than the brand red #dd1d21, which stays on titles and the canopy bar), with Shell's blue and yellow as data steps #2f6aae and #b08500 for the rare second and third series. Adjacent order red → blue → ochre → gray: lightness inside 0.43–0.77, chroma ≥ 0.10, CVD ΔE 18.5 (protan, red↔blue), normal vision 28.1, contrast ≥ 3:1 on #ffffff and #f7f7f7; with Other #a3a3a3 last the worst adjacent pair is ochre↔gray at CVD 14.7, normal 15.1. All pairs: red↔ochre is 4.0 (deutan), so three series only on lines and bars with direct labels, and red never sits next to ochre; scatter plots and maps use red and blue only",
      "other": "#a3a3a3 is neutral by design (lightness band and chroma floor do not apply). At 2.52:1 it always has a second cue: value labels (Figures 3, 5, 6), the grid and tooltips (Figure 4), and a table view",
      "comparison": "#7b7b7b against red: CVD 11.1 (protan), normal 20.4, 4.23:1 on white; solid for a second measure (laid-in cost), dashed (5 4) for plan, always labeled at its end",
      "bridge": "totals #818181 (3.90:1), increases #008443, decreases #e03a35: increase↔decrease CVD 7.6 (protan), inside the 6–8 floor band, so the bridge always carries its second encoding: direction from the running total, parentheses on negatives and a value on every bar",
      "sequential": "one blue hue (#96b6e4 → #1e4a85): monotone lightness, every gap ≥ 0.06, light end 2.08:1, hue spread 1°. Blue, not red, so magnitude never reads as bad",
      "diverging": "arms #ea988f→#b32322 and #93b3e1→#2d5da0 pass the ordinal checks (light ends 2.24 and 2.15:1, hue spread ≤ 1°); poles CVD 19.6 (protan), normal 27.4; the midpoint #e4e4e4 is the grid gray",
      "status": "good #007a3d (5.45:1 on white, 5.09:1 on #f7f7f7) and bad #c4161c (6.04 and 5.63:1) as text; good↔bad is 5.1 under deuteranopia, so status is never color alone: ▲▼, the sign or parentheses and the words ('below plan') always come with it",
      "text": "label steps: red #c4161c 6.04:1 (5.39:1 on the #f2f2f2 column), ochre #8a6800 5.17:1; ink #404040 10.4:1, body #4a4a4a, secondary #595959 7.0:1, muted #707070 4.95:1 on white; white on #262626 15.1:1, #bdbdbd on #262626 8.1:1, ink on #fbce07 6.9:1"
    }
  },
  "code": {
    "background": "#ffffff",
    "comment": "#707070",
    "string": "#007a3d",
    "number": "#9c5b00",
    "keyword": "#2f6aae",
    "function": "#c4161c",
    "property": "#404040",
    "line-number": "#9a9a9a",
    "highlight": "#fff4c2",
    "caret": "#dd1d21",
    "note": "a white code pane with the screen's own text steps (blue keyword, green string, brown number, red function), all ≥ 4.5:1 on white; the highlighted line is a pale Shell yellow"
  },
  "typography": {
    "sans": {
      "en": "Jost",
      "ko": "Pretendard",
      "weights": [300, 400, 500, 600, 700, 800],
      "role": "everything. Jost (a geometric sans after Futura) stands in for the Shell typeface, which is not open; its round O and single-storey figures read close to Shell's forecourt numerals, and its tabular figures keep columns aligned. shell.co.kr loads no Hangul web font (the Shell face falls back to Arial and system fonts), so Korean uses Pretendard"
    },
    "mono": {
      "family": "Roboto Mono",
      "weights": [400, 500],
      "role": "code and file names in How it's built only; numbers on the screen stay in Jost with tabular figures"
    },
    "links": {
      "google": "https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap",
      "pretendard": "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
    },
    "scale": {
      "reportName": { "size": "28px", "weight": 700, "lineHeight": 1.15, "family": "sans" },
      "headline": { "size": "clamp(24px, 2.05vw, 29px)", "weight": 600, "lineHeight": 1.26, "family": "sans", "note": "the finding in one sentence; the figures in it at 700, in ink (red stays for titles and data)" },
      "lede": { "size": "15.5px", "weight": 400, "lineHeight": 1.5, "family": "sans" },
      "signPrice": { "size": "42px", "weight": 500, "lineHeight": 1, "family": "sans", "note": "posted price with the tenth of a cent as a 0.42em superscript, the unit 12px beside it; 38px under 1360px, 32px on the horizontal board" },
      "kpi": { "size": "38px", "weight": 500, "lineHeight": 1, "letterSpacing": "-0.015em", "family": "sans", "note": "the figure only; the unit lives in the measure name in parentheses" },
      "sectionHead": { "size": "24px", "weight": 700, "lineHeight": 1.25, "family": "sans" },
      "cardTitle": { "size": "18.5px", "weight": 600, "lineHeight": 1.32, "family": "sans" },
      "chartTitle": { "size": "14px", "weight": 700, "color": "red", "family": "sans", "note": "the results deck's red chart titles; the unit follows in 13px #707070" },
      "figureLabel": { "size": "12px", "weight": 600, "transform": "uppercase", "letterSpacing": "0.07em", "color": "muted", "family": "sans" },
      "label": { "size": "12.5px", "weight": 500, "family": "sans" },
      "note": { "size": "12px", "weight": 400, "lineHeight": "17px", "family": "sans" },
      "body": { "size": "14px", "weight": 400, "lineHeight": 1.5, "family": "sans" }
    }
  },
  "radius": {
    "card": "0",
    "sign": "0",
    "box": "0",
    "button": "8px",
    "toggle": "8px",
    "tooltip": "4px",
    "bar": "0"
  },
  "spacing": {
    "page": "32px",
    "gap": "16px",
    "section": "44px",
    "card": "16px 20px 0",
    "note": "8px 20px 9px",
    "kpi": "12px 14px 11px",
    "signRow": "9px 16px 10px",
    "footer": "22px 32px 34px"
  },
  "layout": {
    "maxWidth": "1400px",
    "columns": 12,
    "header": "80px white canopy band + 6px red bar + 52px corridor menu",
    "maxViewsPerScreen": 7,
    "breakpoints": {
      "wide": 1360,
      "board": 1200,
      "mid": 1024,
      "narrow": 900,
      "phone": 640
    },
    "rows": [
      "white canopy band: 'Vizney Energy |' in red with the period, the report name; EN/KO, Export PDF (dark), Copy as Markdown (yellow)",
      "6px red bar across the page",
      "corridor menu 52px: All corridors (24) · I-5 (8) · I-10 (8) · I-95 (8), the selected one bold with a 4px yellow underline; 'Against plan and week 43' at the right",
      "from 1200px: the price sign as a pillar on the left (304px, 272px under 1360px); on the right the kicker, the finding headline, the lede, a yellow rule, five compare-box KPIs and Figure 1 (three price markers). Both columns end on one line: the sign's grade rows and Figure 1's plots take the extra height",
      "under 1200px: kicker, headline, lede, yellow rule, then the sign as a horizontal price board (yellow head | five grades, base band), the KPIs and Figure 1 across",
      "02 Against plan: Figure 2 the gross margin bridge (5/12) · Figure 3 sites against plan (7/12)",
      "03 Forecourt operations: Figure 4 busy hours · Figure 5 tanks · Figure 6 charge points, a row of three (Figure 4 across above the other two under 1200px)",
      "04 Sites: Figure 7 the corridor operations map (three schematic corridors with site pins and alerts, the selected site zoomed to its 2-mile street beside it with what to do), then Table 1 results by site, collapsed to corridor totals",
      "05 How it's built: intro, three compare-box steps, the window (package · Figure 2 and checks · code)",
      "06 Method and sources: footnotes in two columns, '[A]' in red",
      "#f7f7f7 footer over a 2px yellow rule"
    ]
  },
  "motion": {
    "ease": "cubic-bezier(.4,0,.2,1)",
    "button": "0.15s",
    "draw": "0.7s",
    "grow": "0.45s",
    "fade": "0.3s",
    "typing": "55ms per line, 380ms between steps"
  },
  "tools": {
    "tableau": {
      "palettes": "shell.tps",
      "fonts": "Tableau Book for text; Jost only if it is installed on every viewing machine and the server",
      "notes": "Bridges as Gantt bars on RUNNING_SUM(SUM([usd])) with size −SUM([usd]); fix the axis start at the break and say so in the caption. Number format #,##0.0;(#,##0.0). Shade the current week column with a reference band #f2f2f2. Chart titles in red #dd1d21 as subtitles under a finding title"
    },
    "powerbi": {
      "theme": "powerbi-theme.json",
      "fontFamily": "Jost",
      "fallback": "Segoe UI",
      "visual": {
        "background": "panel",
        "plot": "plot",
        "border": "line",
        "radius": 0
      },
      "notes": "Waterfall visual with sentiment colors increase #008443, decrease #e03a35, total #818181; data labels in thousands with one decimal, negatives in parentheses"
    },
    "web": {
      "css": "tokens.css"
    }
  },
  "measured": {
    "date": "2026-11-04, Chrome (built-in browser), shell.com and shell.us signed out, shell.co.kr for the Korean face",
    "web": "shell.com: white body; text in dark grays (#404040 for headings, #595959 for secondary); primary buttons 48px high, 8px radius, 14px bold, yellow #ffc800 with dark text or dark #4a4a4a with yellow text; navigation items 14px with a 4px yellow underline under the current item; small radii (4px) on tooltips and inputs; no card shadows. shell.co.kr declares the Shell face and falls back to Arial and system fonts (no Hangul web font)",
    "results": "Third quarter 2026 results presentation (29 October 2026): a kicker above each slide title, a 2pt yellow rule under it, red bold chart titles with the unit, key figures in red, compare boxes #f7f7f7 with a yellow bottom rule ('Q3 2026 vs Q2 2026'), the current period shaded #f2f2f2, earnings bridges with gray totals, green increases, red decreases and negatives in parentheses, tables with the current column shaded, a footer line 'Shell plc |' in red",
    "annualReport": "Annual Report 2025: '[A]' footnote markers on non-GAAP measures, '(2024: x)' after a figure, units in parentheses after the measure, the current-year column shaded, a red standfirst",
    "forecourt": "Retail visual identity drawings (RVIe, MVI): a white prime sign with the pecten head and an LED price zone of grades, the canopy's red band, Shell White surfaces over a 12-inch Shell Gray base band; Fuel Rewards copy uses '¢/gal' and 'main grade'. Photos and drawings were looked at only; no logo, pecten, typeface, photo or real price is used"
  }
}