srcl

SRCL 1.1.8

SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics.

⌃+OFonts

⌃+TTheme

⌃+GGrid

⭢Hire our studio to build your applications

⭢View the SRCL source code

⭢Try our hosting provider Vercel

▾ACTION BAR

The action bar is a container for primary and secondary actions styled with a monospace font. Positioned at the top or bottom of an interface, it organizes elements like menu options, navigation buttons, titles, or search fields.

EXAMPLE

⌘+1Example I

⌘+2Example II

⌘+3Example III

▾ACCORDION

Accordion components are vertically stacked, expandable panels designed for efficient use of space in monospace-driven layouts, often inspired by classic terminal interfaces. Each panel consists of a header and its corresponding content area, allowing users to toggle between a condensed summary and detailed information.

EXAMPLE

▸ACCORDION EXAMPLE

▾ACTION BUTTONS

Action buttons let users perform actions. They are used for task-based options within a workflow and work well in interfaces where buttons need to stay understated.

EXAMPLE

⌘+SSave

▾ACTION LIST

Action lists are a vertical list of interactive actions or options. It displays items in a single-column format with space for icons, descriptions, side information, and other visuals. The monospace font ensures clarity and consistency.

EXAMPLE

⭡Hide item example

⭢Next item example

⭣Show item example

⭠Return item example

⊹Action item example

⊹Visit the studio website

▾ALERT BANNER

Alert banners display important messages across the user interface. It communicates system-wide issues, errors, warnings, or informational updates. Typically placed at the top of a page, it includes a clear message and may provide an action for the user. Alert Banners can be dismissed after being read, helping users stay informed about significant changes or information.

EXAMPLE

When things reach the extreme, they alternate to the opposite.

▾APPLICATION SYSTEM/400 EXAMPLE

The Application System 400 (AS/400) is a line of servers and network adapters from IBM that was designed to help businesses manage their data, applications, and systems infrastructure. This usage example is a tribute to the interfaces those servers had.

COMMANDMenu : ⌃+TIND333

F O O D D I S T R I B U T I O N

- - Advance Sales Menu - -

1. Order Entry	13. Create Texlon/MSI Orders
2. Route Recap	14. Create Posting w/Scanner
3. Staging Ticket
4. Picking Ticket	15. Order List
5. Order Posting	16. Order Maintenance
6. Bill of Lading	16. Order Hold
7. Load Sheets	18. Order Release
8. Order Entry Invoicing	19. Order Cancellation
9. Order Entry Confirmation	20. Order Change
10. Order Entry Processing	21. Unsettled Invoice Report

11. Credit Memo Entry	- - Transaction Processing Menu - -
12. Credit Memo Processing	- - Main Menu - -
	24. Sign Off

Ready for option number or command

Option: 1337... Copy: US ITEM ACTIVITY INQUIRY	IND333
Regn: NW
Item #: 6666666
GMO HONEYDEW MELON USDA PRIME 72 OZ

Warehouse	On Hand	On Order	In Transit	Total	W/S	Sell

01 SEATTLE	0	0	0	0	.0	8.88
02 PORTLAND	0	0	0	0	.0	8.88
06 TUKWILA	89	162	162	413	7.0	8.88
08 KIRKLAND	0	0	0	0	.0	8.88
09 ALOHA	0	0	0	0	.0	8.88
10 ANCHORAGE	107	0	324	511	5.5	8.88
13 SILVERDALE	0	0	0	0	.0	8.88
17 EUGENE	0	0	0	0	.0	8.88
61 FEDERAL WAY	0	0	0	0	.0	8.88
63 NE ANCHORAGE	229	0	162	391	4.5	8.88
64 TUMWATER	0	0	0	0	.0	8.88
67 MISSOULA	201	648	0	849	5.2	8.88
95 TACOMA	0	0	0	0	.0	8.88

CF-3 Exit CF7-Next Item CF21-Print Report

▾AVATARS

Avatars identify users or entities in the interface. It can display an image, initials, or an icon, offering a visual connection to the user. Avatars appear in headers, comments, profiles, and messages. They provide quick recognition and add a personal touch to the digital experience.

EXAMPLE

ANDREW ALIMBUYUGUEN
Webmaster

ANASTASIYA URALEVA
Webmaster

ELIJAH SEED ARITA
Webmaster

CAIDAN WILLIAMS
Webmaster

CHENYU HUANG
Webmaster

HANNAH SUH
Webmaster

JIMMY LEE
Staff Janitor

▾BADGES

Badges communicate status, notification counts, or attribute labels. Typically circular or pill-shaped, they display a number or short text, often overlaid on an icon or element. Badges highlight updates, unread messages, or categorize items with status indicators. They provide critical information at a glance, improving navigation and user engagement.

EXAMPLE

Example

▾BAR LOADER

