diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants Arial Sample.png b/documentation/wiki/.gitbook/assets/Simpler Grants Arial Sample.png new file mode 100644 index 000000000..de403ac1c Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants Arial Sample.png differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants Arial Weights Sample.png b/documentation/wiki/.gitbook/assets/Simpler Grants Arial Weights Sample.png new file mode 100644 index 000000000..2a5933499 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants Arial Weights Sample.png differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants Color Accessibility.png b/documentation/wiki/.gitbook/assets/Simpler Grants Color Accessibility.png new file mode 100644 index 000000000..4863f6c09 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants Color Accessibility.png differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants Color Families.png b/documentation/wiki/.gitbook/assets/Simpler Grants Color Families.png new file mode 100644 index 000000000..4e336e803 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants Color Families.png differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants Color Overview.jpg b/documentation/wiki/.gitbook/assets/Simpler Grants Color Overview.jpg new file mode 100644 index 000000000..5a033cca6 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants Color Overview.jpg differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants Georgia Sample.png b/documentation/wiki/.gitbook/assets/Simpler Grants Georgia Sample.png new file mode 100644 index 000000000..277f7dd44 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants Georgia Sample.png differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants Georgia Weights Sample.png b/documentation/wiki/.gitbook/assets/Simpler Grants Georgia Weights Sample.png new file mode 100644 index 000000000..4abe88b07 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants Georgia Weights Sample.png differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants NewsReader Sample.png b/documentation/wiki/.gitbook/assets/Simpler Grants NewsReader Sample.png new file mode 100644 index 000000000..48aedc99e Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants NewsReader Sample.png differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants NewsReader Weights Sample.png b/documentation/wiki/.gitbook/assets/Simpler Grants NewsReader Weights Sample.png new file mode 100644 index 000000000..2017ed8aa Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants NewsReader Weights Sample.png differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants Public Sans Sample.png b/documentation/wiki/.gitbook/assets/Simpler Grants Public Sans Sample.png new file mode 100644 index 000000000..0e3d329da Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants Public Sans Sample.png differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants Public Sans Weights Sample.png b/documentation/wiki/.gitbook/assets/Simpler Grants Public Sans Weights Sample.png new file mode 100644 index 000000000..5203f0fc3 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants Public Sans Weights Sample.png differ diff --git a/documentation/wiki/.gitbook/assets/Simpler Grants Type Scale Sample.png b/documentation/wiki/.gitbook/assets/Simpler Grants Type Scale Sample.png new file mode 100644 index 000000000..e4261de99 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/Simpler Grants Type Scale Sample.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants color dont use gradients.png b/documentation/wiki/.gitbook/assets/simpler grants color dont use gradients.png new file mode 100644 index 000000000..18f73e63c Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants color dont use gradients.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants color dont use low contrast combinations.png b/documentation/wiki/.gitbook/assets/simpler grants color dont use low contrast combinations.png new file mode 100644 index 000000000..f4f3d33a8 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants color dont use low contrast combinations.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants color dont use unapproved colors.png b/documentation/wiki/.gitbook/assets/simpler grants color dont use unapproved colors.png new file mode 100644 index 000000000..bb027aff3 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants color dont use unapproved colors.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants do not use only accent color combinations.png b/documentation/wiki/.gitbook/assets/simpler grants do not use only accent color combinations.png new file mode 100644 index 000000000..8f81fa002 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants do not use only accent color combinations.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants dont apply effects to type.png b/documentation/wiki/.gitbook/assets/simpler grants dont apply effects to type.png new file mode 100644 index 000000000..354139b8b Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants dont apply effects to type.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants dont center align type.png b/documentation/wiki/.gitbook/assets/simpler grants dont center align type.png new file mode 100644 index 000000000..2482406c1 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants dont center align type.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants dont justify text.png b/documentation/wiki/.gitbook/assets/simpler grants dont justify text.png new file mode 100644 index 000000000..83d2b6c84 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants dont justify text.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants dont outline type.png b/documentation/wiki/.gitbook/assets/simpler grants dont outline type.png new file mode 100644 index 000000000..9b5b7c068 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants dont outline type.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants dont right alight type.png b/documentation/wiki/.gitbook/assets/simpler grants dont right alight type.png new file mode 100644 index 000000000..f3c062662 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants dont right alight type.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants dont set type in all caps.png b/documentation/wiki/.gitbook/assets/simpler grants dont set type in all caps.png new file mode 100644 index 000000000..f4c49c402 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants dont set type in all caps.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants dont set type in all lower case.png b/documentation/wiki/.gitbook/assets/simpler grants dont set type in all lower case.png new file mode 100644 index 000000000..3c486c8c2 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants dont set type in all lower case.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants dont set type too small.png b/documentation/wiki/.gitbook/assets/simpler grants dont set type too small.png new file mode 100644 index 000000000..4632ae36b Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants dont set type too small.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants dont use low contrast on type.png b/documentation/wiki/.gitbook/assets/simpler grants dont use low contrast on type.png new file mode 100644 index 000000000..874f0e5db Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants dont use low contrast on type.png differ diff --git a/documentation/wiki/.gitbook/assets/simpler grants dont use unapproved typefaces.png b/documentation/wiki/.gitbook/assets/simpler grants dont use unapproved typefaces.png new file mode 100644 index 000000000..bbd332c71 Binary files /dev/null and b/documentation/wiki/.gitbook/assets/simpler grants dont use unapproved typefaces.png differ diff --git a/documentation/wiki/product/brand-guidelines/colors.md b/documentation/wiki/product/brand-guidelines/colors.md index abd4b9391..97fa5c32b 100644 --- a/documentation/wiki/product/brand-guidelines/colors.md +++ b/documentation/wiki/product/brand-guidelines/colors.md @@ -16,44 +16,43 @@ layout: ## Overview -Color plays a significant role in our brand. The following values represent our core palette. These are used most often in the system and should be relied on when the color palette must be limited. Each of our colors is named for ideas that represent trust and accessibility. The Grants color system is based on the design token system in USWDS. Each color family has ten grades, which fall between 5 and 90. +Color plays a significant role in our brand. The following values represent our core palette. These are used most often in the system and should be relied on when the color palette must be limited. Each of our colors is named for ideas that represent trust and accessibility. -
+Patina Green, Forest Green, and Sky Blue should be used most frequently as the primary brand colors, with the remaining values being used as support. -The colors below are organized here by size. The larger the percentage, the more prominence it has in our system. Patina should be used most frequently as the primary brand color, with the remaining values being used as support. +
-
+## Color Families -## Color & Accessibility - -Pairing colors together can be complex. Always consider the application, information, and audience when selecting values. Higher contrast combinations make information clearer, while lower contrast combinations can be helpful for graphic elements. +The Grants color system is based on the design token system in USWDS. Each color family has 7-8 grades. -Color contrast is crucial to legibility and accessibility in type. Always be sure there is enough contrast between the type and background. In most situations, type should be used in Gray or White, with color used to create emphasis. +
-Examples shown may not be inclusive of web standards. See the accessibility section for more information. +## Color & Accessibility -
+Pairing colors together can be complex. Always consider the application, information, and audience when selecting values. Higher contrast combinations make information clearer, while lower contrast combinations can be helpful for graphic elements. -
+Color contrast is crucial to legibility and accessibility in type. Always be sure there is enough contrast between the type and background. In most situations, type should be used in Gray or White, with color being used to create emphasis. -
+
-
+## Additional don’ts -
+Do not diminish the value of color in the brand. Avoid the following uses. -[View contrast grid](https://contrast-grid.eightshapes.com/?version=1.1.0\&background-colors=\&foreground-colors=1C1D1F%0D%0A125238%0D%0A6DBD9A%0D%0A82CAF6%0D%0AB1A6CD%0D%0AFFC800%0D%0A\&es-color-form__tile-size=regular\&es-color-form__show-contrast=aaa\&es-color-form__show-contrast=aa) +\ +Do not use unapproved colors. -## Additional don’ts +
-Do not diminish the value of color in the brand. Avoid the following uses. +Do not use gradients. -

Do not use unapproved colors

+
-

Do not use gradients

+Do not use low-contrast combinations. -

Do not use low-contrast combinations

+
-

Do not use only accent color combinations

+Do not use only accent color combinations. -\ +
diff --git a/documentation/wiki/product/brand-guidelines/typography.md b/documentation/wiki/product/brand-guidelines/typography.md index 9d85fe5d3..17e87f998 100644 --- a/documentation/wiki/product/brand-guidelines/typography.md +++ b/documentation/wiki/product/brand-guidelines/typography.md @@ -18,74 +18,98 @@ layout: Typography is one of the most, if not the most, important communication tools for our brand. It carries our brand voice; with it, we establish our tone, personality, and message. -
- ## Primary Typeface ### Public Sans Public Sans is a strong, neutral, open-source typeface for interfaces, text, and headings developed by USWDS. It is seen across US government websites and communications, giving Grants an additional source of credibility. -[Download Public Sans](https://fonts.google.com/specimen/Public+Sans). It is already included in USWDS but should be added to HHS staff computers to maintain brand alignment. - -
+
-Public Sans Regular and Regular Italic: +[Download Public Sans](https://fonts.google.com/specimen/Public+Sans). It is already included in USWDS but should be added to HHS staff computers to maintain brand alignment in Simpler Grants material. -
-Public Sans ExtraBold and Extrabold Italic: -
+

Public Sans weights

## Secondary Typeface ### Newsreader -Newsreader is an open-source font from Production Type designed for on-screen, longer-form reading. NewsReader’s shapes are open and familiar, fostering engaged reading, with features like optical sizes and large display cuts that maximize the type’s ability to be expressive. +Newsreader is an open-source font from Production Type designed for on-screen, longer-form reading. NewsReader’s shapes are open and familiar, fostering engaged reading, with features like optical sizes and large display cuts that maximize the type’s ability to be expressive. In general, use NewsReader for content such as blog posts and informational page content that is longer than 2-3 paragraphs. + +
[Download NewsReader](https://fonts.google.com/specimen/Newsreader). It should be added to HHS staff computers to maintain brand alignment. -
+

NewsReader weights

-NewsReader Regular and Regular Italic: +## Hierarchy -
+Different type sizes should always have a relationship to one another. There is no exact rule, but select a base type size in a composition and make all other sizes proportionate to this foundation. Our brand defaults to a 1.35 type scale. -NewsReader SemiBold and Semibold Italic: +
-
+## Alternates -## Hierarchy +Use these alternates when there are program limitations for typeface use, such as fallback fonts on the web or PowerPoint decks. -Different type sizes should always have a relationship to one another. There is no exact rule, but select a base type size in a composition and make all other sizes proportionate to this foundation—our brand defaults to a 1.35 type scale. +### Arial -
+* Public Sans → Arial -## Alternates +
-Use these alternates when there are program limitations for typeface use, such as fallback fonts on the web or PowerPoint decks: +Arial is installed on your computer. -* Public Sans → Arial -* NewsReader → Georgia +

Arial weights

-## Examples +### Georgia + +* NewsReader → Georgia -Typography is used to deliver information and express our brand characters. Below are some examples of the typography in use. +
-* _Coming Soon_ +

Georgia weights

## Don’ts -* Do not outline the type -* Do not set the type too small -* Do not apply effects -* Do not set type in all caps -* Do not use low-contrast combinations -* Do not set in all lowercase -* Do not use past typefaces -* Do not use unapproved typefaces -* Do not use low-contrast combinations -* Do not justify text -* Do not center-align -* Do not right align +Don't apply effects to type. + +
+ +Don't center align type. + +
+ +Don't justify text. + +
+ +Don't outline the type. + +
+ +Don't right align type. + +
+ +Don't set type in all caps. + +
+ +Don't set type in all lowercase. + +
+ +Don't set type too small. + +
+ +Don't use low contrast on type. + +
+ +Don't use unapproved typefaces. + +
diff --git a/infra/api/service/main.tf b/infra/api/service/main.tf index f539ba78d..f6a0324b5 100644 --- a/infra/api/service/main.tf +++ b/infra/api/service/main.tf @@ -123,6 +123,8 @@ module "service" { max_capacity = local.service_config.instance_scaling_max_capacity min_capacity = local.service_config.instance_scaling_min_capacity enable_autoscaling = true + enable_s3_cdn = true + s3_cdn_bucket_name = "public-files" cpu = local.service_config.instance_cpu memory = local.service_config.instance_memory environment_name = var.environment_name diff --git a/infra/frontend/service/main.tf b/infra/frontend/service/main.tf index 7dd4f0425..7c54ad063 100644 --- a/infra/frontend/service/main.tf +++ b/infra/frontend/service/main.tf @@ -131,7 +131,7 @@ module "service" { cpu = local.service_config.instance_cpu memory = local.service_config.instance_memory enable_autoscaling = true - enable_cdn = true + enable_alb_cdn = true app_access_policy_arn = null migrator_access_policy_arn = null diff --git a/infra/modules/service/cdn-logs.tf b/infra/modules/service/cdn-logs.tf index 21b0a292a..0f7ca10a7 100644 --- a/infra/modules/service/cdn-logs.tf +++ b/infra/modules/service/cdn-logs.tf @@ -1,5 +1,5 @@ resource "aws_s3_bucket" "cdn" { - count = var.enable_cdn ? 1 : 0 + count = local.enable_cdn ? 1 : 0 bucket_prefix = "${var.service_name}-cdn-access-logs" force_destroy = false @@ -15,7 +15,7 @@ resource "aws_s3_bucket" "cdn" { } resource "aws_s3_bucket_ownership_controls" "cdn" { - count = var.enable_cdn ? 1 : 0 + count = local.enable_cdn ? 1 : 0 bucket = aws_s3_bucket.cdn[0].id rule { @@ -25,7 +25,7 @@ resource "aws_s3_bucket_ownership_controls" "cdn" { } resource "aws_s3_bucket_acl" "cdn" { - count = var.enable_cdn ? 1 : 0 + count = local.enable_cdn ? 1 : 0 bucket = aws_s3_bucket.cdn[0].id @@ -35,7 +35,7 @@ resource "aws_s3_bucket_acl" "cdn" { } resource "aws_s3_bucket_public_access_block" "cdn" { - count = var.enable_cdn ? 1 : 0 + count = local.enable_cdn ? 1 : 0 bucket = aws_s3_bucket.cdn[0].id @@ -46,7 +46,7 @@ resource "aws_s3_bucket_public_access_block" "cdn" { } data "aws_iam_policy_document" "cdn" { - count = var.enable_cdn ? 1 : 0 + count = local.enable_cdn ? 1 : 0 statement { actions = [ @@ -65,14 +65,14 @@ data "aws_iam_policy_document" "cdn" { } resource "aws_s3_bucket_policy" "cdn" { - count = var.enable_cdn ? 1 : 0 + count = local.enable_cdn ? 1 : 0 bucket = aws_s3_bucket.cdn[0].id policy = data.aws_iam_policy_document.cdn[0].json } resource "aws_s3_bucket_lifecycle_configuration" "cdn" { - count = var.enable_cdn ? 1 : 0 + count = local.enable_cdn ? 1 : 0 bucket = aws_s3_bucket.cdn[0].id diff --git a/infra/modules/service/cdn.tf b/infra/modules/service/cdn.tf index 97019cd71..99f8e504a 100644 --- a/infra/modules/service/cdn.tf +++ b/infra/modules/service/cdn.tf @@ -4,17 +4,35 @@ locals { default_origin_id = "default" ssl_protocols = ["TLSv1.2"] minimum_protocol_version = "TLSv1.2_2021" - + enable_cdn = var.enable_alb_cdn || var.enable_s3_cdn + + # The domain name of the CDN, ie. URL people use in order to access the CDN. + # Null outputs here result in the CDN content being served from the CDN's default domain name. + # - If the origin is an ALB, and the ALB's domain name is not null, + # then use the domain name of the ALB + # - If the origin is an ALB, and the ALB's domain name is null, + # then return null + # - If the origin is an S3 bucket, and the S3 bucket's desired domain name is not null, + # then use the domain name of the S3 bucket + # - If the origin is an S3 bucket, and the S3 bucket's desired domain name is null, + # then return null + cdn_domain_name = var.enable_alb_cdn && var.domain != null ? var.domain : var.enable_s3_cdn && var.s3_cdn_domain_name != null ? var.s3_cdn_domain_name : null + cdn_domain_name_env_var = local.cdn_domain_name != null ? local.cdn_domain_name : aws_cloudfront_distribution.cdn[0].domain_name + + # The domain name of the origin, ie. where the content is being served from. + # - If the origin is an ALB, this is the DNS name of the ALB + # - If the origin is an S3 bucket, this is the regional domain name of the S3 bucket. + origin_domain_name = var.enable_alb_cdn ? aws_lb.alb[0].dns_name : var.enable_s3_cdn ? aws_s3_bucket.s3_buckets[var.s3_cdn_bucket_name].bucket_regional_domain_name : null } resource "aws_cloudfront_origin_access_identity" "cdn" { - count = var.enable_cdn ? 1 : 0 + count = local.enable_cdn ? 1 : 0 comment = "Origin Access Identity for CloudFront to access S3 bucket" } resource "aws_cloudfront_cache_policy" "default" { - count = var.enable_cdn ? 1 : 0 + count = local.enable_cdn ? 1 : 0 name = var.service_name @@ -39,13 +57,13 @@ resource "aws_cloudfront_cache_policy" "default" { } resource "aws_cloudfront_distribution" "cdn" { - count = var.enable_cdn ? 1 : 0 + count = local.enable_cdn ? 1 : 0 - enabled = var.enable_cdn ? true : false - aliases = var.domain == null ? null : [var.domain] + enabled = local.enable_cdn ? true : false + aliases = local.cdn_domain_name == null ? null : [local.cdn_domain_name] origin { - domain_name = aws_lb.alb[0].dns_name + domain_name = local.origin_domain_name origin_id = local.default_origin_id custom_origin_config { http_port = 80 @@ -101,11 +119,12 @@ resource "aws_cloudfront_distribution" "cdn" { depends_on = [ aws_s3_bucket_public_access_block.cdn[0], + aws_s3_bucket_acl.cdn[0], aws_s3_bucket_policy.cdn[0], aws_s3_bucket.cdn[0], ] - #checkov:skip=CKV2_AWS_46:We aren't using a S3 origin + #checkov:skip=CKV2_AWS_46:We sometimes use a ALB origin #checkov:skip=CKV_AWS_174:False positive #checkov:skip=CKV_AWS_310:Configure a failover in future work #checkov:skip=CKV_AWS_68:Configure WAF in future work diff --git a/infra/modules/service/main.tf b/infra/modules/service/main.tf index df5b0b4ee..3f0a2b6b8 100644 --- a/infra/modules/service/main.tf +++ b/infra/modules/service/main.tf @@ -45,9 +45,13 @@ locals { { name : "DB_NAME", value : var.db_vars.connection_info.db_name }, { name : "DB_SCHEMA", value : var.db_vars.connection_info.schema_name }, ] + cdn_environment_variables = local.enable_cdn ? [ + { name : "CDN_URL", value : local.cdn_domain_name_env_var }, + ] : [] environment_variables = concat( local.base_environment_variables, local.db_environment_variables, + local.cdn_environment_variables, [ for name, value in var.extra_environment_variables : { name : name, value : value } diff --git a/infra/modules/service/variables.tf b/infra/modules/service/variables.tf index ad6dd31d5..6695e4a5d 100644 --- a/infra/modules/service/variables.tf +++ b/infra/modules/service/variables.tf @@ -204,12 +204,30 @@ variable "enable_load_balancer" { default = true } -variable "enable_cdn" { - description = "Whether to enable a CDN for the service" +variable "enable_alb_cdn" { + description = "Whether to enable an ALB origin CDN for the service. Cannot be enabled at the same time as the S3 CDN." type = bool default = false } +variable "enable_s3_cdn" { + description = "Whether to enable a S3 origin CDN for the service. Cannot be enabled at the same time as the ALB CDN." + type = bool + default = false +} + +variable "s3_cdn_bucket_name" { + description = "The name of the S3 bucket to use for the S3 CDN." + type = string + default = null +} + +variable "s3_cdn_domain_name" { + description = "The domain name of the S3 bucket to use for the S3 CDN" + type = string + default = null +} + variable "healthcheck_command" { description = "The command to run to check the health of the container, used on the container health check" type = list(string)