{"id":"af2e0bc4-ef1c-4365-a25d-00b691218431","name":"Fictional","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","colors":[{"name":"Canvas Almond","hex":"#ffe9ce","role":"Main page background — a warm, inviting canvas for playful elements","group":"neutral","cssVariable":"--color-canvas-almond"},{"name":"Paper White","hex":"#ffffff","role":"Card surfaces, speech bubbles, primary text on dark backgrounds, ghost button borders","group":"neutral","cssVariable":"--color-paper-white"},{"name":"Type Black","hex":"#000000","role":"Primary text, prominent headings, strong outlines, and decorative fills","group":"neutral","cssVariable":"--color-type-black"},{"name":"Grape Punch","hex":"#8a53ff","role":"Card backgrounds, section separators, bringing a playful and energetic accent","group":"brand","cssVariable":"--color-grape-punch"},{"name":"Bubblegum Red","hex":"#fd4b38","role":"Spot illustrations, card backgrounds, accentuating elements with vibrant energy","group":"brand","cssVariable":"--color-bubblegum-red"},{"name":"Sunshine Yellow","hex":"#ffd80c","role":"Card backgrounds, decorative fills, button hover states, expressing cheerfulness","group":"accent","cssVariable":"--color-sunshine-yellow"},{"name":"Leafy Green","hex":"#3ccb09","role":"Card backgrounds, small highlight elements, used sparingly for a fresh pop","group":"accent","cssVariable":"--color-leafy-green"},{"name":"Deep Indigo","hex":"#0500a3","role":"Decorative text outlines and accent strokes, providing depth without heaviness","group":"accent","cssVariable":"--color-deep-indigo"},{"name":"Ash Gray","hex":"#666666","role":"Secondary text, link borders, subtler interface elements","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Light Gray","hex":"#dddddd","role":"Muted button backgrounds and subtle dividers","group":"neutral","cssVariable":"--color-light-gray"},{"name":"Input Gray","hex":"#101010","role":"Input text and borders","group":"neutral","cssVariable":"--color-input-gray"}],"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\""}],"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."]}}