A long loader is a visual element that signals ongoing activity or progress, reassuring users that a task is being processed. Commonly used during actions like data fetching or file uploads, it provides feedback to reduce uncertainty.

EXAMPLE

▾BLOCK LOADER

A block loader is a visual indicator that signals ongoing activity or progress while occupying only a single character of space. It reassures users that a task is being processed or that activity is occurring.

EXAMPLE

⠁
⣾
▖
▁
▉
←
┤
◢
◰
◴
◐
�

▾BLOG POST

A blog post can be composed of various components from our component repository. Typically, blog posts include breadcrumbs, an avatar, the author’s name, the publication date, and the blog post content.

POST

CHRISTOPHER ALEXANDER
1-1-2002

I believe that we have in us a residue of a world-picture which is essentially mechanical in nature – what we might call the mechanist-rationalist world picture ... Like an infection it has entered us, it affects our actions, it affects our morals, it affects our sense of beauty.

This is a picture of a world made of atoms which whirl around in a mechanical fashion: a world in which it is assumed that all the universe is a blind mechanism, whirling on its way, under the impact of the ‘laws of nature.’ These laws are, essentially, those mechanistic laws which explain how the atoms and the structures made of these atoms proceed on their way ... Even though we would admit that the precise laws and mechanisms may not be known, we assume that underlying our ignorance there are some laws, not quite formulated, which do account for how things work ...

I have reached the conclusion that the strange fantasies, the private in-house language about architecture, the strange nature of 20th-century gallery art, deconstructionism, postmodernism, modernism and a host of other ‘isms’, all of which affect our physical world hugely, are created because of an entanglement between the nature of architecture, the practice of architecture, and the mechanical conception of the universe.

More precisely, I believe that the mistake and confusion in our picture of the the art of building has come from our conception of what matter is.

The present conception of matter, and the opposing one which I shall try to put in its place, may both be summarized by the nature of order. Our idea of matter is essentially governed by our idea of order ... So it is the nature of order which lies at the root of the problem of architecture ...

When we understand what order is, I believe we shall better understand what matter is and then what the universe itself is.

▾BREADCRUMBS

Breadcrumbs display the current page or context within a website or application. They show the hierarchy and navigation path, helping users understand their location. Breadcrumbs allow users to navigate back through levels or categories and are especially useful for deeply nested pages.

EXAMPLE

▾BUTTONS

Button components are essential interactive elements within SRCL, facilitating actions like navigation, form submission, and command execution.

EXAMPLE

Disabled Button

▾BUTTON GROUP

Button groups organize related actions within a shared container, offering quick access to frequently used tasks. These buttons are visually connected to emphasize their relationship and can also indicate a selected state.

EXAMPLE

16 PX

32 PX

42 PX

16 PX

32 PX

42 PX

C

We are searching for some kind of harmony between two intangibles: a form which we have not yet designed and a context which we cannot properly describe.

▾CHECKBOX

▾CHESSBOARD

A minimal 8×8 component that maps alphanumeric piece identifiers to Unicode chess symbols, uses alternating squares, and includes labeled rows and columns. Simply provide an 8×8 array of piece codes or empty strings for blank squares. Perfect for rendering classic chess scenes.

DEFAULT

	A	B	C	D	E	F	G	H
8	♜	♞	♝	♛	♚	♝	♞	♜
7	♟	♟	♟	♟	♟	♟	♟	♟
6
5
4
3
2	♙	♙	♙	♙	♙	♙	♙	♙
1	♖	♘	♗	♕	♔	♗	♘	♖

▾BAD BISHOP

The “Bad Bishop” describes a bishop locked on squares of its own color by its own pawns, stifling its mobility. In this example from chess.com, Black’s bishop on B-7 is hindered by its own pawns and cannot be freed easily. Coincidentally, Bad Bishop is also one of the best Seattle bars (704 1st Ave), it is known for its creative cocktails and lively atmosphere.

BAD BISHOP

	A	B	C	D	E	F	G	H
8	♜			♛		♜	♚
7		♝				♟	♟	♟
6	♟		♟	♝	♟	♞
5			♟	♟
4	♕			♙
3			♙		♙	♘	♗
2	♙	♙		♘		♙	♙	♙
1	♖				♔			♖

▾CHECKMATE

In chess, the en passant rule allows a pawn to capture an enemy pawn that has just made a two-square advance, moving to the square it bypassed as if it had only advanced one square. This unique rule prevents a pawn from escaping capture by skipping past an opponent. In the scenario below, White uses en passant to deliver checkmate, leaving Black’s king with no legal moves.

EN PASSANT

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞		♟		♚
6		♛		♘	♟
5		♟	♟	♞	♙		♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞				♚
6		♛		♘	♟
5		♟	♟	♞	♙	♟	♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞				♚
6		♛		♘	♟	♙
5		♟	♟	♞			♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

▾CODE BLOCKS

