MENUDATA.AI · STYLE GUIDE
Style guide
A practical reference for typography, colors, and icon assets. Copy what you need, download the source files, and keep every touchpoint consistent.
01
Typography
Display, body, and utility text styles.
DISPLAY SCALE
The homepage hero headline is repeated at every semantic level for a direct comparison of scale and rhythm.
H1 · HERO
88 px · 77.4 px line height
Agentic Menu Intelligence
H2 · SECTION
53.88 px · 53.88 px line height
Agentic Menu Intelligence
H3 · FEATURE
33.64 px · 33.64 px line height
Agentic Menu Intelligence
H4 · CARD
26.58 px · 26.58 px line height
Agentic Menu Intelligence
H5 · EYEBROW
20.25 px · 19.85 px line height
Agentic Menu Intelligence
H6 · UTILITY
20.25 px · 19.85 px line height
Agentic Menu Intelligence
BODY COPY
Three responsive body styles for introductions, everyday reading, and compact supporting information.
BODY · LARGE
29.9 px · 36.5 px line height
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed sapien at sem fermentum placerat, vitae consequat justo.
BODY · MEDIUM
16 px · 20.2 px line height
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed sapien at sem fermentum placerat, vitae consequat justo. Curabitur vel ligula non neque posuere malesuada.
BODY · SMALL
14.25 px · 17.7 px line height
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed sapien at sem fermentum placerat, vitae consequat justo. Curabitur vel ligula non neque posuere malesuada.
FONT FILES
Download the type families
These destinations are placeholders and can be replaced with the final font packages later.
02
Colors
Click any swatch to copy its hex value.
FRAMER COLOR STYLES
Every shared color token currently available in the project, including translucent values.
TEXT 1000
#E6DAC6F5 · rgba(230, 218, 198, 0.96)
TEXT 900
#C3B193 · rgba(195, 177, 147, 1)
YELLOW
#FFC62D · rgba(255, 198, 45, 1)
YELLOW TEXT
#664A00 · rgba(102, 74, 0, 1)
RED
#FF3D00 · rgba(255, 61, 0, 1)
BLUE
#0000EE · rgba(0, 0, 238, 1)
BLUE TEXT
#BCBCFF · rgba(188, 188, 255, 1)
TEXT 300
#F1EDE5 · rgba(241, 237, 229, 1)
DARK 1000
#000000 · rgba(0, 0, 0, 1)
DARK 1000.5
#00000080 · rgba(0, 0, 0, 0.5)
DARK 900
#0E0D0E · rgba(14, 13, 14, 1)
DARK 800
#212121 · rgba(33, 33, 33, 1)
DARK 700
#383838 · rgba(56, 56, 56, 1)
DARK 600
#787673 · rgba(120, 118, 115, 1)
DARK 400
#B4B4B5 · rgba(180, 180, 181, 1)
DARK 300
#D1D1D1 · rgba(209, 209, 209, 1)
DARK 200
#C9C9C9 · rgba(201, 201, 201, 1)
DARK 100
#FFFFFF · rgba(255, 255, 255, 1)
03
Icons
The Icon Dash assets used across the website.
ICON DASH SYSTEM
A visual index of every variant in the current icon-system asset.
arrow-up-box-right
diamond-box
send-line
send-solid
star 01
up-in-circle
trends
trends 2
innovation 01
leads
contrast
write
arrow-up-diag-right
plus