COLOR SYSTEM
BFSUAPA Colour System
Choose colours by purpose first, then check text–background contrast; the full scale table and the copyable palette at the end are for looking up values.
Start from purpose and background
This page helps you choose colours for web pages, WeChat articles, posters and merchandise. Decide on the main message and the background first, then pick an accent colour, and finally check that the text is easy to read. The full colour scales are kept at the end of the page for when you need a value; for visual examples, see Colour comparisons.
| What you are making | Where to start | What to check |
|---|---|---|
| Website body text and interfaces | The existing text, background and accent variables | Light and dark themes, text contrast, button and focus states |
| WeChat articles and long graphics | Black and white with one main accent colour | Body text, links and text in images on a phone |
| Recruitment posters, event material | BFSUAPA Red plus one or two theme colours | Whether priorities are clear and the time and place easy to read |
| Official documents and statements | Mostly black and white, with a little brand colour | Type size, print clarity and correct use of the official logo |
| Merchandise or special printing | Confirmed brand colours and the approved design file | Production method, actual materials and proof results |
The table is a starting point. It does not rule that any medium "must be bright" or "must be muted". A single poster may also contain an information area meant for longer reading, and that text should be checked on its own.
The three kinds of colour
BFSUAPA Red #E14B3F is the core brand colour, used mainly for identity and key visuals. The seven continent colours — golden yellow, ochre, violet, green, blue, cyan and ice blue — distinguish themes; the four ocean colours provide a range of blues. These are a classification convention within BFSUAPA design; they do not mean a region or culture can only be expressed by one colour.
Black, white and greys carry backgrounds, body text and secondary information. In web development, use the existing semantic variables first rather than filling in a new set of values in every component.
| Web variable | Light theme | Dark theme | Use |
|---|---|---|---|
--paper | #FFFFFF | #0D1117 | Page background |
--ink | #111318 | #F5F7FA | Primary text |
--muted | #626B78 | #A8B1BE | Secondary text |
--focus | #1F5AA8 | #87AAE0 | Keyboard focus outline |
The website does not use off-white, yellowed paper textures or decorative gradients. When changing a colour, check both the light and dark themes; one screenshot is not enough.
Combining the colours in one image
- Identify the most important information, such as the event name or the sign-up link.
- Choose the background and body text colours so that long passages are clearly readable first.
- Give the key information one main accent colour; add supporting colours only when themes need to be told apart.
- Shrink the design to its real display size and check that the title, time and place, and calls to action can be found quickly.
BFSUAPA Red with black and white works as a base; golden yellow and ochre can form a warm theme, and red with cyan gives a clear contrast. Colour proportions are only a design reference; they do not replace checks of information hierarchy or readability.
Choosing between web accents and brand colours
The website carries emphasis with the existing --accent-* variables; the brand palettes are for visual content that needs a clear theme. The table below maps the existing light-theme web accents to the corresponding brand colours. It is not a list of text colours that pass on any background.
| Colour | Light-theme web accent | Brand colour |
|---|---|---|
| Blue | #2A5B9E | #3B82F6 |
| Red | #B84F42 | #E14B3F |
| Gold | #A57218 | #F5B301 |
| Green | #277158 | #22C55E |
Which colour text should use depends on the combination of foreground and the actual background. Transparency, photo backgrounds and overlays all affect the result; "darker" or "lighter" only describes appearance and does not prove that contrast passes.
Checking text contrast
Under the WCAG 2.2 contrast requirements, body text needs at least 4.5:1 against its background; large text needs at least 3:1. Large text means at least 18pt, or at least 14pt bold; a heading does not qualify for the large-text threshold just because it is a heading. This applies to text; logos and other exceptions follow the standard's specific scope.
To check, take the actual foreground and background colours and calculate the ratio with a contrast tool. If it fails, adjust the text colour, the background colour or the layout, and measure again. White text on a coloured background must be calculated too; do not assume white is always clear.
For example, Asia golden yellow works well as a colour block or accent, but whether it can carry small text on white needs checking. You can put dark text on the yellow background, or place the text separately in a clear neutral area. Do not fix a glaring colour by lowering the opacity of the whole block; that can make the text even harder to read.
Charts and states cannot rely on colour alone
Categories, states and charts all carry text labels, with icons, shapes or line styles added where needed. Success and failure can keep their semantic colours, but the words "success", "failure" or the specific state must be written out; readers should never have to judge by red and green alone.
Blue–orange and blue–gold are starting points for chart colours; they are not guaranteed safe for every kind of colour-vision difference or every background. Check greyscale display, colour-vision simulations and the actual labels, so the chart still makes sense when screenshotted or printed. Keep decorative colours separate from colours that encode data, and do not swap colours freely within the same category.
Using the colour scales
Scale steps run from 50 to 900, from light to dark within one series. Light steps are candidates for backgrounds and dark steps are candidates for text; once chosen, the actual combination still needs checking. Do not assume that "700 always works for text".
The twelve existing full scales are kept below. They are a reference for digital design; for print, the colour mode, spot colours and material effects are set by the production requirements and proofs.
Full colour scale reference
| Colour | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|---|
| BFSUAPA Red | #FCEDEC | #F9DBD9 | #F4C0BC | #EE9C95 | #E87369 | #E14B3F | #B83E34 | #923129 | #65221C | #3F1512 |
| Asia | #FEF7E6 | #FDF0CC | #FCE4A6 | #FAD573 | #F7C439 | #F5B301 | #C99301 | #9F7401 | #6E5100 | #453200 |
| Africa | #FDEEE7 | #FBDECE | #F8C5AA | #F3A379 | #EF7D41 | #EA580C | #C0480A | #983908 | #692805 | #421903 |
| North America | #F3EFFE | #E8DEFD | #D6C6FC | #BFA5FA | #A580F8 | #8B5CF6 | #724BCA | #5A3CA0 | #3F296F | #271A45 |
| South America | #E9F9EF | #D3F3DF | #B2EBC7 | #85DFA6 | #53D281 | #22C55E | #1CA24D | #16803D | #0F592A | #0A371A |
| Europe | #EBF2FE | #D8E6FD | #BAD3FC | #93BAFA | #669EF8 | #3B82F6 | #306BCA | #2654A0 | #1B3A6F | #112445 |
| Oceania | #E6F8FB | #CDF0F6 | #A8E5F0 | #76D7E7 | #3DC6DD | #06B6D4 | #0595AE | #04768A | #03525F | #02333B |
| Antarctica | #F2FBFF | #E5F6FE | #D2F0FE | #B8E7FD | #9ADDFD | #7DD3FC | #67ADCF | #5189A4 | #385F71 | #233B47 |
| Pacific | #E8EDFB | #D2DCF7 | #B0C1F1 | #839EEA | #4F75E1 | #1D4ED8 | #1840B1 | #13338C | #0D2361 | #08163C |
| Indian Ocean | #EDECFC | #DCDAFA | #C1BEF6 | #9E99F1 | #766FEB | #4F46E5 | #4139BC | #332E95 | #241F67 | #161440 |
| Atlantic | #E7F6FD | #CFEDFB | #ABE0F7 | #7ACEF3 | #43B9EE | #0EA5E9 | #0B87BF | #096B97 | #064A69 | #042E41 |
| Arctic | #F8FCFF | #F1FAFF | #E7F6FE | #D9F1FE | #C9ECFD | #BAE6FD | #99BDCF | #7996A4 | #546772 | #344047 |
Before you hand off
Check that the key information stands out, that body and button text reach the right contrast, that states have text labels, and that both light and dark themes are readable. For printed material, check the proof as well. For logo use, see the Brand guidelines; for components and values, see the Design system.
Show the palette with copyable values
Each cell shows the step number, the hex value, and the contrast between the cell text (ink black or white) and that colour. Body text needs at least 4.5; large text needs at least 3. Click a swatch to copy its value.