Code blocks display code examples clearly and concisely, making them easy to read, copy, and use. This version has line numbers that are not user selectable.

CODE

001#include <iostream>
002#include <string>
003#include <thread>
004#include <asio.hpp>
005
006using asio::ip::tcp;
007
008void handle_client(tcp::socket socket) {
009    try {
010        std::string message = 
011            "HTTP/1.1 200 OK\r\n"
012            "Content-Type: text/plain\r\n"
013            "Connection: close\r\n"
014            "\r\n"
015            "Hello, World!";
016        asio::write(socket, asio::buffer(message));
017    } catch (...) {}
018}
019
020int main() {
021    asio::io_context context;
022
023    tcp::acceptor acceptor(context, 
024        tcp::endpoint(tcp::v4(), 8080));
025
026    std::cout << "Server running on port 8080...\n";
027              
028    while (true) {
029        tcp::socket socket(context);
030        acceptor.accept(socket);
031        std::thread(handle_client, std::move(socket)).detach();
032    }
033
034    return 0;
035}

The Andes dominate western South America with ragged peaks and hidden valleys. Llamas graze on high plateaus, and glaciers feed the rivers far below.

FAVORITE

DONATE

LEARN MORE

▾DATA TABLE

Data tables are for organizing large datasets into rows and columns for clear visibility and easy interpretation. It is used in scenarios like reporting systems, dashboards, and list views where data needs comparison, analysis, or manipulation. Features like sorting, filtering, pagination, and inline editing make data handling more efficient. The entire table width is limited to 64ch to fit the grid precisely.

STATIC

NAME	SYMBOL	PRICE	HOLDINGS
Bat	BAT	$9.01	400
Bear	BR	$56.78	200
Camel	CML	$55.67	70
Cheetah	CHT	$13.45	150
Crab	CRB	$15.67	250
Deer	DER	$29.99	110
Dolphin	DLP	$77.89	50
Eagle	EGL	$45.67	90
Falcon	FLC	$40.22	85
Fox	FOX	$12.34	100
Frog	FRG	$7.89	400
Giraffe	GRF	$44.56	80
Hedgehog	HDG	$11.23	200
Horse	HRS	$54.32	70
Kangaroo	KNG	$15.67	120
Koala	KLA	$22.34	150
Leopard	LPR	$14.56	110
Lemur	LMR	$11.12	320
Lion	LION	$67.89	80
Lynx	LNX	$16.78	130
Mouse	MSE	$5.12	500
Octopus	OCT	$88.90	40
Otter	OTR	$20.21	180
Owl	OWL	$19.01	160
Panda	PND	$78.90	55
Peacock	PCK	$12.34	100
Penguin	PNG	$33.45	90
Porcupine	PRC	$17.89	140
Rabbit	RBT	$9.10	350
Raccoon	RCC	$18.90	150
Shark	SHK	$89.01	50
Snake	SNK	$10.11	300
Squirrel	SQL	$10.12	250
Tiger	TGR	$34.56	120
Turtle	TRL	$66.78	60
Whale	WHL	$123.45	30
Wolf	WLF	$23.45	150
Zebra	ZBR	$65.43	60

UPDATING

NAME	SYMBOL	PRICE	HOLDINGS
Bat	BAT	$9.01	400
Bear	BR	$56.78	200
Camel	CML	$55.67	70
Cheetah	CHT	$13.45	150
Crab	CRB	$15.67	250
Deer	DER	$29.99	110
Dolphin	DLP	$77.89	50
Eagle	EGL	$45.67	90
Falcon	FLC	$40.22	85
Fox	FOX	$12.34	100
Frog	FRG	$7.89	400
Giraffe	GRF	$44.56	80
Hedgehog	HDG	$11.23	200
Horse	HRS	$54.32	70
Kangaroo	KNG	$15.67	120
Koala	KLA	$22.34	150
Leopard	LPR	$14.56	110
Lemur	LMR	$11.12	320
Lion	LION	$67.89	80
Lynx	LNX	$16.78	130
Mouse	MSE	$5.12	500
Octopus	OCT	$88.90	40
Otter	OTR	$20.21	180
Owl	OWL	$19.01	160
Panda	PND	$78.90	55
Peacock	PCK	$12.34	100
Penguin	PNG	$33.45	90
Porcupine	PRC	$17.89	140
Rabbit	RBT	$9.10	350
Raccoon	RCC	$18.90	150
Shark	SHK	$89.01	50
Snake	SNK	$10.11	300
Squirrel	SQL	$10.12	250
Tiger	TGR	$34.56	120
Turtle	TRL	$66.78	60
Whale	WHL	$123.45	30
Wolf	WLF	$23.45	150
Zebra	ZBR	$65.43	60

▾DATE PICKER

A date picker is a UI control for selecting dates, and sometimes time, through a visual calendar interface inspired by MS-DOS. It ensures accurate date input and avoids formatting errors. Commonly used in forms, scheduling, or date-related tasks.

