Remixes of wondering.app
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
Wondering embraces a warm, inviting aesthetic that balances playful curiosity with refined sophistication. The design system combines soft, earthy neutrals with vibrant accent blues to create an approachable yet premium learning environment. Featuring distinctive serif typography for display elements alongside clean sans-serif body text, the system conveys both intellectual depth and accessible friendliness. The generous use of whitespace, subtle shadows with tactile depth, and carefully considered color transitions foster a sense of calm exploration—perfect for a platform dedicated to making learning feel achievable and enjoyable.
Key Characteristics
#261412): Primary text, headings, and core UI elements; establishes brand warmth and sophistication#7ACEFF): Primary call-to-action buttons; signals interactivity and learning-focused actions#6B5752): Secondary text, captions, and subtle UI elements#D4CDC4): Dominant neutral background; creates soft, approachable surfaces#938880): Tertiary accents and mid-tone dividers#7ACEFF): Primary button fills and active states#4B5563): Interactive element borders and hover states#374151): Secondary interactive elements#FFFCF0): Primary light surface, page background, card backgrounds#F4F1E6): Secondary light surface, subtle contrast areas#D4CDC4): Tertiary neutral for borders and inactive states#D1D5DB): Subtle borders and dividers#E5E7EB): Minimal contrast dividers#BDB5AD): Disabled and muted text#FFFFFF): Pure white surfaces for maximum contrast when needed#0A0A0A): Deep shadows and high-contrast text#111827): Secondary dark text and deep accents| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Young Serif | 72px | 400 | 72px | 0px | Hero headlines, page titles |
| Heading / H2 | Inter | 20px | 700 | 28px | 0px | Section headings, major divisions |
| Subheading / H3 | Inter | 18px | 600 | 28px | 0px | Card titles, subsection headers |
| Body | Inter | 20px | 600 | 28px | 0px | Large body text, emphasis |
| Body Secondary | Inter | 16px | 400 | 24px | 0px | Standard paragraph text |
| Links | Inter | 20px | 400 | 28px | 0px | Hyperlinked text, inline links |
| List Item | Inter | 14px | 400 | 22.75px | 0px | List items, menu options |
| Button Text | Share Tech Mono | 12px | 500 | 16px | 0px | Primary action buttons |
| Caption | Inter | 12px | 400 | 16px | 0px | Fine print, footnotes |
| Code | Share Tech Mono | 12px | 400 | 16px | 0px | Code blocks, technical text |
#7ACEFF#26141212px 16px16px5001px solid #497E9C12pxrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(97, 165, 204) 0px 4px 0px 0px, rgb(73, 126, 156) 0px 5px 0px 0px50px200px)24px2px1px downward offset#BDB5AD text, #E5E7EB background, 0px shadow#FFFCF0#2614126px 12px12px5001px solid #BDB5AD8pxrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(212, 205, 196) 0px 4px 0px 0px, rgb(189, 181, 173) 0px 5px 0px 0px30px68px)16px1px, brighten background to #FFFFFFtransparent#6B57520px14px4000px0pxnone20px20px1px solid #6B5752, text color shift to #261412#261412, maintain underlinergba(0, 0, 0, 0) (transparent)#2614128px 12px14px4000px9999pxnone36px20pxrgba(212, 205, 196, 0.3), maintain transparency#FFFCF01px solid #D4CDC48px20pxrgba(0, 0, 0, 0.05) 0px 1px 2px 0pxrgba(0, 0, 0, 0.08) 0px 2px 4px 0px, border color shift to #BDB5AD#F4F1E612px24pxnone0pxrgba(0, 0, 0, 0) (transparent by default)#2614128px 12px14px4008px0px20pxrgba(212, 205, 196, 0.2), text color darken to #261412#D4CDC4, text bold weight 600#FFFFFF1px solid #D1D5DB8px12px 16px14px400#26141220px#BDB5AD#7ACEFF, box shadow 0px 0px 0px 3px rgba(122, 206, 255, 0.1)#E5E7EB, text color #BDB5AD, cursor not-allowed14px600#2614128px20px#FFFFFF1px solid #D1D5DB8px12px 16px14px400#26141220px#7ACEFF, shadow 0px 0px 0px 3px rgba(122, 206, 255, 0.1)transparent#26141216px40012px 16px8px24pxrgba(212, 205, 196, 0.15)600, background rgba(122, 206, 255, 0.1), text color #261412transparentrgba(255, 252, 240, 0.75)14px4000px0px20px#FFFCF0 (full opacity), underline 1px solid rgba(255, 252, 240, 0.5)rgba(122, 206, 255, 0.1)#2614124px 8px12px5009999px1px solid #7ACEFF16pxThe spacing system uses 4px as the base unit, scaling to 8px, 12px, 16px, 20px, 24px, 32px, 40px, 60px, 64px, 80px, and 96px for consistent rhythm and alignment.
1200px for main content areas20px gutters24px on mobile (320px width), 40px on tablet (768px width), 60px on desktop (1200px+ width)900px width), card grids with 24px gap between items, sidebar layouts with 2:3 or 1:2 ratiosGenerous whitespace throughout the design emphasizes clarity, breathing room, and reduced cognitive load. Vertical rhythm is maintained through consistent margin stacking (multiples of 8px). Content blocks are isolated via whitespace and subtle borders rather than heavy backgrounds, creating an open, inviting aesthetic that supports focus and learning.
| Level | Treatment | Use |
|---|---|---|
| Base | No shadow | Text, icons, flat content |
| Card | rgba(0, 0, 0, 0.05) 0px 1px 2px 0px | Default cards, subtle lift |
| Interactive (Small Button) | rgb(212, 205, 196) 0px 4px 0px 0px, rgb(189, 181, 173) 0px 5px 0px 0px | Secondary buttons, playful 3D depth |
| Interactive (Primary Button) | rgb(97, 165, 204) 0px 4px 0px 0px, rgb(73, 126, 156) 0px 5px 0px 0px | Primary CTA buttons, prominent interactivity |
| Raised (Hover) | rgba(0, 0, 0, 0.08) 0px 2px 4px 0px | Hovered cards, lifted elements |
| High (Custom) | rgb(173, 225, 255) 0px 4px 0px 0px, rgb(148, 216, 255) 0px 5px 0px 0px | Special highlights, accent focus states |
Shadow Philosophy The shadow system embraces a playful, tactile 3D aesthetic with visible depth effects. Shadows are predominantly flat, offset downward layers (inspired by skeuomorphism) rather than diffuse soft shadows, creating a friendly, handcrafted feel. Color-tinted shadows (warm taupes for neutral elements, cool blues for interactive elements) reinforce the brand's warm-cool harmonic balance and make elevation hierarchy immediately readable.
110203040#7ACEFF) for primary CTAs to draw attention and signal actionable moments48px touch targets for all interactive elements on mobile devices#261412 deep brown as primary text to establish warm, confident hierarchy4.5:1 for normal text)20px) and border radius (8px)#261412 or #111827 for warmth and brand consistency0.70 opacity for body content; reserve opacity shifts for secondary/disabled states only48px minimum (buttons/links) in mobile viewports| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single-column layout, full-width buttons, stacked cards, 24px container padding, 16px section margins |
| Tablet | 768px–1023px | Two-column layouts, flexible button widths, 40px container padding, 24px section margins, touch-optimized spacing |
| Desktop | 1024px–∞ | Full multi-column grids, optimized spacing (60px padding), 32px section margins, hover states enabled |
48px × 48px on mobile and tablet viewports44px on touch devices (vs. 30px–50px on desktop)44px × 44px minimum16px gap to prevent accidental taps44px minimum height for tap safety; 16px minimum font size to prevent browser zoom on iOS48px (mobile) to 72px (desktop); body scales from 16px (mobile) to 20px (desktop)25% on mobile (e.g., 80px sections become 60px)20px to 16px on mobile768px; footer nav stacks vertically1200px on desktop but adapts to 100% − 2× padding on smaller screens#7ACEFF)#261412)#FFFCF0)#6B5752)#D4CDC4)#4B5563)#BDB5AD)#0A0A0A)Establish the hierarchy using Young Serif (72px, weight 400) for display headlines, Inter (20px, weight 700) for H2 headings, and Inter (20px, weight 600) for body emphasis. All other text defaults to Inter 16px–14px at weight 400.
Apply color roles consistently: #261412 for all primary text and interactive elements, #7ACEFF for primary CTAs only, #FFFCF0 for default backgrounds, and #D4CDC4 for borders and neutral dividers.
Design buttons with tactile shadows: Primary buttons use Share Tech Mono 12px weight 500, #7ACEFF background with shadow rgb(97, 165, 204) 0px 4px 0px 0px, rgb(73, 126, 156) 0px 5px 0px 0px; secondary buttons use #FFFCF0 background with shadow rgb(212, 205, 196) 0px 4px 0px 0px, rgb(189, 181, 173) 0px 5px 0px 0px.
Use consistent spacing: Padding inside components uses 12px or 16px; gaps between components use 20px–24px; section-level margins use 40px–80px. Scale down by 25% on mobile.
Round component corners appropriately: Buttons and small inputs use 8px, larger cards use 12px, and pills use 9999px. Text-only links remain 0px.
Maintain minimum touch targets of 48px × 48px on mobile; ensure 16px minimum gap between clickable areas.
Apply border radius only to container corners, not to text, selections, or placeholders. Use 1px borders for input fields and cards only.
Test all color combinations against WCAG AA contrast requirements (4.5:1 minimum for normal text). Use #0A0A0A for maximum contrast when needed.
Provide clear hover/active states: Shift shadow depth (reduce by 2px or increase opacity), modify text weight or color by 10%–15%, and add subtle background color shifts (rgba(212, 205, 196, 0.1–0.2)).
Use opacity strategically: Disabled state defaults to 0.70; hover/focus backgrounds use 0.85; secondary text uses 0.91. Never go below 0.70 for readable body text.