Nue Persona / Design system
Style guide
Typography, four color themes, and reusable components from the Nue Persona Figma library.
Inter Tight / Type scale
A voice with range.
Desktop and Mobile values come from the Figma Sizes collection. Resize the window to see the fluid scale.
Display
Make it meaningful.
H1
Make it meaningful.
H2
Make it meaningful.
H3
Make it meaningful.
H4
Make it meaningful.
H5
Make it meaningful.
H6
Make it meaningful.
Text large
Your brand deserves more than attention. It deserves a connection that lasts.
Text main
Your brand deserves more than attention. It deserves a connection that lasts.
Text small
Your brand deserves more than attention. It deserves a connection that lasts.
Spacing / Fluid scale
Room to breathe.
Each surface uses its named spacing token as padding. Section spacing follows the Small, Main, Large, and Page Top values in Figma.
Space 1
Space 2
Space 3
Space 4
Space 5
Space 6
Space 7
Space 8
light / Theme
Color with character.
Primary text, faded text, accent, border, and button states follow the Theme collection.
Secondary surface
Made to feel like you.
Hover the buttons or use Tab to review their keyboard focus states.
Here's the issue
A shared visual language.
Plain and pill eyebrows use the same H6 typography and theme accent.
dark / Theme
Color with character.
Primary text, faded text, accent, border, and button states follow the Theme collection.
Secondary surface
Made to feel like you.
Hover the buttons or use Tab to review their keyboard focus states.
Here's the issue
A shared visual language.
Plain and pill eyebrows use the same H6 typography and theme accent.
brand / Theme
Color with character.
Primary text, faded text, accent, border, and button states follow the Theme collection.
Secondary surface
Made to feel like you.
Hover the buttons or use Tab to review their keyboard focus states.
Here's the issue
A shared visual language.
Plain and pill eyebrows use the same H6 typography and theme accent.
brand 2 / Theme
Color with character.
Primary text, faded text, accent, border, and button states follow the Theme collection.
Secondary surface
Made to feel like you.
Hover the buttons or use Tab to review their keyboard focus states.
Here's the issue
A shared visual language.
Plain and pill eyebrows use the same H6 typography and theme accent.
Cards / Service & resource
Components with purpose.
Service cards reveal the Brand theme on hover and keyboard focus. Resource cards use the shared type scale and a local Figma image.
Brand Messaging + Positioning
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Brand Identity + Design
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Article
Resource Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lumos / Extended library
Layouts and interactions.
The existing component catalog inherits Nue Persona tokens. Layout, form, and interaction variants below remain available for later page work.
stack
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
stack · centered
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
auto-width
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
columns
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
columns · reverse
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
breakout
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
breakout · reverse
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
contain
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
contain · reverse
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
sticky-content
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
sticky-visual
We build brands that resonate.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
card
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
auto-width
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
form
Thanks — we will be in touch.
That did not send. Please try again.
buttons
We build brands that resonate.
tabs · horizontal
We build brands that resonate.
"Strategy"
Your brand deserves more than attention. It deserves a connection that lasts.
"Design"
Your brand deserves more than attention. It deserves a connection that lasts.
"Development"
Your brand deserves more than attention. It deserves a connection that lasts.
tabs · side
Services
Strategy
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Design
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Development
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
tabs · auto playback
We build brands that resonate.
"Tab Content 1"
Your brand deserves more than attention. It deserves a connection that lasts.
"Tab Content 2"
Your brand deserves more than attention. It deserves a connection that lasts.
"Tab Content 3"
Your brand deserves more than attention. It deserves a connection that lasts.
slider · bleed
We build brands that resonate.
slider · crop-start
We build brands that resonate.
Strategy
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Design
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Development
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Research
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Support
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
slider · contained
We build brands that resonate.
marquee
We build brands that resonate.
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
video
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.
rich-text
A heading the editor wrote
Rich text takes whatever a CMS hands it and gives every element the same rhythm the rest of the page uses, without a class on any of them.
A second level
- An item in a list
- Another item, longer, so it wraps onto a second line and the spacing between items can be read
A pull quote, styled from the parent.
A closing paragraph with a link inside it.
icon
We build brands that resonate.
accordion
We build brands that resonate.
This is some text inside of a div block.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is some text inside of a div block.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is some text inside of a div block.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is some text inside of a div block.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is some text inside of a div block.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
modal
We build brands that resonate.
Your brand deserves more than attention. It deserves a connection that lasts.