EXAMPLE

2012 DECEMBER

2024 DECEMBER

▾DASHBOARD RADAR EXAMPLE

The Dashboard Radar Example is a visual homage to Brian Wyvill, the creator of the iconic Nostromo interface in Alien 1979. This example using SRCL components recreates the orbital simulations that brought a sense of realism to the movie’s early scenes.

The original AOS (Alien Orbit Simulator) was inspired by the moment when the Nostromo’s crew awakens to decipher a distress signal, this adapation depicts the kind of graphical representation that could chart complex trajectories around distant planets.

DEORBITAL DESCENT

COMMENCE FINAL

SYSTEM :0L: 76.75 :08:

▾DENABASE EXAMPLE

The Denabase component is a tribute to the work of Territory Studio in the movie Blade Runner 2049. It draws inspiration from a DNA database containing an archive of individual DNA cards. They explored various card systems to capture a sense of physicality.

TR5342120027455925897981

02.14.2021

T-CA-AA-AA-TA-TC-GG-GC-AC-AT-TA-TT-TA-TT-TG-CC-GC-TC-GG-GA-AG-TA-GA-A
A-TG-GT-AC-AT-GT-GT-TT-TA-TG-AT-TT-CT-CG-CA-GT-GA-AA-AA-GC-AA-CG-AA-C
C-TC-GC-CC-TT-AG-AT-TC-TA-TA-GC-TG-CT-CT-GA-GA-CC-GC-AC-TG-GC-AA-GC-A
G-AA-AC-TC-CG-CA-TT-CA-GG-CA-GT-CC-TC-CA-TG-CA-CT-TC-CT-GC-CT-GT-CT-G
C-TG-AA-CC-TA-TT-AT-TA-GA-GA-TG-GA-CT-GC-AG-TT-CT-CA-AT-CA-CA-CG-GA-T
C-TG-AT-AC-CT-GC-TG-GT-AT-GT-TC-CT-GA-TA-CC-CA-CA-GA-CA-GC-GC-CC-GA-A
T-TT-TG-GC-AA-CC-GA-AC-TT-CT-CA-AC-AA-AA-CC-GC-CT-AG-TT-GC-TA-AT-TT-G
G-TG-AC-CT-GA-CT-GA-AT-TG-TC-AT-TA-AA-CA-CT-CC-TG-CT-AA-GA-TG-CG-AA-G
C-TA-TT-AT-AG-TG-TT-TT-GT-AC-AG-GC-TA-TT-TT-GC-GT-GA-AA-CG-CA-AA-CG-C
G-TT-GC-AT-TT-CA-GA-AT-TC-CG-TG-CA-TA-GT-TA-TC-TC-AT-GC-CG-TG-CT-CT-T
G-AT-TA-TT-GA-CA-TA-TG-CA-GT-TC-GT-CC-TA-AT-CC-GC-GC-CT-GG-TC-TT-TA-G
T-CA-CT-AA-CC-GA-CC-CT-TA-GT-AT-TG-TT-CT-CT-CA-AC-AA-AA-TG-TG-TT-AA-A
C-CG-GC-AT-AA-TC-TG-GT-GA-TC-GG-GA-GA-TC-CA-GA-GA-AA-CA-CA-CC-TT-GG-G
C-TA-GA-TG-CC-CT-AC-AT-TA-GA-TA-AG-GG-GT-CT-AT-AC-GG-GC-GG-GG-TT-AG-T
A-CA-CC-TT-GA-GC-GT-AT-AG-GA-GA-GT-AA-CG-AG-GT-GG-TT-GT-CG-TG-GG-AG-G
A-GG-AG-TA-TG-TT-CT-CC-CT-TA-CT-AG-TT-GC-CG-AT-AA-CA-GA-TA-CT-GA-TG-T
C-TG-GT-AA-TT-GC-CA-GT-CA-TG-GT-TG-TA-GT-AG-CC-GG-GA-CC-CG-CA-GT-CT-G
G-GT-AG-CG-CC-TA-AC-AG-AT-AA-GG-GG-GC-CT-AC-TC-CC-GC-CC-TG-GT-CG-GC-C
T-GA-TC-AT-AA-AC-CT-CT-GT-AA-TA-CC-AT-GG-GC-CA-CG-TT-AG-GC-GT-CG-AT-G
C-CG-GA-CC-CA-TA-TC-TT-TA-CA-TC-AT-CT-CT-TT-CA-TA-GA-AG-TA-CC-CA-CT-T

NO DATA

2181

UNKNOWN

DECEASED

MORRILLCOLE

╳

▾DIALOG

Dialog components overlay the main content—reminiscent of early graphical interfaces—to capture a user’s focus for tasks requiring input, a choice, or confirmation without leaving the current context.

EXAMPLE

