neylo / Design system v2
A clear system for connected ideas.
Warm ivory, forest green, and soft lime accents. These are the shared styles used across neylo.
Brand / Growing arches
Logo kit & downloads
Two growing green arches form the neylo mark. The logo kit includes outlined SVGs, PNG sizes, browser icons, and native mobile assets.
01 / Color
Use the header toggle to compare light and dark.
Forest
Primary action
Ink
Brand stage
Paper
Light canvas
Sage
Quiet emphasis
Lime
Illustration accent
Mist
Editorial accent
bg-default
A surface with purpose.
Semantic colors adapt to the mode.
bg-muted
A surface with purpose.
Semantic colors adapt to the mode.
bg-elevated
A surface with purpose.
Semantic colors adapt to the mode.
02 / Typography
Clarity first. Character in the details.
Ideas that build on each other.
Use the system sans throughout, with bold, tightly spaced headings and calm, readable body text.
Display 44–68 · Heading 32–48 · Body 16 · UI 14
03 / Actions
Examples below demonstrate appearance only.
Default controls are at least 44px high. Keep one primary action per decision.
04 / Inputs
Local examples. Changes here are not saved.
Example checkbox state.
Example switch state.
05 / Status & feedback
06 / Navigation
Writing keeps the content itself in focus.
07 / Structured content
Illustrative rows for reviewing the table theme.
| Article | Origin | Status |
|---|---|---|
| The email marketing guide | Imported article | Published |
| Writing a welcome email | Generated draft | Awaiting review |
| Building an email series | Suggested topic | Draft |