The "Foundations" section outlines the color tokens, typography styles, grid parameters, and spacing rules used throughout the AmnestyUSA theme.
tokens/src/color.tokens.json
css/common/colors.css
In twig: .ts-text-high-contrast in CSS: var (--color-high-contrast)
ts-text-high-contrast
ts-text-md-contrast
ts-text-low-contrast
ts-text-highlight
ts-text-high-contrast
ts-text-md-contrast
ts-text-low-contrast
ts-text-highlight
ts-text-high-contrast
ts-text-md-contrast
ts-text-low-contrast
ts-text-highlight
ts-text-high-contrast
ts-text-md-contrast
ts-text-low-contrast
ts-text-highlight
Defined in css/common/typography.css. Use classes in twig templates to apply styles .
Use headings to improve scannability and provide context for users to better understand the page. Headings also help structure page content for screen readers and search engines. Headings should be logically structured on a page using proper hierarchy, headings are ranked "h1" through "h6". A page starts with the H1 heading, which describes a page's main topic— the title of the page. Subsections can be organized with "h2" level headings. Those subsections can themselves be divided with "h3" level headings, and so on.
.h2-alt-lg
.h1
.h1-alt
.h2
.h3
.h4
.h5
.h6
.body-2xl-bold
.body-xl (Intro text)
.body-base (Body text)
.body-base-bold
.body-sm (Small paragraph)
.body-xs
.utility-md uppercase
.utility-md
.utility-nav
.utility-sm
.utility-xs
.utility-2xs
.tag
.tag-lg
tokens/src/spacer.tokens.json
.ts-py-block and .ts-py-block-sm classes define block-level spacing.
See assets/css/base/utilities.css for definitions.
All of the margin, padding and height classes use generated from these base values. The are also available as css and tailwind variables.
--spacer-[size]
5xl
13 rem
(208 px)
4xl
10 rem
(160 px)
3xl
7.5 rem
(120 px)
2xl
6 rem
(96 px)
xl
4.5 rem
(72 px)
lg
3 rem
(48 px)
md
2.5 rem
(40 px)
base
2.25 rem
(36 px)
sm
1.5 rem
(24 px)
xs
1 rem
(16 px)
2xs
.5 rem
(8 px)
3xs
.25 rem
(4 px)
px
.0625 rem
(1 px)
Defined in utilities.css. Use "xl:container p-site" for site container and padding.
The "Components" section outlines larger UI elements throughout the theme including buttons, inputs, dropdowns, and cards that display a variety of different snippets of content. These elements are present within the larger blocks or sections of your page builder.
css/common/_buttons-links.css
views/btns
Buttons and links with icons are reusable components found in twig "views/btns"
All button and links use an included template.
See views/btns/[btn name] for templates and docs
Variation details: color: 'white', link_svg_name:'download'
Variation details: color: 'white', link_svg_name:'arrow-45degrees'
btn-arrow
btn-tag, events
btn-tag, press releases
btn-tag, campaigns
views/components/input--select.twig
views/components/input--select.twig
Coming soon: card previews
Heroes are located at the top of each page, and contain the page heading. Some pages have the hero set automatically, and others allow you to select between styles. Hero style and text values can be edited on the edit screen, at the bottom of the blocks section.
The default option for Basic Pages. Best used for secondary level pages when the breadcrumb will be present. When an image is loaded, it will be automatically cropped to a 16:7 aspect ratio. Template name: hero--solid-color
eyebrow
Optional subtitle. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Available on Basic Pages. Template name: hero--solid-color.
eyebrow
Optional subtitle. No image. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Can display an image or video, and up to two buttons. Best used for top level landing pages that need an immediate CTA. An image is required, and displays on mobile. Template name: hero--background-image-or-video.
Best used for tertiary level pages when the breadcrumb will be present. Gives you the options to select "yellow" or "gray" with the textured background, or "gradient" with a yellow gradient background.
Get Involved 3+ Level (we know you'd going a few levels deep in this area, so anything 3rd level and beyond should be the yellow texture)
Template name:hero--texture
This hero is only available on the homepage and ties to our strategic goal of highlighting Amnesty values front and center. It should be used for the homepage when there is not an urgent action or issue to highlight. An image is required, and displays on mobile. Template name: hero--values-animation
*Available on limited pages.
Available on the Homepage. Can display an image or video, and up to two buttons. Best used for featuring urgent crises/updates with immediate CTAs. An image is required, and displays on mobile. Template name: hero--urgent-action.
*Available on limited pages.
This hero style is only available on any news or report related content. It includes the ability to download a file. Template name: hero--download
*Available on limited pages.
This hero style is only available on the issue detail pages. Includes page title, image, description, share links and last updated text. Template name: hero--inline-image
*Available on limited pages.
Women, survivors, queer, trans, and femme people experience gender-based violence all over the world.
Share
Last updated on April 21, 2025
This hero is only available on country detail pages. Template name: hero--country
*Available on limited pages.
This hero is only available on event pages and includes automatically populated event data such as date, time, location, and cost. Template name: hero--event
*Available on limited pages.
This hero is only available on the Search pages and includes a search form. Template name: search-form.twig
*Available on limited pages.
This hero is only available on the Person pages and includes social media and email contact information. Template name: hero--person.twig
*Available on limited pages.
Blocks are full width elements that can be added to the page, and combined to create a variety of layouts and designs.
The 3-up card is available on the homepage as a wayfinding tool to drive users into your core areas of work.
*Available on limited pages.
Our crisis response teams and researchers travel to affected areas around the world to uncover and document human rights abuses
Explore Resources
Our staff and volunteers meet with policymakers and rally activists to put pressure on state and federal governments to protect human rights
Join Our Movement
Our campaign teams educate the public and give our members and grassroots activists information and tools to demand that human rights be protected
Get InvolvedAvailable only on the homepage to provide pathways for users to explore main issues pages.
*Available on limited pages.
Anyone fleeing danger or conflict should be given protection without discrimination. Help us support people seeking safety everywhere.
Explore our work
Join the movement for gun control across the United States so that everyone can live free from fear of gun violence.
Explore our work
Use your voice to help us campaign for the freedom of wrongfully detained human rights activists around the world.
Explore our workWayfinding grid available only on the Campaigns Landing page to encourage users to explore more campaign detail pages.
*Available on limited pages.
Explore
Explore
Explore
Explore
Wayfinding grid with animation to be used on the Issues Landing page only. Encourages users to click into relevant issues detail pages.
*Available on limited pages.
Displays events in list mode - reserved for Events Landing Page only.
Preview of this block is not available.
*Available on limited pages.
Blocks available on all pages.
Used to display in-content media. One or two images can be added and background colors can be chosen between white, black, and yellow.
Used to promote or feature a section of content or call-to-action. Works well for landing pages to showcase priority content or at the end of pages to give users relevant related pathways. Since this block offers a button, it is ideal to encourage users to click-through. Option to adjust both the top and bottom background colors.
Image and text side-by-side block within content wrapper. This is a simple block that fits well within text paragraphs (for long posts like blogs or reports). It has space for image and text, and has the "Crop image to fill" functionality, which allows image height to be flexible according to the height of the text. Image can be displayed on the left or right
Large image side-by-side with a title and WYSIWYG text. Used as a supplemental content block to display media, it allows for flexibility to add images within longer form content (such as reports) to break up long text sections. Images can be displayed on the left or right with paragraph text fields. Image size does not change.
Visually dramatic way to call out a piece of text. Block splits into two columns with highlighted large text and paragraph text. When a subtitle isn't used, the title is larger and highlighted. Available with white or black background color.
But every day, people are unjustly detained by ICE in abusive, deadly conditions and deported back to danger. Others at the border are blocked from exercising their right to seek asylum and sent back in harm’s way.
ICE is currently holding over 23,000 immigrants and asylum seekers. We've documented long-standing problems in the immigration detention system. These abuses were exacerbated by a rapid expansion of detention under former President Donald Trump.
But every day, people are unjustly detained by ICE in abusive, deadly conditions and deported back to danger. Others at the border are blocked from exercising their right to seek asylum and sent back in harm’s way.
ICE is currently holding over 23,000 immigrants and asylum seekers. We've documented long-standing problems in the immigration detention system. These abuses were exacerbated by a rapid expansion of detention under former President Donald Trump.
Block splits into two columns with paragraph text items centered.
Left, dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Right, dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Block splits into two columns with paragraph text items not centered.
Left, dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Right, dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Cards can be 2 or 3 columns wide. Used as a wayfinding tool to encourage movement to another part of the site or piece of content. Block cards can contain an image, title, teaser text, and button. Good for highlighting nested content within sections or related content. Recommended teaser text below 50 words.
Encourages users to dive deeper into Amnesty's research by pulling in top relevant reports, fact sheets, and toolkits. Capable of referencing report posts. Title styling reminiscent of branded report covers.
Report
Report
Report
Used to drive users down various pathways of engagement. Giving them a high level view of the sub-areas within a given site area. Most notably present in the Get Involved area to reach nested content within sections. Available in a grid or a horizontal scrolling layout.
A catch all block that features content from a variety of site areas, pulling in automatically the absolute latest post types such as Press Releases, Victories, Updates, etc. Overflows into a slider for shortened scroll and user-driven discoverability. Issue-specific detail pages will automatically filter promoted content that relates to that issue.
Blog
June 11, 2026
Press Release
June 11, 2026
Press Release
June 11, 2026
Press Release
June 10, 2026
Report
June 10, 2026
Press Release
June 10, 2026
Report
June 10, 2026
Press Release
June 10, 2026
Press Release
June 9, 2026
Press Release
June 9, 2026
Press Release
June 9, 2026
Press Release
June 9, 2026
Used to promote events across the site, such as the Get Involved section. Carousel will display upcoming events with a button to view more that will take users to the Events landing page.
Subscribe forms can be added to all post types to encourage users to sign up for your email subscription.
Used to promote a specific call to action without taking up much space on the page. Good for the Events landing page as well as other post types where a simple call to action is relevant. Ability to adjust title, text, and button text
For more information on what you can do or need technical support for joining or hosting a virtual event contact [email protected].
For more information on what you can do or need technical support for joining or hosting a virtual event contact [email protected].
A call to action with a text and button on the left, and a description text on the right.
Together we can make a difference. Sign up today to receive updates and take action.
We investigate and expose human rights violations, mobilize supporters to take action, and work to protect people wherever justice, freedom, and dignity are denied.
A slider that can be used to display a list of items in a carousel format.
Ability to call-out a priority quick action in a featured block. Encourages users to take action— should be reserved for highest-priority action related to page content.
Automatically displays Actions (same as those that appear in the expandable drawer). Issue-specific pages will be automatically filtered to display actions that are tagged with that specific issue. Edit actions through the Action post type on the admin screen.
Tabs can be used to break up content into digestible sections and reduce the length of the page. Tabs should be natural sections of the page copy, and clear to the user what the content within the tab holds. Recommended use on longer form content such as issues detail pages.
These policies continue to harm and oppress millions of people today. The U.S. is needlessly and brutally detaining people like Maura Martinez, a transgender woman from Nicaragua seeking protection in the U.S. She's being held at the Otay Mesa Detention Center in California, where trans people have reportedly been denied medical treatment, subjected to physical and sexual violence, and placed in housing that does not accord to their gender identity. Maura and countless others are stuck inside a system built on cruelty and needless detention.
There is a long pattern of abuse against migrants, and this cruelty and racism has shaped immigration policies for years. Black, Indigenous, and Brown people bear the brunt of harsh, punitive immigration policies and practices.
Immigrants and asylum-seekers should be allowed to navigate their immigration cases in freedom and in community, where they have family, faith, and the support of sponsors and community-based nonprofits. Test Link
Numbers cards provide a visual representation of key stats and numbers related to content. Block will automatically adjust depending on the number added (3 is not required).
Used to display individuals' stories and experiences. Quotes can be added and highlighted within any post type.
If you want to improve your quality of life and the quality of life for all women, never stop questioning society or calling for change.
Accordions organize content into "hidden" sections. Good for content with questions-and-answers or longer sections where you want to have only headings visible on page load and encourage users to expand content to see more details.
In May, parliament adopted changes to the Criminal and Criminal Procedure Codes to align them with international criminal law, extending the definition of aggression, crimes against humanity and other specific war crimes, lifting their statute of limitation and providing for universal jurisdiction. The President did not sign these changes into law by year's end, however, and the Rome Statute of the International Criminal Court remained unratified.
In May, parliament adopted changes to the Criminal and Criminal Procedure Codes to align them with international criminal law, extending the definition of aggression, crimes against humanity and other specific war crimes, lifting their statute of limitation and providing for universal jurisdiction. The President did not sign these changes into law by year's end, however, and the Rome Statute of the International Criminal Court remained unratified.
In May, parliament adopted changes to the Criminal and Criminal Procedure Codes to align them with international criminal law, extending the definition of aggression, crimes against humanity and other specific war crimes, lifting their statute of limitation and providing for universal jurisdiction. The President did not sign these changes into law by year's end, however, and the Rome Statute of the International Criminal Court remained unratified.
Link list to display a group of relevant links in a simple bullet-list format. Good for a large group of resources that aren't necessarily pathways to encourage movement through the site but rather useful resources that are supplemental to the page content.
Link list to display a group of relevant downloads in a simple bullet-list format. Good for useful downloadable resources (such as PDFs) that are supplemental to the page content.
