flowmanceTrönic Design System
Trönic is a dark, calm creative-studio site. It is set entirely in one wide, rounded display face (Clash Display) in a pale icy cyan (#DCF2F4) on near-black (#111314), and almost all of its photography is black and white. The hero is a centred four-line statement with a hand-drawn loop around the word creative, which gives the otherwise strict page one loose, human mark.
Four signatures make it recognisable:
- Icy ink on near-black. Text is #DCF2F4, never pure white; the button and hover fills are a powder blue #B8DBDF. Apart from the red #FF3A1B blog tag, there is no warm colour in the interface.
- The scribbled hero. We're a / creative / digital / studio. at 144px, weight 600, line height 1.0, centred, with a grey-teal hand-drawn oval looping around creative. A line-drawn paper plane sits in the bottom-left corner.
- Three-column hero composition. A short paragraph top-left, the big statement in the centre, and a second paragraph plus a LET'S TALK underlined link bottom-right, on a 0.6fr 1fr 0.6fr grid.
- Black-and-white work strip. Featured works above a row of square-cornered greyscale images (ratio 1.55, about 670×432) that runs off the right edge and moves sideways with scroll.
Colors
Surfaces
#111314Page background, menu overlay (CSS --black)
#1F2224Service cards (CSS --black-2)
#D6D1CA · 18%1px input border
Ink
#111314Text on primary
#FFFFFFText on primary-hover
#DCF2F4All headings and text (CSS --azure)
#DCF2F4Body text is the same full ink; there is no muted text colour
#FFFFFFSocial and menu icons, tag text, footer link hover
#FFFFFFAction
#B8DBDFFilled button (Send Proposal) (CSS --powder-blue)
#2D3133Button on hover
#B8DBDFThe line that grows over text links, the menu hover fill, blog-title hover, blockquote rule
Lines & effects
#111314 · 95%Sticky header background
#FFFFFF · 30%1px base line under text links
#FFFFFF · 40%1px border of the back-to-top square
#DCF2F4 · 17%Divider under each testimonial row
#222527Top and bottom rules between menu links
#18939EStart of the one gradient on the page, linear-gradient(149deg, #18939E, #B8DBDF)
#00663FBlog category tags (Marketing, Design, Code)
#000DFFBlog category tags (Marketing, Design, Code)
#FF3A1BBlog category tags (Marketing, Design, Code)
Typography
Clash Display · display-hero
The quick brown fox jumpsWe're a / creative / digital / studio. 144px · 600 · 1.0
Clash Display · headline-xl
The quick brown fox jumpsLarge headings lower on the page (2 on the home page). 60px · 600 · 1.0
Clash Display · title-lg
The quick brown fox jumpsBlog card titles. 30px · 600 · 1.1
Clash Display · body-quote
The quick brown fox jumpsTestimonial quotes and blockquotes (22px at ≤479px). 27px · 500 · 1.15
Clash Display · label-button
The quick brown fox jumpsButton label, body links. 17px · 600 · 1.18
Clash Display · eyebrow
The quick brown fox jumpsLET'S TALK, LEARN MORE underlined links. 13px · 600 · 1.54 · 2px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container max 1200px, centred |
| Section padding | 100px top and bottom, 5% left and right (72px at 1440px) |
| Breakpoints | 991px, 767px and 479px, plus a min-width: 768px set |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 10px | |
sm | 16px | |
md | 30px | |
lg | 40px | |
xl | 50px | |
2xl | 80px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
hero-top | 60px | |
nav-height | 84px | |
section | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Line rise | Text moves y 100% (or 110%) → 0% inside overflow-hidden wrappers, 600ms outBack |
| Fade-up on scroll | opacity 0 → 1 and y 20px → 0, 300ms outCubic |
| Slow fade | opacity 0 → 1 and move to 0, 0, 1000ms outQuart |
| Pop-in | scale 0 → 1, 600ms outExpo |
| Slide-in | x → 0%, 500ms outBack |
| Link line and menu fill | Size change on hover, 300–500ms ease |
| Image hover | Filter changes at 200, 300 and 400ms ease |
| Menu | Display to flex, opacity 200–500ms, hamburger lines rotate 200ms ease |
| CSS | Buttons 0.2s, blog titles 0.3s, all |
Do’s and don’ts
- Use canvas #111314 with ink #DCF2F4 for all text, including body copy.
- Set everything in Clash Display: 600 for headings with no tracking, 500 for body, uppercase only for 11–13px labels with 1–2px tracking.
- Give the hero one hand-drawn line element (a loop or underline) around a single word.
- Show work as square-cornered black-and-white images at about 1.55:1 in a horizontal strip.
- Use #B8DBDF for the button (with #111314 text, 4px radius, 15px 23px padding) and for every hover line and fill.
- Use #1F2224 cards with large empty space between the icon at the top and the text at the bottom.
- Use pure white for text; #FFFFFF is for icons, tag text and the footer link hover only.
- Add warm accents, gradients on large areas or shadows.
- Round cards or images; the largest radius on a box is 5px (inputs).
- Mix in a second typeface or a light weight; only 500, 600 and 700 are loaded.
- Use saturated colour photography in the work strip; keep it greyscale.
- Use the tag colours #00663F, #000DFF or #FF3A1B outside blog category tags.
Example prompt
Any page in the Trönic style
More design systems like this
Agency design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Trönic design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/tronic.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows