Design Reference
GenuineAI — Internal Style Guide
Navigation
Dark Default Transparent bg Light text & yellow stars
Light Default Transparent bg Dark text & dark stars
Dark Scrolled Frosted blue-dark Light text & yellow stars
Light Scrolled White bg + shadow Dark text & dark stars
Font Families
F37 Zagma — Headings
The quick brown fox jumps over the lazy dog
Regular 400Intelligence Reimagined
Bold 700Intelligence Reimagined
F37 Zagma Mono — Labels & Preheads
The quick brown fox jumps over the lazy dog
Book 400KNOWLEDGE TEMPLATES
Inter — Body Text
The quick brown fox jumps over the lazy dog
Light 300We build AI that actually earns trust
Regular 400We build AI that actually earns trust
Medium 500We build AI that actually earns trust
Semibold 600We build AI that actually earns trust
Bold 700We build AI that actually earns trust
ExtraBold 800We build AI that actually earns trust
Label Styles — Dark Backgrounds
Eyebrow Label
Section Label
Label Styles — Light Backgrounds
Eyebrow Label
Section Label
Heading Scale
Heading 1
Heading 2
Heading 3
Heading 4
Body Text Scale
body-lgWe build AI that actually earns trust — transparent, purposeful, and designed to create results that matter.
body-baseWe build AI that actually earns trust — transparent, purposeful, and designed to create results that matter.
body-smWe build AI that actually earns trust — transparent, purposeful, and designed to create results that matter.
Text Size Tokens
--text-2xl1.32rem / 21.1px
Purpose-built AI agents that give your team back the hours they lose to operational overhead and manual processes.
--text-xl1.16rem / 18.6px
Purpose-built AI agents that give your team back the hours they lose to operational overhead and manual processes.
--text-lg1.1rem / 17.6px
Purpose-built AI agents that give your team back the hours they lose to operational overhead and manual processes.
--text-md0.97rem / 15.5px
Purpose-built AI agents that give your team back the hours they lose to operational overhead and manual processes.
--text-base0.9rem / 14.4px
Purpose-built AI agents that give your team back the hours they lose to operational overhead and manual processes.
--text-sm0.79rem / 12.6px
Purpose-built AI agents that give your team back the hours they lose to operational overhead and manual processes.
--text-xs0.72rem / 11.5px
Purpose-built AI agents that give your team back the hours they lose to operational overhead and manual processes.
Buttons — Dark Backgrounds
<Button>Cyan pill — dark textsize: sm | md | lg
<Button variant="secondary">Ghost pill — cyan bordersize: sm | md | lg
<CtaButton>Pill + integrated arrow circlesize: sm | md | lg
<IconButton theme="dark">Icon-only — dark bg, white iconsize: sm | md
Buttons — Light Backgrounds
<Button theme="dark">Dark pill — white textFor light sections
<Button variant="secondary" theme="dark">Ghost pill — dark borderFor light sections
<CtaButton variant="dark">Integrated arrow — dark bgsize: sm | md | lg
<CtaButton variant="light">Gray-100 bg — white arrow circle — gray-300 iconsize: sm | md | lg
<IconButton>Icon-only — white bg, shadowsize: sm | md
Iconography — Phosphor Icons
CaretDown
Dropdown caret
Images
Digital Asset Management
Brain
Knowledge
Robot
AI Agents, Tools, & Chat
MagicWand
Studio
ArrowRight
CTA button arrow
Swatches
Brand Intelligence
MagnifyingGlass
Search
CheckCircleFill
Selected / confirmed
Circle
Bullet / tag marker
UsersThree
People / teams
ChatCircle
Comments / chat
Envelope
Email / newsletters
File
Document / file type
Warning
Alerts / caution
Plus
Add / create
PaperPlaneTilt
Send / submit
DotsSix
Drag handle
TextT
Text field
List
List field
CurrencyDollar
Currency field
CheckSquare
Checkbox field
FileText
Document source
FilePdf
PDF source
SoccerBall
Activities
Warehouse
Facilities
CalendarBlank
Sessions
PersonSimpleRun
Divisions
Book
Handbook
Phosphor Icons — Regular weightfill="currentColor"viewBox 0 0 256 256phosphoricons.com
Brand Colors
blue-dark
#060756
cyan
#62D7F4
cyan-light
#C8EEFD
star
#ffff99
white
#ffffff
black
#000000
Accent Palette
pink-light
#FBE4EC
pink-dark
#3B014B
amber-light
#FDEAB2
amber-dark
#663E0E
green-light
#CFF8CE
green-dark
#073908
Neutral Palette (Blue-Tinted Slate)
gray-50
#F8FAFC
gray-100
#F1F5F9
gray-150
#E2E8F0
gray-200
#CBD5E1
gray-300
#94A3B8
gray-400
#64748B
gray-500
#475569
gray-600
#334155
gray-700
#1E293B
gray-800
#0F172B
gray-900
#020618
Semantic Colors
success
#29CC42
warning
#FFBD2E
danger
#FF6058
Alpha Scales
Cyan Alpha — Dark Backgrounds
a05
a08
a10
a13
a14
a18
a35
a40
a45
a48
a50
a65
White Alpha — Dark Backgrounds
a06
a07
a12
a65
Dark Alpha — Light Backgrounds
dark-a04
dark-a07
dark-a08
dark-a10
brand-a05
brand-a07
brand-a08
brand-a10
Gradient & Text Effects
Gradient Text Effect
Shadows
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-glow
shadow-glow-sm
Border Radius
sm / 6px
md / 8px
lg / 10px
xl / 12px
2xl / 14px
3xl / 16px
pill / 100px
Container Widths
Site-wide .container classes from layout.css. Always use with the base .container class for centering and horizontal padding.
.container --container-max · 1140px
.container--wide --container-wide · 1400px
.container--lg --container-lg · 90rem / 1440px
.container--xl --container-xl · 120rem / 1920px
margin: 0 autopadding-left: --space-8padding-right: --space-8Responsive → --space-5 at 600px
Spacing Scale
--space-10.25rem / 4px
--space-20.5rem / 8px
--space-30.75rem / 12px
--space-41rem / 16px
--space-51.25rem / 20px
--space-61.5rem / 24px
--space-82rem / 32px
--space-102.5rem / 40px
--space-123rem / 48px
--space-164rem / 64px
--space-205rem / 80px
--space-246rem / 96px
--space-287rem / 112px
UI Tiles — Fragment Cards
Summer Camp 2026
Sarah Chen
brand-guidelines.pdf
AI Assistant
12,847
Approved
Summer Camp 2026
Sarah Chen
brand-guidelines.pdf
AI Assistant
12,847
Approved
.tile — base card .tile--dark — dark variant .tile--row — horizontal layout .tile--center — centered content
UI Tiles — Knowledge
Knowledge Post
AI Chat
Media Library
Studio
Knowledge
Brand Identity
Technology Leaders
Knowledge Post
AI Chat
Media Library
Studio
Knowledge
Brand Identity
Technology Leaders
Knowledge Post — Collapsed
Technology Leaders
Knowledge Post — Collapsed
Technology Leaders
Knowledge Template
Configure Knowledge Template Add Field
Audience Name
Common Job Titles
Annual Revenue
Digital Behavior
Knowledge Template
Configure Knowledge Template Add Field
Audience Name
Common Job Titles
Annual Revenue
Digital Behavior
Knowledge Sources
Knowledge Sources Add Source
Document
File
PDF
Activities
Facilities
Sessions
Leadership
Divisions
Handbook
Knowledge Sources
Knowledge Sources Add Source
Document
File
PDF
Activities
Facilities
Sessions
Leadership
Divisions
Handbook
Knowledge Edit History
History
Stores revisions for every document.
KG
KM
KG
KM
LV
Knowledge Edit History
History
Stores revisions for every document.
KG
KM
KG
KM
LV
Knowledge Full UI
Audience Profiles
IT Leaders
Marketing Executives
Technology Leaders
Operations Leaders
C-Suite Executives
Technology Leaders
Common Job Titles
- Project Developers
- Solution Architects
- Trusted Advisors
Description Senior technology decision-makers who evaluate and procure enterprise software for organizations with 500+ employees.
Pain Points
- Fragmented asset libraries across teams
- Manual compliance and approval workflows
- Difficulty measuring content ROI
Digital Behavior
- Attends 3–5 industry conferences annually
- Relies on peer reviews and analyst reports
- Subscribes to technology newsletters
Key Insights
- Values integration with existing tech stack
- Needs executive-level ROI reporting
- Prefers self-serve evaluation before demos
Edit
Project Developers, Solution Architects, Trusted Advisors
Senior technology decision-makers who evaluate and procure enterprise software for organizations with 500+ employees.
Fragmented asset libraries across teams, Manual compliance and approval workflows, Difficulty measuring content ROI
Attends 3–5 industry conferences annually, Relies on peer reviews and analyst reports, Subscribes to technology newsletters
Values integration with existing tech stack, Needs executive-level ROI reporting, Prefers self-serve evaluation before demos
Knowledge Full UI
Audience Profiles
IT Leaders
Marketing Executives
Technology Leaders
Operations Leaders
C-Suite Executives
Technology Leaders
Common Job Titles
- Project Developers
- Solution Architects
- Trusted Advisors
Description Senior technology decision-makers who evaluate and procure enterprise software for organizations with 500+ employees.
Pain Points
- Fragmented asset libraries across teams
- Manual compliance and approval workflows
- Difficulty measuring content ROI
Digital Behavior
- Attends 3–5 industry conferences annually
- Relies on peer reviews and analyst reports
- Subscribes to technology newsletters
Key Insights
- Values integration with existing tech stack
- Needs executive-level ROI reporting
- Prefers self-serve evaluation before demos
Edit
Project Developers, Solution Architects, Trusted Advisors
Senior technology decision-makers who evaluate and procure enterprise software for organizations with 500+ employees.
Fragmented asset libraries across teams, Manual compliance and approval workflows, Difficulty measuring content ROI
Attends 3–5 industry conferences annually, Relies on peer reviews and analyst reports, Subscribes to technology newsletters
Values integration with existing tech stack, Needs executive-level ROI reporting, Prefers self-serve evaluation before demos
.tile-screen — full mockup frame .tile-screen--dark — dark variant .tile-screen-frame — inner chrome
UI Tiles — AI Chat
AI Chat
Image Assistant
Remove the background from this photo
Done! I've removed the background and saved a transparent PNG to your library.
Can you also crop it to a 1:1 ratio?
Cropped to 1:1 and saved. The updated file is in your library.
AI Chat
Image Assistant
Remove the background from this photo
Done! I've removed the background and saved a transparent PNG to your library.
Can you also crop it to a 1:1 ratio?
Cropped to 1:1 and saved. The updated file is in your library.
AI Chat — Large
Image Assistant
Remove the background from this photo
Done! I've removed the background and saved a transparent PNG to your library.
Can you also crop it to a 1:1 ratio?
Cropped to 1:1 and saved. The updated file is in your library.
AI Chat — Large
Image Assistant
Remove the background from this photo
Done! I've removed the background and saved a transparent PNG to your library.
Can you also crop it to a 1:1 ratio?
Cropped to 1:1 and saved. The updated file is in your library.
Scrolling Questions
What integrations do you support?
How does the approval workflow function?
Can I bulk-upload assets from a shared drive?
What file formats are supported?
Is there an API for custom integrations?
How do I set user permissions?
How do I organize content by brand?
Can multiple teams collaborate in real time?
What analytics are available for assets?
Does it support version history?
How is sensitive content protected?
Can I automate content expiration dates?
What onboarding resources are available?
How do templates work inside the editor?
Can I export reports for stakeholders?
Is SSO supported for enterprise accounts?
What SLA do you offer for uptime?
How does AI tagging improve search?
Searching Knowledge Base...
.dr-bg-cyan-gradientBase: cyan-light → blue-dark.scroll-questions — GSAP horizontal scroll.scroll-pill — question bubbles
Background Layouts
.dr-bg-pink-gradientBase: #FBE4EC (pink-light)Concentric white rings from bottom-rightSubtle purple radial overlay
.dr-bg-layout — container (relative, rounded, min-height 480px).dr-bg-layout-inner — white card (absolute, inset 3rem, rounded-2xl, shadow-lg)
.dr-bg-green-gradientBase: #CFF8CE (green-light)Concentric white rings from bottom-rightSubtle green-dark radial overlay
.dr-bg-cyan-light-gradientBase: #C8EEFD (cyan-light)Concentric white rings from bottom-rightSubtle cyan-dark radial overlay