{ "name": "Singapore Airlines style", "slug": "singapore-airlines", "number": 5, "words": { "en": "Premium, Boarding Pass, Courteous", "ko": "프리미엄, 탑승권, 단아함" }, "source": [ "https://www.singaporeair.com" ], "touchpoints": "the annual report, monthly operating statistics, seat maps and the app's boarding pass", "sample": { "url": "https://styles.vizney.com/singapore-airlines/", "data": "monthly.csv", "topic": "Monthly operating statistics of Vizney Air, a fictional long-haul airline with one hub at Chicago O'Hare (ORD): 14 routes in five route regions, one 247-seat layout (Business J 28 · Premium Economy S 21 · Economy Y 198), October 2026 of FY2026/27, against plan and October 2025. US dollars; flights, passengers and seat-km count both directions, on-time departures count Chicago only" }, "devices": { "boardingPass": "KPI row: a white pass with a 1px #c8d6f1 frame and an 8px radius. A navy #00266b band (MONTHLY OPERATING STATISTICS · FY2026/27 · MONTH 7 OF 12, 11px/600 caps, 0.14em) → a FROM ORD → TO line (airport codes in the display face 32px/600 navy, the destinations as mono codes) with FLIGHTS and SEATS FLOWN at the right → five fields in a subgrid (caps label 11px/600 #666 → value 34px/600 with a 15px unit → vs plan → vs last year) → where the barcode sits, passengers by day against the daily average (bars rise on busier days in #868ba0 and drop on quieter ones in #c4c9d4 from a 1px #222222 average line, the busiest day teal #0096ae, weekday letters below with weekends bold, dates under Mondays). The FROM · TO line is one grid: the labels share a line, ORD and the destination share a baseline. The navy stub on the right holds the load factor at 52px (the seat number's place), two chips (vs plan, vs last year; success #03760b on #cdf0cf, error #dc0202 on #fff1f0), the year by month (actual #1aa5bd against a dashed plan #c3cbdb, filled dots for months above plan, hollow below) and the breakeven load factor with its margin as a chip at the bottom", "seatMap": "Figure 1, cabin load: the 247-seat layout laid on its side (Business 1-2-1 rows 11–18 without 13, Premium Economy 2-3-2 rows 21–23, Economy 3-3-3 rows 31–52), cabin bands in the cabin colours with code and seat count ('J · 28'), row numbers above, seat letters at the left (A B C · D E G · H J K), the forward zone as a light green band behind the first five Economy rows with its own load factor. An average flight's sold seats are filled window and aisle first: the cabin the title names in teal, the others gray #afafaf, empty seats white with a #a6b4cd outline. Below, a strip of three cabins (cabin-colour top rule → name and code → load factor → x of n seats sold · y empty → vs plan). No fuselage outline, windows or seat icons. Under 420px the map stacks: J and S above, Y below", "operatingStatistics": "Headline and Table 1, from the monthly operating statistics release and the annual report's OPERATING STATISTICS table: the lead sentence states the result ('Traffic rose 10.9% year-on-year on 9.7% more capacity, and the load factor came in at 86.5%, 0.8 pts above plan.'), then a navy head band with white caps and units in parentheses ((thousand), (million), (%), (pts), (¢/pkm)), route-region group rows on #e5e9f0 with subtotals, the Systemwide row bold under a 2px navy rule, changes in a separate sign column ('+ 2.3', '− 3.2'), 'n.m.' for a route with no last year, bad values (below plan, below the 85% on-time target) in #dc0202 with their sign" }, "parts": { "bookingWidget": "The screen frame comes from singaporeair.com's booking widget: the route-region filter is the navy tab bar (12px/600 caps, 0.125em), the chosen tab white with only its top-left corner rounded 16px, and the white panel below it with 16px bottom corners holds the headline, the lead and the boarding pass. A 1px orange separator (8px tall) sits between header items", "hairline": "Orange #ff9f00 is a hairline, never data: a 3px bar left of the headline and every section title (the site's .left-border titles) and the 3px underline of the active code tab", "routeBoard": "Figure 3, routes against breakeven: one row per route, lowest margin first; city name and mono airport code, a bar from the breakeven line (the zero, a 1px #222222 rule) in pts on a fixed −4 to +14 scale, red #dc0202 with the value on its left below breakeven, gray #afafaf above; PLF and BLF columns at the right. Rows stretch (25–44px) so the card ends level with Figure 4", "hubBank": "Figure 4, departures from Chicago by hour: one bar per scheduled hour, on time gray #afafaf and late red #dc0202 on top with a 2px gap, the evening bank 17:00–20:59 as a #edf4ff band labelled with its own on-time rate, 'flights' above the axis, hours 00–21 with the bank hours bold", "routeMap": "Figure 2, routes from Chicago: great-circle lines on a Natural Earth projection centred on the Americas (cut at 99°E), land in lightBlue #e5e9f0 only (no sea colour, borders or place names). Line width is departures a week (0.6 + 0.24 px per weekly departure), teal #0096ae for routes with more departures than last October (the title names them, labels give '5→7/wk' or 'new'), gray #afafaf for the same schedule, other route regions in #dfe3ea when a tab is chosen. The hub is a navy dot with a white ring; labels are placed so they never overlap, and codes that do not fit are grouped by region on one line. The map area takes the extra height so the card ends level with the seat map", "annualReportChart": "The stub's year by month (drawn full size in the build section) and every axis use the annual report's chart grammar: the unit above the axis ('%', 'flights'), no gridlines, a #a6b4cd base line and ticks, the latest period bold, uppercase gold figure labels (FIGURE 2 · LOAD FACTOR BY MONTH), notes numbered like the release ('Note 1:')" }, "colors": { "canvas": { "hex": "#fafafa", "role": "page background (singaporeair.com extraLightGrey, --color-background-page)" }, "paper": { "hex": "#ffffff", "role": "cards, the widget panel, the boarding pass, the table" }, "plot": { "hex": "#ffffff", "role": "chart surface" }, "navy": { "hex": "#00266b", "role": "siaBlue: headings, the tab bar, pass band and stub, table head, primary buttons, focus" }, "navy-700": { "hex": "#001a4f", "role": "button hover and the stub's top band" }, "tint": { "hex": "#e5e9f0", "role": "lightBlue: table group rows, card borders and rules, land on the route map" }, "tint-2": { "hex": "#edf4ff", "role": "brightLightBlue: hover rows, the evening-bank band, highlighted code lines" }, "grey-blue": { "hex": "#a6b4cd", "role": "greyBlue: axis lines and ticks, empty seat outlines" }, "rule": { "hex": "#e5e9f0", "role": "card borders and row rules" }, "edge": { "hex": "#c8d6f1", "role": "stroke-default-line: the boarding pass and tooltip frames, outlined controls" }, "hair": { "hex": "#dddddd", "role": "lightGrey: neutral fills, the diverging midpoint" }, "orange": { "hex": "#ff9f00", "role": "siaOrange hairline: 3px title bars, separators, the active code tab; never data, never text on white" }, "gold": { "hex": "#946e31", "role": "siaGold: figure labels and step numbers, the bronze series' text step (4.63:1)" }, "ink": { "hex": "#222222", "role": "nightBlack: body text, values, the breakeven rule" }, "body": { "hex": "#222222", "role": "body text" }, "text-2": { "hex": "#666666", "role": "extraDarkGrey: secondary text, axis labels, notes (5.74:1)" }, "muted": { "hex": "#666666", "role": "muted labels" }, "faint": { "hex": "#999999", "role": "mediumGrey: line numbers only, never text that carries data" }, "link": { "hex": "#0045c5", "role": "linkBlue: links" }, "cab-j": { "hex": "#12447d", "role": "Business cabin band (cabin-business-standard); a frame colour, not data" }, "cab-s": { "hex": "#4f635f", "role": "Premium Economy cabin band (cabin-premiumEconomy-standard)" }, "cab-y": { "hex": "#084935", "role": "Economy cabin band and the forward-zone label (cabin-economy-standard)" }, "fz": { "hex": "#e2eee8", "role": "forward zone band behind the first five Economy rows" }, "good-bg": { "hex": "#cdf0cf", "role": "success chip background (text #03760b, 4.71:1)" }, "bad-bg": { "hex": "#fff1f0", "role": "error chip background (text #dc0202, 4.71:1)" }, "warn": { "hex": "#ba5400", "role": "darkOrange: numbers in code (4.82:1)" }, "warn-bg": { "hex": "#fff5e5", "role": "lightOrange: warning backgrounds" } }, "data": { "surface": "#ffffff", "categorical": [ { "name": "teal · the subject", "hex": "#0096ae", "text": "#00788c" }, { "name": "deep blue · a second series", "hex": "#005584", "text": "#005584" }, { "name": "bronze · a third series", "hex": "#c3892a", "text": "#946e31" } ], "other": "#afafaf", "comparison": "#868ba0", "marks": { "last-year": "#c4c9d4", "baseline": "#a6b4cd", "breakeven": "#222222", "barcode": "#868ba0", "late": "#dc0202", "empty-seat": "#a6b4cd", "forward-zone": "#e2eee8", "bank": "#edf4ff", "hover": "#edf4ff", "average": "#222222", "below-average": "#c4c9d4", "land": "#e5e9f0", "other-region": "#dfe3ea", "stub-actual": "#1aa5bd", "stub-plan": "#c3cbdb" }, "sequential": [ "#74bfcc", "#34a3b8", "#00869e", "#00677b", "#004a59" ], "diverging": [ "#8a5a14", "#b57e27", "#d9ab62", "#dddddd", "#74bfcc", "#1f9bb2", "#006a7f" ], "status": { "good": "#03760b", "bad": "#dc0202", "neutral": "#868ba0" }, "validation": { "tool": "dataviz validate_palette.js (OKLab), mode light, on the card #ffffff", "categorical": "From the annual report's charts: bars in teal #0096ae, a second series in deep blue #005584 (also its table heads), bronze #c3892a as the third. All pairs pass: lightness inside 0.43–0.77, chroma ≥ 0.1, CVD ΔE 17.3 (bronze–teal, protan), normal vision 19.5 (deep blue–teal), contrast 3.52, 7.98 and 3.03:1. The site's navy #00266b and orange #ff9f00 stay on frames and hairlines", "cabins": "The cabin colours #12447d · #4f635f · #084935 fail as data (lightness under 0.43, chroma under 0.1, normal-vision 12.9), so they only band the seat map, always with the code and seat count in white (9.77, 6.40 and 10.42:1)", "other": "#afafaf (darkGrey) is neutral by design: the lightness band and chroma floor do not apply; at 2.19:1 it always has a second cue (value labels, the 2px gap between stacked segments, a table)", "comparison": "#868ba0 (the annual report's cool gray) for plan: 3.38:1, always dashed (6 4) and labelled at its end. Last year #c4c9d4 sits behind both, solid and labelled at its end in #666666", "sequential": "one teal hue around the subject (#74bfcc → #004a59): monotone lightness, every gap ≥ 0.06, light end 2.09:1, hue spread 8°", "diverging": "bronze arm #d9ab62 → #8a5a14 (light end 2.11:1, hue spread 7°) and teal arm #74bfcc → #006a7f (2.09:1, 8°) pass the ordinal checks; poles CVD 14.4 (protan), normal 18.3; the midpoint is lightGrey #dddddd", "status": "good #03760b (5.83:1) and bad #dc0202 (5.18:1) from the site's alerts; between them CVD 8.9 (protan), normal 33.9. Status is never colour alone: a change keeps its arrow, sign and comparison words", "text": "label steps: teal #00788c 5.17:1, bronze #946e31 4.63:1; ink #222222 15.9:1, secondary #666666 5.74:1 on white; the orange hairline is 2.06:1 on white, so it never carries text", "stub": "On the navy stub the colours were checked against the dark surface (validate_palette.js --mode dark --surface #00266b): actual #1aa5bd sits inside the dark lightness band (0.48–0.67) with chroma ≥ 0.1 and 4.81:1 on navy; the plan #c3cbdb is a neutral reference (band and chroma do not apply); between them CVD ΔE 14.3 (protan), normal vision 20.2", "routeMap": "Teal #0096ae and gray #afafaf on land #e5e9f0: 2.89 and 1.80:1, so every line also carries width, a dot and, for the subject routes, a label; land is 1.22:1 on white, a quiet base", "plan": "Each figure has one subject: Figure 1 the cabin the title names (teal) against gray cabins, Figure 2 the routes with more departures than last year (teal) against gray routes, the stub's year the actual load factor against a dashed plan, Figure 3 only the routes below breakeven in red, Figure 4 only the late departures in red, the pass barcode only the busiest day in teal" } }, "code": { "background": "#ffffff", "comment": "#666666", "string": "#03760b", "number": "#ba5400", "keyword": "#00266b", "function": "#946e31", "property": "#222222", "line-number": "#999999", "highlight": "#edf4ff", "caret": "#00266b", "note": "a white code pane; the screen's own text steps (navy keyword, green string, orange number, gold function), all at 4.5:1 or more on white" }, "typography": { "sans": { "en": "Figtree", "ko": "Pretendard", "weights": [ 400, 500, 600, 700 ], "role": "body, labels, values in tables and charts. Figtree stands in for Proxima Nova (the site's --font-primary): set in the same string at 20px Proxima runs 437.5px with a 0.714 x/cap ratio, Figtree 447.7px with 0.714. singaporeair.com/ko_KR loads no Hangul web font, so Korean uses Pretendard for everything" }, "display": { "en": "Source Sans 3", "ko": "Pretendard", "weights": [ 400, 600, 700 ], "role": "headings, airport codes and big values. Stands in for the site's own heading face (a humanist sans with a binocular g): in the same 24px string it runs 424.7px, Source Sans 3 439.1px, also with a binocular g. Headings stay at 400 like the site's h2; values at 600" }, "mono": { "family": "Source Code Pro", "weights": [ 400, 500 ], "role": "airport and route codes, file names and code; Hangul in code comments falls back to Pretendard" }, "links": { "google": "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Source+Sans+3:wght@400;600;700&family=Source+Code+Pro: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": { "headline": { "size": "clamp(23px, 2.05vw, 29px)", "weight": 400, "lineHeight": 1.3, "family": "display", "note": "navy, the numbers in 600; a 3px orange bar 15px to the left" }, "reportName": { "size": "30px", "weight": 400, "lineHeight": 1.15, "family": "display", "note": "navy under an 11px caps company eyebrow" }, "kpi": { "size": "34px", "weight": 600, "lineHeight": 1, "family": "display", "note": "unit at 15px #666 (K, M, %, ¢; 만 명, 억, 센트)" }, "stub": { "size": "52px", "weight": 600, "lineHeight": 1, "family": "display", "note": "the load factor on the navy stub, white" }, "airportCode": { "size": "32px", "weight": 600, "lineHeight": 1.05, "family": "display" }, "fieldLabel": { "size": "11px", "weight": 600, "transform": "uppercase", "letterSpacing": "0.12em", "family": "sans" }, "band": { "size": "11px", "weight": 600, "transform": "uppercase", "letterSpacing": "0.14em", "family": "sans" }, "tab": { "size": "12px", "weight": 600, "transform": "uppercase", "letterSpacing": "0.125em", "family": "sans", "note": "the chosen tab 700 navy on white" }, "sectionTitle": { "size": "24px", "weight": 400, "lineHeight": 1.2, "family": "display", "note": "navy with a 3px orange bar, like the site's h2" }, "figureLabel": { "size": "11px", "weight": 700, "transform": "uppercase", "letterSpacing": "0.14em", "family": "sans", "note": "gold #946e31, like the annual report's chart titles" }, "cardTitle": { "size": "20px", "weight": 600, "lineHeight": 1.3, "family": "display" }, "lede": { "size": "15px", "weight": 400, "lineHeight": 1.55, "family": "sans" }, "body": { "size": "14px", "weight": 400, "lineHeight": 1.5, "family": "sans" }, "table": { "size": "13.5px", "weight": 400, "family": "sans", "note": "tabular figures; head 11px/600 caps white on navy with units in parentheses" }, "note": { "size": "12px", "weight": 400, "lineHeight": 1.5, "family": "sans" } } }, "radius": { "card": "4px", "pass": "8px", "widget": "0 0 16px 16px", "tab": "16px 0 0 0", "button": "4px", "pill": "40px", "chip": "4px", "tooltip": "4px", "bar": "0" }, "spacing": { "page": "32px", "gap": "16px", "section": "44px", "card": "18px 22px 16px", "widget": "24px 28px 22px", "field": "12px 16px 14px", "footer": "24px 32px 36px" }, "layout": { "maxWidth": "1400px", "columns": 12, "header": "84px white header + 56px navy tab bar, then the white widget panel joined to the chosen tab", "maxViewsPerScreen": 7, "breakpoints": { "wide": 1360, "mid": 1024, "narrow": 900, "phone": 640 }, "rows": [ "white header: VIZNEY AIR caps eyebrow and Operating Statistics (display 30px/400 navy); period, the EN/KO pill, Export PDF (outlined), Copy as Markdown (navy)", "navy tab bar: Systemwide 14 · The Americas 3 · Europe 4 · East Asia 3 · South West Pacific 2 · West Asia and Africa 2, with the month and comparison at the right behind an orange separator (from 1360px)", "the widget panel: headline with the orange bar, the lead paragraph, the boarding pass (main + 270px stub with the year by month), 'Note 1'", "Seats: cabins and the network: Figure 1 seat map · Figure 2 route map (its map area takes the extra height so both cards end on one line; under 1024px it keeps a 2.17:1 box)", "Routes and the Chicago hub: Figure 3 routes against breakeven · Figure 4 departures by hour (its plot takes the extra height)", "Operating statistics: Table 1, the full width", "How it's built: intro, three steps, the window (package 240px · figure and checks · code)", "Method and sources: notes in two columns, like the end of the monthly release", "footer: VIZNEY STYLES · 05 catalog line, sample note, notice, back link" ] }, "motion": { "ease": "cubic-bezier(.4,0,.2,1)", "button": "0.15s", "draw": "0.7s", "grow": "0.45s", "fade": "0.3s", "pop": "0.35s", "typing": "55ms per line, 380ms between steps" }, "tools": { "tableau": { "palettes": "singapore-airlines.tps", "fonts": "Tableau Book for text; Figtree only if it is installed on every viewing machine and the server" }, "powerbi": { "theme": "powerbi-theme.json", "fontFamily": "Figtree", "fallback": "Segoe UI", "visual": { "background": "paper", "plot": "plot", "border": "rule", "radius": 4 } }, "web": { "css": "tokens.css" } }, "measured": { "date": "2026-11-04, the built-in browser (getComputedStyle and :root custom properties); PDFs read with pdf.js", "home": "singaporeair.com/en_UK/sg/home and /ko_KR/kr/home: --brand-siaBlue #00266b, --brand-siaOrange #ff9f00 (= --color-background-hairline), --brand-siaGold #946e31; nightBlack #222, extraDarkGrey #666, darkGrey #afafaf, mediumGrey #999, lightGrey #ddd, extraLightGrey #fafafa; lightBlue #e5e9f0, brightLightBlue #edf4ff, greyBlue #a6b4cd, linkBlue #0045c5, stroke-default-line #c8d6f1; alerts success #03760b on #cdf0cf, error #df0000 on #fff1f0, warning #ba5400 on #fff5e5; spacing 0 2 4 6 8 12 16 20 24 32 40 48 64 80", "widget": "booking tabs: active tab white, radius 16px 0 0 0, 12px/700 caps 1.5px navy; inactive 12px/600 white; segmented pill radius 40px; SEARCH button #00266b, 12px/600 caps 1.44px, height 48, radius 4px; titles .left-border 3px #ff9f00 with 15px padding; h2 24px/400 navy", "cabins": "--cabin colours: business #053a76 · #12447d · #2a578a, premium economy #495b57 · #4f635f · #5b6f6b, economy #053c2a · #084935 · #12533f · #1c5d49 (the middle 'standard' steps are used)", "ir": "Monthly operating statistics: a lead sentence with the result (passenger traffic up x% year-on-year), tables of available seat-km (million), revenue passenger-km (million), passengers carried (thousand), passenger load factor (%), load factor by route region (East Asia · The Americas · Europe · South West Pacific · West Asia and Africa); changes as % and pts; 'Note 1:' footnotes", "annualReport": "OPERATING STATISTICS table: navy head band, light-blue group rows, units in parentheses, a separate sign column, 'n.m.', passenger breakeven load factor; charts: uppercase amber titles, the unit above the axis, no gridlines, the latest year bold, teal #0096ae bars, deep blue #005584 and bronze #c3892a second series, cool gray #868ba0", "map": "Land: Natural Earth 1:110m (public domain, github.com/nvkelso/natural-earth-vector), projected once with Natural Earth I centred on 81°W, Antarctica dropped, simplified to 0.35 of a unit in a 1000-wide sphere", "touchpoints": "Seat map PDFs: cabin headers 'Business Class - J / n seats', seat letters A B C – D E G – H J K, row 13 skipped, a light green FORWARD ZONE band; the app's digital boarding pass: a navy header band over a white body of labelled fields (photos viewed only, not used; the real seat counts are not reused)", "fonts": "--font-primary Proxima Nova (400/600/700, tabular figures); headings in the site's own humanist sans; ko_KR loads no Hangul web font" } }