Owl Green

Owl Green is a playful, gamified design system bursting with energy and color. Inspired by language learning platforms, it uses bold greens, warm yellows, and rounded shapes to create a friendly, encouraging experience. Every interaction feels rewarding, with chunky buttons, bouncy animations, and a personality-rich interface that makes learning feel like play.

Primary#58CC02
Secondary#1CB0F6
Neutral#777777
Background#F7F7F7
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayNunito · 36px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H1Nunito · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H2Nunito · 22px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H3Nunito · 18px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyNunito · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallNunito · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionNunito · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

XP/StreakJetBrains Mono · 24px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

ButtonNunito · 15px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px

Owl Green is a playful, gamified design system bursting with energy and color. Inspired by language learning platforms, it uses bold greens, warm yellows, and rounded shapes to create a friendly, encouraging experience. Every interaction feels rewarding, with chunky buttons, bouncy animations, and a personality-rich interface that makes learning feel like play.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

SkillXPStreakLocked

List Node

Complete

Current

Locked

Checkbox

Default

Checked

Tooltip

Default

Bottom Tab

Normal

Active

Elevation & Depth

Level 1
Level 2
Level 3

Do's & Don'ts

Do

Use the chunky bottom-border elevation style for buttons and interactive cards
Provide immediate visual feedback for every interaction (color change, animation, sound cue)
Use the gold (#FFC800) for reward-related elements (XP, gems, streaks) only
Use rounded shapes everywhere; sharp corners feel wrong in this system
Celebrate success loudly: green flash, confetti, large checkmarks
Maintain the playful personality; even error states should feel encouraging, not punishing

Don't

Use thin, subtle elements; everything should feel bold and touchable
Mix more than three accent colors in a single view
Forget the pressed state: translate down + reduced border for tactile feel
Use small text; minimum body size is 14px for accessibility and readability
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 5.8 KB
Downloads 34
Copies 3
bold gamified mobile-app playful

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/owl-green and implement it in my code

Don't have the MCP? Install it here