Design Reference

GenuineAI — Internal Style Guide

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
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

Eyebrow Label

.eyebrow F37 Zagma Mono 400 var(--text-sm) / 0.72rem
.section-label F37 Zagma Mono 400 0.7rem

Eyebrow Label

.eyebrow F37 Zagma Mono 400 var(--text-sm) / 0.72rem
.section-label F37 Zagma Mono 400 0.7rem
Heading 1
.heading-1F37 Zagma 400clamp(2.8rem, 5.2vw, 4.4rem)
Heading 2
.heading-2F37 Zagma 400clamp(2rem, 4.5vw, 3.2rem)
Heading 3
.heading-3F37 Zagma 400clamp(1.75rem, 3vw, 2.4rem)
Heading 4
.heading-4F37 Zagma 4001.1rem
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-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.

<Button>Cyan pill — dark textsize: sm | md | lg
<Button variant="secondary">Ghost pill — cyan bordersize: sm | md | lg
Learn More Learn More Learn More
<CtaButton>Pill + integrated arrow circlesize: sm | md | lg
<IconButton theme="dark">Icon-only — dark bg, white iconsize: sm | md
<Button theme="dark">Dark pill — white textFor light sections
<Button variant="secondary" theme="dark">Ghost pill — dark borderFor light sections
Book a Demo Book a Demo Book a Demo
<CtaButton variant="dark">Integrated arrow — dark bgsize: sm | md | lg
Our Platform Our Platform Our Platform
<CtaButton variant="light">Gray-100 bg — white arrow circle — gray-300 iconsize: sm | md | lg
<IconButton>Icon-only — white bg, shadowsize: sm | md
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
blue-dark
#060756
cyan
#62D7F4
cyan-light
#C8EEFD
star
#ffff99
white
#ffffff
black
#000000
pink-light
#FBE4EC
pink-dark
#3B014B
amber-light
#FDEAB2
amber-dark
#663E0E
green-light
#CFF8CE
green-dark
#073908
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
success
#29CC42
warning
#FFBD2E
danger
#FF6058
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
cyan → cyan-light → cyan135deg
Gradient Text Effect
.text-gradientbackground-clip: text
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-glow
shadow-glow-sm
sm / 6px
md / 8px
lg / 10px
xl / 12px
2xl / 14px
3xl / 16px
pill / 100px

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
--space-1
0.25rem / 4px
--space-2
0.5rem / 8px
--space-3
0.75rem / 12px
--space-4
1rem / 16px
--space-5
1.25rem / 20px
--space-6
1.5rem / 24px
--space-8
2rem / 32px
--space-10
2.5rem / 40px
--space-12
3rem / 48px
--space-16
4rem / 64px
--space-20
5rem / 80px
--space-24
6rem / 96px
--space-28
7rem / 112px
Summer Camp 2026
Photography · Jun 2026
Sarah Chen
Content Manager
brand-guidelines.pdf
PDF · 2.4 MB
PDF
AI Assistant
I've tagged 24 photos from the Summer Camp album and added location metadata.
12,847
Total Assets
Approved
2 hours ago
Summer Camp 2026
Photography · Jun 2026
Sarah Chen
Content Manager
brand-guidelines.pdf
PDF · 2.4 MB
PDF
AI Assistant
I've tagged 24 photos from the Summer Camp album and added location metadata.
12,847
Total Assets
Approved
2 hours ago
.tile — base card .tile--dark — dark variant .tile--row — horizontal layout .tile--center — centered content
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
GenuineAI
Technology Leaders
Knowledge Post — Collapsed
GenuineAI
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
Published just now
KM
Published a few seconds ago
KG
Published a minute ago
KM
Published a minute ago
LV
Published 3 minutes ago
Knowledge Edit History
History
Stores revisions for every document.
KG
Published just now
KM
Published a few seconds ago
KG
Published a minute ago
KM
Published a minute ago
LV
Published 3 minutes ago
Knowledge Full UI
GenuineAI
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
GenuineAI
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
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.
Ask a follow-up...
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.
Ask a follow-up...
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.
Ask a follow-up...
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.
Ask a follow-up...
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
.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