{"id":"af2e0bc4-ef1c-4365-a25d-00b691218431","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/af2e0bc4-ef1c-4365-a25d-00b691218431","originalSiteUrl":"https://fictional-typeface.com","capturedAt":"2026-04-30T02:12:52.873Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Fictional","summary":"Whimsical Sticker Bomb","description":"The Fictional design system embodies a playful and energetic aesthetic, reminiscent of a vibrant children's book. It leverages a lively palette of saturated brand colors against a warm, neutral background. Typography is central to the visual identity, using a custom font that radiates personality. Components feature rounded, often irregular shapes, minimal shadows, and bold color accents, creating an approachable and whimsical user experience.","industry":"design","colorScheme":"light","colors":[{"name":"Canvas Almond","hex":"#ffe9ce","role":"Main page background — a warm, inviting canvas for playful elements","group":"neutral"},{"name":"Paper White","hex":"#ffffff","role":"Card surfaces, speech bubbles, primary text on dark backgrounds, ghost button borders","group":"neutral"},{"name":"Type Black","hex":"#000000","role":"Primary text, prominent headings, strong outlines, and decorative fills","group":"neutral"},{"name":"Grape Punch","hex":"#8a53ff","role":"Card backgrounds, section separators, bringing a playful and energetic accent","group":"brand"},{"name":"Bubblegum Red","hex":"#fd4b38","role":"Spot illustrations, card backgrounds, accentuating elements with vibrant energy","group":"brand"},{"name":"Sunshine Yellow","hex":"#ffd80c","role":"Card backgrounds, decorative fills, button hover states, expressing cheerfulness","group":"accent"},{"name":"Leafy Green","hex":"#3ccb09","role":"Card backgrounds, small highlight elements, used sparingly for a fresh pop","group":"accent"},{"name":"Deep Indigo","hex":"#0500a3","role":"Decorative text outlines and accent strokes, providing depth without heaviness","group":"accent"},{"name":"Ash Gray","hex":"#666666","role":"Secondary text, link borders, subtler interface elements","group":"neutral"},{"name":"Light Gray","hex":"#dddddd","role":"Muted button backgrounds and subtle dividers","group":"neutral"},{"name":"Input Gray","hex":"#101010","role":"Input text and borders","group":"neutral"}],"typography":[{"role":"The primary and only typeface, designed to be quirky and highly expressive. Its wide range of sizes and single weight imply a focus on visual impact over traditional typographic hierarchy, with stylistic alternates for a custom feel.","sizes":"16px, 22px, 29px, 36px, 37px, 40px, 43px, 48px, 50px, 72px, 115px, 202px, 346px","family":"Fictional","weight":"400","weights":[400],"lineHeight":"0.90, 1.00, 1.10, 1.20, 1.30, 1.40, 1.67, 1.71, 1.88","substitute":"Comic Sans MS","letterSpacing":"0.0120em","fontFeatureSettings":"\"ss01\" on, \"dlig\""}],"typeScale":[{"role":"body-sm","size":16,"lineHeight":1.71},{"role":"body","size":22,"lineHeight":1.4},{"role":"subheading","size":29,"lineHeight":1.3},{"role":"heading-sm","size":36,"lineHeight":1.2},{"role":"heading","size":48,"lineHeight":1.2},{"role":"heading-lg","size":72,"lineHeight":1.1},{"role":"display","size":346,"lineHeight":0.9}],"spacing":{"radius":{"cards":"15px","buttons":"5px","speechBubbles":"144px"},"elementGap":"12px","sectionGap":"30px","cardPadding":"29px"},"radius":{"cards":"15px","buttons":"5px","speechBubbles":"144px"},"shadows":{"surfaces":[{"hex":"#ffe9ce","name":"Canvas Almond","level":0,"purpose":"The foundational page background, providing a warm and inviting base."},{"hex":"#ffffff","name":"Paper White","level":1,"purpose":"Primary surface for cards, speech bubbles, and light background elements, offering contrast."},{"hex":"#dddddd","name":"Light Gray","level":2,"purpose":"Used for subtle background elements and muted buttons, providing a slight elevation or distinction."},{"hex":"#8a53ff","name":"Accent Surfaces","level":3,"purpose":"Vividly colored card and section backgrounds (Grape Punch, Sunshine Yellow, Bubblegum Red, Leafy Green) to create energetic focus areas."}]},"guidelines":{"do":["Always use the Fictional typeface for all text elements to maintain brand personality.","Utilize Canvas Almond (#ffe9ce) as the primary page background color for a warm, inviting foundation.","Apply a 15px border-radius for general cards and rectangular accent elements, reserving 5px for smaller buttons and 144px for speech bubble shapes.","Employ Type Black (#000000) for all primary text content to ensure high contrast against light backgrounds.","Incorporate vibrant accent colors like Grape Punch (#8a53ff), Sunshine Yellow (#ffd80c), and Bubblegum Red (#fd4b38) for card backgrounds and highlight elements to create visual energy and playfulness.","Space elements using multiples of the 6px base unit, with a preference for `elementGap` of 12px for tight clusters and `cardPadding` of 29px for content blocks.","Use ghost buttons with Paper White text and borders for navigation and secondary actions to maintain a light, non-obtrusive interface."],"dont":["Avoid using traditional box-shadows; instead, rely on vibrant background colors and irregular shapes for element definition.","Do not introduce additional font families; the Fictional typeface is the sole typographic voice of the brand.","Refrain from using heavily structured grid layouts; allow elements to be positioned more organically, like 'sticker bombing'.","Do not use dark, desaturated colors as primary background elements; the system thrives on a light, warm canvas with vivid accents.","Avoid strictly symmetrical or rigid component designs; embrace rounded corners and slightly irregular forms.","Never use generic blue for primary interactive elements; leverage the brand's vibrant palette, especially Grape Punch, Leafy Green, or Bubblegum Red.","Do not apply padding to ghost buttons; they should appear as text-only interactive elements framed by their borders."]},"components":[{"name":"Ghost Button","role":"Interactive elements with minimal visual footprint, relying on text and soft borders."},{"name":"Speech Bubble Card","role":"Informative elements or callouts, designed with a hand-drawn, cartoonish feel."},{"name":"Colorful Round Card","role":"Highlighting key features or interactive elements, often with vivid colors."},{"name":"Accent Filled Button","role":"Secondary action buttons or tags, visually distinct from ghost buttons."},{"name":"Interactive Input","role":"Basic text input field allowing user data entry."},{"name":"Quirky Card","role":"Containers for content, using a variety of vibrant brand colors with a consistent rounded edge."},{"name":"Callout Label (Red)","role":"Small, urgent, or promotional tags, drawing immediate attention."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference: \ntext: #000000\nbackground: #ffe9ce\nborder: #ffffff\naccent: #8a53ff\nprimary action: no distinct CTA color\n\nExample Component Prompts:\n1. Create a hero section with 'Fictional' as the main headline: use Canvas Almond (#ffe9ce) background. Headline 'Fictional' is Type Black (#000000) using Fictional font at 346px, with a 0.9 lineHeight. Overlay a circular accent card behind 'NEW!' with Leafy Green (#3ccb09) background and Paper White text at 16px Fictional. This card should have a 100% border-radius and 8px padding.\n2. Design a feature block: Full-width section with Grape Punch (#8a53ff) background. Display 'Fictional Light' as a heading (Fictional font, 48px, Paper White text, 1.2 lineHeight). Center this text vertically.\n3. Create an informational speech bubble: Paper White (#ffffff) background with exaggerated 144px border-radius, 28.8px vertical and 43.2px horizontal padding. Body text 'A friendly & quirky typeface' in Type Black (#000000) at 22px Fictional, 1.4 lineHeight."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777515147387-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777515147387-thumb.jpg"},"similarStyleIds":["7d254296-6817-487a-a58c-4d5eca89cbf3","ab650279-aa18-43e5-a998-34190d7bedc7","0ae2e849-7a1f-432a-89c6-b49d4a988300","3e5c272b-8d68-40d8-9726-b4d6914b4b16","15f0809b-b7e0-4824-844f-286c39f4accf","ad529e8a-3427-4152-bed9-6ec5097f25b6","6b201ccd-16ae-4c2d-84bb-498f7cb568dd","e6a3facd-791c-4cc6-868d-2c6382d3cb0a","9fecf7d6-b717-49ca-8edc-b10d6110b21c","1b13360a-cdca-4798-969d-57ebb20a3b30","c363a216-873c-4112-b960-8e823db76f74","0e8db8d0-4d8f-48ac-a8e7-aaea9601e3ce","1bcae895-2245-4d33-aa43-1c1e80719554","d67e1407-6d16-47e8-89cf-22f5c5f2dd88","d1f5ece3-ec6c-467d-8a59-51ee259cc023","0c77bb2a-c7cd-499b-b5cd-90268eefe906","2175034b-96d7-417e-886f-ff5a4d8551ae","ff8f39ee-a10e-4a9d-a94d-6993c6084060","274e85fb-a34d-4e41-9369-be03065b971b","3677bc04-7461-4aa4-aec7-5291bac41b0b"],"exports":{"designMdUrl":"/references/refero/af2e0bc4-ef1c-4365-a25d-00b691218431/design.md","tokensJsonUrl":"/references/refero/af2e0bc4-ef1c-4365-a25d-00b691218431/tokens.json","tailwindV4Url":"/references/refero/af2e0bc4-ef1c-4365-a25d-00b691218431/tailwind-v4.css","cssVariablesUrl":"/references/refero/af2e0bc4-ef1c-4365-a25d-00b691218431/tailwind-v4.css"}}