DLIFLC Harmony Design System
Overview
The Defense Language Institute Foreign Language Center Brand Guide was developed to ensure a shared visual experience that reinforces DLIFLC’s identity and the core priorities that are the key elements of the brand.
The foundation of the institute's brand is the DLIFLC Mission Statement:
The DLIFLC mission is to provide the highest quality culturally based foreign language education, training and evaluation to enhance the national security of the United States; and, as an Associate of Arts Degree and certificate granting Institution, DLIFLC is wholly committed to student service member success.
Harmony's Objective
The purpose of this guide is to ensure that no matter how people engage with the DLIFLC – on the website, via email or U.S. mail, through social media, livestream broadcasts or photographs – they are left with an impression that accurately reflects the institute’s brand identity, mission and values.
Values
Commitment
We are committed to our students, employees, stakeholders, life-long learning and institutional excellence.
Adaptability
We promote flexibility and drive innovative change as individuals and as an institution.
Integrity
We expect personal and professional integrity.
Respect
We honor our cultural and social diversity by treating others with dignity and respect.
The Institute shares the DLIFLC story daily through official statements and a variety of informational products, engaging with many audiences around the world. Communicators should refer to this guide for correct use of the DLIFLC brand in all communications from inception to production and delivery, in all media.
Theme Color Choices
Color palette based on options below. Click to select theme to then view how theme colors are applied to the components.
#470A68
rgba(71, 10, 104, .9)
#3478BD
rgba(52, 120, 189, .9)
#115E67
rgba(17, 94, 103, .9)
#6AAEAA
rgba(106, 174, 170, .9)
#789D4A
rgba(120, 157, 74, .9)
#ED8B00
rgba(237, 139, 0, .9)
#D35E13
rgb(211, 94, 19, .9)
#171717
rgba(71, 10, 104, .9)
Functions and Interactions
Typography
Paragraph Styles
Normal Body and Paragraph - (Open Sans @ 16px)html, body, p, p.normal
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Large Paragraph - (Open Sans @ 19px)p.large
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Reduced Paragraph - (Open Sans @ 14px)p.reduced
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
X-Small Paragraph - (Open Sans @ 12px)p.xsmall
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Heading Styles
Headlines H1(Open Sans @ 2.4em)h1, .h1
Headline 1 (default)
Headline 1 - .light
Headline 1 - .text-primary
Headline 1 - .text-gray
Headlines H2(Open Sans @ 1.9em)h2, .h2
Headline 2 (default)
Headline 2 - .text-primary
Headline 2 - .text-gray
Headlines H3(Open Sans @ 1.5em)h3, .h3
Headline 3 (default)
Headlines H4(Open Sans @ 1.3em)h4, .h4
Headline 4 (default)
Headlines H5(Open Sans @ 1.2em)h5, .h5
Headline 5 (default)
Headlines H6(Open Sans @ 1em)h6, .h6
Headline 6 (default)
Styled & Special Typography
Bold text(Open Sans:700)b, strong, .strong
Bold text.
Subtitle 1(Open Sans @ 18px).subtitle-1
Subtitle 1
Subtitle 2(Open Sans @ 14px).subtitle-2
Subtitle 2
Bullet List.bullet
- Because we use more non-bullet lists than with bullets, we use "list-style-type:none" as default.
- Add class ".bullet" to <ul> to revert and display "list-style-type:disc".
Caption(Open Sans @ 12px).caption
Overline(Open Sans @ 10px).overline
Overline
News Heading(Crimson Text @ 27px/18px).news
News Heading
News copy
Functions and Interactions
Official DLIFLC Branding Colors
Primary Color Palette
#470A68
rgba(71, 10, 104, .9)
#333333
rgba(51, 51, 51, .9)
#FFFFFF
rgba(255, 255, 255, .9)
Alt Color Palette
#115E67
rgba(17, 94, 103, .9)
#6AAEAA
rgba(106, 174, 170, .9)
#F7F7F7
rgba(247, 247, 247, .9)
#F2F2F2
rgba(242, 242, 242, .9)
#E5E5E5
rgba(229, 229, 229, .9)
#808080
rgba(128, 128, 128, .9)
#4D4D4D
rgba(77, 77, 77, .9)
#1A1A1A
rgba(26, 26, 26, .9)
Tertiary Color Palette
#5F259F
rgba(95, 37, 159, .9)
#789D4A
rgba(120, 157, 74, .9)
#4A773C
rgba(74, 119, 60, .9)
#F6BE00
rgba(246, 190, 0, .9)
#F2A900
rgba(242, 169, 0, .9)
#ED8B00
rgba(237, 139, 0, .9)
#BA0020
rgba(186, 0, 32, .9)
#3478BD
rgba(52, 120, 189, .9)
#11747F
rgba(17, 116, 127, .9)
#00AFA9
rgba(0, 175, 169, .9)
#B49D80
rgba(180, 157, 128, .9)
#D35E13
rgb(211, 94, 19, .9)
#445464
rgb(68, 84, 100, .9)
Starter Templates
Copy one of the templates below to use as a layout starting point.
Layout Grids
Examples
1400px (no padding).row.dliflc-full-width
- Modifier class to add to outer structural ".rows"
- Removes padding of row to allow true 100% of it's parent's width.
- Use for outer wrapping ".rows" that contain additional ".col" or ".col > .row > .col"... sequences.
- Good for getting things fully aligned on left if immediate children are higher level structural wrapper columns
- Removes padding of row to allow true 100% of it's parent's width.
- Use for outer wrapping ".rows" that contain additional ".col" or ".col > .row > .col"... sequences.