GAMBIT MILK · TEMPLATE RESOURCES
Style Guide.
The colors, type, spacing, and everyday controls that keep Gambit feeling like Gambit.
Brand colors
The original Gambit palette uses Hot Pink (#FF469F), Pink (#F1ACCE), and Light Pink (#FFD9EB). Keep repeated colors connected to Webflow variables. Use white content surfaces for small dark text, and avoid black text directly on pink. White text on the original pinks does not meet AA contrast for normal text; check each use before publishing.
Hot Pink
#FF469F
Pink
#F1ACCE
Light Pink
#FFD9EB
Black
#000000
White
#FFFFFF
Blue
Blueberry accent
Green
Pistachio accent
Accessible Pink
#C71870 · Use behind white body text and for pink text on white or cream. White contrast: 5.54:1. Keep Hot Pink for bright accents and large white display text; keep Pink and Light Pink for decorative surfaces. Check each text/background pair before reuse.
Blueberry product theme — keep this class reference so CMS product colors are included when publishing.
Strawberry product theme — keep this class reference so CMS product colors are included when publishing.
Pistachio product theme — keep this class reference so CMS product colors are included when publishing.
Typography
The primary display family is Yusuke DIN, connected through the shared Headings/Yusuke DIN font variable. Montserrat provides body text, with Roboto Mono for selected accents. Headings use a compact rhythm; paragraphs need enough line height to remain readable. These samples demonstrate the HTML tags at documentation-friendly sizes.
H1 · Milk for dayz
H2 · Find your flavor
H3 · Make a milk moment
H4 · Good things by the glass
H5 · A little everyday delight
H6 · Keep it colorful
A paragraph gives the idea room to breathe. Use bold text for emphasis and italic text sparingly. This text link opens the Journal.
Multiple H1 samples belong on this demonstration page only. Content pages should have one clear main heading.
Spacing and containers
The shared Container Width is 77.5rem. Desktop container padding is 2rem; use responsive overrides where content requires them. Repeated spacing tokens include 1rem, 1.5rem, and 2rem.
1rem · compact spacing
1.5rem · card padding and mobile gutters
2rem · grid gaps and desktop gutters
Buttons and interaction states
These are working links. Hover changes only the intended color; keyboard focus uses a clear dark outline. Keep action labels specific and retain a comfortably sized target.
To inspect focus, press Tab until a control is selected. Pressed styling appears while activating a button. Use the same interaction pattern consistently across similar controls.
Form fields and feedback
These editable examples demonstrate labels, helper text, an error state, and feedback. They do not submit information. Use the Contact page to inspect the actual form.
Rich Text foundations
Use real lists, quotes, figures, and captions to make longer content clear. Inside a Rich Text element, edit the scoped tag styles rather than adding a separate class to every paragraph.
A simple unordered list
- Choose a flavor.
- Find a favorite glass.
- Make the moment your own.
A clear ordered list
- Review the content.
- Preview the page at several widths.
- Save, then publish only when the work is approved.
Good things can happen by the glass.
Shared components
The header and footer on this page are real shared component instances. The Journal uses a CMS-driven article card. Edit the source component or CMS item to update connected uses, and review both desktop and mobile after a shared change.
Read the editing instructions