United StudiesDESIGN.md alpha
A confident education-abroad brand built around institutional trust, generous whitespace, strong photography, and a restrained petrol-teal and antique-gold palette.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Corner Radius
Spacing
Base: 8pxA confident education-abroad brand built around institutional trust, generous whitespace, strong photography, and a restrained petrol-teal and antique-gold palette.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Chips
Inputs
link
default
default
default
default
default
Do's & Don'ts
Do
Don't
Design direction
United Studies should feel established, reassuring, and aspirational. Petrol teal provides the institutional foundation, while antique gold is reserved for borders and small accents. The cool gray surface supports content without competing with photography.
Use only the four defined colors. Do not introduce alternate golds, additional dark grays, or untracked surface colors.
Color roles
| Token | Value | Role |
|---|---|---|
| primary | #014259 | Brand backgrounds, links, prominent text, and primary actions |
| secondary | #A38041 | Borders, dividers, and restrained accents |
| surface | #D6D7DC | Cards, inputs, light text on teal, and neutral surfaces |
| ink | #333333 | Default text and form borders |
Gold should not be used for small text on a light background. Its contrast is insufficient at normal text sizes, so secondary actions use teal text with a gold border.
Spacing and shape
Use the 8px-based spacing scale for predictable rhythm. Major sections use 72px spacing on large screens and should reduce proportionally on smaller screens.
All rectangular controls and containers use a 6px radius. The full radius is reserved for true circles such as avatars.
Usage rules
• Use teal for large brand surfaces and primary actions.
• Keep gold to borders and restrained decorative accents.
• Use the defined typography tokens instead of introducing near-duplicate sizes.
• Use the 6px radius consistently across rectangular components.
• Reuse the single card shadow when elevation is necessary.
• Preserve visible keyboard focus and a minimum 44px target size for interactive controls.
Responsive behavior
Keep the page structure simple and content-led. Reduce oversized headings and section padding on small screens, keep reading text comfortable, and allow media or carousel content to adapt without changing the content order.
Exact breakpoints, interaction states, navigation behavior, and animation timing remain implementation decisions because they were not established by the source material.
Use with MCP
Don't have the MCP? Install it here