▾DIVIDER

A divider separates sections of content, creating clear distinctions between related groups. It is typically a line or space, oriented horizontally or vertically based on the layout. Divider helps organize information, improve readability, and enhance the interface’s clarity and structure.

ENTROPY

Any sense of order or stability inevitably crumbles. The entire universe follows a dismal trek toward a dull state of ultimate turmoil.

To keep track of this cosmic decay, physicists employ a concept called entropy. Entropy is a measure of disorderliness, and the declaration that entropy is always on the rise — known as the second law of thermodynamics — is among nature’s most inescapable commandments.

I have long felt haunted by the universal tendency toward messiness. Order is fragile. It takes months of careful planning and artistry to craft a vase but an instant to demolish it with a soccer ball. We spend our lives struggling to make sense of a chaotic and unpredictable world, where any attempt to establish control seems only to backfire.

The second law demands that machines can never be perfectly efficient, which implies that whenever structure arises in the universe, it ultimately serves only to dissipate energy further — be it a star that eventually explodes or a living organism converting food into heat. We are, despite our best intentions, agents of entropy.

“Nothing in life is certain except death, taxes and the second law of thermodynamics,” wrote Seth Lloyd, a physicist at the Massachusetts Institute of Technology. There’s no sidestepping this directive. The growth of entropy is deeply entwined with our most basic experiences, accounting for why time runs forward and why the world appears deterministic rather than quantum mechanically uncertain.

— Zack Savitzky

▾DRAWER

A drawer is a panel that slides in from the screen edge, providing space for secondary content, actions, or navigation links while keeping the main content uninterrupted.

INTRO(1)

INTRODUCTION

Section 1 of the manual describes user commands and tools, for example, file manipulation tools, shells, compilers, web browsers, file and image viewers and editors, and so on. All commands yield a status value on termination. This value can be tested (e.g., in most shells the variable $? contains the status of the last executed command) to see whether the command completed successfully. A zero exit status is conventionally used to indicate success, and a nonzero status means that the command was unsuccessful. (Details of the exit status can be found in wait(2).) A nonzero exit status can be in the range 1 to 255, and some commands use different nonzero status values to indicate the reason why the command failed.

▾DROPDOWN MENU

A dropdown menu is an interactive element that lets users select an option from a collapsible menu, saving space by hiding options until needed.

EXAMPLE

TOP LEFT

TOP RIGHT

BOTTOM LEFT

BOTTOM RIGHT

▾EMPTY STATE

An empty state informs users when no content is available, such as for first-time users, empty searches, or errors.

EXAMPLE

WORK IN PROGRESS

▾INPUT

An input field is a fundamental UI component that allows users to enter and edit text or numerical data. It is commonly used in forms, search bars, and other interfaces requiring user input.

EXAMPLE

MULTIPLE INPUTS

EMPTY CASE

PLACEHOLDER

All the world is a stage

PASSWORD

CARET BLINK

CUSTOM CARET TEXT

(✿﹏●)

CUSTOM CARET TEXT

⌫ ERROR

CUSTOM CARET LOADER

┤

▾FORM

A form is a key interface element for collecting user inputs.

NEW ACCOUNT

Create a new MakeBelieve™ account, where anything is possible at your command line in the browser.

I’m using this for personal use.

I’m building or creating something for work.

We’re using this as a team or organization.

USERNAME

Choose a username (e.g., SurfGirl29)

PASSWORD

Create a password (8+ characters)

CONFIRM

Type it again

I agree to the Terms of Service, Data Privacy Policy, and Acceptable Use Guidelines.

I agree not to use this service for unlawful purposes.

▾LINK

Links are interactive elements that enable navigation within an application or to external resources, typically styled with underlining or distinct colors to indicate clickability.

EXAMPLE

▾LIST

Lists are flexible interface elements used to display a series of items in an organized way. They are often used to present data, menu options, or search results and can be ordered or unordered, with interactive elements like checkboxes or buttons.

EXAMPLE

Year of the Four Emperors
Flavian dynasty
Nerva–Antonine dynasty

Marcus Cocceius Nerva
Marcus Ulpius Traianus
Publius Aelius Hadrianus
Titus Aelius Hadrianus Antoninus Pius
Marcus Aurelius Antoninus

Hellenistic philosophy
Western philosophy
Stoicism

Year of the Five Emperors

Book of Changes (The I Ching)
The Analects
Taoism
Thirty-Six Stratagems

Deceive the heavens to cross the sea
Make a sound in the east, then strike in the west
Create something from nothing

The Art of War
Wuzi
Six Secret Teachings

▾MESSAGES

Messages in this library present a modern messaging experience through an MS-DOS–inspired aesthetic. Instead of rounded speech bubbles, messages appear in simple rectangular boxes, evoking a nostalgic, classic PC feel.

EXAMPLE

You create the world of the dream, you bring the subject into that dream, and they fill it with their subconscious.

