Card · Light
Content surface
The default card sits on the card background with a hairline border.
Internal · Styleguide
The design system.
A living reference for the tokens, type, and components that power CharacterIntelligence.com. Update the values in src/styles.css and the entire site follows.
Palette
Color tokens.
--brand
Brand (Klein Blue)
#002FA7
--paper
Paper
#F9F9F7
--ink
Ink
#0A0A0A
--ink-muted
Ink muted (62%)
ink @ 62%
--hairline
Hairline
ink @ 8%
--card
Card
#FFFFFF
Typography
Type scale.
Display / Statement
Beyond IQ. Beyond EQ.
H2 / Section
The measures of success have changed.
Editorial / Lede
The third pillar of human potential.
Body
Character Intelligence is the rigorous discipline of measurable human virtue. This is what our body copy looks like — Inter at a comfortable reading size.
Eyebrow / Meta
A New Human Discipline
Buttons
Actions.
Cards
Content surfaces.
Card · Ink
Inverse surface
Used for emphatic sections and features.
Motion
The manifesto marquee.
Character shapes leadershipTrust is earned through behaviorHire for more than skillLeadership begins with integrityCharacter can be developedThe future belongs to trustworthy peopleCharacter shapes leadershipTrust is earned through behaviorHire for more than skillLeadership begins with integrityCharacter can be developedThe future belongs to trustworthy people
Character shapes leadershipTrust is earned through behaviorHire for more than skillLeadership begins with integrityCharacter can be developedThe future belongs to trustworthy peopleCharacter shapes leadershipTrust is earned through behaviorHire for more than skillLeadership begins with integrityCharacter can be developedThe future belongs to trustworthy people
Replacing placeholders
How to swap in brand assets.
All hero, book cover, and portrait imagery ships as data-lov-image-placeholder blocks with a written prompt and target dimensions. To replace them with real brand assets:
- Add the final image to
src/assets/. - Import it in the route file and swap the placeholder
<div>for an<img>. - Keep the surrounding aspect ratio classes so layouts stay stable.
All colors, type, and spacing are tokens in src/styles.css. Change the brand hex value there and every button, marquee, and accent updates in one place.