No border wrapper. Gradient fill with hover transition to solid cyan.
Uses the hazy icon gradient as background. No border. Hover fills solid cyan.
Workflow trigger button
Confirm button
Cancel button
Delete button
Move-somewhere button
Icon button
Passive button
Link
A binary state toggle used for on/off settings. Two variants: with text label or with icons on either side.
With text label
With icons
All cards use liquid glass as the base aesthetic. Content inside is free-form — cards don't enforce a fixed internal structure. Use the variant prop on <Card> to select the right behaviour.
Glass card with a persistent shadow-md. Use for feature tiles, mode selectors, and any card that needs visual prominence.
Translation
LITERAL & PRECISE
Elevated at rest, interactive glow on hover, stays in glowing state when clicked. Use for selection cards where the user picks one option.
Translation
LITERAL & PRECISE
Localization
ADAPTIVE & NATURAL
Transcreation
CREATIVE & RE-IMAGINED
Click a card to toggle its selected state.
Glass card without any shadow. Use for informational content on hazy section backgrounds where elevation would be distracting.
The rules that never change. Your terminology, your tone, your "do not touch" list – applied everywhere, every time.
What works in Germany doesn't always work in France. LINA knows the difference and adapts without breaking your global standards.
Wrap a <Table> inside an elevated card for data grids.
| Tier | Seats | Segments | Price |
|---|---|---|---|
| Tier 1 | Up to 10 | 3,500 | €50/mo |
| Tier 2 | Up to 30 | 4,500 | €40/mo |
Glass card with a subtle shadow-sm. Used for FAQ and collapsible sections.
No shadow at rest, glow on hover. Use for clickable cards like blog teasers.
February 20, 2026
Your campaign is brand-approved and ready to go. So why does it land differently?
Small cards with hazy icon background, used for shortcut/quick-action panels.
QUICK ACTIONS
Quick Translation
Skip setup, use defaults
Knowledge Base
Manage terms
App forms identify required fields using a hazy gradient background (mandatory-field class) instead of a border or asterisk.
className="mandatory-field"No extra class needed.mandatory-field {
background: linear-gradient(135deg,
hsl(var(--primary) / 0.08),
hsl(var(--spectrum-amber) / 0.1));
}
.dark .mandatory-field {
background: linear-gradient(135deg,
hsl(var(--primary) / 0.15),
hsl(var(--spectrum-amber) / 0.18));
}Web forms use a border-primary (blue) border to indicate mandatory fields. Field labels end with an asterisk (*). Optional fields use the default border-input (grey) border.
This contextual text is optional to include
This contextual text is optional to include
This contextual text is optional to include
This contextual text is optional to include
This contextual text is optional to include
Target Markets *
This contextual text is optional to include
This contextual text is optional to include
This contextual text is optional to include
Source Document *
Upload a file or drag and drop
DOCX, PDF, XLSX, TXT, JSON
This contextual text is optional to include
Reference Material
Upload a file or drag and drop
DOCX, PDF, XLSX, TXT, JSON
This contextual text is optional to include
A binary mode selector for toggling between two input methods within the same form field.
Source Content *
Drop files here
This contextual text is optional to include
Additional Notes
Drop files here
This contextual text is optional to include
Reset in 12 days
Market Insights Found
We found 4 Glossary Terms and applicable Style Rules active for these markets.
Manage Preferences →Pro Tip: Selecting a specific channel enables our "Channel Standards Agent" to automatically check character limits and platform guidelines.