How could I ever acquire enough detail to make them think that its reality?

Well dreams, they feel real while we're in them, right? It's only when we wake up that we realize how things are actually strange.

Let me ask you a question, you, you never really remember the beginning of a dream do you? You always wind up right in the middle of what's going on.

I guess, yeah.

So how did we end up here?

▾MESSAGES INTERFACE

This example combines the aesthetics of iMessage and IRSSI with a terminal-inspired design. It shows how easy it is to embed a simple web application into your website.

MESSAGES

Why are they all looking at me?

Because my subconscious feels that someone else is creating this world. The more you change things, the quicker the projections start to converge on you.

Converge?

It's the foreign nature of the dreamer. They attack like white blood cells fighting an infection.

They're going to attack us?

No. Just you.

Message

▾MODAL

Modals are dialog boxes or popups that overlay the main content, requiring user interaction. They are used to capture inputs, display information, or focus on specific tasks without leaving the current context, often accompanied by an overlay to maintain focus

EXAMPLE

Render Canvas Snake

Render DOM Snake

Render Canvas Platformer

Render Modal Matrix Modes

Render Modal Checkmate

Render Alert Modal A

Render Alert Modal B

Render Alert Modal C

Render Create Account Modal

Error A

Error B

Error C

▾NAVIGATION BAR

Navigation bars enable smooth transitions between top-level destinations in an app, using icons and text labels to represent sections.

EXAMPLE

▾KENYA HARA, WHITE

Colors do not exist separately and independently within nature; they are constantly shifting in response to subtle gradations of light. It is language that, magnificently, gives them clear shape.

▾KENYA HARA, WHITE

White can be attained by blending all the colors of the spectrum together, or through the substraction of ink and all other pigments. In short, it is "all colors" and "no color" at the same time.

▾KENYA HARA, WHITE

It is easy to think that beauty resides in the realm of creativity. Yet beauty hardly "appears" from nowhere. Recently, I have come to believe that we "discover" it through the cleaning and polishing we do to preserve things as they are. [...] The beauty of a temple garden rests not in the splendid features that were created by a talented designer; rather, its beauty is uncovered through the continual process of cleaning.

▾KENYA HARA, DESIGNING DESIGN

I used to believe that design was information architecture, and also that this architecture was built in the brain of an information recipient. Recently I've come to think that, although the materials of that architecture's construction are indeed the information brought from the outside by the sensory organs, at the same time some very important building blocks are also the recollected experiences, the memories, awakened by these external stimuli. People imagine the world and interpret it when outside stimuli awaken the mountain of their internally stored memories.

▾KENYA HARA, DESIGNING DESIGN

The human brain likes anything that entails a great amount of information. Its excessive capacity waits eagerly to perceive the world by completely exhausting its great receptive powers. That potential power, though, remains today in a state of extreme constriction and is a source of the information stress we're all under.

▾POPOVER

Popovers are transient views that appear above content when users interact with an associated element, offering relevant information, details, or interactive content like actions or form elements.

EXAMPLE

TOP LEFT

TOP RIGHT

BOTTOM LEFT

BOTTOM RIGHT

▾PROGRESS BARS

Progress bars are visual indicators that display the completion status of tasks or processes. Ours allow for custom fill characters.

EXAMPLE

0%

░

25%

░░░░

50%

░░░░░░

75%

(✿﹏●)(✿﹏●)(✿﹏●)(✿﹏●)(✿﹏●)(✿﹏●)(✿﹏●)(✿﹏●)(✿﹏●)

75%

░░░░░░░░░

100%

░░░░░░░░░░░

▾RADIO BUTTONS

Radio buttons are visual controls that let users make a single selection from a predefined set of mutually exclusive options. Represented as small circles that fill when selected, they are used when all options need to be visible and only one can be chosen.

METHOD

You’re at the very beginning of designing your operating system. How do you choose to start?

Custom Linux Kernel Derivative: Start with a minimal Linux kernel (e.g., a stripped-down mainline LTS release), integrate essential device drivers, and build out a tailored init process.

AOSP Base: Leverage an AOSP-derived HAL and system services, using BSP integration and existing frameworks as a foundation for rapid device bring-up.

Microkernel Approach: Implement a microkernel (e.g., seL4) to strictly separate core services, relying on IPC mechanisms and user-space servers to manage drivers, file systems, and device I/O.

INTERFACE

How will you implement your interface layer?

Native GUI Shell + EGL/Wayland: Use a lean, native toolkit with hardware-accelerated rendering (EGL), compositing via Wayland, and minimal shell protocols.

Adapted Android Framework: Employ the Android UI stack (SurfaceFlinger, View hierarchy), integrating Material Components as baseline UI elements, and build custom system apps via Jetpack.

