{"$description":"Pencil Box: the Department of Information flavor of Roma, the Tomato Lab design system. Source of truth: the brand colors and type come from the Graphic Standards Manual V.1.0 (2021). GitHub Pages renders tokens/tokens.css and tokens/tokens.json from this file.","color":{"black":{"100":{"$type":"color","$value":"#232323","$description":"Brand: Department Black"},"90":{"$type":"color","$value":"#393939"},"75":{"$type":"color","$value":"#5A5A5A"},"65":{"$type":"color","$value":"#707070","$description":"Interface step: muted text on Manila. Not in the manual."},"50":{"$type":"color","$value":"#919191"},"40":{"$type":"color","$value":"#A7A7A7"},"30":{"$type":"color","$value":"#BDBDBD"},"20":{"$type":"color","$value":"#D3D3D3"},"10":{"$type":"color","$value":"#E9E9E9"}},"manila":{"100":{"$type":"color","$value":"#FBFBF4","$description":"Brand: Manila"}},"blue":{"100":{"$type":"color","$value":"#0000FF","$description":"Brand: Beaurocracy Blue"},"75":{"$type":"color","$value":"#4040FF"},"50":{"$type":"color","$value":"#8080FF"},"25":{"$type":"color","$value":"#BFBFFF"},"20":{"$type":"color","$value":"#CCCCFF"},"15":{"$type":"color","$value":"#D9D9FF"},"10":{"$type":"color","$value":"#E6E6FF"},"5":{"$type":"color","$value":"#F2F2FF"},"900":{"$type":"color","$value":"#1C1C4F","$description":"Interface step: Blue at 20% over Department Black, for dark-mode fills. Not in the manual."}},"red":{"100":{"$type":"color","$value":"#FF2576","$description":"Brand: Embargo Red"},"75":{"$type":"color","$value":"#FF5C98"},"50":{"$type":"color","$value":"#FF92BB"},"25":{"$type":"color","$value":"#FFC9DD"},"10":{"$type":"color","$value":"#FFE9F1"},"700":{"$type":"color","$value":"#C82561","$description":"Interface step: Embargo Red shaded 25% toward black, for red text on Manila. Not in the manual."},"900":{"$type":"color","$value":"#44232F","$description":"Interface step: Red at 15% over Department Black, for dark-mode fills. Not in the manual."}},"yellow":{"100":{"$type":"color","$value":"#FFD600","$description":"Brand: Safety Yellow"},"75":{"$type":"color","$value":"#FFE040"},"50":{"$type":"color","$value":"#FFEB80"},"25":{"$type":"color","$value":"#FFF5BF"},"10":{"$type":"color","$value":"#FFFBE6"}},"green":{"100":{"$type":"color","$value":"#98F2A8","$description":"Brand: Ledger Green"},"75":{"$type":"color","$value":"#B2F5BE"},"50":{"$type":"color","$value":"#CCF9D4"},"25":{"$type":"color","$value":"#E5FCE9"},"10":{"$type":"color","$value":"#F5FEF6"}}},"semantic":{"light":{"bg":{"page":{"$type":"color","$value":"{color.manila.100}","$description":"Default page background. Department Black unless a reader switches to light."},"surface":{"$type":"color","$value":"{color.manila.100}","$description":"Cards, fields and raised panels."},"muted":{"$type":"color","$value":"{color.black.10}","$description":"Quiet fills: hover states, wells, table stripes."},"inverse":{"$type":"color","$value":"{color.black.100}","$description":"High-contrast blocks that flip against the page."},"accent":{"$type":"color","$value":"{color.red.100}","$description":"Embargo Red fields. Rare, and text on it must be large and bold."},"accent-subtle":{"$type":"color","$value":"{color.red.10}","$description":"Tinted red backgrounds for highlights."},"emphasis":{"$type":"color","$value":"{color.blue.100}","$description":"Beaurocracy Blue fields, for emphasis in limited form."}},"text":{"primary":{"$type":"color","$value":"{color.black.100}","$description":"Body copy and headings."},"secondary":{"$type":"color","$value":"{color.black.75}","$description":"Supporting copy, metadata."},"muted":{"$type":"color","$value":"{color.black.65}","$description":"Placeholders, captions and de-emphasised hints."},"inverse":{"$type":"color","$value":"{color.manila.100}","$description":"Text on bg/inverse."},"accent":{"$type":"color","$value":"{color.red.700}","$description":"Red text that still passes AA."},"link":{"$type":"color","$value":"{color.blue.100}","$description":"Inline links (always underlined as well)."},"on-accent":{"$type":"color","$value":"{color.manila.100}","$description":"Text on Embargo Red (large bold only)."},"on-emphasis":{"$type":"color","$value":"{color.manila.100}","$description":"Text on Beaurocracy Blue."}},"border":{"subtle":{"$type":"color","$value":"{color.black.20}","$description":"Dividers and quiet outlines."},"default":{"$type":"color","$value":"{color.black.100}","$description":"Hairline rules, field and outline-button borders."},"focus":{"$type":"color","$value":"{color.blue.100}","$description":"Keyboard focus ring. Blue, so focus never reads as an error."},"accent":{"$type":"color","$value":"{color.red.100}","$description":"Annotation lines: grids, clear space, measurements."}},"action":{"primary":{"bg":{"$type":"color","$value":"{color.black.100}","$description":"Primary button fill."},"bg-hover":{"$type":"color","$value":"{color.black.90}","$description":"Primary hover."},"bg-pressed":{"$type":"color","$value":"{color.black.75}","$description":"Primary pressed."},"text":{"$type":"color","$value":"{color.manila.100}","$description":"Primary label."}},"secondary":{"bg":{"$type":"color","$value":"{color.black.10}","$description":"Secondary button fill."},"bg-hover":{"$type":"color","$value":"{color.black.20}","$description":"Secondary hover."},"bg-pressed":{"$type":"color","$value":"{color.black.30}","$description":"Secondary pressed."},"text":{"$type":"color","$value":"{color.black.100}","$description":"Secondary label."}},"disabled":{"bg":{"$type":"color","$value":"{color.black.10}","$description":"Disabled control fill."},"text":{"$type":"color","$value":"{color.black.40}","$description":"Disabled label."}}},"feedback":{"danger":{"bg":{"$type":"color","$value":"{color.red.10}","$description":"Error backgrounds."},"fg":{"$type":"color","$value":"{color.red.700}","$description":"Error text, icons and borders."}},"success":{"bg":{"$type":"color","$value":"{color.green.100}","$description":"Approved, filed, complete. Ledger Green."},"fg":{"$type":"color","$value":"{color.black.100}","$description":"Text on success."}},"info":{"bg":{"$type":"color","$value":"{color.blue.10}","$description":"Notices and neutral information."},"fg":{"$type":"color","$value":"{color.blue.100}","$description":"Info text and icons."}},"warning":{"bg":{"$type":"color","$value":"{color.yellow.100}","$description":"Needs attention soon. Safety Yellow."},"fg":{"$type":"color","$value":"{color.black.100}","$description":"Warning text and icons."}}}},"dark":{"bg":{"page":{"$type":"color","$value":"{color.black.100}","$description":"Default page background. Department Black unless a reader switches to light."},"surface":{"$type":"color","$value":"{color.black.100}","$description":"Cards, fields and raised panels."},"muted":{"$type":"color","$value":"{color.black.90}","$description":"Quiet fills: hover states, wells, table stripes."},"inverse":{"$type":"color","$value":"{color.manila.100}","$description":"High-contrast blocks that flip against the page."},"accent":{"$type":"color","$value":"{color.red.100}","$description":"Embargo Red fields. Rare, and text on it must be large and bold."},"accent-subtle":{"$type":"color","$value":"{color.red.900}","$description":"Tinted red backgrounds for highlights."},"emphasis":{"$type":"color","$value":"{color.blue.100}","$description":"Beaurocracy Blue fields, for emphasis in limited form."}},"text":{"primary":{"$type":"color","$value":"{color.manila.100}","$description":"Body copy and headings."},"secondary":{"$type":"color","$value":"{color.black.20}","$description":"Supporting copy, metadata."},"muted":{"$type":"color","$value":"{color.black.40}","$description":"Placeholders, captions and de-emphasised hints."},"inverse":{"$type":"color","$value":"{color.black.100}","$description":"Text on bg/inverse."},"accent":{"$type":"color","$value":"{color.red.75}","$description":"Red text that still passes AA."},"link":{"$type":"color","$value":"{color.blue.50}","$description":"Inline links (always underlined as well)."},"on-accent":{"$type":"color","$value":"{color.manila.100}","$description":"Text on Embargo Red (large bold only)."},"on-emphasis":{"$type":"color","$value":"{color.manila.100}","$description":"Text on Beaurocracy Blue."}},"border":{"subtle":{"$type":"color","$value":"{color.black.75}","$description":"Dividers and quiet outlines."},"default":{"$type":"color","$value":"{color.manila.100}","$description":"Hairline rules, field and outline-button borders."},"focus":{"$type":"color","$value":"{color.blue.50}","$description":"Keyboard focus ring. Blue, so focus never reads as an error."},"accent":{"$type":"color","$value":"{color.red.100}","$description":"Annotation lines: grids, clear space, measurements."}},"action":{"primary":{"bg":{"$type":"color","$value":"{color.manila.100}","$description":"Primary button fill."},"bg-hover":{"$type":"color","$value":"{color.black.10}","$description":"Primary hover."},"bg-pressed":{"$type":"color","$value":"{color.black.20}","$description":"Primary pressed."},"text":{"$type":"color","$value":"{color.black.100}","$description":"Primary label."}},"secondary":{"bg":{"$type":"color","$value":"{color.black.90}","$description":"Secondary button fill."},"bg-hover":{"$type":"color","$value":"{color.black.75}","$description":"Secondary hover."},"bg-pressed":{"$type":"color","$value":"{color.black.65}","$description":"Secondary pressed."},"text":{"$type":"color","$value":"{color.manila.100}","$description":"Secondary label."}},"disabled":{"bg":{"$type":"color","$value":"{color.black.90}","$description":"Disabled control fill."},"text":{"$type":"color","$value":"{color.black.65}","$description":"Disabled label."}}},"feedback":{"danger":{"bg":{"$type":"color","$value":"{color.red.900}","$description":"Error backgrounds."},"fg":{"$type":"color","$value":"{color.red.75}","$description":"Error text, icons and borders."}},"success":{"bg":{"$type":"color","$value":"{color.green.100}","$description":"Approved, filed, complete. Ledger Green."},"fg":{"$type":"color","$value":"{color.black.100}","$description":"Text on success."}},"info":{"bg":{"$type":"color","$value":"{color.blue.900}","$description":"Notices and neutral information."},"fg":{"$type":"color","$value":"{color.blue.50}","$description":"Info text and icons."}},"warning":{"bg":{"$type":"color","$value":"{color.yellow.100}","$description":"Needs attention soon. Safety Yellow."},"fg":{"$type":"color","$value":"{color.black.100}","$description":"Warning text and icons."}}}}},"layout":{"space":{"2":{"$type":"dimension","$value":"2px"},"4":{"$type":"dimension","$value":"4px"},"8":{"$type":"dimension","$value":"8px"},"12":{"$type":"dimension","$value":"12px"},"16":{"$type":"dimension","$value":"16px"},"24":{"$type":"dimension","$value":"24px"},"32":{"$type":"dimension","$value":"32px"},"48":{"$type":"dimension","$value":"48px"},"64":{"$type":"dimension","$value":"64px"},"96":{"$type":"dimension","$value":"96px"}},"radius":{"none":{"$type":"dimension","$value":"0"},"full":{"$type":"dimension","$value":"999px"}},"border-width":{"1":{"$type":"dimension","$value":"1px"},"2":{"$type":"dimension","$value":"2px"}},"control":{"height-sm":{"$type":"dimension","$value":"32px"},"height-md":{"$type":"dimension","$value":"44px"},"height-lg":{"$type":"dimension","$value":"56px"}}},"font":{"display":{"$type":"fontFamily","$value":["neue-haas-grotesk-display","Neue Haas Grotesk Display Pro","Helvetica Neue","Helvetica","Arial","sans-serif"],"$description":"Adobe Fonts kit hha1ptx (https://use.typekit.net/hha1ptx.css): 45 Light (400), 75 Bold (700), 95 Black (900), with italics."},"text":{"$type":"fontFamily","$value":["neue-haas-grotesk-text","Neue Haas Grotesk Text Pro","Helvetica Neue","Helvetica","Arial","sans-serif"],"$description":"Adobe Fonts kit hha1ptx: 55 Roman (400), 75 Bold (700) and italics."},"reading":{"$type":"fontFamily","$value":["Libre Baskerville","Baskerville","Georgia","Times New Roman","serif"],"$description":"Web stand-in for Baskerville URW. The manual names Georgia as the fallback."}},"typography":{"heading-xl":{"$type":"typography","$value":{"fontFamily":"{font.display}","fontWeight":900,"fontSize":"44px","lineHeight":1.05}},"heading-l":{"$type":"typography","$value":{"fontFamily":"{font.display}","fontWeight":900,"fontSize":"32px","lineHeight":1.1}},"heading-m":{"$type":"typography","$value":{"fontFamily":"{font.display}","fontWeight":900,"fontSize":"24px","lineHeight":1.15}},"heading-s":{"$type":"typography","$value":{"fontFamily":"{font.display}","fontWeight":700,"fontSize":"20px","lineHeight":1.2}},"display-light":{"$type":"typography","$value":{"fontFamily":"{font.display}","fontWeight":400,"fontSize":"44px","lineHeight":1.05}},"action-lg":{"$type":"typography","$value":{"fontFamily":"{font.text}","fontWeight":700,"fontSize":"18px","lineHeight":1.0}},"action-md":{"$type":"typography","$value":{"fontFamily":"{font.text}","fontWeight":700,"fontSize":"16px","lineHeight":1.0}},"label-m":{"$type":"typography","$value":{"fontFamily":"{font.text}","fontWeight":700,"fontSize":"14px","lineHeight":1.0}},"label-s":{"$type":"typography","$value":{"fontFamily":"{font.text}","fontWeight":700,"fontSize":"12px","lineHeight":1.0}},"body-l":{"$type":"typography","$value":{"fontFamily":"{font.text}","fontWeight":400,"fontSize":"18px","lineHeight":1.4}},"body-m":{"$type":"typography","$value":{"fontFamily":"{font.text}","fontWeight":400,"fontSize":"16px","lineHeight":1.45}},"body-s":{"$type":"typography","$value":{"fontFamily":"{font.text}","fontWeight":400,"fontSize":"14px","lineHeight":1.45}},"caption":{"$type":"typography","$value":{"fontFamily":"{font.text}","fontWeight":400,"fontSize":"12px","lineHeight":1.4}},"reading-m":{"$type":"typography","$value":{"fontFamily":"{font.reading}","fontWeight":400,"fontSize":"18px","lineHeight":1.5}},"reading-l":{"$type":"typography","$value":{"fontFamily":"{font.reading}","fontWeight":400,"fontSize":"22px","lineHeight":1.45}}}}