@financial-times/o3-foundation
Version:
Origami foundations with design tokens
294 lines (292 loc) • 24.6 kB
JavaScript
/**
* Do not edit directly, this file was auto-generated.
*/
export const o3_color_palette_ft_pink = "#fcd0b1"; // FT Pink is used for the FT logo
export const o3_color_palette_ft_grey = "#333333";
export const o3_color_palette_white = "#ffffff";
export const o3_color_palette_black = "#000000";
// Claret is the main branding colour for MyFT related products. It should be used sparingly and never be used as a background colour.
//
// Usage example: MyFT branding; MyFT CTAs
export const o3_color_palette_claret = "#990f3d";
export const o3_color_palette_teal = "#0d7680"; // Teal is the most striking colour and main CTA colour on ft.com. It is reserved for important action items that need to stand out: buttons, text links and other critical functional use cases.
// Oxford is used to denote opinion pieces (in combination with Sky). It is used on the homepage and in articles. Use for information and callouts in general.
//
// Usage example: opinion branding; opinion topic tags.
export const o3_color_palette_oxford = "#0f5499";
export const o3_color_palette_slate = "#262a33"; // Slate is a warmer version of black. It is used as inverse backgrounds for editorial content and as a theme option(Mono) for buttons.
export const o3_color_palette_paper = "#fff1e5"; // Paper, as it’s name implies, is the FT’s main background colour. It is the main expression of the brand colour on product. It is a lighter, more legible shade of FT Pink and can be seen as a kind of replacement of white.
export const o3_color_palette_mandarin = "#ff8833";
export const o3_color_palette_light_blue = "#00a0dd";
export const o3_color_palette_crimson = "#cc0000";
export const o3_color_palette_graphics_dark_blue = "#006f9b";
export const o3_color_palette_wheat = "#f2dfce";
export const o3_color_palette_candy = "#ff7faa";
export const o3_color_palette_wasabi = "#96cc28";
export const o3_color_palette_jade = "#00994d";
export const o3_color_palette_velvet = "#593380";
export const o3_color_palette_lemon = "#ffec1a";
export const o3_color_palette_sky = "#cce6ff";
export const o3_color_palette_matisse_blue = "#355778";
export const o3_color_palette_black_5 = "#f2e5da";
export const o3_color_palette_black_10 = "#e6d9ce";
export const o3_color_palette_black_20 = "#ccc1b7";
export const o3_color_palette_black_30 = "#b3a9a0";
export const o3_color_palette_black_40 = "#999189";
export const o3_color_palette_black_50 = "#807973";
export const o3_color_palette_black_60 = "#66605c";
export const o3_color_palette_black_70 = "#4d4845";
export const o3_color_palette_black_80 = "#33302e";
export const o3_color_palette_black_90 = "#1a1817";
export const o3_color_palette_white_10 = "#fff2e8";
export const o3_color_palette_white_20 = "#fff4ea";
export const o3_color_palette_white_40 = "#fff7ef";
export const o3_color_palette_white_60 = "#fff9f5";
export const o3_color_palette_white_80 = "#fffcfa";
export const o3_color_palette_oxford_30 = "#082a4d";
export const o3_color_palette_oxford_40 = "#0a3866";
export const o3_color_palette_oxford_50 = "#0d4680";
export const o3_color_palette_oxford_60 = "#0f5499";
export const o3_color_palette_oxford_70 = "#1262b3";
export const o3_color_palette_oxford_80 = "#1470cc";
export const o3_color_palette_oxford_90 = "#177ee6";
export const o3_color_palette_oxford_100 = "#1a8cff";
export const o3_color_palette_teal_20 = "#052f33";
export const o3_color_palette_teal_30 = "#08474d";
export const o3_color_palette_teal_40 = "#0a5e66";
export const o3_color_palette_teal_50 = "#0d7680";
export const o3_color_palette_teal_60 = "#0f8e99";
export const o3_color_palette_teal_70 = "#12a5b3";
export const o3_color_palette_teal_80 = "#14bdcc";
export const o3_color_palette_teal_90 = "#17d4e6";
export const o3_color_palette_teal_100 = "#1aecff";
export const o3_color_palette_claret_30 = "#4d081f";
export const o3_color_palette_claret_40 = "#660a29";
export const o3_color_palette_claret_50 = "#800d33";
export const o3_color_palette_claret_60 = "#990f3d";
export const o3_color_palette_claret_70 = "#b31247";
export const o3_color_palette_claret_80 = "#cc1452";
export const o3_color_palette_claret_90 = "#e6175c";
export const o3_color_palette_claret_100 = "#ff1a66";
export const o3_color_palette_wheat_100 = "#ffebd9";
export const o3_color_use_case_link_text = "#0d7680";
export const o3_color_use_case_link_text_hover = "#08474d";
export const o3_color_use_case_link_underline = "#cfd8d1";
export const o3_color_use_case_link_underline_hover = "#9ec0bd";
export const o3_color_use_case_link_inverse_text = "#ffffff";
export const o3_color_use_case_link_inverse_text_hover = "#d4d4d6";
export const o3_color_use_case_link_inverse_underline = "#ffffff";
export const o3_color_use_case_link_inverse_underline_hover = "#d4d4d6";
export const o3_color_use_case_page_background = "#fff1e5";
export const o3_color_use_case_page_inverse_background = "#262a33";
export const o3_color_use_case_body_text = "#33302e";
export const o3_color_use_case_body_inverse_text = "#ffffff";
export const o3_color_use_case_support_text = "#4d4845";
export const o3_color_use_case_support_inverse_text = "#e9eaeb";
export const o3_color_use_case_muted_text = "#807973"; // "Muted" text is less prominent, for example credits and captions.
export const o3_color_use_case_muted_inverse_text = "#a8aaad"; // "Muted" text is less prominent, for example credits and captions.
export const o3_color_use_case_heading_text = "#33302e";
export const o3_color_use_case_heading_inverse_text = "#ffffff";
export const o3_color_use_case_footer_text = "#33302e";
export const o3_color_use_case_caption_text = "#33302e";
export const o3_color_use_case_button_foreground = "#ffffff";
export const o3_color_use_case_button_foreground_disabled = "#fff7ef";
export const o3_color_use_case_button_default = "#0d7680";
export const o3_color_use_case_button_hover = "#0a5e66";
export const o3_color_use_case_button_pressed = "#052f33";
export const o3_color_use_case_button_disabled = "#9ec0bd";
export const o3_color_use_case_error_background = "rgba(204, 0, 0, 0.06)";
export const o3_color_use_case_error_text = "#cc0000";
export const o3_color_use_case_error = "#cc0000"; // [DEPRECATED] This token is going to be looked at in the upcoming audit.
export const o3_color_use_case_success_background = "#d7f0d1";
export const o3_color_use_case_success_foreground = "#00572c";
export const o3_spacing_5xs = "0.25rem";
export const o3_spacing_4xs = "0.5rem";
export const o3_spacing_3xs = "0.75rem";
export const o3_spacing_2xs = "1rem";
export const o3_spacing_xs = "1.25rem";
export const o3_spacing_s = "1.5rem";
export const o3_spacing_m = "2rem";
export const o3_spacing_l = "2.5rem";
export const o3_spacing_xl = "3rem";
export const o3_spacing_2xl = "4rem";
export const o3_spacing_3xl = "5rem";
export const o3_spacing_4xl = "6rem";
export const o3_type_display_lg_font_family = "financier display VF, serif"; // Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_lg_font_weight = "800"; // Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_lg_font_size = "3rem"; // Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_lg_line_height = "3rem"; // Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_md_font_family = "financier display VF, serif"; // Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_md_font_weight = "800"; // Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_md_font_size = "2.5rem"; // Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_md_line_height = "2.5rem"; // Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_sm_font_family = "financier display VF, serif"; // Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_sm_font_weight = "800"; // Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_sm_font_size = "2rem"; // Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_sm_line_height = "2rem"; // Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_headline_lg_font_family = "financier display VF, serif"; // Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_lg_font_weight = "300"; // Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_lg_font_size = "2.5rem"; // Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_lg_line_height = "2.5rem"; // Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_md_font_family = "financier display VF, serif"; // Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_md_font_weight = "300"; // Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_md_font_size = "2rem"; // Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_md_line_height = "2rem"; // Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_sm_font_family = "financier display VF, serif"; // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_sm_font_weight = "300"; // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_sm_font_size = "1.25rem"; // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
export const o3_type_headline_sm_line_height = "1.5rem"; // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
export const o3_type_title_lg_font_family = "metric 2 VF, sans-serif"; // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
export const o3_type_title_lg_font_weight = "700"; // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
export const o3_type_title_lg_font_size = "1.75rem"; // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
export const o3_type_title_lg_line_height = "2rem"; // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
export const o3_type_title_md_font_family = "metric 2 VF, sans-serif"; // Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.
export const o3_type_title_md_font_weight = "400"; // Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.
export const o3_type_title_md_font_size = "1.5rem"; // Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.
export const o3_type_title_md_line_height = "2rem"; // Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.
export const o3_type_title_sm_font_family = "metric 2 VF, sans-serif"; // Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.
export const o3_type_title_sm_font_weight = "400"; // Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.
export const o3_type_title_sm_line_height = "1.75rem"; // Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.
export const o3_type_title_sm_font_size = "1.25rem"; // Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.
export const o3_type_body_lg_font_family = "metric 2 VF, sans-serif"; // Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.
export const o3_type_body_lg_font_weight = "400"; // Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.
export const o3_type_body_lg_font_size = "1.125rem"; // Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.
export const o3_type_body_lg_line_height = "1.5rem"; // Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.
export const o3_type_body_base_font_family = "metric 2 VF, sans-serif"; // Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.
export const o3_type_body_base_font_weight = "400"; // Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.
export const o3_type_body_base_font_size = "1rem"; // Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.
export const o3_type_body_base_line_height = "1.5rem"; // Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.
export const o3_type_body_highlight_font_family = "metric 2 VF, sans-serif"; // Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.
export const o3_type_body_highlight_font_weight = "700"; // Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.
export const o3_type_body_highlight_font_size = "1rem"; // Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.
export const o3_type_body_highlight_line_height = "1.5rem"; // Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.
export const o3_type_detail_font_family = "metric 2 VF, sans-serif"; // Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.
export const o3_type_detail_font_weight = "400"; // Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.
export const o3_type_detail_font_size = "0.875rem"; // Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.
export const o3_type_detail_line_height = "1.25rem"; // Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.
export const o3_type_label_font_family = "metric 2 VF, sans-serif"; // Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
export const o3_type_label_font_weight = "400"; // Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
export const o3_type_label_font_size = "0.875rem"; // Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
export const o3_type_label_line_height = "1.25rem"; // Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
export const o3_type_label_text_case = "uppercase"; // Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
export const o3_type_body_content_base_font_family = "Georgia"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_base_font_weight = "Regular"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_base_font_size = "1.25rem"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_base_line_height = "2rem"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_highlight_font_family = "Georgia"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_highlight_font_weight = "Bold"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_highlight_font_size = "1.25rem"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_highlight_line_height = "2rem"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_emphasis_font_family = "Georgia"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_emphasis_font_weight = "Regular"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_emphasis_font_size = "1.25rem"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_emphasis_line_height = "2rem"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_type_body_content_emphasis_font_style = "italic"; // Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
export const o3_border_radius_1 = "0.125rem"; // for default radius on interactive elements
export const o3_border_radius_2 = "0.25rem"; // for the outer radius of interactive elements that have both inner and outer boundaries as in box radio button
export const o3_font_family_metric = "metric 2 VF, sans-serif";
export const o3_font_family_financier_display = "financier display VF, serif";
export const o3_font_family_georgia = "georgia, serif";
export const o3_font_weight_light = "300";
export const o3_font_weight_regular = "400";
export const o3_font_weight_medium = "500";
export const o3_font_weight_semibold = "700";
export const o3_font_weight_bold = "800";
export const o3_font_lineheight_0 = "1.25rem";
export const o3_font_lineheight_1 = "1.25rem";
export const o3_font_lineheight_2 = "1.5rem";
export const o3_font_lineheight_3 = "1.75rem";
export const o3_font_lineheight_4 = "2rem";
export const o3_font_lineheight_5 = "2rem";
export const o3_font_lineheight_6 = "2.5rem";
export const o3_font_lineheight_7 = "3rem";
export const o3_font_lineheight_8 = "3.5rem";
export const o3_font_lineheight_9 = "4.5rem";
export const o3_font_lineheight_10 = "5.25rem";
export const o3_font_lineheight_negative_2 = "1rem";
export const o3_font_lineheight_negative_1 = "1rem";
export const o3_font_size_0 = "1rem";
export const o3_font_size_1 = "1.125rem";
export const o3_font_size_2 = "1.25rem";
export const o3_font_size_3 = "1.5rem";
export const o3_font_size_4 = "1.75rem";
export const o3_font_size_5 = "2rem";
export const o3_font_size_6 = "2.5rem";
export const o3_font_size_7 = "3rem";
export const o3_font_size_8 = "3.5rem";
export const o3_font_size_9 = "4.5rem";
export const o3_font_size_10 = "5.25rem";
export const o3_font_size_negative_2 = "0.75rem";
export const o3_font_size_negative_1 = "0.875rem";
export const o3_font_lineheight_metric2_0 = "1.5rem";
export const o3_font_lineheight_metric2_1 = "1.5rem";
export const o3_font_lineheight_metric2_2 = "1.75rem";
export const o3_font_lineheight_metric2_3 = "2rem";
export const o3_font_lineheight_metric2_4 = "2rem";
export const o3_font_lineheight_metric2_5 = "2.5rem";
export const o3_font_lineheight_metric2_6 = "3rem";
export const o3_font_lineheight_metric2_7 = "3.5rem";
export const o3_font_lineheight_metric2_8 = "4.5rem";
export const o3_font_lineheight_metric2_9 = "5.25rem";
export const o3_font_lineheight_metric2_negative_2 = "1rem";
export const o3_font_lineheight_metric2_negative_1 = "1.25rem";
export const o3_font_size_metric2_0 = "1rem";
export const o3_font_size_metric2_1 = "1.125rem";
export const o3_font_size_metric2_2 = "1.25rem";
export const o3_font_size_metric2_3 = "1.5rem";
export const o3_font_size_metric2_4 = "1.75rem";
export const o3_font_size_metric2_5 = "2rem";
export const o3_font_size_metric2_6 = "2.5rem";
export const o3_font_size_metric2_7 = "3rem";
export const o3_font_size_metric2_8 = "4rem";
export const o3_font_size_metric2_9 = "4.5rem";
export const o3_font_size_metric2_negative_2 = "0.75rem";
export const o3_font_size_metric2_negative_1 = "0.875rem";
export const o3_focus_use_case_ring_inner = {
blur: "0",
spread: "4",
color: "#ffffff",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_focus_use_case_ring_outer = {
blur: "0",
spread: "8",
color: "#4d4845",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_focus_use_case_ring_inverse_inner = {
blur: "0",
spread: "4",
color: "#4d4845",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_focus_use_case_ring_inverse_outer = {
blur: "0",
spread: "8",
color: "#ffffff",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_focus_use_case_outline_color = {
blur: "0",
spread: "2",
color: "#807973",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_focus_use_case_outline_inverse_color = {
blur: "0",
spread: "2",
color: "#ffffff",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};