Custom-Compositor + Custom Widgets: Implement a dedicated compositor (e.g., custom Weston derivative) and write your own widget toolkit in C++/Rust, managing input events and layouts directly.

SECURITY

How will you handle security and lifecycle management?

Signed Kernel/OS Updates + Verified Boot: Use a secure bootloader chain (e.g., U-Boot with verified boot), sign OTA payloads, and apply delta updates with rollback support.

TEE Integration + SELinux Policies: Embed a Trusted Execution Environment (e.g., ARM TrustZone), enforce SELinux policies system-wide, and apply monthly patch-level updates from upstream code sources.

Containerized Services + Granular Permissions: Run system services and third-party apps in containerized sandboxes (LXC, cgroups, seccomp), enforce capability-based permissions, and manage rolling updates at a container or microservice level.

▾SELECT

Select components are user interface controls that let users choose an option from a dropdown list. They display a list of options and collapse to show the selected choice, making them ideal for scenarios with limited space and multiple options.

EXAMPLE

What is your favorite dinosaur?

▼

What is your favorite deep sea animal?

▼

▾SIDEBAR LAYOUT

Sidebars are navigational panels that provide access to secondary actions or additional information. They can be static, collapsible, or resizable, adapting to design needs and screen sizes.

QUOTES

“I want each of you to go through life making the most of your individuality. Like it or not, you will go out into the real world and be treated as an adult. Adults show each other no mercy. If you fail to cultivate within yourself a fight-back mentality, society will end up controlling you.”

“Travel changes you. As you move through this life and this world you change things slightly, you leave marks behind, however small. And in return, life - and travel - leaves marks on you. Most of the time, those marks - on your body or on your heart - are beautiful. Often, though, they hurt.”

“Never give up. Discover your own options, never count on others and have faith in the paths you discover for yourself. If someone else approves of this new way of life, all the better.”

“I do think the idea that basic cooking skills are a virtue, that the ability to feed yourself and a few others with proficiency should be taught to every young man and woman as a fundamental skill, should become as vital to growing up as learning to wipe one’s own ass, cross the street by oneself, or be trusted with money.”

▾SLIDER

Sliders are interactive UI elements that let users select a single value or range from a continuum. Designed as a horizontal track with a draggable handle, they are ideal for adjusting settings like volume, brightness, or color saturation.

EXAMPLE

0000

00000

000000

▾TABLE

A simple, declarative table component designed to streamline the creation of tables in JSX. It provides greater control over the structure and layout while evoking the aesthetics of old terminal interfaces (like MS-DOS).

STARTUPS

COMPANY	DESCRIPTION
⍓ Bluesky	Building a social internet.
⍓ Coordination Network	Collaborative tools for solving complex problems together.
⍓ Doola	Tools to start your US business from anywhere and keep it compliant.
⍓ General Fabrication	Machine tools to enable permanent industrial revolution.
⍓ Glif	Building foundational tools for the Filecoin Ecosystem.
⍓ LigandAI®	Combines cutting-edge predictive interactomics® with predictive targeting & delivery technology to enable diagnostically-responsive therapeutics.
⍓ Lightcell	An engine that uses light to make electricity.
⍓ Orchid	Mitigate risks with the world’s most advanced whole genome screening for embryos.
⍓ Ordinary Objects	Next-gen design tools for AR.
⍓ Volantis Semiconductors	Developing semiconductor chips for AI applications.
⍓ Wilderness Labs	Enables mainstream businesses and .NET developers to create sophisticated embedded-IoT solutions.
⍓ YellowHeart	Ticketing to empower fans, artists, and sports teams.

▾TEXT AREA

Text areas are UI elements that allow users to input multiple lines of text, ideal for content like comments, reviews, or descriptions. Our text areas feature arrow key support, and a visible caret to track the cursor position. There is also an auto play feature for rendering text on the screen in sequence that you can interupt at anytime.

EXAMPLE

BLINK

PLACEHOLDER

There he took up again his great Ring in Barad-dur.

AUTO PLAY

AUTO PLAY SLOW

▾TOOLTIP

Tooltips are text labels that provide additional context or explanations for user interface elements, appearing on hover, focus, or touch. They are used to communicate brief, supplementary information or clarify unlabeled controls.

EXAMPLE

TOP LEFT

TOP RIGHT

BOTTOM LEFT

BOTTOM RIGHT

▾TREEVIEW

Tree Views are hierarchical list structures that allow users to navigate nested information or functionalities, commonly used for parent-child relationships like file directories or menus.

FILE SYSTEM

├───╦ Animal Kingdom

│ . ├───╦ Chordata

│ . │ . ├───╦ Mammalia

│ . │ . │ . ├───╦ Primates

│ . │ . │ . │ . ├─── Hominidae.csv

│ . │ . │ . │ . └─── Cercopithecidae.csv

│ . │ . │ . ├───╦ Carnivora

│ . │ . │ . │ . ├─── Felidae.csv

│ . │ . │ . │ . └─── Canidae.csv

│ . │ . │ . └───╦ Cetacea

│ . │ . │ . . . ├─── Delphinidae.csv

│ . │ . │ . . . └─── Balaenidae.csv

│ . │ . ├───╦ Mammalia Rejects

│ . │ . ├───╦ Aves

│ . │ . │ . ├───╦ Passeriformes

│ . │ . │ . │ . ├─── Corvidae.csv

│ . │ . │ . │ . └─── Fringillidae.csv

│ . │ . │ . └───╦ Accipitriformes

│ . │ . │ . . . ├─── Accipitridae.csv

│ . │ . │ . . . └─── Pandionidae.csv

│ . │ . └───╦ Reptilia

│ . │ . . . ├───╦ Squamata

│ . │ . . . │ . ├─── Viperidae.csv

│ . │ . . . │ . └─── Iguanidae.csv

│ . │ . . . └───╦ Testudines

│ . │ . . . . . ├─── Cheloniidae.csv

│ . │ . . . . . └─── Testudinidae.csv

│ . └───╦ Arthropoda

│ . . . ├───╦ Insecta

│ . . . │ . ├───╦ Coleoptera

│ . . . │ . │ . ├─── Coccinellidae.csv

│ . . . │ . │ . └─── Scarabaeidae.csv

│ . . . │ . └───╦ Diptera

│ . . . │ . . . ├─── Culicidae.csv

│ . . . │ . . . └─── Syrphidae.csv

│ . . . └───╦ Arachnida

│ . . . . . ├───╦ Araneae

│ . . . . . │ . ├─── Salticidae.csv

│ . . . . . │ . └─── Theraphosidae.csv

│ . . . . . └───╦ Scorpiones

│ . . . . . . . ├─── Buthidae.csv

│ . . . . . . . └─── Scorpionidae.csv

⭢Hire our studio to build your applications

⭢View the SRCL source code

⭢Try our hosting provider Vercel

	A	B	C	D	E	F	G	H
8	♜	♞	♝	♛	♚	♝	♞	♜
7	♟	♟	♟	♟	♟	♟	♟	♟
6
5
4
3
2	♙	♙	♙	♙	♙	♙	♙	♙
1	♖	♘	♗	♕	♔	♗	♘	♖

	A	B	C	D	E	F	G	H
8	♜			♛		♜	♚
7		♝				♟	♟	♟
6	♟		♟	♝	♟	♞
5			♟	♟
4	♕			♙
3			♙		♙	♘	♗
2	♙	♙		♘		♙	♙	♙
1	♖				♔			♖

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞		♟		♚
6		♛		♘	♟
5		♟	♟	♞	♙		♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞				♚
6		♛		♘	♟
5		♟	♟	♞	♙	♟	♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞				♚
6		♛		♘	♟	♙
5		♟	♟	♞			♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

	A	B	C	D	E	F	G	H
8	♜	♞	♝	♛	♚	♝	♞	♜
7	♟	♟	♟	♟	♟	♟	♟	♟
6
5
4
3
2	♙	♙	♙	♙	♙	♙	♙	♙
1	♖	♘	♗	♕	♔	♗	♘	♖

	A	B	C	D	E	F	G	H
8	♜			♛		♜	♚
7		♝				♟	♟	♟
6	♟		♟	♝	♟	♞
5			♟	♟
4	♕			♙
3			♙		♙	♘	♗
2	♙	♙		♘		♙	♙	♙
1	♖				♔			♖

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞		♟		♚
6		♛		♘	♟
5		♟	♟	♞	♙		♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞				♚
6		♛		♘	♟
5		♟	♟	♞	♙	♟	♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞				♚
6		♛		♘	♟	♙
5		♟	♟	♞			♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

	A	B	C	D	E	F	G	H
8	♜	♞	♝	♛	♚	♝	♞	♜
7	♟	♟	♟	♟	♟	♟	♟	♟
6
5
4
3
2	♙	♙	♙	♙	♙	♙	♙	♙
1	♖	♘	♗	♕	♔	♗	♘	♖

	A	B	C	D	E	F	G	H
8	♜			♛		♜	♚
7		♝				♟	♟	♟
6	♟		♟	♝	♟	♞
5			♟	♟
4	♕			♙
3			♙		♙	♘	♗
2	♙	♙		♘		♙	♙	♙
1	♖				♔			♖

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞		♟		♚
6		♛		♘	♟
5		♟	♟	♞	♙		♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞				♚
6		♛		♘	♟
5		♟	♟	♞	♙	♟	♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔

	A	B	C	D	E	F	G	H
8						♜		♜
7	♟	♝		♞				♚
6		♛		♘	♟	♙
5		♟	♟	♞			♕
4		♝	♟	♙	♗
3
2	♙	♙				♙	♙	♙
1	♖					♖	♔